motion-design-animation-application-1

Heyu:在上一篇文章《动效设计基础(一):缓动与运动曲线》中,我们讨论了动效的几种常见形式以及缓动的重要性。那么,我们为什么要用动效呢?除了酷炫好玩以外,动效在用户体验设计中其实发挥着很重要的作用。在本文中,我们就来看看动效设计在用户界面设计中的应用。

一、吸引注意力

人类天生就对运动的物体格外注意,因此UI动效自然是吸引用户注意力的一种很有效的方法。在iOS锁屏上,唯一的动效就是“滑动并解锁”几个字上从左向右运动的高光。这种动效尽管细微,但还是能引起用户注意。同时也在引导用户滑动的方向:

sx2016070343

当用户轻触Safari的地址栏时,界面发生了3个变化:

(1)地址栏宽度变窄,出现取消按钮

(2)出现书签

(3)键盘弹出

在这几个动画中,幅度最大的动作是键盘弹出。这样把用户的注意力吸引到键盘上,有利于接下来要进行的输入操作。

sx2016070344

通过动效来提示用户操作比传统的“点击此处开始 ”这样的提示往往更直接,也更美观。在Hitman Go,这款游戏的开始界面上,标题中的“Go”同时也是开始游戏的按钮。游戏的设计者让这个按钮有规律性地跳动来提示用户点击。

sx2016070345

二、提供反馈

在触摸屏上点按虚拟元素,不像按下实体按钮一样能够感觉到明确的触觉反馈。此时,动效就成为了一种很重要的反馈途径。比如在Android Material Design设计语言中,界面元素会伴随着用户轻触呈现圆形波纹:

sx2016070346

以及在iOS输入解锁密码出错时,小圆点会来回晃动,模仿摇头的动作来提示用户重新输入:

sx2016070347

有些动效反馈非常细微,但是组合起来却能传达很复杂的信息。例如我们天天都见到但很少去思考的一个动效,iOS的相机对焦:

sx2016070348

这个对焦反馈其实依次提供了相机三个状态的信息: 首先,对焦框由外向内出现。这种瞄准式的动作是在告诉用户,相机正在努力聚焦中:

sx2016070349

然后,聚焦框闪烁,表明锁定聚焦和曝光:

sx2016070350

最后,聚焦框消失,提示用户可以拍摄了:

sx2016070351

在这短短不到三秒的时间里,通过三个动画就向用户展示了相机的对焦过程。

三、加强方向感

当我们为移动界面设计页面间的切换效果时,例如查看照片、进入聊天等,合理的动效能帮助用户建立很好的方向感,就像设计合理的公路和路标能够帮助人们认路一样。一个优秀的案例就是iOS相册的设计:

sx2016070352

用户轻触照片后,照片是从列表中的位置上放大。这样就建立了放大的照片与列表中缩略图的联系,用户能很确信现在打开的照片就是自己点击的那张。相应地,点击返回,照片就缩小到列表上的位置,指引用户找到浏览的位置:

sx2016070353

如果不采用这样的缩放动画,而是从右侧进出,就建立不了照片和列表之间的联系了:

sx2016070354

这种保持内容上下文关系的缩放动效在iOS的很多界面中都能见到,例如主屏幕的文件夹、日历和App切换界面:

sx2016070355

四、传递深度信息

动效除了表现元素在界面上的位置、大小变化,还可以用来表现元素之间的层级关系。借助陀螺仪和加速度传感器,让界面元素之间产生微小的位移从而产生视差效果,这样可以将不同层级的元素区分开来。例如iOS主屏幕的视差效果:

sx2016070356

这样的效果是如何产生的呢?元素“距离”屏幕“越远”,由运动带来的位移就越大,当多层元素同时运动时,就可以产生视差的错觉了。这种手法在动画片和横向滚动的游戏(如超级玛琍)中经常用到。

sx2016070357

我们在制作一个新闻H5专题时,也运用了类似的手法,让用户就像看立体全景图片一样来浏览新闻图片:

sx2016070358

五、小结

在本文中,我们讨论了动效的四个重要的应用场景:

(1)吸引注意力

(2)提供反馈

(3)加强方向感

(4)传达深度信息

通过以上的案例和讨论,我们不难意识到,不能把动效作为让产品酷炫的手段,也不能把它当作产品的某种功能或者亮点。动效是为用户使用产品的核心体验服务的,只有设计好产品的核心体验,并合理使用动效才能最大程度地发挥动效的优势。

【动效设计好文】

告诉你为什么要做动效设计:
《设计师的经验总结!我们为什么需要动效设计?》

改善动效实战:
《点睛还是败笔?手把手教你改善界面交互动画(附案例)》

Windows用户动效设计工具:
《WINDOW党福利!这才是适合设计师的免费动效神器PIXATE》

原文地址:ued.qq

yestone-uisdc-2

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量130万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

点赞
收藏
继续阅读相关文章

发表评论 快来秀出你的观点

还可以输入 800 个字
 
 
载入中....
评论 收藏