交互作用设计中的成效动效

来源:http://www.qstr868.com 作者:联系我们 人气:149 发布时间:2019-11-06
摘要:翻译自: 必威体育丿betway088 ,Functional Animation In UXDesign 本文是我在SmashingMagazine看到的一篇关于如何在移动应用设计中运用微动效的译文。初次翻译文章,很多词句用的可能不太妥当,

翻译自:必威体育丿betway088 ,Functional Animation In UX Design

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

译者纪:本片文中包含大量的动态页面(原网站是视频链接,本网站上传视频不能排序,故人工转为动图),加载较缓慢,请各位多点耐心,么么哒

下面进入译文。


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

一个好的交互设计师可以很容易的解释设计里面的决定背后的逻辑。这包含着信息架构,页面内容的层次结构,流程和所做的解释。

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

迟早,动效将会应用到线框图原型中,这个时候,再去对设计做决定或者是解释,将会变的难一些。例如一些这样的理由:太狂拽酷炫了……太潮了……太鸡冻了……这将是设计失去其力度的领域(Reasons such as “It will be cool!” or “It’s trendy” or ”exciting” are exactly the areas where a design starts to lose its strength.)在我们的设计中,动效理应占到更多的比重。我们应该去定义动效,并且阐述他们的目的——像我们阐述一个设计中其他的元素一样。

什么是功能性的动效?

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

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

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

什么是功能动效?

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

不像是迪斯尼出的动效(动画)或者是电脑游戏中的动效,我们这里讲的功能动效拥有一个清晰的、有逻辑性目的。这个目的为是我们想要传递的设计理念服务的。功能动效是我们UX(交互设计)工具库中的又一个工具。

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

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

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

引导性(Orientation)

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

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

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

1、导向

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

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

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

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

例如:下列两个动图:

必威体育手机端 ,相同的位置,不同的动作(Same Location, New Action)

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

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

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

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

2、相同的位置,新的功能

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

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

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

逻辑目的:强调动作按钮的功能变化。

例如:下列两个动图:

放大(Zoom In)

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

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

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

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

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

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

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

3、放大缩小

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

我们经常在图像库、卡片和条目选择中见到这样的动效。用户选择了一个条目,条目马上响应用户的选择,在屏幕上显示对应的细节内容。

这里的困难是必须让用户继续感到掌控感,并且还在原来的流程中。功能动效在这时候往往是必不可少的。

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

1、初始状态时条目的列表。

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

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

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

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

例如:下列两个动图:

视觉暗示(Visual Hint)

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

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

4、视觉提示

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

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

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

高光标注(Highlight)

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

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

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

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

5、突出

这种动效可以吸引用户在内容太多的环境下的注意力。

设计师通常是避免嘈杂的布局和太多的内容的,当内容太多时,屏幕中的各种颜色和内容均试图吸引用户的注意。

一个解决的方式就是从界面上去掉些内容,但是这个方式在有的时候并不是那么给力。试图想一下一个新闻网站的负责人想要移除一些新闻和图片。

另一个角度想一下。动效是可以自然而然的得到页面上的视觉焦点的。无论是文本内容还是静止的图片,都是无法与动效比拟的。我们可以利用功能动效的这一优点。记住,通过添加动效获取最高视觉焦点是对嘈杂界面的一个缓坡。

在下面动效的例子当中,我们可以看到,在嘈杂的网页中把一个物品加入到购物车是不明显的。所以,这时候就需要动效。

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

例如下面一个动图。

未完待续

模拟(Simulation)

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

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

视觉反馈(Visual Feedback)

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

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

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

系统状态提示(System Status)

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

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

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

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

3.评估动作的进度状态

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

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

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

营销工具(Marketing Tool)

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

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

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

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

本文由必威体育丿betway088发布于联系我们,转载请注明出处:交互作用设计中的成效动效

关键词:

上一篇:没有了

下一篇:没有了

最火资讯