交互动效设计指南
2023-03-23 15:36:37 0 举报AI智能生成
交互动效设计指南
作者其他创作
大纲/内容
什么是交互动效？
那些用于引导和响应用户交互行为的动效，它们与用户的交互行为密切相关，起到帮助用户理解、提供操作反馈、提升感知流畅性的作用。
为什么要重视交互动效？
在验收阶段，由于项目排期时间紧，开发有别的 bug 要改，可能没有时间去处理动效方面的优化，从而导致了线上出现体验问题。
必要的场景缺失动效直接上线，可能会产生较多体验问题
不符合预期，产生理解困难：交互动效用于传达页面变化过程，如果过程缺失，可能会导致变化不符合用户预期，使得用户产生理解困难。
感知卡顿：缺失必要的手势动效会导致用户操作的不流畅，缺失必要的转场动效则会影响视觉观感的流畅性。
交互动效的设计流程和方法
动效评估
场景聚焦
优先级评估
动效设计
动效原则
舒适：动效需要符合现实世界的物理属性，贴近用户的心智认知，感知上舒适、同时兼具视觉美感。
高效：高效响应并减少过长的位移和时间，使动效触达不拖沓。
流畅：不卡、不闪、不跳，帧率稳定、响应及时、跟手操作是动效流畅体验的基础要求
统一：同个产品内的动效体验感知统一，体现在相同的控件动效保持一致、相似的动效编排一致。
简单清晰：界面元素运动尽可能少且简洁，减少路径及不必要的元素，确保动效过程清晰、重点突出。
克制有度：控制出现频率，不增加额外操作，不干扰用户，确保动效有意义。
动效属性
变化
常见的变化类型有：位移、透明度、大小、旋转、3D 旋转...
时长
复杂程度：复杂的动画比简单的动画需要更多的时间来表达
区域范围：动效运动在一定的范围内进行，小范围内比大范围的运动所用的时间相对更短
入场/退场：一般来说，退场的动效时长要比入场短，让用户更把注意力放在后续的内容中
曲线
加速曲线：适用原本在视线中的物体，需要消失或退场，逐渐加速符合退场行为特征，例如弹窗/浮层退出、卡片删除等。
减速曲线：适用原本在视线外的物体，需要出现或进场，逐渐减速符合进场行为特征，例如弹窗/浮层出现、页面进入等。
缓入缓出曲线：先加速后减速，适用于运动前后始终在用户视线范围内的物体，符合物体启动和停止的真实规律，例如图片缩放、tab 切换、开关等。
动效编排
淡入淡出
单向淡入淡出：在前后层叠的场景中，只有前景元素进行淡入或淡出动作，下方元素无变化。
交叉淡入淡出：存在退场元素与进场元素的场景下，一个淡入视野，另一个淡出。在整个过程中，会存在两个元素和它们后面的内容同时可见的时候。
错开淡入淡出：在入场元素淡入之前，将退场元素完全淡出。这种方式可以规避视觉上出现重叠元素，但是可能会造成有一瞬间出现容器内容为空的情况。
一镜到底
共享元素
共享容器
共享动势
其它编排技巧
运动路径
振荡
纵深变化
交错
动效落地
转场动效的标注文档中需要包括以下要素：
动效 demo 附件：方便开发直接查看整体的动效效果
触发条件：说明动效发生的条件，即用户通过什么行为触发该动效
元素示意：将动效中发生变化的元素进行拆解，通过图示清晰示意
变化属性：元素的什么属性发生，例如透明度、位置、大小等等
动效时间：「延迟开始时间」表示元素从触发条件发生后延迟多长时间开始执行，「持续时长」表示该变化持续发生多长时间
变化值&贝塞尔曲线：描述属性具体的变化值范围，以及相应使用的贝塞尔曲线参
变化值&贝塞尔曲线：描述属性具体的变化值范围，以及相应使用的贝塞尔曲线参
0 条评论
下一页
