happy175 发表于 2015-8-20 12:19:47

设计师的经验总结!我们为什么需要动效设计?

上期,我们发布了移动应用中,提升用户体验的7大微交互,今天@養老虎的小怪獸_ :最近越来越多的国内公司开始关注动效设计了,越来越多的团队意识到动效在产品用户体验中的重要性。但是为什么需要动效设计?需要什么样的动效?做动效设计也有段时间了,于是尝试用一些案例,从产品本身出发来说说我所思考的动效设计。

随着国际大品牌苹果和谷歌的引领,最近越来越多的国内公司开始关注动效设计了,越来越多的团队已经意识到动效在产品用户体验中的重要性了,更多的射鸡师们也开始投身动效设计领域。

(文中部分案例为设计师个人作品,部分为线上产品,都是我非常非常欣赏的作品。如不慎冒犯请戳我替换掉)

一、加强体验舒适度
嗯,就是让用户更加爽更加爽的用你的产品。
具体表现在:

1.表现层级关系

为了展现层与层的关系,是抽屉,是打开,还是平级切换等等,让用户知道这个界面和上一个、下一个的关系。这已经是非常最常见的运用了。



2.与用户手势结合,更自然的动画表现

当用户手势操作的时候,让界面的动态走向更符合手指的运动,从而让用户感觉到是自己控制了界面的动向,而不是机械化的跳转。


City guide app 用手势可以向左向右扔卡片


3.愉快的提示功能

在某些需要提醒的时候能吸引用户的注意,但是又不会生硬,符合预期的出现。




Action button feedback 出错提示



City Guides 启动时提示用户可以左右滑动卡片


4.额外增加界面的活力

在用户预期之外增加的惊喜,可以是帅气的,可以是卖萌,可以有些物理属性,总之让用户感知到产品的生命力。


readme.io 萌萌的输入框




amazon Q弹的菜单



tumblr不喜欢我 心都碎了呢~


5.吸引用户持久的注意力

也是属于增加用户的惊喜感,在某些数据量较大的界面中添加一些动效,让用户保持注意力。


Bubbles 以动态的形式展现数据点

happy175 发表于 2015-8-20 12:23:30


二、减弱不可避免的不适感
虽然我们的产品,我们的交互,我们的设计,我们的工程狮都在努力把产品打造的更加优秀,更加完美,但是总有一些无法避免的问题、或者有可能会出现的bug、外界条件的不给力等因素,造成我们的产品体验下降。这些时候适当的增加一些动效可以弥补在出现这些情况时的不适体验。

比如下面这些:

1.让等待变得更愉快

常出现在加载、刷新、发送等界面中,让等待变得可视化,甚至不再那么无聊。

http://ww2.sinaimg.cn/mw690/0064cTs2jw1ev7m4474oig30b408cjub.gif

Download Progress 让下载不再枯燥


http://ww4.sinaimg.cn/mw690/0064cTs2jw1ev7m44hj4kg30b408c762.gif
App loader 有趣的loading动画

http://ww2.sinaimg.cn/mw690/0064cTs2jw1ev7m454af6g30b408cjyv.gif
gear-powered 拉了还想拉的下拉刷新


2.失败界面的动效

比如刷新失败、页面错误、未联网提示这些。


http://ww2.sinaimg.cn/mw690/0064cTs2jw1ev7m45fgajg30b408cto9.gif
download 就算失败了还是感觉萌萌哒~

3.增加界面与界面衔接的延续感

界面的跳转不可以避免,但是如果让本来分别独立的2个界面或者事件拥有了某种特定的联系,可以显得更加好玩,不再是生硬的跳转。

http://ww2.sinaimg.cn/mw690/0064cTs2jw1ev7m460mbkg30b408casz.gif
iOS Animation Download 界面跳转时保留部分元素到下一个界面


http://ww4.sinaimg.cn/mw690/0064cTs2jw1ev7m46fbiqg30b408ck14.gif

Filter Menu 保留需要的条目 移走不再用的


http://ww4.sinaimg.cn/mw690/0064cTs2jw1ev7m470krsg309e0go7lx.gif
Elevate

kaorou37 发表于 2015-8-31 23:40:03

好帖要顶,楼主的头像还是不错滴http://forumimage.org/images/icon01.jpghttp://forumimage.org/images/icon02.jpghttp://forumimage.org/images/icon03.jpghttp://forumimage.org/images/icon04.jpghttp://forumimage.org/images/icon05.jpghttp://forumimage.org/images/icon06.jpghttp://forumimage.org/images/icon07.jpghttp://forumimage.org/images/icon08.jpghttp://forumimage.org/images/icon09.jpghttp://forumimage.org/images/icon10.jpghttp://forumimage.org/images/icon11.jpghttp://forumimage.org/images/icon12.jpghttp://forumimage.org/images/icon13.jpghttp://forumimage.org/images/icon14.jpghttp://forumimage.org/images/icon15.jpg

kaorou37 发表于 2015-9-1 06:02:05

好帖要顶,楼主的头像还是不错滴http://forumimage.org/images/icon01.jpghttp://forumimage.org/images/icon02.jpghttp://forumimage.org/images/icon03.jpghttp://forumimage.org/images/icon04.jpghttp://forumimage.org/images/icon05.jpghttp://forumimage.org/images/icon06.jpghttp://forumimage.org/images/icon07.jpghttp://forumimage.org/images/icon08.jpghttp://forumimage.org/images/icon09.jpghttp://forumimage.org/images/icon10.jpghttp://forumimage.org/images/icon11.jpghttp://forumimage.org/images/icon12.jpghttp://forumimage.org/images/icon13.jpghttp://forumimage.org/images/icon14.jpghttp://forumimage.org/images/icon15.jpg
页: [1]
查看完整版本: 设计师的经验总结!我们为什么需要动效设计?