UI设计实例:如何将功能性动画完美融入设计以提升用户体验

来Nick大神关于功能性动画的一篇文章,翻译过来与大家分享一下。


来Nick大神关于功能性动画的一篇文章,翻译过来与大家分享一下。

UI设计实例:如何将功能性动画完美融入设计以提升用户体验

人类是视觉动物,我们天生就会注意到移动的物体。在app和网页中,小动画对我们来说像是眼睛的甜点一样,我们不自觉的就会被它们吸引。近来,越来越多的设计师将动画作为一种功能性的元素来提升产品的用户体验。动画不仅仅是装饰性花瓶的存在了,它成为了提升用户体验的一项重要工具。

然而,动画只有在被合理的使用情况下才可以真正有效的提升用户体验。现如今好的UI动画都有具备功能性。在这篇文章中,我们将探讨如何将功能性动画(functional animation)完美的融合到交互设计中。

什么是功能性动画

功能性动画是一种嵌入UI设计中微妙的动画,有着明确、合理的目标。

  1. 它能减少认知负荷。
  2. 防止页面转换视盲,
  3. 在空间上营造更好的印象。

我们都秉持着“以人为本”的设计理念。用户的焦点在哪里,哪里就应该直观,反应灵敏和人性化。功能性动画能帮助我们实现这一点。

功能性动画在UI设计中所扮演的角色

1.为用户操作提供视觉反馈

良好的交互设计应该给用户的每一个操作都提供反馈,无论成功与否。反馈会使用户觉得自己与屏幕上的元素进行真实互动。功能性动画可以直观的演示出这种互动。即便隔着屏幕,也能让用户看起来是在直接操作。

UI设计实例:如何将功能性动画完美融入设计以提升用户体验

而作为系统,当你需要向用户通知操作的结果时,功能性动画也是一个很不错的选择。当操作没有成功的时候,功能性动画可以给用户一个快速而有简洁的一个反馈。例如,当我们输入密码错误的时候,我们采用来回晃动的效果。这个效果会让我们联想到日常生活中的摆手和摇头,而这些都代表着“no”。这些小细节的使用,是打造良好用户体验的关键。

UI设计实例:如何将功能性动画完美融入设计以提升用户体验

目的:

  1. 确认系统接收到用户的操作;
  2. 确认(或拒绝)用户的行为。

2.当前状态的指示器

给系统当前所处状态提供一个视觉指引是交互设计中最重要的一点。我们应该让用户随时随地知道系统当前所处的状态,而不是让用户去猜。

数据的上传与下载就是一个很好的例子。例如,加载动画会告诉用户系统正在下载数据,而且还显示了下载进程与速度,用户也对完成时间有了一个大致的期望。

UI设计实例:如何将功能性动画完美融入设计以提升用户体验

当系统状态发生重要的变化时,功能性动画也可以用来提醒用户。例如,来电提示。

UI设计实例:如何将功能性动画完美融入设计以提升用户体验

或者,新短信提示。

UI设计实例:如何将功能性动画完美融入设计以提升用户体验

目的:提供实时通知系统状态,并让用户了解正在发生什么。

3.提示

当用户第一次使用你的app的时候,如果没有帮助的话,他们可能会不知道如何操作。

我们应该给用户提供一些视觉提示来告诉他们哪些操作是可行的。功能性的动画可以提示用户去注意那些可以完成的操作。视觉提示可以给用户告知即将发生的事情。例如,iOS7中相机的这个拍摄动画。

UI设计实例:如何将功能性动画完美融入设计以提升用户体验

当一些操作用户不是很容易发现时,功能性动画可以演示出操作步骤。

UI设计实例:如何将功能性动画完美融入设计以提升用户体验

目的:

  1. 通过给用户一些线索来创造期望;
  2. 帮助用户更好的关注界面;
  3. 告诉用户如何能够和应该与界面上的元素进行交互。

4.导航栏的过渡

导航栏的的转换是指app中导航菜单状态的变换。有不同级菜单之间和同级菜单之间的转换。我们要尽可能的减少那些令人意想不到的过渡效果。功能性动画可以解释菜单之间的层级关系,用户明白菜单转换的过程中到底发生了什么。

同级转换发生在同一层级间元素的转换。

UI设计实例:如何将功能性动画完美融入设计以提升用户体验

功能性动画可以聚焦用户的视觉焦点于转换的元素上,用户了解整个转换过程中新的元素来自那里,旧的元素在哪里隐藏。它提供了视觉线索,增加了交互的可用性。

目的:

  1. 阐明界面和元素之间的空间关系;
  2. 通过帮助用户理解页面中发生的变化,避免了令人意想不到的过渡。

5.营造品牌效应

市场上有很多同类型的app,他们有着相同的功能,可能都有着不错的用户体验。但是那些脱颖而出的app肯定在用户体验上走得更远—建立与用户之间的感情联系

功能性动画可以成为一个产品的营销工具,用来表现一家公司的品牌价值或者突出产品的优势。同时给用户一种愉快又难忘的用户体验。比如Lo-Flo Records网站中,这个动画会鼓励用户进行操作,每一帧都精美的图案会让他们期待接下来会看到什么。

UI设计实例:如何将功能性动画完美融入设计以提升用户体验

用户比我们预想中更能注意到页面中的细节,动画作为一种交互元素可以向用户传递一种情感。一个风格活泼可爱的下拉加载动画可以给用户带来一个愉快的用户体验。

UI设计实例:如何将功能性动画完美融入设计以提升用户体验

目的:

  1. 娱乐用户,在用户之间产生情感共鸣;
  2. 创建产品特征;增加品牌意识。

如何达到平衡

页面中每一个动画都应该具有相应的功能,作为一个”花瓶”用来充当美化页面的动画不仅无法提升用户体验,而且动画会降低页面的加载速度。比如下方的一个电子收据动画,这个动画看起来很酷炫,但是它的存在使得用户需要4秒钟才能看到交易细节。这个等待时间显然超过了用户的心里预期。

UI设计实例:如何将功能性动画完美融入设计以提升用户体验

用户点击进入网站或者使用app是带有目的性的,他们肯定是为了解决特定的需求。抢火车票,看nba比赛亦或者是买一双皮鞋。这时候我们的动画应该帮助用户了解这个产品的空间构架,帮助他们更快的了解,更好的操作。动画如果做的太过于绚丽,反而会分散用户的注意力。只有当动画有了意义,用户才不会分心。

再好的动画被过度使用后,也会让用户感觉很厌烦。当我们设计一个动画的时候,要问自己,“当这个动画第100次出现的时候,用户会讨厌还是直接无视?”

UI设计实例:如何将功能性动画完美融入设计以提升用户体验

当我们将动画引入自己的设计时,前期原型图的不断修改和后期用户测试是必不可免的。如果你的原型图上可以完成交互操作,那么就会对整个流程有着一个清晰的认识。你会对动画使用的时机与位置有着很好的理解。当然为了使动画与整体风格兼容,你得不断返工进行修改。重复不断的修改,不断的完善细节会创造出优秀的动画。

总结

功能性动画的每一帧都有其目的,注意每一个细节,让动画成为操作过程中一部分。数码产品的用户体验会因为功能性动画的使用而得到提升。

 

原文作者:Nick Babich

翻译:王M争

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

版权:人人都是产品经理遵循行业规范,任何转载的稿件都会明确标注作者和来源,若标注有误,请联系主编QQ:419297645

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

(0)
CatherineCatherine
上一篇 2017-05-10 10:45
下一篇 2017-05-10 12:28

相关推荐

  • 专业的交互输出文档应该怎么写?

    交互输出文档里面最重要的是做设计时的多方面思考。

    2017-05-03
  • 从单线走向双线,第三代用户体验即将到来?

    双十一在即,加之今年的新零售狂潮,零售业从线上到线下可以说纷纷摩拳擦掌。京东天猫剑指双十一已是老生常谈,值得注意的是,今年的双十一迎来了更多样化的全民购物盛事,比如飞凡推出的“2017飞凡狂逛节”。据了解,与京东天猫等电商大促有所区别的是,“2017飞凡狂逛节”重点是线下逛,与众多剁手党网上拼杀对比,着实令人耳目一新。新零售改革加速,用户体验核心发生质变可喜的是,我们看到零售业巨头和创业者们都在深挖线下。比如今年爆红的无人便利店和无人货...

    2018-02-03
  • UED沉思录

    Q:设计前期至输出时常见问题及解决思路以下分享,全是血淋淋的教训积累与总结。当然也是这段时间在AJK优秀Leader的带领下成长出来的。Q:设计师存在的表象问题?设计方案缺乏理论系统化因需求而丧失设计原则页面结构较为混乱,映射设计思路不清晰页面设计细节打磨程度较低页面制作时参数命名不严谨输出适配的兼容欠考虑Q:设计的根本目的是什么?解决问题Q:设计需要具备哪些能力?洞察力「发现身边的好设计」分析力「分析需求、解决痛点的思路」匠人精神「设...

    2018-03-15
  • 怎样做好汽车交互设计?

    文章来源:汽车造型设计编辑整理:IO酱车内交互系统看似只是整车的一小部分,但由于承担了车辆和用户的“交流”任务,因此里面涉及到的内容很多,每一项拿出来都需要巨幅讨论,今天我们就和大家概括谈谈这里面的几点。目前重点汽车交互设计是决定智能汽车发展水平的重要标志,现阶段智能汽车在此方面关注的主要一点是用户体验。设计流程汽车交互设计的一般流程包括:1. 需求沟通;2. 资料调研;3. 专家评估;4. 用户研究;5. 需求及信息架构梳理;6. 概...

    2018-03-15
  • 【用户体验.春节特辑】理清儿时的记忆 找回逝去的情感(总第270期)

    亦可访问www.koushutianxia.com了解详情编家谱   修家史   留视频建祠堂   亲互动   传万代总第270期生活在这样一个时代,人们追求物质、追求理想、追求个性……而不去回望来路,不去寻求亲情和血缘所带来的归属感。“游子的情怀”和“漂泊的现境”总是让我们不由自主的追问自己:是否我们必须要失去我们最宝贵的东西才能实现自己的人生目标,我们实现自己的人生目标到底又是为了什么?我出生在安徽的一个小城里,由于父母工作繁忙,我...

    2018-02-21
  • 干货贴:To B 系统软件Web端的交互设计总结

    文章分享了作者做了几款系统软件后的一点点总结,希望给大家的产品工作来一些参考。

    2017-05-07
  • 听说,昨天网上打了这么一场营销+公关大战~

    你喜欢我们这些文字的话就推荐给更多的人吧。姐姐先行谢过了!我们公众号是:Aioued,记得分享哦,么么哒! ----------------------------我是一条分割线,你看不见我!-------------------- 正文: 这件事的起因,…

    2014-10-30
  • 【免费试听】成都UI-UE交互设计免费试听课了解一下!

    德阳中公教育官方微信长按关注,了解更多资讯。周一见!周一见!周一见!没错下周一!成都UI-UE交互设计免费试听课开课啦!与其宅在家里浪费时间不如来体验一下UI设计前五天免费试学4月16日--4月20号机会有限,先到先到得哦!UI-UE交互设计是什么?UI-UE交互设计就是指对产品的人机交互、操作逻辑、界面美观的整体设计!为什么要学习UI-UE?人才需求旺盛,成IT行业职位新宠人才缺口大,行业势头发展迅猛虽然UI这么好,但是不仅对人才的需...

    2018-04-11
  • 移动端下拉表单的更好选择

    在表单中使用下拉菜单看起来并不重要:它们在用户界面上占用的空间不大,它们自动验证输入,所有浏览器和平台都可以支持它们,它们实现起来容易且方便,用户知道它们的好。

    2017-04-28
  • 联想实习 | 手机事业部招聘交互设计实习生

    公司简介联想是一家营业额达460亿美元的《财富》世界500强公司,在全球消费、商用以及企业级创新科技领域居领先地位,为用户提供安全及高质量的产品组合和服务,当中包括个人电脑﹙经典的Think 品牌和多模式YOGA品牌﹚、工作站、服务器、存储、智能电视,以及一系列移动互联产品如智能手机﹙包括联想和摩托罗拉品牌﹚、平板电脑和应用软件等。招聘岗位手机事业部-交互设计实习生岗位描述1. 参与联想ZUI手机操作系统的交互设计;2. 参与产品的规划...

    2018-04-21