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

译者语:本文是我在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

相关推荐

  • 网易云音乐交互负责人|从一次活动设计,聊聊交互设计师的3个阶段

    交互设计师的三阶段:有美感、有逻辑、有sense

    2017-05-18
  • 交互设计与服务设计视角下,谁才是用户,什么又是产品?

    服务设计,是2017-2018比较火热的一个专业了,相比于交互设计或工业设计,服务设计更关注与利益相关者之间的关系。今年的Aalto New Media 专业的申请中,有明确要求需要根据两篇文章的读后感写一篇Essay(1),其中一篇是“How to Fix Facebook—Before It Fixes Us(2)”,深入阅读之后,有一个明确的观点想和大家分享一下。之前从交互式设计角度或者用户研究角度对于 Facebook 的分析文...

    2018-05-02
  • 交互设计流程是怎样的?

    其实这个问题也是我的学生最爱问的问题,不论国籍。先说下我的背景吧。我是国内软件工程本科+美国UW HCDE master,现在在硅谷做用户体验设计并且教用户体验课程。之所以强调自己的背景,是因为我看到的大家给出的见…

    2016-10-25
  • 在交互设计过程中,你需要持续关注的五个问题

    认真对待交互设计过程中的每一个设计环节、每一个问题,是提高交互稿质量的基石。过程中的问题很多,需要我们持续关注并解决。

    2017-05-02
  • iOS 9人机界面指南(一):UI设计基础

    译者注:本文译自苹果官方人机界面指南 iOS Human Interface Guidelines (2015年10 月21日),由腾讯ISUX设计师翻译整理,非发文者一人之作。

    2017-06-02
  • 为什么互联网产品经理转做智能硬件后就不灵了呢?

    互联网产品经理转做智能硬件后还能像过去那样玩得转吗?互联网PM和智能硬件PM有何区别?知乎用户忘象Van以其亲身的经历,从定位、KPI考核、关注点、项目追求和成本意识的五个差别做了详细的解答:我做过手机PM,也做过互联网PM,感觉这个问题就是为我量身定做的。所有的区别都可以用一句话概括——硬件PM是生意人,互联网PM是设计师。————————————产品经理是近年来严重泛滥的一个词,而且由于互联网行业的强盛,导致大家对这个岗位的认知完全...

    2018-03-12
  • 交互设计攻略之“竞品分析”上

    前言:无论一个产品是从0到1,还是从1到2,我们需要对自身产品有一个清晰的认知与定位,最快的方式就是竞品调研。知己知彼,取长补短。(这里针对自家产品做的一个竞品调研分享,请勿商用。)首先,我们要确定竞品调研的目的是什么?很简单:为了选取同类型产品功能,可供学习与借鉴的地方,从而对本产品平台进行迭代优化。运用金字塔原理自上而下的方法解决“竞品分析的目的”是找出【同类竞品学习与借鉴】,那么引申的问题如下:一、同类型产品有哪些?想知道同类型产...

    2018-03-16
  • 如何加入AxureRP模板库会员

    点击边框调出视频工具条会员简介加入AxureRP原型库会员后可以获取社群中的全部元件库及付费原型模板(后续更新免费),节省您画原型70%的时间,聚焦业务逻辑和行业积累才是根本。通过我们的会员群能第一时间获得产品及原型设计方面的解答帮助,同时还有仅对会员开放的私有干货分享不限于产品课程、PRD文档和产品书库等诸多福利。社群服务,量化才有价值1.每两个月提供一份全新的AxureRP项目原型模板,by 三杠;2.免费下载社群中已有的所有干货资...

    2018-03-24
  • “用户体验” 才是售电公司的未来(中电联课程)

    本文由全球首家智能传媒平台—中传媒平台(CMCNP)提供对于售电公司来说,用户体验就是电力用户用电过程的一个主观感受。那这样就有一个疑问:用电还有什么区别吗?电本身就是无差别的商品。所以,售电公司就应该提供差异化增值服务以满足用户体验。如果不谈用户体验,那售电公司单凭价差、所谓的增值服务去吸引用户,去谋未来?价差谁比的过电厂的售电公司,增值服务谁不会,不知道中国人最擅长的就是“借鉴”吗?如果是这样,独立售电公司在市场上就真的没什么竞争力...

    2018-02-05