什么是界面交互动效？

界面交互动效是展现界面间的转换和界面内元素变化的交互反馈。而效果就表现在触发与结束的过程中，表现清晰的层级关系，自然的引出与结束。交互动效有着承上启下的重要作用。

界面交互动效的作用？

  • 让用户清晰地感受到当前所处场景和层级关系。
  • 多种UI元素之间的相互转换。
  • 给用户制造惊喜感使用户愉悦。

    界面交互动效五大注意点

  1. 避免动效过于花哨、酷炫、标新立异
  2. 在效率型应用中，过度、无意义的动画只会阻塞任务流程
  3. 动作动效不超过1秒
  4. 用户专注内容时，不要用吸引注意的动画去打扰

  5. 出现频率高的操作动效，避免用户反感，延迟操作时间

    如何设置缓动曲线与时间让动效更加自然

  6. linear曲线（匀速运动）除了一些特殊场景，如加载，很少被使用。

  7. easeIn（先缓后快）使用场景较少，主要在掉落中使用。
  8. easeInOut（头尾缓、中间快）通常在轮转切换的动画中使用，这类动画的触发对象与运动对象并不是同一个元素。
  9. easeOut（先快后缓）最常见的效果，其触发对象与运动对象往往是同一个。主要用在展开、收起、出现、移动等动画中。当不知道用哪个缓动曲线时，用这个一般不会错。
  10. 曲度主要表现运动过程的力的大小，曲度越大，启示力或阻力越大。
  11. 回弹表现的是运动的剧烈程度及对象的质地。
  12. 运动时间一般都控制在0.3s-0.8s之间，过长的时间会让人感觉拖沓，不自然。

界面交互动效分类

以动效的表现属性来分可以分为两种。
第一种：衔接类型动画。主要针对不同界面直接的衔接，为带来更流畅的操作观感所做的设计，弥补两个界面直接的差异所带来的用户感知落差。
第二种：特效类动画。特效的核心目的是为了吸引用户的注意力，提高信息敏感度，在游戏界面设计当中使用更为广泛，能够带来更加绚丽的动态画面。

以界面的维度来分可以分为两种。
第一类：界面内的交互动效
在一个界面内的交互动效特别多，例如点击加号出现下拉菜单，出现浮层动画提示，点击舵式导航出现选择类型和遮罩，点击按钮出现评论点赞，当前页面的展开收起，加载等等。

第二类：界面间的交互动效
几个界面之间的的交互动效通常是平缓过渡到下一页。常见的有以下几类：
1.硬切到下一页
2.下一页从右往左推入（上一页从左往右推出）
3.下一页从下往上弹出
4.上一页的元素过渡到下一页

最后的两个建议点：
动效创意方面的创新要依据用户的认知模型。单纯很炫很酷的动效如果脱离了用户的认知模型，那么这样的动效对于整个产品来说是有害的。
做界面交互动效的目的是为了更好地落地。如何更好地高效地表现我们设计的动效，同时使得我们制作的动效可以很好的运用到实现落地中，这是很重要的，不然所有的一切都是海市蜃楼。

衡量动效设计的六个核心因素

通过让元素在形态上进行叠加、分割、延伸、形变，动效赋予界面更为真实、更加“物理”的质感。流畅的动效帮用户联通起上下文，阐释界面元素之间的关系，强化UI的层次感，消解环节与环节之间的冲突，缓解加载和过渡中的等待，降低用户的认知负荷，建立更为有效的信息和交互流程。

  1. 响应：视觉反馈十分重要，对用户而言，想要确认信息的欲望是一种生物本能，应满足这种期望。
  2. 关联：动效要能将新创建的界面和触发它们的操作或者控件关联到一起，能帮用户理解界面中的变化是如何产生的。
  3. 自然：好的动效设计应当避免突兀的转变，动效中的每一个动作都应当从现实世界中获取灵感。如加速、减速会受到重量、惯性和摩擦力的影响。
  4. 意图：动效作为动态元素先天具有更加突出的属性，一个优秀的动效能够引导用户自然的进入下一个步骤，在合适的时机将用户的注意力引导到对的关注点上，能够让用户明白变化的趋势，并且不会觉得变化是突然的。
  5. 快速：当界面或者控件借助动效转变位置和状态的时候，速度应当适中，它不能太慢以至让用户为了动效加载而等待，同样也不能太快，得让用户明白和理解这个转变的过程与关系。快速的动效能给用户一种爽利高效的感觉，在用户能注意到细节的前提下尽量在300ms内搞定动效，完成过渡过程。
  6. 清晰：当一个动效容纳太多过程的时候，会让人看不清、感到迷惑，不同的元素沿着不同的轨迹向着不同方向运动，人眼很难捕捉到全部的过程，自然会感到混乱。所以，动效设计应当清晰直观，明确一致。