如何合理的在移动应用中使用动效

译者语:本文是我在Smashing Magazine看到的一篇关于如何在移动应用设计中运用微动效的译文。初次翻译文章,很多词句用的可能不太妥当,在这里给大家作揖了!knock knock……

如何合理的在移动应用中使用动效

译者语:本文是我在Smashing Magazine看到的一篇关于如何在移动应用设计中运用微动效的译文。初次翻译文章,很多词句用的可能不太妥当,在这里给大家作揖了!knock knock……

下面进入译文。

一个优秀的UX设计师可以轻松地解释每一个动作逻辑背后的设计概念,包括信息框架,页面内容的继承,每一个点击动作对于页面跳转的影响等。

不 久的将来,动效将被广泛的引入到原型的概念设计当中,然而随之带来的是设计方案的确定与分析变得越来越复杂。影响这些决定的原因当中,诸如“这样看起来很 炫”,“这样看酷”等等,将会让动效设计失去了它本来的目的。接下来,我们将试着站在用户体验的角度来定义动效设计,以及解释引入动效设计的目的。

什么是功能性的动效?

功能性的动效就是被我们引入到交互设计当中的微动效(motion),它通常是很细微的动效,来实现一些界面交互当中的一些功能。

不同于迪斯尼级别或者是视频游戏里的动画效果,功能性的动效更加的清爽、具有逻辑目的性。功能性动效需要在遵守设计规范的基础上帮助我们实现我们的交互方案。功能性动效已经是我们交互设计中的另一个有效地工具。

在交互设计中,如果一个功能性动效能够在遵守逻辑性目的的基础上实现了交互效果,它才可以被看做是一个有效的动效设计,否则即使它实现了交互效果,也不是有效的。在过去的项目积累当中,我总结了9条逻辑目的性,通过解释它们的特性,让我们更好地理解功能性动效。

引导性(Orientation)

有目的性的启发用户。此类动效往往出现在菜单中,在网页的内容框架中帮助吸引用户的注意力。使用此类动效的目的除了吸引用户的注意力之外,还有引导、启发用户理解界面布局刚刚所发生的改变,它们往往用来承接、过度界面的变化。

一个经典的例子就是触发隐藏内容的按钮,当用户点击这个按钮,隐藏的内容面板出现,当你关闭这个内容面板后,它缩回隐藏到按钮后方。当用户第一次操作的时 候,TA并不能够预测到会有这样的交互,当TA点击按钮后,隐藏的内容面板逐渐变大出现的动效引导了用户的注意力,并避免让用户误以为TA已经离开了当前 页面,或者误以为主页的内容忽然消失了(其实是被出现的内容遮挡住了)。关闭内容面板的动效帮助用户联想到小时的内容和按钮的关系,因此下次他们就会记得 相应的操作所带来的效果。

逻辑目的:避免突然的变化导致的茫然失措,引导用户联系动作前后的关系。

相同的位置,不同的动作(Same Location, New Action)

一条众所周知的可用性规则:设计和网页的内容应该具有连续性。一个具有连续性的网页是可以根据用户的经验、设计的风格来感知的,是可以学习的。因此,这条可用性规则应该被用在操作按钮的设计,以及其他的控件设计当中。

在某种场景中,我们被迫将一个操作按钮设计成可以根据场景的不同而具有不同功能的效果。我们经常在极其有限的设计场景中看到类似的案例。因此,用户需要学习/熟悉同一个操作按钮在不同的场景下代表的不同功能。

“保存”和“编辑”应该是最具代表性的例子了。但这只是一个简单地案例,因为他们代表着完全不同的动作,很少会让用户混淆误解。当两个操作无法清楚的区分对比时,用户就会容易困惑,这就会带来体验上的痛点。在这种情况下,功能性的动效可以解决这个问题。

逻辑目的:帮助操作按钮突出功能的变化。

放大(Zoom In)

这条原则与上文的引导性原则相似。在这类动效中,用户在列表中选择一条内容,然后点击放大(跳转)到内容细节的页面(页面跳转),同时又能够回到列表主页 中。这类动效经常出现在图片库、卡片或者商品的选择页面中。用户在其中选择一条内容,然后页面理解跳转到所选的内容主页面。这类页面交互的难点在于要让用 户了解页面跳转到了自己想要的页面。功能性动效在这里是必须的。

为了提高用户体验,以下几点需要注意:

1.动效的起点应该是列表的初始状态

2.动效中牵扯到的元素都应该有一个固定的视觉状态,例如有一个主色调、一个图标、一个加粗的标题或者一个缩略图

3.当用户选择了一个内容,在所跳转的内容主页中,动效中牵扯到的元素将会移动到显著、重要的位置。举个栗子,内容主页的颜色跟内容的主色调一致;内容中的图标被拉伸并且移动到页面的标题处;内容的名称变大并且出现在页面标题处。

4.操作按钮出现在内容主页中,比如“取消”,“关闭”,“返回”或者“X”

逻辑目的:关联缩略内容和主页内容。

视觉暗示(Visual Hint)

视觉暗示引导用户更好的理解怎样与产品的界面交互。视觉暗示经常被用在包含不规则元素或者固定导航的设计中。当用户打开一个新的页面时,一个随即被触发的单次播放动画很容易吸引用户注意到某个设计元素的功能特性,这就是视觉暗示的作用。

逻辑目的:暗示用户不规则元素的功能或隐藏的功能。

高光标注(Highlight)

高光标注帮助用户在复杂混乱的排版中注意到重点内容。设计师在设计过程中经常会尽力避免复杂混乱的排版布局,这样做的结果是页面往往会整齐的被分割成几块,并有规则的填充文本内容和视觉元素。这些被整齐分割的版块会使用户迷失在页面中,找不到重点。

一个避免混乱的方法是去除杂乱的内容。但这在实际操作中很难实现,现实的例子就是像新浪,或者淘宝这样的平台类网站/app中,主页中的任何一条内容都是很难去除的,这往往牵扯很多市场因素、业务因素等等。

微动效,在这种情况下将起到非常显著的作用。相比动效,无论是文本还是静态图都无法更加显著地吸引用户的视线。但需要注意的是,引入动效将会使原本已经混乱复杂的页面布局更加扑朔迷离,所以是否增加动效,增加多少动效需要对整个页面的复杂度进行权衡。

逻辑目的:吸引用户的注意力,在复杂的界面布局中突出重点。

模拟(Simulation)

有时在设计研究和用户访谈中我们发现,用户的某些需求只有在模拟现实情景中才会被满足,对于这种特殊的情况,我们需要设计定制的功能性动效。举个例子,足球 比赛的数据分析,标准化的图表、数字对比不会帮助用户对与比赛数据的理解。再举个栗子,通过地图展示不同时段的气候温度,用户可以很容易追踪到明天巴黎与 伦敦的天气情况。

逻辑目的:模拟现实场景可以帮助用户理解捕捉特定的信息。

视觉反馈(Visual Feedback)

视觉反馈在用户界面设计中非常重要。按钮,操作控件,以及其他交互元素都需要反映用户的操作,它们能够引导用户与页面元素的交互。

功能性动效需要设计的非常细致入微(微动效),而且需要在用户操作后具有反馈动作。点击按钮后的状态反馈在界面设计中是必须的,它将提示用户点击操作已完成,页面将会展示后续的反应。

逻辑目的:反映用户的操作。

系统状态提示(System Status)

好的交互意味着:用户需要在任何情境下都要懂得页面的内容,了解何时何地进行何种操作将实现何种功能。功能性动效能够对系统的状态(页面状态)进行实时的监 控,能够使用户在第一时间了解某个动作已经开始,持续中,以及何时完毕。在HTML网页中,第一个实现这种功能性动效的是GIF,并且在目前仍被用来展示 动作的状态。

高效的功能性动效通常会遵守以下规律:

1.清楚的反馈指示操作的开始状态

2.反馈给用户系统持续中的状态

3.评估动作的进度状态

4.清楚的反馈指示进度已完成状态

举个例子,“下拉刷新”动作,当用户下拉后,页面会出现不停旋转的圆圈来提示用户页面正在刷新,当刷新完毕后,圆圈消失,内容更新。试想如果没有圆圈旋转,用户可能会怀疑页面并没有刷新,这可能导致用户在此下拉页面。

逻辑目的:在一系列操作中展示不同的状态变化。

营销工具(Marketing Tool)

这类动效相较上文的动效来说具有更弱的逻辑性,但是却更加的活泼生动!

当我们需要指导用户怎样操作产品时,当我们向用户推荐某个功能点时,当我们向用户推销平台里的某个产品时,营销工具类的动效就能够帮助到我们。这类动效或许没有以用户为核心来设计,但它绝对能够完成营销的目的。

逻辑目的:支持产品品牌概念,帮助推销产品。

 

译文来自:简书

译者薛斯塔

英文原文地址http://www.smashingmagazine.com/2015/05/functional-ux-design-animations/

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

(0)
CatherineCatherine
上一篇 2017-06-03
下一篇 2017-06-03

相关推荐

  • 【涨姿势】Twitter安卓端体验的全面革新

    手机设计 第一步 我开始设计App所做的第一件事情就是记录一个功能列表作为主要导航,这些功能是由客户所描述的,使用这些功能,我做出了App的基本用户使用流程。然而,在这个项目中上述行为都是不必要的,因为twitt…

    IxD案例 2015-08-27
  • 人机工程学在交互设计中的运用

    大家在做设计的时候都会遵循一些交互规范或者常用的一些规律,但是经常情况下,我们都没有深入的研究为什么这样定义这个数值,这个数值是否合理?如果没有严格的理论支持,在设计中直接运用一些规律,就有被挑战的可能。下面我谈谈几点我从人机工程角度分析的我们通常使用的一些数值。

    2017-05-03
  • 12个很不错的UI交互设计动效灵感

    转自:设计达人(ID:shejidaren888)链接:http://www.shejidaren.com/ui-interactions-01.htmlUI动效设计是每位设计师们的一个进阶技能,我们做动效时,不仅仅要有用,而且还有好看哦,今天达人分享来自muzili整…

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

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

    2018-02-25
  • Android电视应用:Amazon Fire TV版TVPlayer设计

    设计和研发、推广一道,是移动应用的成功要诀之一。定义用户操作应用的方式,与应用的功能和高效的盈利模式同等重要。而且,当涉及到为电视这样的新交互模式设计界面,许多在智能手机和平板上有效的模式,都需要重…

    2016-10-18
  • 用户体验设计中的功能动画

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

    2018-03-22
  • 交互设计师在未来的5种转型方式

    每个设计师在工作的不同阶段或多或少都会有一些迷茫:如何提升设计的专业度?如何提高设计师在公司里的话语权?是否需要转型?如何转型?甚至怀疑自已不适合做设计等其它困惑和问题,下面就给大家简单说明下设计师在不同阶段该如何自我成长及转型。注:本篇关于PMD及架构型设计师的内容相对多些,其余更加偏向于方向性,后面会对其再进行针对性的研究和分析,同时也欢迎大家一起参与讨论。

    2017-05-04
  • 聊聊蒙版引导的应用场景以及设计建议

    蒙版引导一直是一个十分热门的话题,对于很多用户来讲经常会不彻底阅读甚至快速关闭来结束引导,这样便起不到很好的教育作用。甚至还有“在界面上添加这些并不会让你的产品变得更易用”的说法(观点引自文章“Misused mobile UX patterns”)。但我认为这种说法过于片面,对于一些流程复杂或者功能个性的产品应用,添加蒙版引导进行说明,是十分有必要的。

    2017-05-11
  • Axure RP 8 入门手册 – 第1章(上)

    第一篇基础第1章准备工作与注意事项第1节下载安装Axure RP8第2节原型相关的文件类型第3节文件自动备份与找回第4节功能区域的视图设置前言【网络稿】2015年夏天,经济形势日趋恶劣,小楼所在的公司业务规模大幅缩减,无奈之下,公司决定各部门进行裁员。小楼断然决定主动申请辞职。2015年8月17日,AxureRP8.0Beta版首次发布的日子,小楼提着收拾好的杂物袋,站在公司的门外,看着公司的LOGO墙,旁边是一年前来到公司的大学生苏苏...

    2018-03-29
  • 说句心里话,这5种常见的设计模式还是挺闹心的

    本文所提到的这5种设计模式确实有其恼人的一面,但是它们同样存在特定的优势。在许多设计项目中,在特定的需求之下,它们也可能是最佳的解决方案。另一方面,学会根据实际的状况来寻求优化的方案,也是设计师应当做到的事情。

    2017-04-28