提升产品微交互的7个动效技巧

在强调用户体验的今天，微交互扮演着越来越重要的角色，一点细微的交互方式的不同可能会带给用户超出预期的使用体验。

今天给大家带来一篇Pablo Stanley创作的《Good to great UI animation tips》，带领我们就通过一些实际案例、从连续性、关联性、引导性以及趣味性等几个方面来挖掘一下如何把微交互从“有”提升至“好”。

左侧切换方式为渐进渐出，右侧随着分段控件的切换而滑动

●基本的微交互：从一个内容渐出，再渐入到另一个内容

●好的微交互：能够表现出两个内容之间转换方式的连续性

当你设计一个类似选项卡或者弹出菜单的时候，试着让内容的移动轨迹与唤醒它的操作相结合。也就是说，在制作动效时，你不仅需要制作出内容本身的动效，还要做出内容位置的动效。二、变共享元素为联系的纽带

左侧向上打开一个新的页面，右侧的信息条扩展并填充屏幕

●基本的微交互通过向上或向左展开一个新的详情页

●好的微交互通过给共享元素添加扩展动效，来建立两个页面之间的连续性

当制作两个状态之间的动效时，看一下这两个状态中是否有共享的元素，让这个共享的元素自然地进入另一个状态，可以充分表现出状态之间的连续性。很多动效软件例如InVision等，都可以实现相同元素（一般是名称和类别相同）自动从一个状态转换为另一个状态，这让我们制作动效变得更加简单。

这篇文章介绍了常见的交互动效，可以在制作动效时进行参考。上面的例子我就用到了里面的Masking,Transformation,Parenting和Easing方式.三、让内容逐渐展开

两张卡片都是采用了渐进渐出的方式展开内容，但是右边的卡片在出现过程中有短暂的延迟

●基本的微交互在内容进入屏幕时改变了内容的位置和透明度

●好的微交互会错开对每个组件或元素的展示，让内容逐渐连续出现。

当你在设计瀑布流效果的时候，试着在元素或组件通过相同动效方式出现的时候运用稍许的延迟效果，这样既能保持页面的一致性，又能表现出页面元素之间的顺承关系。不过这种方式只只用于一个内容组，不要把所有的小元素都制作成这样的串联效果，那样就太凌乱了。

此外这种延迟不能太长。谷歌的material design设计规格中建议每个元素之间不超过20毫秒。

左侧的卡片展开时悬浮在其他卡片之上，对其他卡片没有影响；右侧的卡片展开的时候会把其他卡片“推”出界面

●基本的微交互只在界面中展示和移动元素；

●好的微交互会表现出元素移动时对周围环境产生的影响。

元素不是完全独立于周围环境而存在的。就像当你拨动水面时，水面上漂浮的落叶也会一起移动一样，当一个元素产生变化时，势必会对周围环境有所影响。不要让周围的元素变成不会动的背景墙。

左侧的菜单是从下到上渐出的，右侧的菜单从展开菜单的按钮处扩展开。

●基本的微交互让内容从触发按钮的方向渐出

●好的微交互让内容从触发按钮处扩展开

这也是一种连续性的表现，展示的是被触发的页面与触发控件之间的连续性关系。

所以，下次如果你希望增加你推送的订阅量，不如试试默认勾选“接收推送”，然后把取消方式藏在设置的最里面；如果想降低退出率，不妨增加一个二次确认选项；想要降低人工客服的工作压力？可以试着先让机器人客服上场，用户需要选择人工才能转接到人工...等等

左侧的页面用按钮下面的文本来展示加载状态，右侧的页面直接使用按钮来展示加载状态

●基本的微交互会在按钮旁边用文本表示当前状态

●好的微交互使用按钮本身来表示当前状态

你可以尝试把按钮“一物多用”，既可以是一个按钮控件，又可以转变成提供可视化交互反馈的状态提示框。例如你可以把CTA行为召唤按钮变成一个“菊花”或者一个加载动效；或者你可以在按钮的背景上加个动效来展示加载进度。具体怎么做你可以自行发挥，核心思路就是尽量重复利用用户已经互动过的、熟悉的操作点，让操作前和操作后的状态连续起来。

左侧的页面利用颜色和位置突出元素的优先级；右侧的页面用了一个微动效来吸引用户的注意力

●基本的设计会利用颜色、大小和位置来突出重要操作或信息

●好的设计可以利用动效来潜移默化吸引用户的注意力

动态的目标比静态的目标更能吸引人的注意，所以当你需要让用户第一时间注意到某些关键信息时，可以尝试用动效来引导他们。你可以根据信息的优先级来决定采取各种强度的效果。不过这种方法只能用于关键操作，千万不能滥用，过犹不及的道理相信大家都懂，你用得越多，效果就越差，而且还会严重打扰到用户。