聊聊动态效果在体验设计中的应用

首先,为什么要动?可能你会想到以下几条理由:呵呵,你要这么想就完了。


一、为什么动?

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

  1. 这让我的作品看起来很炫酷,碉堡了!
  2. 动效会带来流量,助我完成KPI!
  3. 别人都这么做了,我也得做!
  4. 编辑让我这么干的!

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

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

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

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

例子:化身间谍

聊聊动态效果在体验设计中的应用

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

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

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

例子:翻页提示

聊聊动态效果在体验设计中的应用

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

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

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

例子:人生四时

聊聊动态效果在体验设计中的应用

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

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

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

二、哪里动?

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

1. 加载

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

例子:化身间谍H5 loading

聊聊动态效果在体验设计中的应用

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

2. 转场

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

例子:QQ会员观影特权

聊聊动态效果在体验设计中的应用 聊聊动态效果在体验设计中的应用

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

3. 页面元素的互动

也可以为网页元素增加一些必要的动效。

例子:好声音第四季首页:

聊聊动态效果在体验设计中的应用

看下好声音的专题页面,在网页上的能够点击的按钮或者文字链,在鼠标经过时都有点变化,这个十分必要。因为表面上的变化会给用户一种心理暗示,那就是点击后也会有变化。

4. 心理需要

这里所说的心理需求是指气氛和情景的营造,例如节日,游戏活动等产品,是需要一些动效去满足用户心理需求的。大家都知道在微信里输入“生日快乐”是会掉下生日蛋糕的,这个动效就比干巴巴的文字有趣多了。

例子:一封家书

聊聊动态效果在体验设计中的应用

一封家书,注意看,背景有飘落的雪花,漫天大雪勾起思乡情,对吧,合情合理,有情有义!

三、怎么动?

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

1. 基于真实形态的模拟

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

例子:Look

聊聊动态效果在体验设计中的应用

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

2. 人物动作夸张化

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

例子:巴菲特这一年

聊聊动态效果在体验设计中的应用

巴菲特老爷爷,动作很亲切。

3. 给元素赋予弹性

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

例子:拍个大头鬼

聊聊动态效果在体验设计中的应用

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

4. 蒙太奇

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

例子:传奇硬箱

聊聊动态效果在体验设计中的应用

炫酷了,节奏很快,提气!

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

四、结语:

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

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

 

原文来自:ued.qq

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

(0)
CatherineCatherine
上一篇 2017-05-22 03:40
下一篇 2017-05-22 05:43

相关推荐

  • Pinpil 交互设计作品欣赏

    Pinpil交互设计作品欣赏

    2018-03-24
  • 别让措辞毁了你的设计成果

    本文总结到:措辞在用户体验设计中很重要。注意使用简洁、明了、有力的词语来表达信息。它会彻底改变产品体验和心态。你:“对不起老师,我能去厕所吗?”

    老师:“我不知道……能不能,你说呢?”好友:“嘿,[你的名字]!试试搬起这把椅子。”译者注:这个问题在汉语中应该不存在。原文中的Just一词,如今最常用来表达“刚好”、“恰好”、“差一点”的含义。“你差点就拿下第一名了,继续努力!”“你与第一名已经很接近了,下次反应速度得再快一些。”

    2017-05-07
  • 交互设计自我发展三部曲——“器、势、人”

    数十万互联网从业者的共同关注!作者: 集创堂-纯色个人微信号:jichuangtang作者授权早读课发表,转载请联系原作者欢迎投稿到早读课,投稿邮箱:mm@zaodula.com交互设计师(或者称UI设计师)发展的三部曲——器、势…

    2017-08-01
  • 设计原则:视觉重量和方向

      web页面上的每个元素产生一种视觉力量,吸引了观众的眼睛。 力就越大,眼睛是吸引了。 这些力量似乎也作用于其他元素,传授他们潜在的运动和视觉方向建议,你应该下一个。 我们把这个力称为视觉重量和视觉感知方…

    2014-12-16
  • Axure RP 8 入门手册 – 第1章(上)

    第一篇基础第1章准备工作与注意事项第1节下载安装Axure RP8第2节原型相关的文件类型第3节文件自动备份与找回第4节功能区域的视图设置前言【网络稿】2015年夏天,经济形势日趋恶劣,小楼所在的公司业务规模大幅缩减,无奈之下,公司决定各部门进行裁员。小楼断然决定主动申请辞职。2015年8月17日,AxureRP8.0Beta版首次发布的日子,小楼提着收拾好的杂物袋,站在公司的门外,看着公司的LOGO墙,旁边是一年前来到公司的大学生苏苏...

    2018-03-29
  • 广告Banner :20种高度可行、转化率高的设计思路

    Banner广告是快速高效的吸引用户的重要手段。Banner广告在网站中通常都占据着不错的位置,它们的转化率和它本身的设计优秀与否息息相关,最重要的是,它要能迅速的吸引用户的注意力,通过优秀的文案和视觉让用户立刻马上点击。今天的文章,我们通过一系列优秀的范例,帮你梳理Banner 广告的20种高度可行、转化率高的设计思路。

    2017-05-03
  • 提升用户体验的12大法器—《从点子到产品》读书笔记

    读了刘飞老师的《从点子到产品》书中关于用户体验的讲解,获益颇多。特此整理Mark一下,也分享给需要的童鞋~

    2018-04-26
  • 为网页设计师 Web 设计编写的简要历史

    编者按:互联网的诞生本就是一个奇迹,作为其中最重要的载体之一,网页就是这个大时代最重要的缩影,相关技术、设计伴随着信息共享催动着整个时代滚滚向前。这是一段简短的网页设计 发展史,我们可以看到技术、设计与思想的演进,看到无数有识之士改变世界的剪影。本文作者是网站Froont.com的联合创始人Sandijs Ruluks。

    2014-12-30
  • 交互设计:超越人机交互(原书第4版)

    本书由交互设计界的三位顶尖学者联袂撰写,是该领域的经典著作,被全球各地的大学选作教材。新版本继承了本书一贯的跨学科特色,并与时俱进地更新了大量实例,涉及敏捷用户体验、社会媒体与情感交互、混合现实与脑机界面等。全书紧紧围绕设计与评估的迭代过程,不仅包含了传统的理论知识、实例解析、实践指导等内容,还通过“窘境”模块讨论了一系列启迪思考的开放问题。此外,本书网站www.id-book.com也为读者提供了丰富的资源,包括教学PPT以及大量的案...

    2018-03-09
  • UI设计师最该考虑微交互的设计

    前言什么是微交互?微交互是用户在完成某个小任务时产生的交互体验。例如,解锁手机就是一个微交互,手机调成震动模式时会震一下也是一个微交互。为什么称为“微交互”呢?所谓的“微”其实就是指的产品的细节设计。微交互正在成为产品设计中越来越重要的部分。正如同Charles Eames曾经所说,“细节并不只是细节,它是构建起整个设计的基本元素。”你的UI和交互设计中的每一个元素都是至关重要的,一个又一个细节设计让你的产品最终脱颖而出,而真正让人难忘...

    2018-04-20