YES SHARE | 想做出朋友圈刷屏的网易云人格主导色同款UI动效？几个小技巧不能错过

-Yeeeees，我们是你的设计生涯加油站！-

今天的朋友圈再次被网易云刷屏了

但这次不是「网抑云」

而是其推出的个性化测试

「人格主导色」

其优秀的交互效果和视觉设计

引起了小Yeah的注意👀

交互设计的作用是展示不同状态之间的连续性、阐述共享元素之间的关系、将用户的注意力吸引到他们应该注意或者需要操作的元素上来。

你会在应用程序的每个部分看到动画。它可能是一个很小的动画元素，但它肯定会在应用程序中找到一个位置。当用户悬停在彩色按钮上时的过渡就是一个例子。动画有助于吸引用户，并提高人们看待数字产品的方式。

微交互在应用中扮演着重要的角色，但有时却会被忽视。

但是，当界面缺少了微交互时，你就会意识到有些重要的东西出了问题。

通过一些细节的调整，你可以通过动效来提升整体的UI设计水平。

#Tabs slide内容过渡动画

一个伟大的动画通过使内容在状态之间移动来显示转换的连续性。
一个好的动画将内容从一个状态淡入淡出到另一个状态。

当我们在设计交互式选项卡或弹出式菜单时，尝试把内容的位置相对于打开它的动作。这样，我们不单只能够实现一个很棒的过渡动画，还可以清晰地知道不同内容的直接位置关系。

#连接卡片的共享元素

一个好的动画使用过渡，如向左推或向上幻灯片显示内容在一个详细的屏幕上。
一个好的动画通过动画共享内容在两种状态之间建立连接。

当在不同状态之间动画时，看看它们之间是否有任何共享的元素并将它们连接起来。例如右图中，过渡前的卡片展开形成过渡后的卡片。

#使用瀑布流动画

左边的卡片通过滑动和渐变的方式出现

右边的卡具有相同的动画效果，但是每张卡都有一个短暂的延迟

一个好的动画改变了材质进入屏幕时的位置和不透明度。
更好的设计是迅速错开每个元素的显示。

要实现瀑布效应，可以尝试对每个内容块或内容组应用延迟。保持相同的缓和和持续时间，所以它感觉一致。

不过，不要将每个小元素级联起来——使内容组具有动画效果。保持动画快速有力。谷歌建议每个元素的开头间隔不要超过20毫秒。可以查看《物质运动》中的编舞原则来看更多的例子。

#不同元素间动画相关联

左边的动画是在其他内容之上的动画

右边的动画随着内容的增长而推出内容

好的动画在上下文中移动和显示元素。
伟大的动画展示元素影响他们的环境时，他们的变化。

让你的内容中的元素意识到他们的环境。这意味着让内容吸引或排斥周围的元素。更多的例子可以参考《材料设计》中的感知运动原理。

#使菜单出现在上下文中

左边的菜单是从下面飞过来的

右边的菜单从创建它的动作展开

好的动画菜单显示了从打开它们的按钮方向出现的内容。
伟大的动画菜单出现的行动，创造了他们，从触摸点增长。

#使用button展示不同的状态

左边的按钮显示指示状态的文本

右边的按钮使用容器显示不同的事件

良好的互动显示事件旁边的按钮。
伟大的互动使用按钮本身显示不同的状态。

尝试使用按钮的容器来提供状态的视觉反馈。例如，可以用微调器或加载动画替换 CTA; 或者可以向显示进度的背景添加动画。

解决方案取决于你，这个想法就是利用用户已经在交互的空间。如果您使用按钮颜色和复制来确认成功状态，将获得额外加分。

#使用动画来强调重要的内容

左边的例子使用颜色和位置来突出一个元素

右边的这个使用了一个微妙的动画来吸引用户的注意

好的设计使用颜色、大小和位置来突出用户需要注意或采取行动的重要动作。

伟大的设计使用动画来引起人们对重要行为的注意，而不会造成混乱。

当用户需要对重要的事情采取行动时，试着用动画的方式来吸引他们的注意力。从一个微妙的动画开始，根据动作的重要程度增加强度(改变大小、颜色和速度)。只在关键行动中使用这个效果ーー你使用的越多，它的影响力就越小。

#更多优秀UI动效设计

银行类应用动效

by Dmitry Lauretsky

添加到购物车动效

by Danar Septiawan

海洋生物展示类应用

by Taras Migulko

旅行类应用

by Permadi Satria Dewanto

健身类应用

by Purrweb UI

希望这些例子可以帮助大家在做交互添加动画时做出更好的决定。

让我们应用动画来解释状态的变化，引起对必要行为的注意，确定元素之间的关系，并为我们的产品增加一点乐趣和特性。通过遵循这些原则，我们将把我们的动画从优秀转变为卓越。

end

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。