My Secret Rainbow

UI中的基本动效

内容来自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.保存指示器

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

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

一致性：

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

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

 

三、空间扩展

可折叠

适用场合：当有附加内容时

运动描述：对象的内容显示，内容区域延伸，并进一步推菜单项下。

一致性：物体缩小回到常规的尺寸。

优点：显示中的物体和进一步信息的对象之间的直接连接。

用户感受：菜单就像一个可折叠的手风琴

 

翻动

适用场合：当有附加内容时

运动描述：运动物体的进一步信息。

一致性：180°翻转两面。

优点：显示中的物体和信息的对象之间的直接连接。

用户感受：附加信息在物体的背面

 

弹出预览

适用场合：当有附加内容时

运动描述：物体选择180°获得更多信息。

一致性：180°旋转两面。

优点：显示中的物体和信息的对象之间的直接连接。

用户感受：物体在上方移动显示。

 

半翻转

适用场合：当有附加内容时

运动描述：物体从二维空间旋转到三围空间的进一步信息。

一致性：-

优点：显示中的物体和信息的对象之间的直接连接。

用户感受：2 d对象在空间旋转显示3 d放置信息的可能性。

 

折页

适用场合：当有附加内容时

运动描述：两个或两个以上的交互对象。

一致性：折叠-展开

优点：物体的一部分是显示的，可通过此动效来看到物体的整体大小。

用户感受：物体似乎被折叠。

 

对象展开

适用场合：当有附加内容时

运动描述：物体被扩大发现其隐藏的内容。

一致性：物体收缩会正常的大小。

优点：通过缩放对象的遮罩来显示隐藏的内容。

用户感受：其他的内容被隐藏在物体的后面。

 

放大

适用场合：当用户有感兴趣的对象时

运动描述：你感兴趣的对象将放大显示更详细的信息。

一致性：放大-缩小。

优点：通过缩放对象的遮罩来显示隐藏的内容。

用户感受：物体更可能地接近和显示更详情的信息。

 

文字截断

适用场合：当有隐藏的文本时

运动描述：如果文本比其文本字段越长，文本则会被截断，并显示通过与用户的阅读顺势而动。

一致性：移动截断文本的方向取决于文本的流量。

优点：利用更少的空间显示更多的文本内容。

用户感受：

 

区域分割

适用场合：当有附加内容时

运动描述：区域分割显示详细信息。

一致性：分裂-合并。

优点：显示中的物体和信息的对象之间的直接连接。

用户感受：屏幕跟实际显示的内容似乎分裂了。

 

更多的文本输入

适用场合：当用户需要更多的空间来显示输入的文本

运动描述：输入框的大小取决于用户需要输入文本的长度。

一致性：删除输入减少输入文本。

优点：根据输入的文本长度来看文本框的大小。

用户感受：输入框根据用户输入的文本来变化大小。

 

四、提示性动效

提示性控件

提示控件让用户关注于上下文控制。他们在需要时出现，不需要时消失。当用户切换到一个特定的模式，提示控件可以通过动效进行一些新式的交互。滑动和淡入淡出就属于实现这个目标的最常用的动效。

 

提示性动效分类：

１.　滑动删除

适用场合：当用户需要删除相关列表项。

动作描述：滑动列表项，滑入删除按钮。

一致性：双向滑动

优点：这是一个为删除对象提供直观交互的转场动效。滑动屏幕上的对象后，会出现一个按钮来确认这个动作。

用户感受：滑动列表项后，删除按钮像是被推入屏幕中。

 

２.　模式切换

适用场合：当用户编辑相关列表时，需要一些额外的控件。

动作描述：切换模式时，移动相关项/标签，划入额外的控件

一致性：切换回普通模式时，将额外的控件移出屏幕。

优点：通过滑动引入新的控控件。通过移动项目/标签强调新控件的重要性。

用户体验：滑动列表项后，额外的空间像是被推入屏幕中。

 

３.　弹性刷新

适用场合：当用户刷新或更新相关的列表。

动作描述：这个功能在拉伸列表时出现，可以是在释放列表同时，或是将列表拉到指定位置时激活。

一致性：原文是覆盖刷新功能的动作应能取消刷新动作。我的理解是，例如下拉列表激活刷新，那么往回推列表时要能够取消刷新的动作。

优点：直观地与列表交互。通过滚动列表，直接在相关的列表下显示功能。

用户体验：拉伸列表时，直接在相关列表下显示功能。

 

４．　显示控件

适用场合：用户激活/关闭视频播放控件。

动作描述：通过点击视频，显示播放控件。

一致性：通过点击显示播放控件/点击使控件消失。

优点：使用户专注于内容本身，而不必分心于播放控件。它只在需要的时候可见。

用户体验：-

 

５．　滑动式控件

适用场合：当用户需要激活触摸键盘。

动作描述：对象滑入，从而引入新的输入区域。

一致性：滑入-滑出。

优点：引入一个新的对象，该对象只在需要的时候可见。

用户体验：对象滑入屏幕。

 

五、突出显示

通过动画引导使用者的注意力。使用户清楚界面上可能被忽略的变化。目的是通过动画引导用户注意特定的对象。打光和着色经常被用作突显的实例。

 

突出显示动效分类：

１.　缩放

适用场合：当一个特定对象需要被突出显示。

动作描述：缩放目标对象以突出显示。

一致性：-

优点：对象通过引人注意的动画，引导用户的视线。

用户感受：-

 

２.　旋转

适用场合：当一个特定对象需要被突出显示。

动作描述：旋转目标对象以突出显示。

一致性：-

优点：对象通过引人注意的动画，引导用户的视线。

用户感受：-

 

３.　着色

适用场合：当一个特定的对象需要被突出显示。

动作描述：通过目标对象的颜色来突出显示。

一致性：-

优点：对象通过引人注意的动画，引导用户的视线。

用户感受：-

 

４.　褪色

适用场合：当一个特定的对象需要被突出显示。

动作描述：周围对象褪色来突显目标对象。

一致性：-

优点：对象通过引人注意的动画，引导用户的视线。

用户感受：-

 

５.　模糊

适用场合：当一个特定的对象需要被突出显示。

动作描述：周围对象模糊来突显目标对象

一致性：-

优点：对象通过引人注意的动画，引导用户的视线。

用户感受：-

 

６.　变暗

适用场合：当一个特定的对象需要被突出显示。

动作描述：周围的对象变暗来突显目标对象。

一致性：-

优点：对象通过引人注意的动画，引导用户的视线。

用户感受：-

 

７.　翻转

适用场合：当一个特定的对象需要被突出显示。

动作描述：翻转目标对象以突出显示。

一致性：-

优点：对象通过引人注意的动画，引导用户的视线。

用户感受：-

 

８.　发光突显

适用场合：当一个特定的对象需要被突出显示。

动作描述：目标对象发光以突出显示。

一致性：-

优点：对象通过引人注意的动画，引导用户的视线。

用户感受：-

 

９.　改变深度

适用场合：当一个特定的对象需要被突出显示。

动作描述：目标移到其他对象之前，以突出显示。

一致性：-

优点：对象通过引人注意的动画，引导用户的视线。

用户感受：对象看起来像改变了深度。

 

１０.　灰显

适用场合：当一个特定的对象需要被突出显示。

动作描述：周围对象变灰，以突出显示目标对象。

一致性：-

优点：对象通过引人注意的动画，引导用户的视线。

用户感受：-

 

１１.　放大

适用场合：当一个特定的对象需要被突出显示。

动作描述：目标对象在用户与之交互时放大。

一致性：如果对象不再被激活，应该回到原来的大小。

优点：通过放大目标以显示哪个对象是活跃并正在交互中的。

用户感受：-

 

五、反馈

用户的进行操作之后，反馈动效随之而来，反馈动效可以有效的告知用户“操作是否成功”。反馈的表现形式或以明显的弹性效果为主，或是基于进度条动效。

反馈动效的分类：

 

1.移动有效

适用场合：移动物体时，需要通过反馈来告知用户移动是否有效

运动描述：如果物体被放置在有效移动区域附近，那么物体会自动“滑进”指定位置。

一致性：参见“移动无效”

优点：通过平滑的过渡，可视化的告知用户，此区域为可移动区域，同时告知用户交互有效。

用户感受：物体好似被吸去了。（磁铁）

 

2.移动无效

适用场合：移动物体时，需要通过反馈来告知用户移动是否有效

运动描述：如果物体被放置在无效移动区域附近，那么物体会自动回到原位

一致性：参见“移动有效”

优点：通过过渡效果，清晰的让用户看到，物体返回了原位置及其运动轨迹，这样用户就可以快速找到物体。

用户感受：物体好像磁铁的同极被排斥开

 

3.列表的排列重组

适用场合：当用户想要重排列表时

运动描述：当列表中进行“添加”、“移动”、“删除”操作时

一致性：

优点：能够让用户了解所操作项的位置，同时还能留意到其他项位置的改变

用户感受：项位置的改变，导致了整个列表的变化。

 

4.关闭

适用场合：当用户关闭某个对象，需要视觉反馈时

运动描述：物体缩入关闭按钮中，暗示物体已经关闭

一致性：

优点：通过过渡效果，告知用户对象已经关闭，同时提醒用户在何处重新打开。

用户感受：物体似乎被吸入了关闭按钮中。

 

5.开/关

适用场合：当用户打开、关闭某个功能时

运动描述：开关位置的移动以及开关样式的改变，有效的告知了用户功能处于打开状态还是关闭状态。

一致性：

优点：能够清楚的告诉用户，交互是否成功，功能是否被打开、关闭

用户感受：开关按钮的移动，给予一种真实的触感。

 

6.列表移动有效/无效

适用场合：当用户试图移动列表中的项时

运动描述：将列表中的项从一处移动到另一处，列表本身会作出反馈，告知用户可否移动

一致性：可告知用户能够移动还是不能移动

优点：能够告诉用户可否移动。

用户感受：列表“同意”或“禁止”移动列表项

 

7.列表末端

适用场合：当用户滑动到列表的最末端时

运动描述：因为已经到了最末端，列表会回弹。

一致性：列表顶端相反

优点：当滑动到最末端时，会自动回弹，告诉用户到头了。

用户感受：列表似乎被固定住了，滑不动

 

8.翻页末端

适用场合：当用户翻到最后一页，想要继续翻页时

运动描述：无法继续翻页，会有短暂的翻页效果，但是会立即回弹

一致性：第一页相反

优点：这种动效能够暗示用户已经到达最后一页，然后页面会自动翻回去。

用户感受：页面似乎被固定住了，翻不动

 

9.按钮标签的切换

 

适用场合：当按钮所代表的功能切换时，按钮标签也会随之切换

运动描述：一个按钮，多种功能，功能切换后，按钮的样式和长度随之改变。

一致性：

优点：能够告知用户操作成功，已经开启某功能。

用户感受：

 

 

10.加载进度条

适用场合：当需要加载、读取，需要告知用户读取进度时

运动描述：进度条会跟随加载进度缓缓填满

一致性：

优点：展示了加载进度

用户感受：有了进度条后，等待似乎不是那么漫长了。

 

11.刷新进度条

适用场合：当用户刷新时

运动描述：旋转、循环

一致性：

优点：暗示用户正在处理中，告知用户还须等待一小会儿

用户感受：

 

12.有效性暗示

适用场合：当需要暗示用户物体能否操作时

运动描述：通过揭幕般的效果，暗示用户加载完成，已经可用

一致性：

优点：适合多个独立物体的展示，告知用户加载情况

用户感受：

六、前馈

解锁方向

适用场合：当系统需要解锁时

运动描述：根据光的显示方向滑动解锁。

一致性：

优点：锁定到解锁的定向移动。

用户感受：对象在发光。

 

功能可见性

适用场合：当系统需要引入其交互性

运动描述：全屏对象跳转到显示下面的隐藏内容。

一致性：

优点：提出一个可能的相互作用。

用户感受：跳跃的对象似乎覆盖其要显示的内容。

 

隐藏功能

适用场合：当用户激活该弹簧刷新时，隐藏的功能被可视化

运动描述：隐藏的功能出现在列表下方跟解释功能的结果

一致性：该功能仅在特定的点发布

优点：解释什么是需要激活隐藏的功能。

用户感受：

 

长度滚动条

适用场合：当用户需一个提醒物体的长度时

运动描述：滚动条显示为用户与之交互并显示了这个列表的长度和位置。

一致性：当用户释放物体，滚动条将会消失

优点：转换为一个列表的长度来与用户进行沟通。

用户感受：

 

交互解释

适用场合：当用户需要解释一个未知的交互时

运动描述：动画指纹解释如何以及在哪里进行交互。如果用户等待一点点时间的动画应该只启动。

一致性：

优点：转换到可视化形式的交互。

用户感受：

 

位置解释

适用场合：当用户需要提示放置的对象时

运动描述：表示通过展示转向有效位置的物体。

一致性：

优点：显示一个物体的位置

用户感受：

 

团结

适用场合：当用户需要移动一个物体到另一个时

运动描述：对象是指感兴趣的对象，通过扩大或收缩，使其团结。

一致性：

优点：表示对象之间的连接

用户感受：