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

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

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

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

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

→      什么是功能动画? 


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

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

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

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

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

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


     

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

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

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

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

示例:

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


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


      

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

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

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

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

示例:

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

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


     

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

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

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

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

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

相关推荐

  • 拆解【用户体验要素】

    作为产品经理不但要有能力作出产品设计和规划,更要尊重用户,作出用户体验更佳的产品【用户体验要素】告诉我们如何更好的设计出让用户体验更佳的产品方法论,那么这本书如何更好的应用到实战中,我们如何更好的将理论与实践结合呢?我们今天简单来阐述一下【用户体验要素】概论知识初识【用户体验要素】【表现层】我们所能看到的一系列的网页的元素:图片、文字、按钮等,有些图片就是图片,单纯的进行展示;有些图片或者文字有可能就是一个按钮链接,通过点击可以执行某种...

    2018-05-05
  • 微信Axure原型练习和资源分享

    “我根本没把你放在眼里。”“因为你一直在我心里。”▼这是咸冬日的第叁篇文章这两天业余时间学习了axure的基本功能,做了一个简单的微信原型练练手,教程分享给大家。首先需要准备基本素材,可以从我的源文件中获取。1.设置手机主页和home热键用例。2.拖入内联框架(w273*h482),设置从不显示和隐藏边框,并链接到主页。3.设置主页交互:1)主页内拖入动态面板“内容区”(273X396),并增加4个menu状态(微信、通讯录、发现、我;...

    2018-03-10
  • 看过英国院校的交互设计之后,你还想报国内的同专业吗?

    今天我们来聊一聊交英国的互设计专业。随着网络和新技术的发展,人们越来越重视交互的体验,许多公司、网站、APP都开始注意到交互设计在品牌的创建、客户回头率、客户满意度等方面的影响,交互设计师也越来越受到重视。因此,许多同学在高考填报志愿时,会选择交互设计专业。国内开设交互设计专业的院校较少,即便有,也是和工业设计剪不断理还乱,分为实体产品和互联网产品两种方向。国内交互专业普遍存在的问题是,学校教的知识过于浅显泛泛,教学内容与行业需求脱节。...

    2018-02-26
  • 马化腾:用户体验,比一切事情都大

    企业快速成长中,第一个大问题就是战略。/演讲|马化腾来源|笔记侠(ID:Notesman)我非常希望也很高兴在这个平等氛围中,以创业者的身份跟大家进行这样一场交流。在座的创业者,很多拿到A轮、B轮,有些在走向C轮。企业快速成长中,第一个大问题就是战略。创业最难的就是选准创业的点,你会面对很多机会、很多诱惑,需要不断做出选择。自腾讯初创开始的六七年,是我们变化最快的时期,我想把这个时期包括战略选择等方面的经验跟大家分享。一、关注痛点你出来...

    2018-02-16
  • 交互体验设计师竟选择不能抛的捧花 | 真实婚礼

    新娘:@Seiya大鲍鱼婚礼场地:北京阿根廷庄园婚礼人数:120总花费:24w策划布置:6.5w策划:@华尔兹婚礼服务婚礼vendor:5.1w摄影:@ShengVision胜男摄像:@PerfectFilm视频记录化妆造型:@魏臻WeMakeup主持:@李伟MIC甜品:@乡田小墅服饰:3w出门纱:Willowby主纱:Catherine Deane新郎礼服:@殷小小爱喵咪新娘婚鞋:@RogerVivier_罗杰维维亚@Charlott...

    2018-01-30
  • 2018年04月04招聘岗位

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

    2018-04-08
  • Axure8.0展开收起

    设置菜单展开收起效果,且联动箭头朝上朝下动效。收起状态:箭头朝下,内容收起。展开状态:箭头朝上,内容展开。【步骤】1)设置展开内容与箭头为两个动态面板,命名2)点击事件设在点击菜单栏,同一个事件下控制两个面板状态。内容面板:箭头面板:设置旋转效果。点击菜单栏:点击运行即可。

    2018-03-15
  • 用户体验与智能产品设计专业课程研修班

    通知:根据国务院学位委员会(2013)36号文件,原用户体验与智能产品设计在职研究生课程统一更名为“用户体验与智能产品设计在职研修课程”!一培养目标:良好的用户体验是产品成功的关键。在科学技术日益突飞猛进的今天,用户体验与创新设计不仅是国际IT界、设计界和商业界最活跃的热点,甚至成为企业成败的决定因素。随着科技进步和社会发展,人们对产品的需求由满足可用的时代提升到更加重视主观感受和体验。用户在使用产品、服务、系统的前期期望、使用过程中,...

    2018-04-06
  • 怎么设计出好的用户体验

    今天跟大家分享的这话题是大家在做产品的过程中可能谈的最多的话题,我一定要有好的产品的体验。首先大家要明白什么叫好的用户的体验,这个一定要有一个定位,所谓的这个用户是真实的使用用户还是你自己。有的时候我们把这个用户简单定义为产品经理或者公司的ceo,或者是公司的负责人。但首先要问一下,你是不是最终的用户,如果只是满足你个人的想法,那这上面会有很多的问题,所以一定要满足真实用户的体验。基于这样的前提下我们再考虑什么叫好的用户体验。我觉得好的...

    2018-02-19
  • 交互设计完全学习指南

    交互设计起源于网站和平面设计,但已成长为单独的一个领域。工作内容不仅仅有文本和图片,交互设计现在负责创造屏幕上用户可能会划动、点击、按压或输入的每一个元素,简而言之,就是体验的互动。这篇文章为对交互设计感兴趣的人提供了几个好的点可以开始行动。为了这个目的,我们简要的介绍了交互设计的历史、指导原则、值得注意的贡献者和与这个极具吸引力的学科相关的工具。即使你已经是一个交互设计师,阅读下这篇文章然后在下方评论区分享你的想法吧!目录什么是交互设...

    微信热点 2018-05-06