用户体验设计中的功能动画

一位优秀的用户体验设计师能够轻松地解释设计概念中每个决策背后的逻辑。包括信息架构、页面内容结构、流程及假说。动画迟早会被融入线框图中,但在做设计决策或解释它们的时候,就会略显尴尬,因为理由基本上就是“这很酷啊!”或者“这很流行”“多有意思”,这些理由使得设计一开始就毫无说服力。在考虑设计时,我们应该更加深入地研究动画,就像解释其他设计元素那样,有依据地定义动画并解释其目的。→什么是功能动画?功能动画是一种微妙的动画,我们将它嵌入到用户界...

一位优秀的用户体验设计师能够轻松地解释设计概念中每个决策背后的逻辑。包括信息架构、页面内容结构、流程及假说。

用户体验设计中的功能动画

动画迟早会被融入线框图中,但在做设计决策或解释它们的时候,就会略显尴尬,因为理由基本上就是“这很酷啊!”或者“这很流行”“多有意思”,这些理由使得设计一开始就毫无说服力。在考虑设计时,我们应该更加深入地研究动画,就像解释其他设计元素那样,有依据地定义动画并解释其目的。

→      什么是功能动画? 


功能动画是一种微妙的动画,我们将它嵌入到用户界面设计中,是设计流程的一部分。

不同于迪士尼工作室动画或电脑游戏动画,功能动画有着明确的逻辑目的,支持解决方案,传达设计概念。功能动画是用户体验设计库中的又一个工具。

完美情况下,我们应该能根据一组定义好的逻辑目标来验证功能动画。如果设计中的某一特定动画能符合逻辑目标,那么它就是有效的功能动画,它的存在就是合理的。但如果不符合目标,那就可能是多余的,需要重新考虑。

在过去的一年里,我经历了大量的项目,总结出九种逻辑目标以验证功能动画。通过检验,定义好的动画都至少能够符合这九种目标之一。

这在其他方面也有点用处:当一个动画不满足功能目标时,通常让人感觉怪怪的或恼人的。下面就是我收集的这九种目标,希望能帮助你验证自己设计的动画。

 用户体验设计中的功能动画 指向性  


     

方向照亮结构。导航中的动画能够反映网站的信息架构。这类动画背后的逻辑是保持用户的方向感,帮助用户理解页面布局的变化:是什么触发了变化以及如何在需要时再次触发。

一个经典的例子是切换隐藏内容按钮。点击按钮,出现隐藏面板,关闭面板又回到操作按钮。

第一次使用时用户可能无法预测即将发生的互动,隐藏面板逐渐变大的开启动画让用户有了方向感,并且不会觉得离开了页面或内容忽然不见了,他们仍旧掌控着发生的一切。关闭动画让用户把缩小的面板和操作按钮联系在一起,这样下次他们就知道如何再次打开面板了。

逻辑目标:避免突然的过渡,并引导用户。

示例:

用户体验设计中的功能动画


用户体验设计中的功能动画 同一位置的不同操作


      

一个众所周知的可用性原则:网站的设计要和内容要保持一致。一个一致的网站是可预测的,也就是可学习的。这个原则不仅适合操作按钮,也适合其它方面。

某些情况下,通常是在设计空间有限时,我们不得不设计功能发生变化的操作按钮。因此,如果用户已知某一操作按钮的原有功能,还需要知道新功能。

“保存”和“编辑”按钮可能是最常见的转换按钮的案例了。因为这两个动作是相互矛盾的关系,背景相同,因此是十分简单的案例。如果两个动作之间没有明显的关系,就会面临可用性挑战,这也是功能动画起到作用的地方。

逻辑目标:在操作按钮上强调功能转变

示例:

用户体验设计中的功能动画

 用户体验设计中的功能动画 放大  


     

第三类动画与前面提到的“指向性”动画有些相似。在此类动画中,用户选择列表中的一个标签,放大观看细节(会覆盖列表),然后还能返回看整个列表。

通常会在图片库、卡片、项目栏中出现这种情况。用户会选择一个标签然后马上看看与之相关的具体内容。

这里面临的挑战是要让用户感觉仍在控制状态,并能够保持在给定环境中,这种情况下肯定需要功能动画。

在研究大量的此类功能动画时,我注意到一种常见模式,如果精确实现,可以提升动画效果:

01  初始状态是各项的原始列表

02  每一项都设计独特的视觉线索,比如主色、标识、粗标题或缩略图。

03  当用户做出选择,视觉线索就会出现在新页面的明显位置。比如,某项的颜色是整个页面的主色调,标识在页面标题的位置,名称是页面中更大更明显的标题。

04  打开的新页面上要有醒目的关闭按钮,如“取消”“关闭”“返回”或“X”。

逻辑目标:缩略图与详细视图相关联

示例:

用户体验设计中的功能动画


 用户体验设计中的功能动画 视觉提示


视觉提示有助于用户更好地理解如何与产品互动,当产品包含非常规内容或独特的导航方式时尤为需要。

打开一个页面时,会很容易发现这种功能动画——突然触发一次快速动画,演示某一操作功能。

逻辑目标:提示非常规功能或隐藏操作。

示例:

用户体验设计中的功能动画

用户体验设计中的功能动画

     

用户体验设计中的功能动画 强调  


   

在糟糕的界面中,这类动画可以让某一内容在混杂的图层中凸显出来。


设计师通常都会力争避免布局嘈杂,因为这会让屏幕布满了文案和视觉内容碎片,争相吸引用户的注意力。

降低页面嘈杂的方式之一就是删除。但是有时候却不好做到这一点。比如一个新闻网站,谁会想要把文字新闻和图片从主页中删掉呢?

本质上,运动在用户界面中是最明显的,无论是文字段落还是静态图片都无法与之相争。我们可以利用动画的这个优势。但是要记住,让物体更加显眼会让页面更加聒噪,这只是不得已而为之。

下面的动画案例中,可以看到由于背景拥挤,加入购物车的卡片不太引人注意,因此加入了动画强调。

逻辑目标:摆脱嘈杂的布局,吸引用户的注意力。

示例:

用户体验设计中的功能动画


 用户体验设计中的功能动画 模拟  


   

有时在设计分析和用户访谈中,发现用户有个需求,可以通过定制模拟过程来解决。

这种特殊情况下,我们可以创建定制的功能动画。下面的例子中,足球分析是以互不干扰的图形、数字、表格、图表展示的。

逻辑目标:模拟难以传达的主题。

示例:

用户体验设计中的功能动画


 用户体验设计中的功能动画 视觉反馈  


   

视觉反馈在用户界面设计中非常重要。现实世界中,按钮、控件和对象对我们的互动做出反馈,这就是人们预期事物运转的方式。

但要牢记,这类的功能动画要很细微地响应式设计。按钮反馈在每个界面中都会用到,如果在不必要的地方使用功能动画,可能适得其反。在触屏设备上,功能动画可以替代翻转效果。

逻辑目标:确认用户行为。

示例:

用户体验设计中的功能动画


 用户体验设计中的功能动画 反映系统状况  


     

这类动画都是关于控制力的。对于用户而言,控制意味着在任何时间都知道并了解当前在系统中的状态。

功能动画可以实时反应系统状态,让用户快速了解什么时候开始,停留多久以及什么时候结束。或许第一个功能动画就是 HTML网页中的旋转gif图,这种形式至今还用在很多界面过程中。

这类有效的功能动画一般遵循以下模式:

01  明确反馈流程的开始。

02  过程进行中展示持续性反馈。

03  预估过程的结束(也可能是加载失败)

04  清晰地反馈过程已结束

这类动画中有大家熟知的“下拉刷新”,它会触发移动设备中的内容更新。在大量不同的应用中试验这些动画,你会发现,如果缺少以上四个步骤之一,就会觉得怪怪的。比如说,过程终止时缺少清晰的反馈,造成不确定性,可能会引起用户再次发起下拉刷新的操作。

逻辑目标:线性过程中传达控制感。

示例:

用户体验设计中的功能动画


 用户体验设计中的功能动画 营销工具  


    

这类动画都是关于营销的,非常有趣哦!前面提到的八类动画都要合乎逻辑性,但是这一类动画充满了感性色彩。

当我们需要指明产品行为、强调特定功能、提升独特性能或者甚至将品牌价值和风格融入产品时,都可以应用此类动画。它能为营销战略很好地服务,虽然可能不是特别明显地以用户为中心,但它确实有一定的功能目的。

逻辑目标:传递公司品牌价值或突出产品优势。

示例:

用户体验设计中的功能动画

用户体验设计中的功能动画


  总结  


动画为网站或APP起到很大的愉悦作用或突出作用,但是要牢记功能优先。

MailChimp的沃尔特在他的著作《情感化设计》中描述了用户需求层次。与马斯洛需求层次理论相似,但沃尔特描述的是用户的需求。沃尔特的层次结构将功能需求定位在金字塔的底层,而精神需求位于顶层。也就是说,只有满足了基础功能需求,才可能实现精神愉悦的需求。本文中我只是研究了基础功能,而未涉及快乐和愉悦等方面。

到现在,我已经总结出九类规则。这九类规则适用于我看到的所有动画类型。我可以依此来评估界面中的动画,并在线框图设计中应用强有力的指导原则进行动画设计。希望这些原则在设计过程中,可以像帮助我一样帮到你。

研究仍在继续。当你下一次遇到功能动画,请继续针对这九类中的某一类进行测试。如果发现并不属于其中任何一种,并且有着明确的功能目的,可以分享给我们,也许你发现了第十类功能动画哦!

原文地址

https://www.smashingmagazine.com/2015/05/functional-ux-design-animations/

欢迎指教和讨论


用户体验设计中的功能动画

原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/36015/

(0)
交互精选交互精选
上一篇 2018-03-22
下一篇 2018-03-23

相关推荐

  • 做你女朋友,用户体验太差了

    关注黑白每晚睡前一篇暖心好文等你文 / 李月亮来源 / 李月亮(bymooneye)●●●●●01见过一个不会谈恋爱的男生。是我前同事,颜值和收入都很高,当时坐在我隔壁桌。他跟女友打电话的画风通常是这样的:“破圣诞节有啥好过的,别整那洋事儿,老老实实在家待着吧。”“后天啥日子?你生日?你有啥要求?我这有张购物卡,你拿去自己买点东西吧。哎呀谁买不一样!”“你能不能别工作时间给我打电话啊,我忙得要死还得伺候你。”“有事说事儿!没正事儿是吧?...

    2018-04-30
  • 以服务设计视角推动设计赋能

    作者:阿里UED 周静&谢辉敏小编说:未来的设计都应该归纳服务设计的范畴,包括用户体验设计、交互设计等,比如新零售设计就是一套完整的服务设计体现,不要等服务设计成熟了再去设计,谁先先学习,谁就抢占了先机~~为未来充点电!本文较长,读完需要点耐心~~近两年随着UED团队的探索,沉淀出了业务协同、设计增值、设计驱动三个层次的价值模型,深入剖析了设计师价值实现的不同阶段与方式。同时越来越多的设计师也逐渐意识到了只有在协同业务的全流程中利用体验...

    2018-02-13
  • Axure实例:即刻 app 产品需求文档

    当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放不了了之冰淇 - 分手快乐作者:T.zh来源:简书以下我的Axure原型截图:目录:1.概述1.1产品介绍1.2需求整理2.版本信息2.1修订历史2.2版本规划3.产品逻辑3.1产品信息图3.2产品结构图3.3部分业务流程图4.产品设计4.1全局说明4.2部分功能需求说明4.3部分交互设计1. 概述1.1 产品介绍1.1.1 文档属性1.1.2 产品综述1.2 需求整理1.2.1...

    2018-03-08
  • 用通俗的方式告诉你什么是交互设计

    文章底部可领取设计资源(软件、笔刷、视频教程等)↓↓↓通常来说,拥有成熟产品的大型互联网公司都会设有交互设计岗位,这个岗位在近几年的招聘市场上也越炒越火。不同于视觉设计师有可视化的作品展示,交互设计师的工作大多无法直观可视化或出于保密性难以对外展示,所以在大众心目中始终是神秘的存在。所以今天就来给大家分享一下我作为一个交互设计师眼中的交互是什么样的。文章的目的是帮助对交互设计不太了解,但工作相关或对此感兴趣的人对交互设计进行基础入门的了...

    2018-04-08
  • 交互设计文档如何写,才给程序员以美得享受?

    阿西UED授权发布作者公众号艾欧交互设计ID:aioued文章最后报名线上线下活动:【HBAT创新设计峰会:design+下的生存之道】“写交互设计文档(DRD)目的在于:便于与前端、测试以及开发工程师沟通”交互设计文档重要么?重要!但不是项目必需具备的内容,为什么还要学习呢?其实对于初学者来说,交互设计文档能够很好的梳理产品的逻辑关系、基本的设计规范等问题,让你真正透彻的认识一个产品所有可能性。基本上,在大公司都会写交互设计文档的,便...

    2018-02-01
  • 干货分享 | 交互领域不可不知的设计法则

    本文转载自“熊猫设计院(ID:MUXDesign)”,已获得作者授权,未经许可禁止转载。前言:交互设计之父阿兰·库珀说过这样一句话:“除非有更好的选择,否则就遵从标准”;在交互设计领域中,有很多被时间和前人验证过的设计法则,这些法则是从用户的行为逻辑中总结出来的,掌握这些法则能让我们迅速有效的完成自己的设计,接下来,笔者通过一些实例来解析下这些原则在设计中的应用。01希克定律(Hick’s Law )简介希克定律指的是:一个人面临的选择...

    2018-04-08
  • 美国交互设计综合类&艺术类院校申请侧重点有哪些?

    回复【交互】,获得专业老师一对一专业指导随着现今数字智能等高科技的发展,交互设计成为近些年众多艺术留学生的热门首选专业。但热门并不代表很多同学都对交互设计有所了解,比如,根据向汉艺咨询的学生情况分析,90% 的同学都分不清什么是到底什么是交互,只是很表面的认为交互就是各种“APP”、“UI设计”或者VR/AR。实际上,即使国外最顶级的院校,你也找不到一所专门设立“APP”的专业,“UI设计”严格上来说只能算是“平面设计”,而设立VR/A...

    2018-04-13
  • 文娱寄卖 | 京东用户体验部喊你来填调研问卷啦!

    全文字数:  1800阅读时间:   6分钟嗨,收藏大咖们你们好!我是来自京东集团电子文娱技术研发部的一名用户体验师。刚接触京东文娱寄卖业务的时候,我并不太熟悉邮币卡、书画等市场,只是经常听朋友和亲戚讨论文玩藏品。当与很多邮币卡商、书画商沟通之后,我看到的是20多年的坚守、30年不变的初衷以及因线下市场低迷导致的生活压力。顷刻间我明白了,京东文娱寄卖商城的人文情怀,这其中是对行业的挚爱以及解决用户需求痛点的执着。用户体验部钱币溯源,追忆...

    2018-04-25
  • 从用户体验角度说说VR版综艺节目

    转载自913VR作者:赵丹上回我写了一些对于体育赛事VR直播的观点,今天我想说说VR版的综艺节目。最近我比较关注的两档综艺节目是《中国新歌声》和《盖世英雄》,一方面是因为我一直是《中国好声音》的拥趸,另一方面我很喜欢“潮”的东西,所以电音概念的《盖世英雄》自然很吸引我。值得注意的是,这两档节目的VR版都是由微鲸VR独家进行录制的,依托CMC丰富的娱乐资源,微鲸VR对于国内众多娱乐IP进行了VR版本的制作,今天我就主要结合这两档节目来说说...

    2018-04-07
  • 交互设计前期分析(一)

    在以前还是交互设计师新手时,总会遇到这种情况,给出了一份方案,被产品经理驳回:“虽然能用,但是不够好,要不要参考其他竞品再想想。”接着再东看看西看看,接着给出第二版方案,仍然被说缺了点什么,于是一版接一版地改,最后勉强定了一个差不多的方案。为什么会导致这样的情况呢?今天我们来说第一个存在的原因。如果做交互设计,没有理解产品的业务需求,那么做出来的设计就算是美观、漂亮,也不能成为好的设计,因为没有实现业务诉求。而且,对业务诉求的分析,会影...

    2018-04-17