动效设计解析.pdfVIP

动态交互解读 交 互 设 计 必 修 课 App 在很多外⾏⼈眼中，看到⼀个 动效不错，往往脱⼝⽽出的是 “ App ” 哇，这个 交互好棒！ ⽼板觉得产品太死板了，会对着⼤家说 “我们的产品交互还需要再打磨⼀下。” 过程 ⾏为 结果 动态交互 从用户触发行为到预期结果之间的合理变化过程。 ⽅法 交互设计本⾝就是过程的学问，及⽤最合理的 达到最合理的⺫标。 动态交互在交互设计中的”位置“ 概念设计 数据埋点/分析 UER调研 竞品分析 交互方案 交互走查 交互规范 动态交互在交互设计中的”位置“ 概念设计 数据埋点/分析 UER调研 竞品分析 交互⽅案 交互走查 交互规范 静态交互 动态交互 • 流程逻辑 • 界⾯结构布局 • 交互动效 • ⽂案 动态交互案例分析 a. 在⽤户体验上为了达到某种⺫标的引导 早期互联⺴产品动画较少时，⼤部分动效都是为了解 决某个具体的交互问题⽽存在的，有很强的⺫标性。 a. 在⽤户体验上为了达到某种⺫标的引导 早期互联⺴产品动画较少时，⼤部分动效都是为了解 决某个具体的交互问题⽽存在的，有很强的⺫标性。 b. 为了产品功能和结构上的创新 b. 为了产品功能和结构上的创新 c. 让界⾯更灵动活泼 Skype将普通的菜单弹出过程加上了果冻效果，让整个界⾯可爱了许多。 类似于这样的动效有很多其实只是为了好看⽽制作的，他们属于视觉设计的部分，是为了让界⾯视觉更优秀。 c. 让界⾯更灵动活泼 动态交互主要场景 在什么时候 ，我们需要动态交互 转场 引导/反馈 感官刺激 ⻚⾯层级切换跳转 操作引导、控件 关键内容的呈现 tab切换 hover、toast 情感化取悦⽤户 加载、刷新 弹窗进出 这些交互细节 ，我们更需要动态交互 1、如果你希望⽤户点击这个地⽅，请给它⼀个动效。 2、如果你希望你的点击效果不⼀样，请给它⼀个动效。 动态交互使用原则 在动态交互时 ，我们应该注意 MORE LESS 酷炫 操作习惯 持续时间⻓ 统⼀ 出现频率⾼ Less is More 交互动效的使用原则 尊重 不要