【炫酷动效设计】这就是为什么你的产品需要做动效设计

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

但是说到底,我们到底为什么需要动效设计?或者说我们到底需要什么样的动效?做动效设计也有段时间了,于是尝试用一些案例,从产品本身出发来说说我所思考的动效设计。

版权声明:文章作者是:小怪怪怪兽 来自:京东设计中心JDC

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

一、加强体验舒适度

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

具体表现在:

1.表现层级关系

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

0wx_fmtgifamptpwebpampwxfrom5ampwx_lazy1

图1.

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

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

0wx_fmtgifamptpwebpampwxfrom8ampwx_lazy8
图2. City guide app 用手势可以向左向右扔卡片

3.愉快的提示功能

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

0wx_fmtgifamptpwebpampwxfrom5ampwx_lazy
图3. Action button feedback 出错提示

0wx_fmtgifamptpwebpampwxfrom5ampwx_lazy3
图4. City Guides 启动时提示用户可以左右滑动卡片

4.额外增加界面的活力

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

0wx_fmtgifamptpwebpampwxfrom5ampwx_lazy2
图5. readme.io 萌萌的输入框

0wx_fmtgifamptpwebpampwxfrom7ampwx_lazy7
图6. amazon Q弹的菜单

0wx_fmtgifamptpwebpampwxfrom6ampwx_lazy6
图7. tumblr 不喜欢我 心都碎了呢~

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

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

0wx_fmtgifamptpwebpampwxfrom5ampwx_lazy4
图8. Bubbles 以动态的形式展现数据点

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

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

比如下面这些:

1.让等待变得更愉快

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

0wx_fmtgifamptpwebpampwxfrom5ampwx_lazy5
图9. Download Progress 让下载不再枯燥

0wx_fmtgifamptpwebpampwxfrom9ampwx_lazy9
图10. App loader 有趣的loading动画

0wx_fmtgifamptpwebpampwxfrom10ampwx_lazy101
图11. gear-powered 拉了还想拉的下拉刷新

2.失败界面的动效

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

0wx_fmtgifamptpwebpampwxfrom14ampwx_lazy141
图12. download 就算失败了还是感觉萌萌哒~

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

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

0wx_fmtgifamptpwebpampwxfrom11ampwx_lazy111
图13. iOS Animation Download 界面跳转时保留部分元素到下一个界面

0wx_fmtgifamptpwebpampwxfrom12ampwx_lazy121
图14. Filter Menu 保留需要的条目 移走不再用的

0wx_fmtgifamptpwebpampwxfrom13ampwx_lazy131
图15. Elevate

三、不易被察觉的动效

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

1.默默增加反馈感

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

0wx_fmtgifamptpwebpampwxfrom15ampwx_lazy151
图16. Twitter 收藏的点击反馈

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

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

0wx_fmtgifamptpwebpampwxfrom16ampwx_lazy161
图17. CityHour Calendar Animated Interaction

0wx_fmtgifamptpwebpampwxfrom17ampwx_lazy171
图18. Steller

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

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

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

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/8050/

(0)
iouedioued
上一篇 2015-08-12
下一篇 2015-08-13

相关推荐

  • 交互设计差异化:WebAPP和APP

    WebAPP和原生APP同为移动端,很少有研究这两项的交互区别,最近公司做了一次从原生APP到WebAPP(HTML5 )的移植,故总结一下期间遇到的问题及不同点总结。 从使用场景上,WAP用户面临比APP用户更严峻的问题: 1、页…

    2015-01-26
  • 即将开课!6周,快速玩转axure,同时提升产品和交互能力

    前段时间,一位朋友因为原型不太过关,被老板委婉提醒了。我这位朋友的状况不是特例,原型是产品经理最基础的技能,如果不过关,后果太可怕了!最后给老板留下的印象:这人产品能力不行,每天加班就为改原型,产出太低。想成为靠谱、高薪的产品经理?第一步得提高Axure原型能力!起点学院&腾讯课堂联合打造给产品经理的Axure课程已有1868位同学学习,学习效果显著Axure零基础也能学,学完画出规范原型产品思维和交互贯穿全程,学完告别画图经理通过6周...

    2018-04-08
  • iOS 10锁屏交互大改,是革新还是灾难?

    本次更新除了锁屏交互的调整,也添加了一些更实用的小功能:例如删除系统软件、夜间模式等。虽然beta1版本体现出的诚意还不够,但是我相信两个月后的iOS 10正式版会令多数人满意。

    2017-05-22
  • 在网页设计中如何少让用户费脑筋,保持操作流畅

    除了引导用户,还要减少他们的认知流程,以保持流畅状态。千万别把计算这种事情丢给用户,让计算机来处理。

    2017-05-23
  • 一组能切实提高转化率的网站着陆页设计

    网页设计 师目前在设计界是一个最为尴尬的存在,一方面他们被视为和GEEK党混在代码堆里不懂审美的怪咖,另一方面他们又苦于网页中被局限的自由而无法在创意上得到最大延伸,设计师本人无法给自己准确定位。

    2017-06-02
  • 不仅要漂亮:看图像如何引导用户体验!

    俗话说得好,“一图胜千言”。图片不仅要漂亮,还要够意思!

    2017-05-08
  • 交互设计师的60日计划第十七天

    #交互设计师的每日#20150815 雨天和大学最好的朋友的离别,最后一顿饭吃了王品台塑,果然一分价钱一分货。以用户体验为招牌的海底捞告诉我们要排队2小时等位…但是贵的王品台塑不仅立刻有位,服务也要比海底捞更胜一…

    2015-08-20
  • U+敏捷研发体系

    “研发是一项创造性的工作,卓有成效的研发需要优秀的研发团队来完成,优越的研发流程始终能够发现最佳的机遇,推出有竞争力的产品和服务,并以最快的速度把这些研发成果投入市场。”△ △ △ U+敏捷研发体系流程 △ △ △需求分析1研发体系中的第一个环节,这一阶段要求需求分析人员针对待开发软件提供完整、清晰、具体的要求,确定软件必须实现哪些任务。其中包含的敏捷建模,要求需求分析人员对现实问题的抽象想法构画出草图,以规避需求的不合理等问题。原型设...

    2018-03-30
  • 卡片式设计,并不能支撑所有的设计需求

    卡片式设计一直是以强兼容性和“百搭”的形象出现在大众的面前,但是它同样有无法满足用户需求的时候,今天的文章我们就在实战中聊聊这件事。

    2017-05-13
  • 前车之鉴:一个视觉交互设计失败的案例

    最近在做产品设计时,遇到了一个非常典型的设计失败案例。这个案例反应了一些老生常谈的问题,我觉得非常有意思。

    2017-06-01