「什么场景下使用」
释义
让界面的动作有动画和转变，以代表正在执行某项操作。
使用场景
1.打造高品质的互动、用户体验
2.在很大的虚拟空间中移动，例如影像或图形
3.用户开启或关闭某一区域
4.当用户从一个界面跳到另一个界面时
5.当需要让用户感知到文件或物品在界面中的位置
使用原因
1.当位置或画面变化后，会打乱用户对自己所处的位置的感知。比如：
- 把拉近拉远做的太突然，就有可能剥夺用户对原有空间的感知。
- 如果旋转或关闭会使界面重新设置的话，也会造成同样的影响。
- 滚动一份很长的文件，若位置有一些跳动，也会削减读者对位置的感知。
2.有了转场后，会使转换过程看起来有连续性，会让用户保有方向感。因为这更接近实际的物理现象，简单说就是，会让用户的眼睛在检视转换时有机会追随位置。
「使用的原则或依据」
1.动画要简短
对于缩放/旋转：显示开始和结束之间的几个状态。
对于关闭面板：显示它正在缩小，然后把其他面板扩展以占用其留下的空间。
研究显示，300ms可能是平滑滚动的理想选择。
2.动画要迅速准确
3.没有延迟
4.不要把整个窗口做动画
一些转场方法
- 亮暗变化
- 展开和折叠
- 淡入、淡出和交叉淡入淡出
- 滑动
- 聚光灯
「类型与案例」
放大聚焦
用在何处 突出某一东西时
案例1：Tesla官网载入时
😄 首先可以在概览中看到三个Tesla车型，然后在放大聚焦在model3上。这是纯粹为了强调关注的焦点。
😄 左右移动页做了流畅的动画效果。
缩放检视和平移检视
用在何处 用户可以操作进行目标检视时
案例1：Prezi简报软件
😄 当用户浏览界面时，简报文稿将放大、显示文本、向右平移，然后在退出该部分时再次缩小。
😄 它使人们有一种在资讯空间中飞行的有趣感觉。
控件操作反馈
用在何处 UI控件的操作后
案例1：MacOS中的「Dock」操作
😄 鼠标在底部图标划过时，图标会有规律的放大，越靠近光标的图标越大
😄 打开/关闭其中一个视窗的神奇缩放效果非常有趣
「更多案例」
若有收获，就点个赞吧
0 人点赞
