译·干货|7个交互设计tips提升你的APP用户体验

原文链接：https://uxdesign.cc/good-to-great-ui-animation-tips-7850805c12e5
作者：Pablo Stanley
Designer at InVision. Cofounder of Carbon Health. Writer at The Design Team. A teacher at Sketch Together.

Good to great UI animation tips

在外网看见的文章，翻下来给自己学习用的。贴出来大家也看看咯。觉得翻的不好的可以点击原文哈。
以下的动效，参考了 Material Motion、IBM’s Animation Principles和 The UX in Motion Manifesto。可自行查阅。
 

Tips 1让内容跟随标签滑动

左侧是淡入淡出，右侧是跟随标签滑动的。

• 一个好的交互效果是在状态之间切换，
• 而更好的交互效果是通过点击状态之间的移动来显示转换的连续性。

当你在设计标签或下拉菜单时，尽量把它放在相应能联想操作的位置。通过这种方式，你不仅能设置操作内容的可见性，也能控制内容的位置。还有，当你在使用时，也可以添加一个轻扫手势提示，提示你从一个内容跳转到另一个。

 

Tips 2页面之间的共有元素

左侧是向上滑动打开一个新的页面，右侧是扩展并填充整个屏幕。

• 一个好的交互效果是使用左推或向上滑动等过渡来展示内容，
• 而更好的交互效果是通过共有元素建立两个页面之间的转换连接。

在制作不同页面之间的动效交互时，认真查看它们之间是否存在任何共有元素能连接它们。

 

Tips 3多米诺骨牌的联级效果

左侧是通过滑动和渐隐出现，右侧也是同样的交互效果，但是顺序间有短暂的延迟。

• 一个好的交互效果是通过改变元素的位置和不透明度属性来进入页面的，
• 而更好的交互效果是快速而有序的出现。

要达到联级效果，需在同一段持续时间内，保持相同的easy ease（缓入缓出），再逐次梯级延迟每一部分或者每一组内容，就能连贯起来。但不需要延迟页面上所有的细小内容，虽然他们都属于内容的一部分。保持每个效果即快速又活泼。

 

Tips 4让所选内容推开其他元素，独占鳌头

左侧是把内容放置于其他内容顶部，右侧是随着内容扩展推开了其他内容。

• 一个好的交互效果移动并前置展示内容，
• 而更好的交互效果在内容变化时会影响到周围其他的元素。

使内容中的元素感知周围的环境，即元素可以吸引或排斥周围的其他元素。

 

Tips 5使菜单跃出文中

左侧的菜单自下而上显现，右侧菜单则从点击的按钮扩展跳出。

• 一个好的菜单交互效果从打开它们的按钮方向显现内容，
• 而更好的菜单交互效果从点击的按钮接触处扩展展现内容。
   

Tips 6赋予按钮不同的状态

左侧的按钮使用文字说明状态，右侧按钮使用不同视觉效果清楚的展示了不同的情况。

• 一个好的交互有明显的说明在按钮旁，
• 而更好的交互不仅使用文字说明，还利用按钮本身来展示不同的状态。

尽量使用物体本身来展示不同状态的视觉效果。我们的想法是利用用户已交互过的熟知特征，就好像你可以使用页面上重复使用过的颜色来表达按钮确认成功状态。

 

Tips 7为重要元素聚焦

左侧的例子利用颜色和位置属性让元素突出，右侧则使用细微的动效来吸引用户注意。

• 一个好的设计利用颜色，大小和位置来突出用户须知操作，
• 而更好的设计使用动效去吸引用户注意重要操作，且不会给画面造成破坏性。

当某些重要交互需要用户注意时，尝试通过动效去吸引他们的注意力。从一个细微的动画开始，并增加与交互重要程度相对等的强度属性（大小，颜色和速度的变化）。Ps，仅将此作用于关键操作——你使用的动效次数越多，其影响力就越小……你的用户所获得的烦恼就越多。

 

原文链接：https://uxdesign.cc/good-to-great-ui-animation-tips-7850805c12e5