从注意力维度谈动效设计

从注意力维度谈动效设计 时间:2014-11-16 14:48 来源:百度MUX 作者:nandier   近年来,随着ios和android系统对于动效设计的带动效应,多数产品对于动效设计也越来越重视,从app引导页到动作反馈,从官网介绍到hover效果,动效设计似乎已经成为一个成功产品的标配。
但是动效也不是越绚丽越好,过于绚丽的动效对于我们的设计目标来说也许会适得其反,用户可能只关注到了动效本身,而没有精力或时间去关注动效要传达的信息,而
如何把握这个度,本文会从以下几个方面来讲。   一. 是什么吸引着用户的注意力?   从看到一个页面的瞬间开始,如果在展示面积相同的情况下,用户的注意力会按照一个特定的顺序依次被吸引:动态>颜色>形状。   简单来说,当用户打开一个界面,注意力
首先会被动态的物体吸引,当动态静止或者是个很有规律的动态时,注意力会转向颜色对比强的部分,最后才是形状。这一过程是人在进化过程中形成的本能反应,基本适用所有用户。同时一个非常重要且容易被
忽略的原则:用户的注意力是有限的,而且越来越少。很可能在用户注意到一段动效之后,注意力和耐心已经用尽,无法看到其他内容就着急去下一个界面了。所以,对于动效这样一个非常强势的工具,一定要用在希望用户注意的部分。   二、动效吸引注意力的核心维度   一个动效对于用户的注意力吸引有多强,可以分为两个核心维度,动效的展现面积与持续时间。展现面积越大,动效持续时间越长(包括单一动效与复合动效),用户注意力越能够被吸引并持续。将两个核心维度构成一个二维图表,形成的四个象限可以代表四类不同的动效:   1.相对面积大,动效持续时间长   此类动效多应用在app的介绍页或者官网的产品介绍页,力图通过动效冲击视觉,给用户留下深刻印象。这里由于大部分画面都是动态,其余静态的小部分很可能被
忽视。
例如,多数页面都在图形中加入动效,而文字部分是静止的,如果有信息是希望能够通过文字表达,这时就会起不到作用。用户只能记住“炫”,至于要表达什么则基本不懂。所以这类动效在使用时,要注意是否会影响页面信息传达。   Reebok Fall/Winter ’14 Lookbook 页面中,整个页面都有长时间动态效果,用户注意力基本停留在页面中的人物动作上。而其中的产品展示部分,虽然也有动效引导,但用户的注意力都在想看完所有场景上,没有多余的注意力给页面中的产品。
不过,这样的页面安排在传统企业网页中是常见也合理的。因为这个页面的核心目的就是品牌宣传,让用户感受到Reebook是多么酷的一个运动品牌,根本也没指望页面中的产品链接能够带来
多少销量。而多数互联网产品的此类页面还要解决功能阐述,所以要慎重设计。   2.相对面积大,持续时间短   动效展示面积大,时间却比较短,是希望用户注意集中在动态部分一瞬间即可,这类动效设计师都比较熟悉,多用于界面之间的切换。大范围短时间的动效很难看清,所以这类动效更多为展现界面之间的空间关系。值得关注的是,由于用户会不自主关注动态部分,所以即将出现的界面应该是动态的,这样注意力会顺畅衔接到后出现界面,否则会出现“注意力跳跃”。   在如上界面中,侧边栏的展开过程就会出现“注意力跳跃”。在点击侧边栏按钮后,用户注意力会集中在整个界面向右移动,而后随着动画的结束,注意力还要回到底层的深色界面,导致了视觉流的不流畅。   3.相对面积小,动效时长短   此类动效可以用“轻”来描述,通常是来进行比较“轻”引导、反馈和提示。核心是不希望打断主流程,而又能轻微吸引一下注意力,情感化设计也最适合在此发挥。   亚马逊客户端点击搜索后,菜单按钮会向右移动,返回按钮随之进入。这里的动效稍微提示了一下“返回”的出现,同时又没有抢走用户对搜索的注意力,恰到
好处。   在Shine中的loading动效是一个小人在不断游泳。而 Google搜索App中,如果切换到横屏再切换回来,logo就会好像被你弄歪一样。这些小动效都为产品的情感化起到了很好的作用。   4.相对面积小,动效持续时间长   一个较小面积上会长时间存在动态效果去吸引用户注意,这意味着此处的动态效果本身是非常重要的,值得用户保持关注,此类基本都与用户此时关注的功能直接相关。   雅虎天气中的风车转动,美乐时光的动态按钮,都是
体现了产品功能或状态,这样的动效虽然一直持续的吸引注意,但是由于面积较小,所以并不会对其他功能使用产生过多干扰。动效的展现面积会非常需要好好斟酌。   三、总结   动效是最夺人眼球的工具之一,正确的使用会在与用户的对话中起到很好的引导。不过也正因为它的强势,所以一定要梳理好设计目标,不要让其变为干扰,毕竟用户的注意力和时间都变得越来越少,我们要做的是更合理的利用动效来传达我们的信息。

时间: 2024-10-14 09:04:00

从注意力维度谈动效设计的相关文章

动效设计如何从四个维度吸引你的注意力?

  动效设计正当红火,不过有很多同学担心驾驭不了它,容易被它喧宾夺主,今天百度的同学就从注意力这个角度给同学们聊聊,动效能从哪四个维度来吸引用户注意力,针对这几个维度,设计师该如何运用好动效设计,好文一篇,点赞别忘了艾特小伙伴. 近年来,随着ios和android系统对于动效设计的带动效应,多数产品对于动效设计也越来越重视,从app引导页到动作反馈,从官网介绍到hover效果,动效设计似乎已经成为一个成功产品的标配.但是动效也不是越绚丽越好,过于绚丽的动效对于我们的设计目标来说也许会适得其反,用

超多干货的UI界面动效设计指南

腾讯同学的教程一向都是良心之作,今天这篇长文收罗了常见的UI动效设计方法,不仅有案例,而且分析透彻入微,从表现形式到动效的作用,对用户产生的影响,都有全面专业的解说.今年动效也是一大热门,想自我提升的同学可以放手来学习了. 概要 xavieryuan:UI是基于静态页面来设计的,页面之间通过跳转切换.在设计过程中,设计师很重视单页的视觉效果,却经常忽略了对界面跳转的处理.这些未经处理的跳转由于没有提供足够的预期,所以用户在使用时经常会觉得困惑.与此相反,在卡通领域,由于使用了足够的动画效果,用户

我们为什么需要动效设计?

  最近越来越多的国内公司开始关注动效设计了,越来越多的团队意识到动效在产品用户体验中的重要性.但是为什么需要动效设计?需要什么样的动效?做动效设计也有段时间了,于是尝试用一些案例,从产品本身出发来说说我所思考的动效设计. 随着国际大品牌苹果和谷歌的引领,最近越来越多的国内公司开始关注动效设计了,越来越多的团队已经意识到动效在产品用户体验中的重要性了,更多的射鸡师们也开始投身动效设计领域. (文中部分案例为设计师个人作品,部分为线上产品,都是我非常非常欣赏的作品.如不慎冒犯请戳我替换掉) 一.加

APP动效设计分为哪几种?

  编者按:什么样的动效让人舒服,什么样的动效让人一下就想到某个产品,什么样的动效让人沉浸其中?今天百度的同学从这三个维度,分别聊聊对应的APP动效设计,想给用户一个惊喜的同学,来涨姿势吧. 如果把APP比作一位美女,那么icon是她的证件照,界面是她的形体,而动效则是她的肢体语言.在如今玲琅满目的App中,如何脱颖而出?设计师要考虑的,不光是产品如何更合理的展现结构与功能,更重要的是思考自己的App是否能做到简便易懂的同时,又给用户新颖感? 此时,有限的屏幕空间紧靠文字的提示是不够的,App需

动效设计富有未来科技感

  基于情景的消隐           小编推荐:动效设计让你的设计富有未来科技感 这是iOS上的Chrome,有着基于情景的消隐动效. 当向下滚动时,导航控件自动消隐.用户向上滚动时,导航控件出现.优设哥发现这一点上,腾讯网的新闻详情页已经采用了.案例围观地址(上下滚动鼠标滑轮,注意页面顶部导航的变化):http://news.qq.com/a/20131104/001730.htm .这种方法既能提高浏览体验.也拓展了有限的浏览空间.这对于空间限制较大的移动设备来说,尤为重要. 用户会快速扫

动效设计的物理法则:动画的一切皆在于时间点和空间幅度(转)

动效作为当今提升网页感官效果的利器,在各种类型的网页中已经全面开花,如何做到自然流畅让用户感觉舒适的动画效果呢?今天就来跟大家聊一聊动效设计的物理法则,以及它是如何应用的. 首先来一发大师金句,迪士尼动画大师格里穆·乃特维克曾经说过: 动画制作和动效设计是本质相通的,我们需要为用户建立一种"视觉的真实",即动作是可信的,我们需要获得的不是照搬线下场景的写实主义,而是"可信度",要让用户感知到这个动作是成立的.这里,就要搬出高大上的物理学了! 物理学四大基本力--万有

绝佳的网站动效设计案例欣赏

  如今很多网站的动效设计已经从简单的下拉菜单转换到富有吸引力的动画背景和视觉滚动差.好的动效设计可以让网站变得非常有趣,忍不住多停留一会.

9个移动动效设计必备的灵感收集站

  扁平化的兴起,现在越来越流行动效设计 ,特别对于移动端,对交互动效要求是很高的,今天为大家整理一些以展示动效为主的网站,对交互设计师来说是很好的灵感发源地. UI Movement UI movement此站更新比较快,主要展示移动APP的动效界面为主. Motions motions的动画作品大部分交互摘自 Dribbble,所以质量有保证.界面不仅是APP,还有其它GIF动画 Design Patterns Design Patterns是Codepen的一个频道,主要对一些交互友好的代

学学这些爱不释手的加载动效设计

  我们现在越来越注重细节,小到加载动画,大到界面配色.这些都会成为用户吐槽的地方,一个不小心,你设计的东西让用户反感了,他们说不定就要和你的产品说拜拜了.所以今天我们要重点说说那些你以前觉得"不那么重要"的加载设计. 等待和加载动效几乎是无处不在了.设计师和设计机构都很清楚,加载动效几乎是目前网站和APP设计中无法绕过且必须的组成部分,它们不仅是大势所趋而且是打造优秀用户体验 的必须组件. 虽然目前很多产品将加载/等待动效作为强化用户第一印象的组件,但是它的实际使用范畴远不止于这一部