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

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

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

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

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

→      什么是功能动画? 


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

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

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

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

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

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


     

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

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

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

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

示例:

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


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


      

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

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

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

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

示例:

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

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


     

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

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

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

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

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

相关推荐

  • 巴塞罗那发团丨LES FONTS DEL LLOBREGAT探寻自然一日游

    看腻了古镇城堡?看够了沙滩海岛?那就跟随我们深入略夫雷加特河的源头Fonts del Llobregat来一次悠闲的探寻自然之旅吧!发团日期:2月17日行程价格:42欧/人行程包含:1.大巴游览2. 西语陪同导游3. 餐食午餐包括:escalivada炭烤蔬菜拼盘,加泰罗尼亚沙拉,咸火腿,白肠、黑肠、香肠拼盘,Escudella炖菜,酱汁bandejas de pies de poco,蘑菇牛肉+烤鸡肉甜品:Bunyols amb mo...

    2018-02-05
  • Axure RP 8.1.0.3372 Mac中文破解版

    今天分享的是Mac下一款快速原型设计工具——Axure RP,有了它可以大大提高你的工作效率。之前有朋友留言需要8.1.0.3372版本。Axure RP 能帮助网站需求设计者,快捷而简便的创建基于网站构架图的带注释页面示 意图、操作流程图、以及交互设计,并可自动生成用于演示的网页文件和规格文件,以提供演示与开发。Axure RP是美国Axure Software Solution公司旗舰产品,是一个专业的快速原型设计工具,让负责定义需...

    2018-03-21
  • 不以用户体验为目标的人工智能都是耍流氓

    上周末,老刘在家整理了一下旧物,忽然发现了这个。估计现在很多人都会觉得这简直是土到爆了,但在当年那可是先进到不行。听歌、拍照、玩游戏、上QQ,绝对是功能最强大的手机,每当老刘拿出来,那内心简直不要太骄傲。曾经把诺基亚这款手机当成宝贝的老刘,绝对没有想到,短短几年后,那些曾值得炫耀的功能,会变得不值一提。看看现在的手机,拍照都是自带PS的,玩游戏都是屏幕上直接操作的,买东西手机是可以直接付钱的,出门迷路了是可以直接导航的。老刘不禁感叹,科...

    2018-02-01
  • Axure绘制专题页原型

    专题策划对于SEM至关重要,如果策划及文案都搞定了,接下来如何与设计进行沟通呢,这篇文章我们一起聊聊专题页原型绘制的话题。一、Axure界面介绍Axure的使用极其简单,只需要几个拖拽动作就可以基本搞定。接下来我们实际上手用学历教育的例子,带大家一起来看看。绘制这个原型可以分为两步,首先是手机的绘制,然后是文案内容的绘制。左侧面板(快捷键:Ctrl+Shift+[),主要是元件库,将需要用到的元件,直接拖拽就可以。右侧面板(快捷键:Ct...

    2018-03-04
  • 设计书单 | 设计师该如何运用交互设计来满足用户的轻松休闲需求

    当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放给的再多不如懂我后弦 - 下完这场雨对话全球20位杰出的交互设计师,他们亲自分享关于交互界面设计新趋势的独特观点,大量实用的经验之谈也毫无保留地一一奉上!《NEW TRENDS IN GUI GUI设计新风向》• 收录全球77位优秀交互设计师的GUI作品,多元化的灵感开发。• 全书从应用程序中最火的三大类别——“娱乐”、“社交”、“实用”,对作品内容进行精准整合。【第一章-聊天社...

    2018-02-25
  • 为你的App增加WiFi认证检测,让用户体验更加丝滑

    前言前段时间在上海坐地铁时连接了花生地铁WIFI,打开QQ音乐开始听歌,QQ音乐居然给了我一个"WIFI认证提醒"的弹窗,点击认证就跳转到了花生地铁WIFI的认证页,之后顺利联网成功,体验非常爽。作为一名iOS开发,不禁思考这个是怎么做到的呢?忘记WIFI重新连接后,打开手机里各个应用轮番测试一遍,发现QQ音乐、QQ、QQ空间三个应用都做了比较好的WIFI认证提示:成功提示.png而其它的大应用如微信、手淘、支付宝、钉钉、美团、点评、爱...

    2018-02-07
  • 2018年04月05招聘岗位

    招聘服务员工资底薪2500加提成收银员2700元加提成招聘电话:8663888,15750516333 13948455099促销员20名,要求:年龄20-40岁,时间15-20天,底薪(80一120),提成+提成工资多劳多得!加微信15849572346了解工作内容,今日下午3点面试掌上明珠全体员工欢迎你的到来!招聘电话:158495723468876688内蒙古泽强医药有限公司招聘职位及岗位需求:一、人力资源专员具体要求:1、年龄2...

    2018-04-09
  • Axure RP软件

    长按链接复制链接到浏览器打开Axure RP 7.0软件及安装教程下载地址:链接:https://pan.baidu.com/s/1mkqu1Ws密码:467u长按链接复制链接到浏览器打开Axure RP 8.0软件及安装教程下载地址:链接:https://pan.baidu.com/s/1c3h7c1i密码:esqr给大狮兄一个赞赏大狮兄想生存下去,我还想以后给你更多好用的软件赞赏的狮粉记得备注名字,大狮兄想记得你的名字大狮兄资源吧专...

    2018-03-04
  • 唯品会实习|面向19/18届,地点广州

    公司介绍唯品会(NYSE:VIPS)VIP.com成立于2008年,以“全球精选 正品特卖”为品牌宗旨,在中国开创了“精选品牌、深度折扣、限时抢购”的时尚特卖模式,在线销售服饰鞋包、美妆、母婴、居家、生活等全品类名品。招聘岗位商务助理(18/19届)■岗位职责:1. 负责跟进预上线商品的所有商品资料;2. 负责检查货品清单正确性、完整性、准确性、规范性,交接正确的资料给相关部门;3. 负责申请标准的档期,走档期流程并落实档期日期;4. ...

    2018-03-06
  • 新项目丨青岛东海凤凰:宽建筑[UCD]挑战中国第一仿生建筑

    *文章已由原作者授权发布▲凤凰中心效果图作者:王宽方案设计方:宽建筑 [北京城建] KUAN architects [UCD]项目名称:青岛市西海岸新区文化活动中心地址:中国,青岛,金沙滩设计团队:王宽,周媛,李鹏,梁文杰等结构咨询:中冶京诚工程技术有限公司  卢理杰数字模型&BIM咨询:北京华茂云信息科技有限责任公司施工方:北京城建集团(建筑部)、北京城建集团十六公司、城建精工钢构公司面积:31,313平方米状态:主体结构已封顶预计建...

    2018-03-13