腾讯高手出品!动效设计基础(二):动效的应用 - 优设网 - UISDC

腾讯高手出品!动效设计基础(二):动效的应用

2016/07/03 12136评论区

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

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/motion-design-animation-application

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

设计圈干货 界面设计 排版布局 版式设计 职场 优设专访 优设大课堂 设计达人 设计师干货 web前端开发 配色 视觉设计 素材下载 AI教程 设计理论 设计流程 神器下载 字体下载 设计师专访 psd下载 海报设计 设计规范 设计趋势 用户体验设计 动效设计 logo设计 平面设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里