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

作者:Amit Daliot

出处:

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

一个优秀的用户体验设计师可以很容易的解释设计概念中每个决策背后的逻辑。通常包括信息架构,页面内容的层级,流程和既定假设。

动效一旦应用在线框图概念中,那么再对设计做决定或解释它们就会变得困难。像诸如“这会很酷”“很潮”“令人激动”,会让设计开始失去说服力。在我们的设计考虑中,动效理应占更多的比重。我们应该去定义动效并阐述其目的——像我们阐述一个设计中的其他元素一样。

什么是功能性动效?

功能性动效是微妙的动效,是我们嵌入用户界面设计中的流程的一部分。

和迪斯尼动画或者游戏动画不同,我们这里讲的功能动效拥有一个清晰的、有逻辑性目的。这个目的是通过支持我们想要传递的解决方案,来为设计理念服务的。因此,功能动效是我们体验设计工具库中的又一工具。

如果一切完美,我们应该可以验证功能动效与清晰设定逻辑的目的。如果一个动效在我们的设计里面遵循我们设定的逻辑目的,那么它就是一个有效的功能动效,它存在在我们的设计中便是合理的。但是,如果它不与逻辑目标相符,那它可能就是多余的,需要重新慎重考虑这个动效存在的意义。

在过去的一年左右的时间里,我做过各种各样的项目,在此期间收集并整理了一系列九个逻辑目的,现在我用这些逻辑目的帮助验证功能动效。我意识到,通过查看一个被很好定义的动效,可以很容易的把它们放入到这个系列中的一个点中或者增加更多的组。

也可以这样思考:当一个动效不符合一个功能性目的,那么这个动效的存在可能会让用户觉得困惑或者恼怒。下面是我目前收集的这一系列的动效,我希望会在你的设计中有所帮助。

导向

导向会阐明结构。在这组中,收集的是一些扮演导航角色的动效,它是网页信息结构的反映。这种动效是想要吸引用户对导向的注意,帮助用户理解页面布局刚刚发生的变化:什么导致了这个变化,下次想要使用的时候怎么再次打开。

一个典型的例子是:一个按钮,可以切换隐藏内容(如个人资料等)。当你点击它时,会出现一个隐藏的面板,当你关闭面板,它就缩小回操作按钮。

第一次接触的时候,用户可能对马上要发生的事情(做了动作之后的回馈)猜的不那么准。隐藏面板尺寸不断变大的载入动效可以帮助用户更好的知道发生了什么,而不是觉得自己离开了页面或者内容突然消失了。这样用户就产生一种自在的掌控感。收回的动效可以帮助用户关联打开对应面板的按钮或者图标,这样他们就会知道下一次从哪里打开这个面板

逻辑目的:避免突然间变化,让用户知道自己在哪。

0wx_fmtgifamptpwebpampwxfrom5ampwx_lazy 0wx_fmtgifamptpwebpampwxfrom7ampwx_lazy7

相同的位置,新的功能

一个众所周知的易用性准则:保持设计和站点内容的一致性。一个具有一致性的站点通常是可预见性的,因此也是可以学习的。此规则也适用于按钮的操作。

在某些情况下,我们必须要设计一个在一定条件下功能会发生一定变化的按钮。我们这样做通常是因为空间受限,如手机等。因此,在用户已经知道按钮的一个功能情况下,他还得学习另一个新功能。

"保存”和“编辑”按钮是功能转化按钮的最常见的例子。但是这个又是最简的,因为这两项操作是互斥的,他们具有相同的情景。在其他的情况中,当两个功能之间不具备明显的联系,可用性的挑战就凸显出来了。功能动效这个时候就能发挥很好的作用。
逻辑目的:强调动作按钮的功能变化。

0wx_fmtgifamptpwebpampwxfrom5ampwx_lazy4 0wx_fmtgifamptpwebpampwxfrom6ampwx_lazy6

放大缩小

第三组的放大缩小看起来和第一组的导向有些相似。在这些动效里面,用户在列表里选择一个条目,然后就变成了这个条目的内容或细节(取代了列表视图),并且能够返回之前的条目列表。

我们经常在图像库、卡片和条目选择中见到这样的动效。用户选择了一个条目,条目马上响应用户的选择,在屏幕上显示对应的细节内容。
这里的困难是必须让用户继续拥有掌控感,并且还在原来的流程中。功能动效在这时候往往是必不可少的。

在研究这个组中的功能动效时,我注意到一种共同的模式,当下面条件被准确的实施时,会增强动效的功效:
初始状态时条目的列表。

每个项目被指定一个单独的视觉提示,例如一个主色调、一个符号、一个加粗标题或者是预览图像。

当用户做出了一个选择,一个新的页面出现,所选择的条目的视觉提示的要素被突出出来。例如,整个页面的颜色可能延续了之前所选条目的主色调;或者,之前页面的符号被扩大并且定位到页面的标题;或一个条目的名字会变的更大,出现在页面的标题。

一个较明显的关闭动作按钮出现在新的页面,如“取消”,“关闭”,“返回”或“x”。

逻辑目的:把条目与详情页关联。

0wx_fmtgifamptpwebpampwxfrom5ampwx_lazy5 0wx_fmtgifamptpwebpampwxfrom5ampwx_lazy2

视觉提示

视觉提示可以帮助用户更好的知道怎么去操作产品的界面。尤其是设计包含非常规对象或者单一的导航形式时,显得尤为重要。

这种功能动效是很容易被察觉的。当我们打开了一个页面,突然触发一个快速的一次性动效,来演示如何操作产品中的功能。

逻辑目的:可以展示非常规功能或者隐藏的事件

0wx_fmtgifamptpwebpampwxfrom5ampwx_lazy1 0wx_fmtgifamptpwebpampwxfrom5ampwx_lazy3

聚焦重点

这一系列组帮助用户在不利情形中超越嘈杂的格局。

设计师通常努力避免嘈杂的格局,这些格局以各种文字和视觉内容堆积在屏幕上,他们彼此竞争以引起用户的注意。

将接口噪音最小化的一种方法就是消除杂波。然而,有时候这项任务也不是那么微不足道。想想一个新闻网站,每个用户都希望从主页中删除不感兴趣的消息或图像。

运动,由于其性质,使其在用户界面表现最突出。无论是文本段落还是一成不变的图像都无法与运动一较高下。凭借这个功能性动效组,我们可以利用这一点。不过,需要注意的是:通过添加更突出的物体会增加接口噪音,会起到相反的效果。

在以下的动效示例中,我们看到,由于背景拥挤,把商品放到购物车里这过程看得不够清楚,因此需要动效。

逻辑目的:超越嘈杂的布局,抓住用户的注意力。

0wx_fmtgifamptpwebpampwxfrom8ampwx_lazy8

模拟

在设计分析和用户访谈过程中,我们发现用户有时候会有这方面的需要,但这只能通过定制的模拟来解决。

对于这些特殊的情况,我们将创建一个自定义的功能动效。在下面的例子中,足球分析学呈现的方式是人物、数字、表格和图表都无法相比的。在第二个例子中,用户可根据时间和地理来监控地图上的温度——这是一个几乎不可以用其他方式来解决的特定用例。

逻辑目的:模拟在其他方面难以传达的主题。

0wx_fmtgifamptpwebpampwxfrom9ampwx_lazy9 0wx_fmtgifamptpwebpampwxfrom10ampwx_lazy101

视觉反馈

视觉反馈在用户界面设计中非常重要。在现实生活中,如果按钮、控制和物体会对我们的互动作出反应,是所有人喜闻乐见的。

但请记住,这一系列组中的功能动效是非常微妙的,响应式设计。按键反馈被广泛应用于各个界面,因此在不需要的地方使用功能动效将会是弊大于利。在触控应用装置中,功能动效作为翻转效果的替代品会是最有利的。

逻辑目的:确认用户的操作。

0wx_fmtgifamptpwebpampwxfrom12ampwx_lazy121 0wx_fmtgifamptpwebpampwxfrom11ampwx_lazy111

系统状态

这组全都是关于控制的。对用户来说,控制意味着在任何特定的时间认识和理解他们在系统中的当前情况

功能动效提供系统状态的实时监控,使用户能快速了解一个操作何时开始,剩余多少时间以及何时结束。也许,在HTML网站担任这个角色的第一个功能动效是微调的图片交换格式,这目前仍在许多界面中使用,以表明进行中的操作。
这组中的有效功能性动效通常遵循这种模式:

1、显示清晰的反馈以表明进程已经启动。

2、对进程终止作出清晰的反馈。

3、对过程的完成进行评估(顺便提一下微调控制失败的步骤)。

4、对进程终止作出清晰的反馈。

该组中最著名的动效是“下拉刷新”,它启动移动设备的内容更新进程。检查这些动效在不同应用程序中的实现情况,你很快就会发现,那些与上述规定的四个步骤不完全相符的动效会让人觉得有点不对劲。例如,由于缺少对进程终止的清晰反馈而引起的不确定性会促使用户重新启动刷新操作。

逻辑目的:在线性过程中传输控制感。

0wx_fmtgifamptpwebpampwxfrom16ampwx_lazy161 0wx_fmtgifamptpwebpampwxfrom15ampwx_lazy151

营销工具

这组都是与营销有关的——它有些有趣的动效!这一系列的前八组动效是十分有逻辑的,而这组是充满情感的!

假设我们需要表明产品行为,突出独有特征,提升独特能力或甚至将品牌价值和风格融入到产品中。

在所有这些场景中,动效可能会很好地为公司营销策略服务。这种方法可能不明确以用户为中心,但它肯定带有功能目的。

逻辑目的:支持公司的品牌价值或突出产品优势。

0wx_fmtgifamptpwebpampwxfrom13ampwx_lazy131 0wx_fmtgifamptpwebpampwxfrom14ampwx_lazy141

小结

当涉及到在网站和应用中提供乐趣时,动效发挥了巨大作用。但是,永远记住,它们首先必须是功能性的。

MailChimp的Aarron Walter在他的情感设计书籍中写到用户需求层次。这类似于Walter的层次,把功能需求定位为金字塔的底部,而娱乐需求则位于最顶端——只有底部得到满足,顶部才适用。在这篇文章中,我只涉及功能需求底部,而没有研究快乐和喜悦方面的内容,这些内容有他们自己的文章来描述。

到目前为止,我已经编辑了一系列九条规则。这九条规则很好地映射了到目前为止我所遇到的每一个动效。他们有助于我对在界面中所看到的动效进行评估,同时也是一套强有力的指导原则,决定如何将动效添加到线框设计中。我希望他们在你的设计过程中能对你也有所帮助。

这项研究正在进行中,所以,当你再遇到功能性动效的时候,继续进行并用这些九组中的任意一组来对它进行测试。如果它不完全符合九组中的任意一组,并且该动效的目的非常明确,跟我们分享吧,或许你已经发现了第十组规则。

from alimamaux

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

(0)
iouedioued
上一篇 2015-11-08
下一篇 2015-11-09

相关推荐

  • 搜狗词典用户体验更给力 可原汁原味学英语

    日前,搜狗词典APP迎来重要升级,接入上百部与查询词相关的优质英美影视剧内容,并将“国际报道”内容板块升级为“双语报道”,进一步丰富了英语单词的学习语境,提升了用户的查词、记词体验,帮助用户原汁原味学英语。接入海量英美影视剧内容,新增“原声影视”内容板块及“视频单词卡片”功能,是搜狗词典APP此次升级中值得称道的一大亮点,这使得搜狗词典APP突破了原有的文字、图片、音频等内容形式,方便用户通过丰富的影视剧短片,用更具趣味的方式了解学习英...

    2018-03-12
  • 交互设计控件之按钮设计

    ♝点击上方“交互设计学堂”关注我们,送电子书一.主按钮和次按钮很多按钮是成对出现的,比如“确定”和“取消”。一般情况下,按钮会有主次之分,一个按钮是我们期望用户去做的,另一个按钮是在特殊情况下才去做的。主次按…

    2017-08-04
  • 中国交互设计“教父”辛向阳老师首次线上分享会来啦

    应集创堂的邀请,中国交互设计“教父”辛向阳老师将在4月20日为大家带来首次线上分享会!辛老师是卡耐基梅隆大学设计哲学博士,是目前很少数在美国获得设计哲学博士、并首个回到中国内地的华人之一。有着跨多个学科的教育和工作背景,包括机械、建筑、平面设计、油画、交互设计以及艺术史。同时,辛老师还是IXDC(交互设计国际大会)大会主席,提出了“交互设计五要素”和“行为逻辑”等交互设计领域的重要理论和方法,并在香港理工大学成功创办了中国首个交互设计专...

    2018-04-17
  • iOS 9 人机界面指南(五):图标与图形设计

    文章索引译者注:本章是iOS Human Interface Guideline的最后一章,文末附上全文PDF下载地址。译文如有任何疏漏之处,或任何意见或建议,请不吝指出,翻译组感谢大家长久以来的关注和支持!

    2017-05-26
  • 一“平”到底

    随着 IOS8 的更新,以及更多 APPLE 产品的出现,扁平化设计已经成为了 UI 类设计的大方向。抛开扁平大战拟物的观点,让我们看看扁平设计之路应该如何越走越远。正好因为这个风格的流行,花瓣上也积累了非常多设计师朋友们的 素材 ,来看看他们都收藏了哪些精致好素材吧。

    2015-01-04
  • 用户体验是一门玄学秘籍

    Part 01 - 用户体验和用户体验设计关于“用户体验”这个词,很多刚入行的新人都觉得它玄之又玄,妙不可言。一方面是不知道他具体到底是什么,就好像那是一块理想地,看不见也摸不着,另一方面呢糟糕的用户体验,作为用户是能清晰感觉到它的存在。所以呢,在这里,会围绕“用户体验”这个词做一个科普性质的解释和综述,希望对初学者一些小小的帮助。1.1 什么是用户体验?用户体验的定义有很多种,我比较倾向的解释是:“用户体验是人对于使用一个产品、系统、...

    2018-02-22
  • 窥探交互设计师成长之路指南!

    一部窥探交互设计师成长之路的实用指南!传授高效、靠谱的交互设计学习方法!IAMUE网站创始人倾力之作!

    2016-06-13
  • 【完整案例回顾】我是如何设计优化出更好用的航班筛选器的?

    作者:Sue(Product Designer in Singapore );译者:Perry 阿力(UXRen社区成员)   作为一个有18个国家的热情旅行者,最近发现自己预订了无数的航班,我发现航班一直是旅行日期的关键决定因素,因为它的价格波动…

    交互专题 2017-10-18
  • 【用户体验.春节特辑】我的记事(总第265期)

    亦可访问www.koushutianxia.com了解详情编家谱   修家史   留视频建祠堂   亲互动   传万代总第265期“我的记事”——家庭、个人故事随时记录,方便存储。直接点击主页面“我的记事”按钮,即可进入“我的记事”页面,随时随地添加、修改、记录个人及家庭资料和故事。同时点击方框内加号键,可以添加照片,点击完成上传。上传后可根据提示选“分享”键转发至微信、朋友圈、微博、QQ好友、QQ空间;选“删除”键进行删除记事内容;选...

    2018-02-16
  • UED从繁到简三个阶段

    UE设计一般需要经过三个阶段。一个交互设计师,从学徒到出师,不说100%,那也有99%的人走过这是哪个阶段。如果没有,说明他已经转行做自己的安利去了,专门在网上发些如何教人做交互啊。什么是交互设计师啊等等忽悠别人的文章。(就是再说我)我们来详细看一下这三个阶段:第一阶段,多数都是刚入职人生第一份工作或者是刚踏上这段交互征程的新手。对交互设计其实是一知半解的。这一阶段谈论的什么用户体验啊,流程体验啊,几乎可以视为是夸口奇谈。我认为在这个阶...

    2018-03-27