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

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

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

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

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

→      什么是功能动画? 


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

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

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

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

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

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


     

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

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

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

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

示例:

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


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


      

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

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

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

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

示例:

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

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


     

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

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

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

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

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

相关推荐

  • D4-交互设计工作困惑答疑

    作者:飞阿婷(公众号:飞阿婷的交互设计生活)自我成长1.面试攻略为什么强调说,不能把自己的不足归咎于之前公司没给自己带来很大成长?抛开你有推卸责任的人品问题来说,其实还有科学依据证明很多事情都是可以事在人为的。费斯汀格法则:“生活中的10%是由发生在你身上的事情组成,而另外的90%则是由你对所发生的事情如何反应所决定。”我的理解是那10%就是不受我们控制的自然发生的事情,而90%就是我们面对这10%的事情选择接下来要做的事情,而这个选择...

    微信热点 2018-04-12
  • Axure模板库(13)-直播

    最近直播app越来越火,我整理了一些直播app,做了几个模板,跟大家分享。原型文件在文章最后。1、首先临摹一个国外的。(1)首页第一个展示的是快速发布直播的入口,鼓励用户创作内容。第二个展示的是一系列标签。如果平台上内容类型比较多的话,可以像这样强调标签、分类。如果平台上都是美女主播,那分类的权重就可以小一点了。第三个展示的是直播列表。直播最重要的信息就是直播的画面,列表上可以放一张大图,或者更直接,展示一小段视频。(2)直播页面,展示...

    2018-03-04
  • 大屏时代,如何做好电视端交互设计?

    在过去一年多的时间里,笔者有幸参与了电视端大屏幕的项目,在不断的尝试、探索和设计中,也收获了一些关于电视端的设计经验,因此将这些“电视交互设计的一些事”分享出来,共同探讨电视端的设计。-硬件+远距离操控——基本交互-基于桌面资料研究以及设计经验,总结了基本交互主要包含以下几个关键内容:遥控器输入、导航和菜单、信息展现、控件摆放和焦点状态。一 、遥控器输入当我们用手指快速便捷地在手机屏幕上点击或滑动时,主流电视大屏及应用的操作还是:使用遥...

    2018-04-01
  • iPhone十年,移动用户体验领域已经到达成熟阶段

    译者:Daisy全文共 3904 字 7 图,阅读需要 8 分钟———— / BEGIN / ————最开始的iPhone于2007年6月发布。2008年末,当我们开始研究第一版移动报告时,大多数人还是在使用有着最极其糟糕的用户体验的原始移动设备。在那个时候,相较于体验糟糕的移动设备和移动网站,任何稍微像样的产品都会带给用户愉悦的体验。三年前,移动报告第三版出来时,我们对移动端可用性做了严密的评估。我们很高兴移动端可用性报告不再是一种矛...

    2018-04-11
  • 有用户体验落地方法,才能让销售额增长

    图片设计 | 宗宗;编辑 | 海悦如果你觉得本期学霸有链接价值,请在【学霸十三妹】微信公众号后台回复"黄胜山"即可获取学霸联系方式。在物品富足时代,如何吸引用户的青睐,抓住用户的眼球,是很多商家不得不探索的课题。今天,在上海洽客in,学霸十三妹请来了学霸黄胜山,专注研究用户体验十年的老司机,带你揭秘用户体验那点事!黄胜山:唐硕体验创新咨询 管理合伙人,浙江大学心理学硕士,上海交大MBA和混沌商学院,14年用户体验咨询和设计经验,服务客户...

    2018-03-21
  • AR交互设计

    AR增强现实通过实时的在现实环境中渲染虚拟数字信息,通过现实和虚拟的结合来帮助用户完成某项任务和活动。AR中的虚拟数字信息通过与现实环境以及用户的实时互动来向用户传递有价值的信息。相比“传统的”2D层面的交互(手机app,web等),AR可支持的是更加丰富的三维层面的交互方式;并且这种方式不再仅限于主动式的交互(点击,滑动)方式,它还包括用户行为的被动触发。DHL的Vision
    Picking
    拣货系统使用了增强现实技术来帮助仓储拣...

    2018-04-12
  • 用户体验设计师经历的四个阶段解释瓶颈期之思维

    用户体验设计师经历的四个阶段解述瓶颈期-思维 (对自己基本满意,却不知道如何进一步提升)很多设计者遇到过类似这种问题,“运营就给了我这8个字的文案,这么大的空间我怎么 做? ”“产品经理不让修改布局,可是内容好挤,我该怎么办?”“领导说我这个设计不 够高大上,我问他该怎么做喜欢什么样的他也不告诉我,怎么办?”等等。这些问题的根本并不在于产品经理怎么样,也不在于运营怎么样,更不在于领导怎么样,归根结底是设计者没有独立思考的能力。8个字的文...

    2018-03-06
  • 百度用户体验总监刘超下课,HR内部贴称其“给百度同学造成严重伤害”

    百度用户体验总监刘超因演讲太low被嘘事件又有了进展,就在刚刚,又有网友晒出一张百度内网的帖子,告知员工“公司决定将刘超从百度管理团队除名”等信息,发帖者为“BaiduHR”:截图很快在微信朋友圈流传,但百度公关在相关朋友圈下面没有辟谣。以上帖子,可能是今天(7月3日)早间流传的、刘超在百度内网道歉原帖的最新回复,刘超在百度内网的道歉信如下:刘超在信中称,由于个人重视程度不足、演讲语言和穿衣不恰当的问题,导致在IXDC会议上演讲被嘘,后...

    2018-02-03
  • Axure优雅装逼指南:开启原型高颜值形态

    作者寄语 / 一直想写的Axure小技巧分享,终于动手写了。望能对亲有所帮助,文笔粗糙请谅解。内容目录:啥是高保真原型?简单说明原型Axure可以画出什么水准的高保真?给示例,开启装逼模式特殊的技巧:核心内功:目标清晰/理解设计规范画图习惯:像素对齐/用浅色/上素材啥时候上高保真?:适用场景 and 不适用场景啥是高保真原型?啥是原型,从事互联网研发体系的同学,肯定非常熟悉,特别是产品岗同学。如果不是,那如下简单讲原型和高保真原型的:原...

    2018-04-28