动效在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

相关推荐

  • 怎么免费学习 UI/UX 设计?

    一些资料是英文的,需要一点基础,如果看不太懂可以使用谷歌翻译之类的工具辅助一下,有的图书也有中文版,自己在亚马逊上搜索英文名即可。 我从来没有去一所设计学校。但我只是喜欢做的事情。 3年前,我开始了我自…

    2016-06-09
  • 电子书阅读APP原型设计解析

    我是比较喜欢纸质书的,一本好书,我总愿意买本纸质书,放在家里可以随意翻看,或一遍,或多遍,偶尔也会当花瓶放着。 阅读纸质书是视觉,听觉,触觉,嗅觉的享受,甚至连带着回忆都是美好的。 柔和不刺眼的纸张带…

    2015-06-11
  • Push!请给用户一个打开APP的理由

    大多数APP的推送都是使用不当的。

    2016-04-21
  • 微信小程序设计指南 · 小程序

    概要 基于微信小程序轻快的特点,我们拟定了小程序界面设计指南和建议。 设计指南建立在充分尊重用户知情权与操作权的基础之上。旨在微信生态体系内,建立友好、高效、一致的用户体验,同时最大程度适应和支持不同…

    2016-09-24
  • QQ空间是怎么设计直播功能的?

    什么?空间也做直播了!没错,在当今直播的热潮下,国内外的直播产品大都是基于陌生人的关系链,且内容结构与视觉效果同质化严重。如何让用户更好的分享生活?如何为用户提供差异化的内容消费?如何给用户更多新鲜趣味的互动玩法?这是我们做直播希望解决的问题。
    Qzone依托自身优势,另辟蹊径地发掘基于好友关系链的直播场景。与此同时,我们不断探索更符合空间用户直播的设计形态,发掘与竞品的差异点,寻找直播的下一个突破口,通过系统化的设计,为用户提供非一般的直播体验。

    2016-07-27
  • 『设计|交互设计』2018年交互设计趋势解析

    本文转载自:设计前沿2018年交互设计趋势解析2018视觉趋势Pantone 2018流行色:紫外光色Pantone 官方翻译为「紫外光色」,紫外光色是强烈挑动思绪与深思的紫色调,传达独创性、创造力及前瞻性思维,为我们指向未来。彩通:18-3838 紫外光色颜色代码:#5f4b8bRGB:R 95,G 75,B 139CMYK:C 71,M 73,Y 7,K 8从2017年下半年开始,紫色配色的作品开始很多,所以2018年这个色也是一个...

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

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

    2017-05-01
  • 交互设计用户模型建立

    点击信息与交互设计关注我们!Persona交互设计用户模型建立:一、什么是用户模型?Persona([pə:'səunə]):(Persona是用户模型的的简称)是虚构出的一个用户用来代表一个用户群。一个persona可以比任何一个真实…

    2017-08-01
  • IxD案例作品分享:我来也”APP概念设计及动效设计

    本作品作者是来自站酷的设计师羊羊羊8571,本文经过作者本人许可。 转载请与作者联系!取得授权。 “我来也”是一款基于手机LBS属性的移动点名签到应用,利用手机应用解决了老师课堂点名,活动签到,会议签到!在工作…

    2015-07-29
  • APP特有的交互设计模式解析

      1、触屏滑动操作,移动APP端最基本的操作方式。 (1)屏幕之间或者页面直接的自由滑动切换 比如手机移动端的界面切换效果,可以滑动使用快速友好的切换 (2)滑动条目经行删除 横向滑动条目的操作犹如一汪清…

    交互设计 2015-08-19