动效在UI设计中的三个关键用途

动效的强大之处在于,它将设计以更为成熟的方式呈现出来,它赋予设计以生命力,让产品脱颖而出。


动效的强大之处在于,它将设计以更为成熟的方式呈现出来,它赋予设计以生命力,让产品脱颖而出。

动效在UI设计中的三个关键用途

随着技术和硬件设备性能的提升,动效已经不再是视觉设计中的奢侈品。动效不仅仅是华丽的动态效果,它首先帮助设计师和用户解决了许多界面功能上的问题,让这用户更容易理解产品,也让设计师更好的表达。动效本身还让整个界面更加活泼,充满生命力,更加自然的相应让就用户和界面之间有了情感的联系。

动效对于UI界面在功能和情感上的强化到底有哪些呢?今天的文章,我们从三个方面来聊聊这件事情。

1、系统状态

每个APP 为了保证正常的运行,后台总会有许多进程在进行着,比如从服务器下载数据,初始化状态,加载组件等等等等。做这些事情的时候,系统总是需要一定的时间来进行的,但是用户看着静止的界面并不会明白这些,所以需要借助动效让用户明白,后台还在运行,在处理数据。通过动效,从视觉上告知用户这些信息,让用户有掌控感,是很有必要的。

加载指示器

对于许多数字产品而言,加载是不可避免的。虽然动效并不能解决加载的问题,但是它会让等待不再无聊。

当我们无法让加载时间更短的时候,我们应该让等待更加有趣。

充满创意的加载指示器能够降低用户对于时间的感知。动效会影响用户对于你的产品的看法,它会让界面比实际上看起来更好。

动效在UI设计中的三个关键用途

如果一个APP在用户等待的时候,给他们看更有趣的东西,他们自然会忽略等待本身。

下拉刷新

另外一个著名的动效是下拉刷新,当触发这个动效之后,移动端设备会更新相应的内容。

动效在UI设计中的三个关键用途

小贴士:下拉刷新动效应该和整个设计的风格保持一致,如果APP是极简风,那么动效也应当如此。

通知

由于动效会自然的引起用户的注意力,所以使用动画化的方式来呈现通知是很自然的设计,它不会给用户带来太多颠覆性的使用体验。

动效在UI设计中的三个关键用途

2、导航和过渡

动效最基本的功用是呈现过渡状态。当页面布局发生改变的时候,动效的存在会帮助用户理解这种状态的改变,呈现过渡的过程。一个经典的案例就是汉堡图标呈现隐藏菜单的过渡动效。

动效在UI设计中的三个关键用途

动效能够有效的吸引用户的注意力,让用户在愉悦的氛围中获取信息。

虽然汉堡的动效是用户最期待的,但是能够强化导航的动效并不只有这么一种。

可导航内容之间的过渡

设计师使用动效平滑地让用户在不同的内容之间过渡、切换,而动效也解释了UI的变化是怎么发生的。

动效在UI设计中的三个关键用途

过渡动效是UI不同状态的中介环节,它帮助用户理解。

视觉层次和元素的连接

动效可以完美的解释界面元素之间的关系,并且阐明它们是如何完美的进行交互的。

动效在UI设计中的三个关键用途

功能变化

在许多案例当中,设计师会强行设计一个可点击的按钮,在特定情况下,功能会发生改变。在移动端设计中,由于屏幕空间的限制,我们常常会看到这样的按钮。

动效在UI设计中的三个关键用途

“播放”和“暂停”是最常见的多状态切换的实例。

这类动效展示了用户在交互的时候,元素是如何发生转变的。在下面的案例当中,用户点击按钮,加号变为铅笔图标。这表明展开后的交互列表中,铅笔所代表的是首要操作。这样的小细节呈现出了可预期的下一步交互。

动效在UI设计中的三个关键用途

3、视觉反馈

视觉反馈对于任何UI界面都是非常重要的。视觉反馈让用户觉得一切都尽在掌握,可以预期,而这种掌握意味着用户能够明白和理解目前的内容和状态。

确认

用户界面元素,诸如按钮和控件,应该看起来是可点击的,即使它们实际上是在屏幕背后。

在我们的现实生活中,按钮和各种控件都会对我们的交互产生响应。人们期望在界面中获得类似的反馈。

为了解决这个问题,设计师引入了视觉化的动效来提醒用户,让这些虚拟的按钮看起来能像真实的那样有反馈。

动效在UI设计中的三个关键用途

视觉化地呈现操作后的结果

动效可以强化每一个交互的结果并且提升用户交互。在下面的Stripe的案例当中,当用户点击“支付”的时候,会有一个短暂的过渡动效,这个动效让用户更加欣赏这个过程也让支付显得更加便捷轻松。

动效在UI设计中的三个关键用途

结语

动效的强大之处在于,它将设计以更为成熟的方式呈现出来,它赋予设计以生命力,让产品脱颖而出。

 

原文作者:Nick Babich

原文地址:uxplanet

译者:@陈子木

译文地址:http://www.uisdc.com/3-key-uses-for-animation

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

(0)
CatherineCatherine
上一篇 2017-05-07 06:21
下一篇 2017-05-07 08:37

相关推荐

  • 空状态的设计值得更多关注

    空状态,或称零数据状态,很多时候不太招设计师的待见。我们基本都是在主要流程界面的设计工作完成之后才会回过头来考虑完善一下,因为从表现上来看,空状态给人的感觉就是临时性的,有些微不足道。“用户会尝试多个同类app,然后在接下来的3到7天内决定其中的哪些不合适。对于’像样的’app,一旦用户决定保留超过7天,那么将会比较长久的存留下去。成功的关键在于怎样使产品在这3到7天当中保持与用户的良好互动。” Ankit Jain – Quettra“很多时候,人们放弃一款产品的原因其实都是我们可控的,例如他们无法一目了然的看出与你的app产生互动之后能给他们带来什么好处。” – Patrick Mckenzie

    2017-06-05
  • app反馈信息的交互设计

    请戳“小白的交互设计”,关注我,么么哒。反馈的作用是帮助用户理解系统行为,合理的反馈就像两个用普通话交流的人之间的对话,互相可以轻易地理解,而糟糕的反馈就像是一个用普通话,一个用粤语的两个人之间的对话…

    2017-08-02
  • 一套交互设计工具推荐

    刚开始接触交互设计往往会面临自己的想法找不到合适的方法输出。所以完成基本工作同时也在积极寻找、学习适合自己又和工作环境相匹配的工具。与团队成员配合的时候没有人会在意你是用什么工具,成员们只想看到设计师产出的输出物。这个时候针对不同任务类型和团队大小找到合适的工具可以让设计师迅速输出团队想要的结果输出物,事半功倍。

    2017-05-28
  • 为什么要考虑用户场景?

    这是个特别好的问题,因为我在还是新手的时候对这个问题也很疑惑。用户在哪个场景下用关我屁事啊?我只需要用户用得爽就行了嘛。

    2017-06-01
  • IxD-IxDSchool百科

    IxD Interaction design  交互设计 很多人在问:IxD是什么意思?,IxD中文意思是交互设计 国外一般称之UX或IaD,国内一般称为交互/交互设计 标签:IxD是什么意思  

    交互设计 2015-01-05
  • 【交互体验】让你事半功倍的交互体验自查清单

    点击上方“蓝字”可以订阅哦!小编推荐:刚画完的原型自我感觉良好,当到了评审的时候发现在用户体验槽点非常的多。如果你遇到上面的情景,那么这篇文章对你绝对有用。事不宜迟,请看下文。体验清单起因去年底看朋友出国前用‘穷游清单’给自己列清单,她说列的清单可以帮她在出行前检查一下是否有遗漏东西,避免因遗漏东西使整个旅行变得很糟。既然旅游清单可以使旅游提前避免问题发生,是不是我们在工作中也可以采用这种方式使自己的产出物交付前保证万无一失。在平时设计...

    2018-01-30
  • 双十一之购物车体验

    今年的双十一,你剁手了吗?不管你剁不剁,反正我是剁了。剁手的同时,不妨来看看,电商购物车的哪些设计让你剁了还想剁。本文主要讲四个电商网站的购物车,分别是淘宝、京东、唯品会和聚美优品。

    2017-06-01
  • 游戏交互设计心得分享:从代入感与反馈感入手提升打击体验

    前言经常听到一些设计人员、产品经理、甚至是一些交互体验”大师“的言论——【这个操作太麻烦了,需要操作好几步,体验太差了!】亦或者【这个功能藏的太深了,你有考虑过用户体验么?】之后不知怎么的,设计游戏或者软件的人员经常会把这几句话挂在嘴边。无论做什么,3句话里面保准带一句上述“金句“。所以近段时间,你会发现打开一个游戏或者软件,第一眼的界面,功能堆积,眼花缭乱,不知从何下手。我觉得,经常拿着两句话一刀切的人太幼稚,太低级了。所以我今天斗胆...

    2018-02-20
  • 被忽视的重彩-交互设计验证

    每次评审,都是一场高效的讨(si)论(bi)大会...届时,需求、设计、开发也会上演争霸对决。作为身经百战的设计师该如何从评审会中顺利脱身,逃离这场没有硝烟的战役呢?小子很高兴地告诉你:你是绝对跑不掉的!定性、定量挖掘数据我们知道产品都有一定的周期性,开发期-成长期-成熟期-衰退期。在不同的产品周期中用户也会随着时间的推移,对产品的使用深度和理解广度有了深浅的层次变化,而不同的时期设计师采用的定性定量研究方法也是不一样的,如:访谈、问卷...

    2018-04-18
  • FAB实践分析:设计中的悬浮按钮

    如果要在应用程序中使用FAB,则必须仔细考虑应用程序的设计,并将用户的可能操作归结为一个最突出的功能。正确使用FAB,最终会给用户带来惊人的帮助。为了促进操作,不要一味使用FAB!用户必须记住它的含义。FAB可以改善屏幕之间的转换

    2017-05-01