我们为什么需要动效设计

标签: 产品设计 交互设计 用户体验 | 发表时间:2015-06-12 12:47 | 作者:阿路
出处:http://www.woshipm.com

推荐语:最近越来越多的国内公司开始关注动效设计了,越来越多的团队意识到动效在产品用户体验中的重要性,下面就看下动效设计的意义。

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

但是说到底,我们到底为什么需要动效设计?或者说我们到底需要什么样的动效?做动效设计也有段时间了,于是尝试用一些案例,从产品本身出发来说说我所思考的动效设计。(文中部分案例为设计师个人作品,部分为线上产品,都是我非常非常欣赏的作品。如不慎冒犯请戳我替换掉)

一、加强 体验舒适度

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

具体表现在:

1.表现层级关系

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

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

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

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

3.愉快的提示功能

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

Action button feedback出错提示

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

4.额外增加界面的活力

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

 readme.io 萌萌的输入框

amazon Q弹的菜单

tumblr不喜欢我 心都碎了呢~

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

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

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

二、减弱不可避免的不适感

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

比如下面这些:

1.让等待变得更愉快

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

Download让下载不再枯燥

 App loader有趣的loading动画

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

2.失败界面的动效

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

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

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

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

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

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

 Elevate

三、不易被察觉的动效

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

1.默默增加反馈感

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

Twitter收藏的点击反馈

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

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

CityHour Calendar Animated Interaction

Steller

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

最后要提醒的是,千万不要牺牲了用户宝贵的时间用来看你毫无目的的动效。

文章总结了一些自己的想法,有不足之处希望各位可以指出~

作者:cardist

来源:UI中国

原文地址:http://www.ui.cn/detail/54562.html


互联网人士必备微信公众号:woshipm,雷军和周鸿祎都关注了,如果你已经关注了,证明你已经很牛逼了。

相关 [需要 设计] 推荐:

设计师需要的知识体系

- - 博客 - 伯乐在线
产品设计师面对复杂、庞大的制造业系统以及多元化的市场,其知识体系要同时具备广度和深度. 设计是循序渐进、不断深入的过程,因此我们面对的是交错的学科体系,以及深入的技术探究. 当国内工业设计教育界还在热烈地争论设计是艺术还是技术时,不妨退一步思考,设计本身既融合又独立,既有依附性又具有本身不可替代的意义.

大数据需要好设计

- - 互联网的一些事-关注互联网产品管理,交流产品设计、用户体验心得
  越来越多的企业开始意识到优秀的设计之于数据的重要性. 优秀的设计可以让枯燥乏味的数据变得更加直观、友好,从而帮助顾客理解数据的意义,让企业与顾客建立更好的关系,从而更好地发挥作用.   许多公司一直相信大量囤积数据的好处,现在他们正在寻找能利用这些数据造福顾客的方法. 大数据给各行各业的企业提供了一个变得更加透明、更值得信任,并在竞争中脱颖而出的机会,而且能让他们的用户在产品和服务上获得更加个性化的体验.

UI设计需要什么软件—UI设计常用软件盘点

- - 酷勤网-挖经验 [expanded by feedex.net]
 来源:365UCD   2012-01-04. UI设计,即用户界面设计,是对软件的人机交互、操作逻辑、界面美观的整体设计,UI设计不是单纯的美术绘画,他需要定位使用者,使用环境,使用方式并为最终用户而设计. 本文将为大家盘点一些UI设计的常用软件,供初学者参考. Photoshop并非一个单纯的图像编辑软件,它的应用领域涉及图像、图形、文字、视频、出版等各个方面,非常广泛.

交互设计需要考虑的一些事…

- DayuLu - 互联网的那点事
作为设计师,我们总是希望我们的用户获得更好的体验,试着让他们喜欢我们的网站,应用程序和启动界面. 设计的原型要一再考究鉴定,确实要这样设计,用户可以接受吗. 我们需要不停的假设与验证,不停的优化完善我们的设计,因此我们需要考虑一些方面:. 在执行一个新的产品设计时,首先与产品经理进行沟通,明确了解需求的定位.

70个设计师需要的实用免费PSD文件

- tan - 互联网的那点事
带来设计师的最爱PSD文件,这些文件在你的工作和项目中可能会经常被用到. 现在你可以使用下面的模板来提高你的设计效率. © 推荐 for 互联网的那点事, 2011. Post tags: PSD文件. poEdit: Windows下的.po文件编辑器 (@chedong). 方便地建立免费的文件共享服务器.

WEB设计师和开发人员需要的新鲜资源

- redhobor - 互联网的那点事
网页设计正在进入全新的领域,各种技术每天都在涌现. 网页设计师和开发人员都需要不停的去改进自己的思维不停的去创新用户体验,才能让项目在众多的网页中脱颖而出. 但是不管是WEB设计师还是开发人员,都需要有一套属于自己的素材库,里面有各种资源可随时调用. 下面是我们分享给大家的一些非常实用和新鲜的资源,其中有关于幻灯片插件,有CSS框架,有HTML5和CSS3还有GUI,jQuery等等.

热点争议:Web设计师需要编程知识吗?

- - Web App Trend
Web设计师是否应该学习编写代码是个充满争议的问题. 通常,在完成了一件网页设计后他们把创建网页代码的繁重工作都留给了程序员们. 这种现象不只出现在网络开发行业,在软件及游戏开发业也是如此.  在本篇文章中,作者 Deepu Balan 和大家分享了一些为什么Web设计师需要学习编写代码的理由,这会使广大的Web设计师们受益匪浅.

设计 iOS 应用时需要知道的 5 件事

- - 博客 - 伯乐在线
英文原文: 5 Things to Know When Designing for iOS,翻译: oschina. 根据我们制作优秀的 iOS 应用的经验,我们认为设计师应该在心里的牢记适用于 iOS 的 5 件事. 虽然本文关注的重点只在 iOS 应用,但大部分的意见也适用于其他移动平台. 这似乎是显而易见的,设计应用而不是网站实际上需要转变思维方式.

网站界面设计需要迎合用户操作习惯

- - 互联网的一些事-关注互联网产品管理,交流产品设计、用户体验心得
  通过对界面设计不同需求进行的分类以及界面设计元素对用户行为的影响,来研究用户在界面设计中所体现的重要性. 交互性已经成为网络界面设计中设计追求的目标. 为了使设计满足可用性要求,全面的了解用户特征及多元化要求是十分必要的. 这就需要找到正确的方法来记录和实现多元化的用户要求.   界面是人与物体互动的媒介,换句话说,界面就是设计师赋予物体的新面孔[1].