《U一点·料》读后之动效设计

关于本书

豆瓣读书:《U一点·料》

作者: 阿里巴巴集团 1688用户体验设计部

1688UED团队的多年实践的良心作品。从方法论落实到工作中的点滴,有思考体系,有工作流程,特别是五导家理论,让初入行的交互设计师受益匪浅。

一、app动效分类

  • 情境:where am I
  • 引导:where can I go
  • 响应:what happened
  • 情感:贯穿整过程

情境:了解当前处境

变化位置:用转场动效提示从哪里来,到哪里去

层级展示:理解局部和整体的关系,如侧边栏,行内展开

引导:明确可以进行的行动

扩展空间:提示页面有更多可探索的内容,如翻转、弹出窗口、折叠

聚焦:聚焦本身,优雅轻盈告诉用户有什么值得探索,如晃动、发光

响应:反映现状

呈现内容:异步加载,用时间和速度变化行程韵律,让用户感知页面布局、层级和关键内容,带来生机活力

操作反馈:任何动作在理想情况下都应有反馈。可带给用户操作上的安全感,引入控制感、沉浸感,让用户感知界面与真实世界的联系。

情感:引人入胜的细节唤起情感上的舒适感受

如模拟重力、ease-in-ease-out, 弹性,惯性。

二、各类动效如何设计

Disney Animation: The Illusion of Life: 动画的12项基本法则

情境

转场过渡:左移进入,右滑退出,舞台升降(浮层),立体翻转,纸张翻页,中轴旋转,平铺旋转,开关门

  • 目标移动距离 > 自身尺寸的一半,需加入动态模糊motion blur, 体现过渡效果
  • 在颜色、图形元素方面有延续性,如几个动效有序连在一起:展开页面-展开底部栏-放大悬浮按钮
  • 新页面缓入时间 < 旧页面缓出时间
  • 一个元素的进场出场效果的对称的(可逆的)

层级展示

  • 比起层层跳转,行内展开动效不容易造成用户迷失
  • 用视角运动表示垂直层级,带来更强纵深感
引导

扩展空间:展示附加内容,使用模态浮层或遮罩

  • 新空间成为主要焦点,表现主次分明
  • 以用户的操作为触发,有利于表达两者的直接联系
  • 将元素通过滑动动效移除,展示隐藏元素

聚焦关注:前馈式的示能

适合关键内容的变化、新功能引导、错误提示、介绍手势、引导用户与某块互动、展示隐藏功能。

  • 在内容展示完后
  • 动效略慢于用户的真实操作,有利于掌握
  • 1-2会和的形变或抖动,幅度不宜过大
  • 自定义贝塞尔曲线 cubic-bezier,强调动效不同阶段
  • 渐入方式出现,配合惯性——时间<400ms,可让用户感知重要性
  • 缩放可带来重视和强调感
  • 光源角度、透明度和形状变化,可丰富前馈效果,如FAB按钮的呼吸动效
响应

呈现内容:用在图表、仪表盘、地图等逐级出现的内容

  • 各模块以一致的方向出现,方向与页面过渡方向一致
  • 使用弧形路径,符合运动规律
  • 增加细微回弹效果

操作反馈

  • 避免引起过多关注
  • 响应时间 < 100ms, 持续时间 800-1200ms
  • 有效和无效的操作,都需要反馈
  • 有时需要更强的反馈帮助用户深入领会操作(比如?)
  • 扁平风格可用拟物化反馈增强真实感
  • 以触控为止为圆点,更容易理解结果与操作的联系;也可借助周围元素的动作变化
  • 可为重要元素的反馈添加重力,让用户感到要去推动它变化
情感

动效的本质是更好地表达交互设计意图、掌握视觉焦点,甚至影响用户的情感。

适合情景

  • 启动页:表达商业价值和定位
  • 下拉刷新:体现业务和品牌特色
  • 加载:产生故事关联,缓解用户焦虑
  • 关键任务完成的反馈
  • 流程指引:减少枯燥冗长

表达情感的动效与以下品质有关:易用,信任,关联,创新。

  • 动效必须简单,复杂动效难以持续引起感情

参考资料

Material Design – Motion & Interaction

https://www.uisdc.com/master-two-methods-to-do-dynamic-design

动效元素周期表

发表评论