分享一些建立企业级动效库的经验

“这次优化的这个功能很重要，但是看上去没有什么亮点，要不加个动效吧”，这是设计活动过程中经常可以听到的桥段，所谓的颜值不够，动效来凑。但是随着网络速度和算力的不断发展，动效的应用限制越来越小，像谷歌、苹果、微软这些活跃在设计趋势前沿的企业早已不是把动效当成设计的润色剂，它的功能更多地体现在了交互逻辑、视觉渲染和创新实践上。

当我们谈论功能性动效时，我们谈论的是具有清晰、合乎逻辑目的的微妙动效类型。它减少了认知负荷，防止了变化盲目，并建立了对空间关系的更好理解。
—引自 InVision 作者：Will Fanguy

动效是产品原型的粘合剂，向用户传达产品设计思路

在日常生活中，“意料之外”的事情通常会更容易引起我们的注意；当我们在经历一些非连续事件时，它会触发我们大脑中的警示系统从而引发一系列的生理、行为反应，让我们产生“这不对”的感觉。这一理论源于进化生物学，了解它对我们界面设计有什么意义呢？

任何一款产品都是为了帮助用户更高效的完成任务而产生的，通常，完成任务涉及几个到许多步骤（例如：冲牛奶需要至少3-4个单独的步骤/行动），每个步骤过渡到下一个步骤的连续性将极大地影响任务可用性。连续性如何产生，当事物在运动时，我们会很自然的认为它们是有相互关系的，当这种连续性一气呵成的帮我们完成了一项任务时，“流畅”的体验感就会被我们感知到。下面举几个例子：

列表数据的增删操作

假设你正在查看实时列表，并希望它增删数据列都是实时反馈的。如果我们把它留给电脑默认程序处理，它会看起来像这样：

看上去毫无流畅的体验感觉，但实际上，优化这个动作只需要增加几帧动画效果，就能让用户清楚的理解列表上发生了什么？

为什么会这样？因为后者与我们连续的心理模式是匹配的。列表中要添加新内容，列表需要为该内容腾出空间，然后新项目（来自空间范围内某个地方）填充空间。整个过程理所当然的顺畅，产生变化的界面元素相互联动，就像一个默契十足的Team，感觉非常的自然——这个自然的心理反应来自原现实生活中为一排书添加新书的经验。

列表与详情页的跳转

列表与详情之间的转换，典型的默认模式，即滑入项目。这是一个经常使用的模式，但在空间上没有太大意义，它除了线性的串联了两个界面，在空间层次上对用户对产品的理解几乎毫无帮助，

可以怎么优化呢？如果设计目标是进一步研究内容并让列表项完全聚焦，我们可以隐藏其他没必要的元素以达到这个设计意图（图一）；如果是为列表项展示更多内容留出空间，我们处理方式又可以不同（图二）：

图一图二

动效的价值建立在特定的用户诉求之上

当动效功能与特定用户需求保持一致时，才是动效正确的打开方式，其价值也就会凸显。在这种基本的思考模式下，才能防止了增加毫无意义、过于复杂的动画。

动效的主要功能：

总结

动效可以创造连续性，可以解决特定的用户诉求。在UI设计过程中，动效不应该被当成临时起意的润色剂，而应该被视为整体，从设立设计目标阶段就考虑到设计中去；当整个产品形成统一的动效设计原则时，产品会鲜活起来，成为用户与产品交流的桥梁，使整个产品带给用户流畅、智能的体验感受，这也正是动效的独特魅力所在。

而作为设计师，我们可以像电影导演一样，学会巧妙科学的运用动效设计手法创造产品的连续性，通过体验序列讲述任务故事，故事主角是用户。

扩展阅读：

• Jakob Nielsen 的“心理模型”研究：https://www.nngroup.com/articles/mental-models/
• Issara Willenskomer 的 《Motion and interface design》：https://medium.com/swlh/motion-and-interface-design-continuity-and-expectation-ae7740f507ce
• Rebecca Ussai Henderson 的《The Principles of UX Choreography》：https://medium.com/free-code-camp/the-principles-of-ux-choreography-69c91c2cbc2a

Powered by Froala Editor