恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
UI中的基本动效:指向性动效
0.0°
2014-05-04 自译外文 经验/观点 原作者: 原作者 举报 96574 542 216 41

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

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

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

一致性:

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

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

 

 

 

 


更新:2014-05-04

收藏

542人已收藏

MartinRGB

http://www.MartinRGB.com

  • 234

    作品

  • 1.7w

    粉丝

  • 413

    关注

  • MartinRGB.com
  • Icon Freebie - Code
  • 实验系列II —— Music App For Tv/Pad
  • Private Trainer 引导页实现
相关标签
移动应用界面

    猜你喜欢

      2014-05-04 自译外文 经验/观点 原作者: 原作者 举报 96574 542 216 41

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

      0.0°

      你确定要举报UI中的基本动效:指向性动效

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2014年05月04日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      216
      542
      41

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录