技术研发实力过硬 | 系统软件开发
国家高新技术企业

首页 / 产品策划 / 文章详情

90%的UI设计师不知道怎么做动效设计?

2017-04-14 18:251751

90%的设计师不知道动效设计的重要性?现在是扁平化设计风格盛行,但是交互设计缺越来越拟物化,动效设计在产品设计中就显得非常重要,下面来具体说说动效设计在产品设计中的作用。

一、舒适度

让用户更加舒服、流畅的使用你设计的产品。

具体表现在:

1.表现层级关系

为了展现层与层的关系,抽屉,打开,还是平级切换等等,让用户知道这个界面和上一个、下一个的关系。保持使用的延续性。

小超人UI设计


2.手势结合,更自然直观的动画表现

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

成都UI设计

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


3.令人愉悦的提示功能

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

成都APP设计

Action button feedback 错误提示

交互设计

City Guides 启动时左右滑动卡片


4.额外增加界面活力,让界面更生动

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

用户体验


动效设计

readme.io 萌萌的输入框


APP开发

tumblr ?难道这样都还不喜欢吗?


5.增加用户持久的注意力

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

UI设计

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


三、不被察觉的动效往往更惊喜

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


1.默默增加用户的反馈感

为用户的操作提供有趣的反馈,与用户进行互动交流。

交互动效

Twitter 收藏的点击反馈


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

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


Steller

动效要注意交互逻辑,才能让你的作品看起来不但动效帅气逼人而且真正发挥了实际的作用。千万不要牺牲了用户宝贵的时间用来看你毫无目的的动效,要不然只能是过渡设计了,令人生厌。



UI设计

、减弱不可避免的不适感

总有一些因素造成我们的产品用户体验下降。这时候适当的增加一些动效来弥补使用时不适体验。


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

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

APP开发

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

网站建设

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

UI设计

2.失败界面的动效

比如刷新失败、页面错误、未联网提示、无法加载图片这些的异常处理机制。

网页设计

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


3.让等待变得更愉悦

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

APP开发

Download Progress 让下载不再枯燥

视觉设计

App loader 有趣的loading动画

界面设计

gear-powered 拉了还想拉,百拉不厌的下拉刷新


Elevate


动效设计也是一门艺术,只有抓住了用户的心里预期,才能创造令人愉悦的产品,更多产品设计文章,请关注成都小超人官网:http://www.cdxcr.cn/


最新文章