做为UI设计师,我们为什么需要动效设计?

发布时间:2015-08-03编辑发布:迪麦互动




一、加强体验舒适度


嗯,就是让用户更加爽更加爽的用你的产品。


广州网页优化 广州网页建设 广州UI设计外包 给你讲述具体表现在:


1.表现层级关系


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

hh20150731 (3)

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


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

hh20150731 (4)

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


3.愉快的提示功能


在某些需要提醒的时候能吸引用户的注意,但是又不会

dx20150731 (1)
Action button feedback 出错提示

hh20150731 (5)

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


4.额外增加界面的活力


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

dx20150731 (2)

readme.io 萌萌的输入框

hh20150731 (1)

amazon Q弹的菜单

tumblr  不喜欢我 心都碎了呢~


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


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

dx20150731 (3)

tumblr  不喜欢我 心都碎了呢~


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


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

dx20150731 (4)

Download Progress 让下载不再枯燥

dx20150731 (5)

App loader 有趣的loading动画

dx20150731 (6)



gear-powered 拉了还想拉的下拉刷新


2.失败界面的动效


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

dx20150731 (7)

download 就算失败了还是感觉萌萌哒~


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


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

dx20150731 (8)

iOS Animation Download 界面跳转时保留部分元素到下一个界面

dx20150731 (9)

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

dx20150731 (10)

Elevate


三、不易被察觉的动效


特意把这一类单独说一下,由于不容易被发现,普通用户通常会忽略它们的存在,但很多时候这些小细节让交互变得更加有趣。


1.默默增加反馈感


为用户的操作提供有趣的正反馈。

dx20150731 (11)

Twitter 收藏的点击反馈


2.去除用户不再需要的元素


随着用户的操作,有的内容已经是用户不再关注的。这时候可以将他们隐藏起来。

dx20150731 (12)

CityHour Calendar Animated Interaction

hh20150731 (2)

Steller


上面的例子大部分都是比较特色鲜明的,但是大多数实际情况中的优秀动效设计都会涉及到好几点同时都满足。总的来说动效还是为用户体验而服务的,动效设计师尤其要注意交互逻辑,才能让你的作品看起来不但动效帅气逼人而且真正发挥了实际的作用。


原文转载于优设官网。

分享至: