如何利用动效提升用户体验

我们不再是设计静态的屏幕,用户将会从我们的设计中看到实际的内容。


我们不再是设计静态的屏幕,用户将会从我们的设计中看到实际的内容。

如何利用动效提升用户体验

动画可以讲述故事。不是很长很复杂而是很简单的故事,而像是 “嘿,你现在要看看这个!” 或 “哇,你竞争成功了!”。然而,动效的目的不是娱乐用户,而是帮助他们理解发什么什么事,或者如何有效的使用你的软件。在Zurb的叙述中很清晰的表明了:我们不再是设计静态的屏幕,用户将会从我们的设计中看到实际的内容。

如何利用动效提升用户体验

  图片来源:Barthelemy Chalvet

动效可以广泛用于统一美感和功能的平衡,它可以影响行为、沟通状态、引导用户和帮助他们查看自己行为的结果。下面是一些例子,是在一些方面可以增加动效改进UI的经验:

加载不再无聊

如果你不能缩短加载时间和无聊的旋转图标(基本上只是提醒用户正在等待),那么可以用动效代替等待的时间,应该尽力让等待变得更加愉快。几乎任何网站或者app会利用屏幕的线框图上微妙的动效让用户在等待期间参与进来。

如何利用动效提升用户体验

屏幕线框图在内容完全加载之前完成UI。图片来源:tandemseven

不能削减设计状态的变化

动效可以使转换更加明显,用户明确知道开始到结束发生了什么。一个好的过渡设计会让用户清楚的理解他们的注意力应该在什么地方。

Adrian Zumbrunnen
上有个很好的滚动动画的例子,当用户点击一个链接时,帮助用户联系上下文。只是一个普通的静态页面感觉会很生硬:

如何利用动效提升用户体验

直接切换感觉很不自然,用户很难接受这种变化。图片来源:smashingmagazine

带有动效的行为:

如何利用动效提升用户体验

动效就是贴近生活。图片来源:smashingmagazine

如你所见,转换帮助用户加快理解界面。它还可以引导用户下一步的交互。

解释元素之间的关系

动效可以增强直接操纵的感觉。

例如,一个菜单图标和一个播放控制图标可以来回切换。这种动效应该在添加交互时通知用户按钮的功能。转换播放图标到暂停,意味着这两个图标是连接着的,当一个存在时另一个不存在。

如何利用动效提升用户体验

在这个情况中,屏幕中控制音乐的位置的动效很吸引眼球。图片来源:Material Design

另一个例子,当按下浮动按钮时,加号变成一支铅笔。这表明了铅笔是主要的操作。这个小细节在猜测接下来发生什么和图标在不同状态下的含义总是不同的。

如何利用动效提升用户体验

图片来源:Material Design

用动效反馈来说明问题

动效可以增强用户的操作。

例如,表单输入可以用动效进行增强。如果输入正确可以用一个简单的点头动效。而当输入不正确则水平摇晃。当用户注意到这个动效就会立刻理解行为。

如何利用动效提升用户体验

形式上在在向你摇头。图片来源:Michaël Villar

用动效反馈老展示已经完成

动画可以帮助人们理解他们行为的结果。遵循的原则:”展示,而不是说。”,你可以用动效反馈已经完成。

在下面的例子,当用户点击”支付”,一个短暂的转轮显示成功的状态。检查动效让用户觉得他们容易的进行了支付,他们希望有这样重要的细节。

如何利用动效提升用户体验

图片来源:Michaël Villar

总结

在一个复杂的情况下动效是很强大的。花时间考虑动效的存在是很重要的。我们需要从研究运动开始,考虑设计中必须的动效,因为设计不仅仅是视觉的呈现。就像Steve Jobs 说过关于设计的一句话:

设计并非外观怎样或者感觉如何。设计是解决它是怎样工作的。
谢谢你们。

 

原文作者:https://uxplanet.org/@101

原文地址:https://uxplanet.org/how-to-use-animation-to-improve-ux-338819e93bdb#.8z12f07cx

翻译:厉嗣傲

译文地址:http://www.ui.cn/detail/184656.html

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

(0)
CatherineCatherine
上一篇 2017-05-16 07:01
下一篇 2017-05-16 08:48

相关推荐

  • 蓝鸽集团2018校园招聘,多岗位,提供食宿,年薪8-20万!

    蓝鸽集团是一家专业从事语言教育技术的高科技. 集团化企业。目前拥有5个子公司. 1个研究院. 3个科技园。在全国30多个省. 市. 自治区设立了200多个分支机构,现有员工1000余名,是我国语言教育技术行业的龙头企业和第一品牌。蓝鸽在2006年与广东省电视台合作承办了国家级“英语辅导”电视台。2008年被认定为国家级高新技术企业。2013年经国务院批准设立博士后工作站。2015年第一个研制成功了具有物联网功能的智能化多媒体教室。201...

    2018-04-08
  • 交互设计 | 张艺谋这样玩儿

    3 月 4 日,张艺谋导演的观念演出《对话·寓言 2047》在上海大剧院正式演出。在连演两场之后,他们将移师广州和杭州,共同组成《对话·寓言 2047》第二季的演出。尽管被称为第二季,但此次演出的内容与去年 6 月在国家大剧院上演的第一季大体相似。开场仍旧是 71 岁的蒙古族老人其布日一边编织着麻绳,一边唱着悠扬的蒙古长调。背景中,美国先锋艺术家 Daniel Wurtzel 利用空气动力学原理,让一块云纱在舞台上翩翩飞舞。在这个段落之...

    2018-03-06
  • 用户体验地图为什么这么好使?来看蚂蚁金服的实战案例就知道了

    用户体验地图(experience map)作为一种常见工具能够让工作更加顺畅,用户体验地图就起到了一个很好的团队协作作用,产品、设计、开发都能够通熟易懂,便于梳理清楚产品的架构和使用流程。作者|蚂蚁金服UED源自|设计夹但是体验地图到底能解决什么问题,该怎么用呢?很多同学也许并不太了解。这次分享主要是将我们在各类渠道了解到的关于用户体验地图的各类说法做了一个总结,并结合了我们在工作中的实际运用,给有兴趣了解该方法的同学提供一点我们的见...

    2018-03-09
  • 尼尔森十大交互设计原则的实际应用解析

    Jakob Nielsen(雅各布·尼尔森)的十大交互设计原则被称为“启发式”,因为它们是广泛的经验法则,而不是特定的可用性指导原则。因此,我们不能把它上升为一种标准,而是应该当做一种经验来学习,然后跟现实中的设计结合来使用。接下来,作者通过一些具体的实例来跟大家深度解析尼尔森十大交互设计原则在设计中的用法。Jakob Nielsen(雅各布·尼尔森)是毕业于哥本哈根的丹麦技术大学的人机交互博士,他拥有79项美国专利,专利主要涉及让互联...

    2018-02-16
  • 深入业务和用户中做设计:58APP二手车大类页改版

    今年我们发起了一轮关于58APP各业务线大类页的改版优化,二手车便是其中一个。旧版二手车大类页已连续被用户使用一年多,然而业务属性与用户需求早已发生改变。作为交互设计师,需要在稳定提升大类页功能数据的前提下,重新对页面进行体验升级。

    2017-05-14
  • [ISUX转译]设计追波风

     设计追波风 这些天气app中,只有一个试图解决用户的实际问题 现在的产品设计和交互设计界发生了一些奇怪的事情。一方面有着如 Ryan Singer 和 Julie Zhuo 这样能写出很赞的文章的人来推动我们设计水平的发展。另一…

    2015-04-16
  • Axure官方教程中文版第6课:条件、值及变量-木卫艾欧网原译

    https://www.iamue.com/wp-content/uploads/video/Axure.com-learn(6).MP4 新建文件 1、添加一张图片和按钮 2、添加条件保证文本框不为空 3、文本框的变量值 4、添加打开“Page1”的动作 5、添加文本字段为空的第二个…

    2015-01-26
  • 登录表单的那些事儿

     雅婵总结并供稿于我是UE网,转载请注明来自我是UE网。

    2015-06-12
  • 设计师们,停止不必要的UI动效设计吧!

    这篇短文将会探讨UI设计中动画的过度使用,并将其与早期的视觉设计进行对比,提出一些对于有效的GUI动效设计的建议。我们将在下文中,简单探讨如何改善下面的这个交互。

    2017-05-14
  • 为何设计师要学会做版本控制?

    XX项目视觉稿.PSD

    XX项目视觉稿新版.PSD

    XX项目视觉稿最新版.PSD

    未标题-1.PSD

    XX项目视觉稿最终版.PSD

    我已经不想做了.PSD

    XX项目视觉稿这个一定是最终版.PSD

    XX项目视觉稿最终的最终版.PSD

    这稿坚决不改了就这么着吧.PSD

    这个标题是凑字数的.PSD

    2017-05-24