UI中的基本动效：指向性动效

UI中的基本动效：指向性动效 – Android开发中文站

内容来自Meaningful Transitions，很早就出名的动效站，里面提供了一些最常见最基本的动效模式，仔细观察我们手机中的动效，很多无非是多种基本动效的结合，因此研究这些基础动效很有价值。但是却一直没有译文，这里给大家带来指向性动效的上半部分，同时会配上案例，让大家更好地理解。

一、前言：

指向性动效能够有效的描述物体之间的逻辑关系。

同时通过视觉效果，可视化的描述物体当前运动状态。

通常，指向性动效能够让用户清晰的感受到物体与物体的位置关系，以及信息的层级架构。

二、指向性动效的分类：

1.滑动

适用场合：当用户需要导航以列表方式呈现的信息时

运动描述：信息列表会跟随用户的滑动交互手势而移动。物体会自动移动到适当的位置，保持整齐感

一致性：属于指向性转场动效，物体的滑动取决于用户滑动手势的指向

优点：通过指向性转场，有效的帮助用户理清物体的排列状况

用户感受：像是在捋一条长长的绸带

案例：

1.动画前半部分的滑动附上了弹性，加深了物理感。

2.后半部分注意左右list 和calendar散开一刹那时，轻微的放大，打造了一种镜头感

3.最后堆叠、展开效果

2.弹出

适用场合：当用户与单一物体交互时

运动描述：物体会从缩略图转化为全屏视图（一般物体的中心点也会同时移动到屏幕中央）

一致性：反向动效是对象从全屏视图转换为缩略图

优点：能够清楚的告诉用户，是哪个物体被放大了

用户感受：物体在放大

案例：

看点：底部标签栏图标按三个方向上移消失，下方弹出一个X图标，与此同时弹出3个小图标。

3.最小化

适用场合：当用户想要最小化某个物体时

运动描述：物体缩小，同时移动到屏幕上的相应位置

一致性：相反的动效就是扩大，从缩略图重新变为全屏

优点：能够清楚的告诉用户，最小化的物体可以在哪里被找到。

用户感受：物体在缩小

案例：

其实放大/缩小最杰出的典范大概就是iOS7的打开应用程序/退回主屏幕了，这个也不错

这个动效，即作为启动屏,一定程度上缓解了用户焦虑，同时又是Logo，提升了品牌效应，最后应用启动后的缩小，能够很好地联系上下文，让用户不致感到突兀。

4切换对象

适用场合：当用户在对象之间切换时

运动描述：当前物体移动到后面，新的物体(应用)移动到前面

优点：能够解释清楚物体/应用程序之间进行了切换

用户感受：原物体缩回，新物体出现

案例：

现在可能不太流程这种幅度太大的动效，因为可能会导致用户感到突兀

5.展开堆叠

适用场合：当用户打开一沓物体时

运动描述：堆叠的一堆物体被展开

一致性：将一群物体堆叠

优点：能够清楚的告诉用户，物体的排列情况

用户感受：物体似乎扩展开来了

6.翻页

适用场合：当用户翻页时

运动描述：当用户实施滑动手势时，出现生活中翻页一般的效果

一致性：指向性动效，翻页的指向取决于手指滑动的指向

优点：这种动效转场能够清晰的展现列表信息的信息架构

用户感受：似乎感觉和真实生活中的翻页差不多

案例：

Flipboard和Paper是翻页风的代表，不过Steller也不错，（300k，图像质量压缩的比较过）

7.添加到列表

适用场合：当用户需要将物体添加到已存列表中时

运动描述：新物体会滑动到列表中，而列表中得旧内容会被挤走（是主动让位还是被挤走，效果可以自行尝试），从而腾出空间

一致性：相反的转场动效是删除列表中得物体

优点：这种转场效果能够清楚的展现列表的重新排列过程，让用户知道旧信息到哪儿去了，新信息在哪里

用户感受：旧列表似乎再给新物体腾出空间

案例：

这个动画速度比较快，实际上下了Task的童鞋可以看到，是通过折叠把上面的列表向上“推”给新项目腾出空间。

8.固定标签

适用场合：当用户滚动带有标签的列表时（常见的头部固定，可参考iOS7的电话簿列表）

运动描述：标签会始终保持在列表的顶部，兼顾了导航和内容浏览

一致性：-

优点：这种动效能够清晰的描述出内容与标签之间的关系

用户感受：标签始终保持在列表的顶部

案例：

导航栏，现在不流行死板的固定不动，而是下滑手势出现，上滑手势消失，增大可读区域。

9.横竖屏切换

适用场合：当内容需要根据设备的旋转来旋转、重新排列时

运动描述：内容伴随屏幕的旋转而旋转，与设备旋转指向一致。

一致性：内容的旋转取决于设备的旋转

优点：能够在设备旋转的同时，平滑的保证内容的过渡

用户感受：内容好像是液态的，伴随屏幕旋转

10.按钮标签转换

适用场合：同一层级之间的导航

运动描述：根据内容的转换，按钮相应地在视觉上转换为标签

一致性：标题随内容移动、改变

优点：能够清晰的展示标签和内容之间的从属关系，让用户理解架构

用户感受：按钮转换为标签

Flickr for iOS细节之一（稍后我们会放出《Flickr for iOS的20处交互细节》）

11.分合

适用场合：当用户分离 结合物体时

运动描述：物体会根据用户的交互行为而分离/结合

一致性：分离与结合

优点：能够让用户清晰的感受到物体之间分合关系

用户感受：分离和结合

12.滚动

适用场合：当用户水平或垂直的移动物体时

运动描述：根据用户手势指向滚动

优点：非常适用于列表信息的查看

用户感受：

Albumatic应用

13.平移

适用场合：当用户水平或垂直的移动物体时

运动描述：

优点：非常适合地图界面

用户感受：

14.滚动条

适用场合：滚动列表时

运动描述：当屏幕中的信息滚动时，滚动条也成比例的滚动

优点：能够告知用户当前所处的位置，也能让用户了解信息的长度

用户感受：

15.页码指示器

适用场合：当翻页、切换屏幕内容时

运动描述：通过实心点得移动来告知用户页面已经切换，同时还能告知用户页面的数量

优点：能够告诉用户当前处于哪一页，总共多少页

用户感受：

16.保存指示器

适用场合：当用户添加书签、下载、保存时

运动描述：用户一旦保存、下载某个物体，物体会复制一份，同时缩小、移动到保存指示器中

优点：能够提示用户下载的内容能在哪里找到，能够告诉用户对象已经被添加

用户感受：所下载的物体飞到了下载文件夹中了

转载请注明：Android开发中文站 » UI中的基本动效：指向性动效