UI中的基本动效

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

 

一、前言:

指向性动效能够有效的描述物体之间的逻辑关系,同时通过视觉效果,可视化的描述物体当前运动状态。

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

 

二、指向性动效的分类:

1.滑动

0

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

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

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

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

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

 

案例:

 

看点:

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

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

3.最后堆叠、展开效果

 

2.弹出

0

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

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

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

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

用户感受:物体在放大

 

案例:

01

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

 

3.最小化

0

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

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

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

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

用户感受:物体在缩小

 

案例:

01

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

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

 

4切换对象

0

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

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

一致性:

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

用户感受:原物体缩回,新物体出现

 

案例:

0

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

 

5.展开堆叠

0

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

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

一致性:将一群物体堆叠

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

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

 

6.翻页

01

适用场合:当用户翻页时

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

一致性:指向性动效,翻页的指向取决于手指滑动的指向

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

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

 

案例:

0

 

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

 

7.添加到列表

01

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

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

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

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

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

 

案例:

01

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

 

8.固定标签

01

适用场合:当用户滚动带有标签的列表时(常见的头部固定,可参考iOS7的电话簿列表)

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

一致性:-

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

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

 

案例:

0

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

 

9.横竖屏切换

0

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

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

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

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

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

 

10.按钮标签转换

01

60

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

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

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

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

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

01

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

11.分合

02

600

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

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

一致性:分离与结合

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

用户感受:分离和结合

 

12.滚动

01

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

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

一致性:

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

用户感受:

02

Albumatic应用

 

13.平移

02

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

运动描述:

一致性:

优点:非常适合地图界面

用户感受:

 

14.滚动条

01

适用场合:滚动列表时

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

一致性:

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

用户感受:

02

15.页码指示器

02

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

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

一致性:

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

用户感受:

02

16.保存指示器

02

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

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

一致性:

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

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

02

 

三、空间扩展

可折叠

12001

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

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

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

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

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

 

翻动

45004

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

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

一致性:180°翻转两面。

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

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

 

弹出预览

600

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

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

一致性:180°旋转两面。

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

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

 

半翻转

37003

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

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

一致性:-

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

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

 

折页

900

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

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

一致性:折叠-展开

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

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

 

对象展开

19001

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

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

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

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

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

 

放大

38003

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

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

一致性:放大-缩小。

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

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

 

文字截断

15001

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

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

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

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

用户感受:

 

区域分割

600

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

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

一致性:分裂-合并。

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

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

 

更多的文本输入

13001

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

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

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

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

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

 

四、提示性动效

提示性控件

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

 

提示性动效分类:

1. 滑动删除

700

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

动作描述:滑动列表项,滑入删除按钮。

一致性:双向滑动

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

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

 

2. 模式切换

60

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

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

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

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

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

 

3. 弹性刷新

600

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

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

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

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

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

 

4. 显示控件

600

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

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

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

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

用户体验:-

 

5. 滑动式控件

800

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

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

一致性:滑入-滑出。

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

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

 

五、突出显示

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

 

突出显示动效分类:

1. 缩放

600

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

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

一致性:-

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

用户感受:-

 

2. 旋转

600

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

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

一致性:-

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

用户感受:-

 

3. 着色

20002

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

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

一致性:-

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

用户感受:-

 

4. 褪色

11001

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

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

一致性:-

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

用户感受:-

 

5. 模糊

10001

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

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

一致性:-

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

用户感受:-

 

6. 变暗

24002

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

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

一致性:-

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

用户感受:-

 

7. 翻转

22002

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

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

一致性:-

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

用户感受:-

 

8. 发光突显

14001

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

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

一致性:-

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

用户感受:-

 

9. 改变深度

18001

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

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

一致性:-

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

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

 

10. 灰显

29002

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

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

一致性:-

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

用户感受:-

 

11. 放大

43004

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

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

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

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

用户感受:-

 

五、反馈

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

反馈动效的分类:

 

1.移动有效

25002

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

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

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

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

用户感受:物体好似被吸去了。(磁铁)

 

2.移动无效

16001

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

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

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

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

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

 

3.列表的排列重组

27002

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

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

一致性:

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

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

 

4.关闭

17001

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

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

一致性:

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

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

32003

 

5.开/关

21002

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

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

一致性:

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

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

 

6.列表移动有效/无效

23002

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

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

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

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

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

 

7.列表末端

26002

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

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

一致性:列表顶端相反

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

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

 

8.翻页末端

37003

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

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

一致性:第一页相反

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

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

 

9.按钮标签的切换

 30003

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

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

一致性:

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

用户感受:

31003

 

 

10.加载进度条

34003

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

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

一致性:

优点:展示了加载进度

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

28002

 

11.刷新进度条

33003

适用场合:当用户刷新时

运动描述:旋转、循环

一致性:

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

用户感受:

35003

 

12.有效性暗示

36003

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

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

一致性:

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

用户感受:

六、前馈

解锁方向

46004

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

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

一致性:

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

用户感受:对象在发光。

 

功能可见性

47004

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

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

一致性:

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

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

 

隐藏功能

42004

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

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

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

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

用户感受:

 

长度滚动条

40004

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

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

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

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

用户感受:

 

交互解释

39003

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

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

一致性:

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

用户感受:

 

位置解释

44004

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

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

一致性:

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

用户感受:

 

团结

41004

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

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

一致性:

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

用户感受:

- Posted in: Blog

- Tags: , , ,

0 条评论 1,136 次阅读

  1. 该文章评论功能已经关闭!

Top