不为动而动!动态效果在体验设计中的应用

现在在网页和H5中使用动效已经成为一个大的趋势,随便打开一个H5都会看到一大堆跳动的元素在那里向你招手:看这里!看这里!但在这样的滚滚大潮当中我们是否应该思考一下:真的需要这么多的动效么?为什么需要?需要什么样的?这样做真的解决问题了么?

动效这个话题当下已经非常火热了。在这个骚动的年代,设计师很难再做一个安静的美男子了。一个静态死板的产品很难再去打动用户那颗挑剔的心了。但是!在我们热火朝天往画面上添加各种动效的时候,我们是不是应该在心里问问自己,这么做真的对吗?凡事是否都应该有个度,或者说是平衡点,动效当然也不会例外。下面我们就从“为什么动?”“哪里动?”“怎么动?”这三个方面来说说我们的一点想法:

一、为什么动?

首先,为什么要动?可能你会想到以下几条理由:

1.这让我的作品看起来很炫酷,碉堡了!

2.动效会带来流量,助我完成KPI!

3.别人都这么做了,我也得做!

4.编辑让我这么干的!

呵呵,你要这么想就完了。

那么该如何衡量一个动效是否应该出现呢,我们认为有几个考核标准:

1.这个动效是否会影响性能?

首先,这个动效是否会影响性能?这个是最重要的,添加任何动效前都要考虑是否会影响产品的性能,如果一个很酷炫的动效会拖累性能,使体验变得卡顿不流畅,那么必须毫不犹豫的砍掉或简化。

例子:化身间谍

135636pjV

 

 

 

 

 

 

 

 

 

比如这个例子,这是一个穿越情景的过场动画,随着年份的倒转背景出现各个历史大事件,给人以历历在目的感觉,设计师考虑到了多张图片会出现卡顿的可能性,所以特意降低了每张图的清晰度,因为内容本身就是老照片的风格,所以这种降低画质的手法反而增强了画面的真实感。

2.这个动效是否会提高产品的可用性?

任何动效的出现都必须带有明确的目的性,能够解决用户在使用过程中的困惑,而不是炫技。单纯的炫技只会分散用户的注意力,弱化内容,变得适得其反。

例子:翻页提示

135636V0b

 

 

 

 

 

 

 

 

 

 

 

比如这个上滑提示。不用解释,用户一看知道该做什么。动效增加了产品的可用性,所以这样的动效是非常有意义的!

3.这个动效是否会给你的产品带来独特气质?

这里所说的气质是动效本身会有助于增强用户对于产品的认知和情绪带入。一个相得益彰的动效会为你的产品锦上添花,深化你的主题和功能,注意,一定是与主题相关的,牵强的搭配只会叫人觉得莫名其妙,毫无意义。

例子:人生四时

1356398QI

 

 

 

 

 

 

 

 

 

再看这个例子,人生四时,四根火柴依次燃烧,慢慢燃尽,这种油尽灯枯的感觉很切合的体现了产品生老病死的主题。

4.重新审视第一条,看你的动效是否影响性能。

所以,合理的动效不应是花拳绣腿,而应该是解决问题的手段。

 二、哪里动?

好,我们再看看哪里需要动效,这里举几个例子:

1.加载

首先是出现在加载环境,不管是网页还是H5都不可避免的会出现让用户等待的情况,在等待的过程中为了让用户知道他的手机没有死机以及网络是通畅的,我们应该在这个时候加入一些与主题相关的动效来提醒他内容正在加载中。

例子:化身间谍H5 loading

135640udn

 

 

 

 

 

 

 

 

 

 

 

这是一个穿越类的H5,所以设计师在设计loading的时候选用了虫洞的理念,与内容本身紧密贴合。

2.转场

第二个情景是转场。具有意义的转场会降低产品割裂感,我们看两个例子就明白了。

例子:qq会员观影特权

135640JG9

 

 

 

 

 

 

 

 

 

135640DJ4

 

 

 

 

 

 

 

 

这个例子里元素在默认状态下会做上下浮动的效果,当我们滑动时候,元素很自然的做了一个出场入场的效果。很自然,没有割裂感。对吧?

三、怎么动?

好,说完哪里动,我们现在看看怎么动。

1.基于真实形态的模拟

基于真实的动画会叫人看起来自然流畅,符合规律,比如物体运动时的加速度现象。

例子:look

135643Ufl

 

 

 

 

 

 

注意看这个笔画的动势,是有快有慢的,模拟了写字时起笔收笔的那种节奏感,所以看起来是自然真实的。

2.人物动作夸张化

在H5的设计中,经常会出现各种各样的人物形象,夸张的人物动作会生动你的形象,增加趣味性,给用户以惊喜。

例子:巴菲特这一年

135643fGS

 

 

 

 

 

 

 

 

 

3.给元素赋予弹性

有弹性的物体会叫用户觉得具有生命感和真实性,弹的程度取决于你对元素软硬度的设定。

例子:拍个大头鬼

135644Hdo

 

 

 

 

 

 

 

 

 

三个小鬼一跳一跳,弹性赋予了他们顽强的生命力。

4.蒙太奇

这是一种类似蒙太奇的手法,通过快速切换的画面来形成一种奇妙后现代感觉。

例子:传奇硬箱

135645Mkv

 

 

 

 

 

 

 

 

 

以上只是一些基本的动效手法,在实际的应用中其实有很多手段,在这里我建议大家可以去看看迪士尼和皮克斯的动画,应为动画本身是一种对于动作行为高度概括的手段。虽然这些都是电影,但是他们使用的手段和遵循的理念是非常值得我们去学习和借鉴的。注意观察这些大牛们的作品,你会发现他们的作品中充满了走心的细节。

 四、结语:

简单来说,当用户打开一个界面,注意力首先会被动态的物体吸引,然后才会把注意力转向颜色对比强的部分,最后才是形状。这一过程是人在进化过程中形成的本能反应,基本适用所有用户。同时一个非常重要且容易被忽略的原则:用户的注意力是有限的,而且越来越少。很可能在用户注意到一段动效之后,注意力和耐心已经用尽,无法看到其他内容就着急去下一个界面了。

所以,对于动效这样一个非常强势的工具,一定要用在希望用户注意的部分,并且认真打磨。真正做到“不为动而动”。

原文地址:ued.qq   by  mobileui

原创文章,作者:Smiler李想,如若转载,请注明出处:https://www.iamue.com/16165/

(0)
Smiler李想Smiler李想
上一篇 2016-07-06 12:45
下一篇 2016-07-07

相关推荐

  • iOS和Android规范解析——按钮

    今天介绍的是按钮。按钮是设计的过程中,经常使用的一种控件。我们来看看Google的Material Design和苹果的设计规范都是怎么说的。

    2017-04-28
  • 不懂这几个交互原则,你一定是假的UED设计师

    如果你对这个题目很陌生,那请赶紧登上这辆末班车,来不及解释了。在日常工作中,我们总是会遇到产品或者开发对你发问“这个按钮为什么要放在这里”,“这里显示的信息条目为什么只剩这几个”blablabla之类。不管是为了在对接流程中更加有理有据,也为了使自己的设计更人性更好用,了解这几条基本原则,也是非常必要的。除非有更好的选择,否则就遵从标准。交互设计之父 Alan Cooper最为人熟知的或许就是这句“除非有更好的选择,否则就遵从标准”了,...

    2018-03-15
  • 双11的电商设计风格:5个角度分析天猫视觉页

    天猫官方的双十一预热页面刚刚上线,本文作者就帮大家分析双十一电商设计的流行趋势,包括场景、配色、角度、标题、辅助性元素等。干货+趋势,绝对值得一读!

    2017-05-17
  • PS、AI、Sketch 用着太费劲?这些插件本宝宝力荐!

    虽然 Mac 和 Windows 平台有许多特别棒的软件或工具,但 PS、AI 和 Sketch 仍然是设计师的标配。有时候看到一个特别棒的效果花了很久才折腾出来,殊不知一些插件能够轻松完成,这里小编推荐一些特别实用、效率翻倍的插件给大家,让设计工作事半功倍!GuideGuideGuideGuide 是小编用过的最棒的参考线拓展工具!没有之一!再也不用从标尺一条一条拉参考线还要担心位置不精确,只要输入需要的数值就可以自动生成对应的参考线...

    2018-03-03
  • 从逻辑层、感官层与知觉层,讲述体验设计的表和里

    什么是合格靠谱的体验设计?在逻辑层讲一个通顺的故事。什么是触动人心的体验设计?在感官层唤起人的体感记忆。什么是经典不衰的体验设计?在知觉层建立起认同和反思。你的设计逻辑性和方法运用很强大,很擅长做工具型的产品设计,但在设计的创新性和情感体验上还需要进一步加强。任何游戏化的设计都必须认识到:外在奖励会显著降低玩家的内在动机。游戏化的经验很简单:不要盲目地将外在动机附着在内在动机上。

    2017-05-13
  • 产品原型设计(2):母板的创建和使用

    Axure母板:可以将一些页面中的共同之处,比如导航、背景部分等,提取出来,制作为母板。将母板应用于某个页面,则该页 面相当于将模板的内容复制过来。如果有很多页面具有相同的内容,这些页面如果需要修改这些相同的内容时,仅需要在模板中即可完成所有页面的修改。方式一:直接创建母板步骤一:创建Axure母板:在“母板”区直接创建母板里创建了一个名称为“Axure学习平台”的模板步骤二:使用母板选中“Axure学习平台”母板,邮件选择“添加到页面...

    2018-04-08
  • 交互设计思路:积分模块改版总结

    作者根据工作经验对积分模块改版进行了一些总结,与大家分享,希望可以从中收获点滴。

    2017-05-04
  • 2018用户体验趋势报告

    在2017年我们看到了很多用户体验的进步和优秀的产品。在与来自全世界的189489名设计师分享学习了1926篇优秀文章之后,我们(uxdesign.cc)分析得到了2018年的一些用户体验趋势。1 用户体验的死亡与重生作为用户体验设计师,我们一直都在争取尽早地参与战略决策,现在,设计师在项目中的地位越来越重要,那么我们要如何应对呢?你的app的用户引导页使用体验如何呢?下面是最佳的自查表;不确定哪种导航最适合你的网站?去看看网站设计样例...

    2018-02-03
  • 设计师 To do list:怎样做最有效

    To do list即待办事项列表,罗列出来会帮助我们的脑袋省去一些记忆负担,让我们的思考更加高效。Sophia的tips:敢不敢试着做一年,你会惊喜自己的优秀~

    2017-04-29
  • 社会化分享按钮:一种糟糕的用户体验

    分享按钮被滥用了吗?“通过我们定期的分析,GOV.UK网址被分享到Facebook和Twitter共有14,078次——只占6,800,000总浏览量的0.2%。”“我们删除了FB按钮,Facebook的使用流量增加了。原因如下:用户在其时间表上分享来替代了“喜欢”文章。

    2017-05-03