作为体验或界面设计师,你可知什么时候、什么地方用动效来提升可用性?

本文将表述我对这个问题的回答——“作为体验或界面设计师,如何得知什么时候、什么地方用动效来提升可用性?”Z Yuhan:这篇文章真的超级难翻译啊,原文的描绘非常细腻隐晦,大部分句子根本没法直译,只能理解后用中文的表达方式重新造句,幸好我的翻译水平也有进步啦~大家要是发现有什么问题,不论是翻译还是错字,欢迎评论我指正 : )


本文将表述我对这个问题的回答——“作为体验或界面设计师,如何得知什么时候、什么地方用动效来提升可用性?”

作为体验或界面设计师,你可知什么时候、什么地方用动效来提升可用性?

过去的5年中,我通过自己的工作坊和课程,在四十多个国家,为几百个顶尖品牌提供了体验和界面的设计指导。

研究了15年的界面动效后,我总结出了12个使用动效提升产品体验可用性的机会点,我将其称之为“十二条动效体验原则”。这些原则能够以无限的创新方式互相堆叠组合。

我将这篇“宣言”分为五个部分:

  1. 什么是界面动画——不是你想的那样
  2. 即时vs非即时交互
  3. 动效提升可用性的四种方式
  4. 理论、手段、属性和值
  5. 十二条动效体验原则

1、界面动画不是你想的那样

因为界面动效经常被设计师理解成“界面动画”——然而并不是——我觉得进入十二条原则之前有必要提供一些背景信息。

“界面动画”很容易被设计师想象成某种增强愉悦体验的东西,自身并不具备什么价值。继而“界面动画”常常被当做用户体验的拖油瓶,像化妆中的口红一样,通常作为最后一步点缀。

另一方面,界面动效理所当然地被当做迪士尼动画的某一种分支,对于这点我曾在《UI Animation Principles — Disney is Dead》中发表过反对观点。

这篇“宣言”中我将告诉你,“界面动画”之于“十二条动效体验原则”,就好比“施工”之于“建筑”。这句话的意思是,一栋楼房需要在物理上被真正建造才存在(需要施工),而决定该建造什么的来自基础理论。

动画是关于工具的。理论或原则是关于想法的实施运用,能够指导工具的使用,可以为设计师提供杠杆和机会点。

“界面动画”事实上是更高等级的设计展现形式:表达界面元素在即时和非即时事件下的行为动作。

2、即时vs非即时交互

首先很重要的一点是,要区分“状态”和“行为”。用户体验中,状态是静态的,作为设计上的补充属性;而行为是基于时效和动态的。举个例子,一个元素能够被遮罩,这个遮罩可以是一种状态,也可以是一种行为。如果是行为,那么动效就可以加入,帮助提升可用性。

除此之外,所有的交互行为,从是时效性上,可以被分为即时发生和非即时发生。即时表示用户是直接与界面元素进行互动的;非即时表示界面元素的动作是在互动之后的:作为过渡,在用户操作之后才出现。

作为体验或界面设计师,你可知什么时候、什么地方用动效来提升可用性?

作为体验或界面设计师,你可知什么时候、什么地方用动效来提升可用性?

区分这两个概念很重要。

即时交互也可以被理解成“直接操作”,因为这种用户与界面元素的交互是直接而同时的。非即时交互通常在用户操作之后才发生,并且在过渡完成之前,都不允许用户进行其他交互。

上述澄清能够帮助大家更好地融入十二条动效体验原则的世界观。

3、动效提升可用性的四种方式

下面将介绍用户体验时效动作提升可用性的四大支柱。

可预期

预期包含两个方面——用户如何感知界面元素是什么,以及界面元素如何动作。换种说法就是,作为设计师,我们想要减小用户预期与实际体验之间的差距。

连续性

连续性即关乎用户流程的顺畅,也关乎用户体验的统一。连续性是整个用户体验的连续性,既包含场景/页面之内的连续性,也包含场景/页面之间的连续性。

描述性

描述指的是通过用户体验的线性事件,所构造出来的时空框架。可以理解成相互连接并贯穿整个用户体验的一系列关键时间与事件。

关联性

关联指的是界面元素之间的时空和等级表现,这些都能够帮助用户理解和决策。

4、理论、手段、属性和值

Tyler Waye 说过,“理论……是功能的基础前提和规则,而功能能够产生很多的技术手段。无论变数,这些要素都不会改变”。所以我想要再次强调,原则与设计无关。

想象一种等级结构,理论在顶端,下面是技术,再下面是属性,最底部是值。

手段可以被认为是理论的无限制执行,我认为类似于“风格”。

属性是用户创造技术的特定参数,可能有位置、透明度、比例、角度、锚点、颜色宽度、形状等。

值是实际的随时间变化而变化的数值,以此创造我们所谓的“动画”。

到此为止,用一个例子解释,你可以说一个界面动画基于模糊(Obscuration)的理论原则,使用“毛玻璃”的手段,其模糊和透明度的属性分别是25px和70%。

——

本文译自《Creating Usability with Motion: The UX in Motion Manifesto》的前半部分。后半部分《十二条动效体验原则》将详细描述作者的结论和各种动效类型。

Z Yuhan:这篇文章真的超级难翻译啊,原文的描绘非常细腻隐晦,大部分句子根本没法直译,只能理解后用中文的表达方式重新造句,幸好我的翻译水平也有进步啦~大家要是发现有什么问题,不论是翻译还是错字,欢迎评论我指正 : )

 

译者:Z Yuhan

译文地址:https://zhuanlan.zhihu.com/p/27676738?group_id=865286594767237120

本文由 @Z Yuhan 授权发布于人人都是产品经理,未经作者许可,禁止转载。

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

(0)
CatherineCatherine
上一篇 2017-08-04
下一篇 2017-08-04

相关推荐

  • 用户心理研究:制造期望与控制期望

    在这之前,还请大家先跟随着我回想几个电视电影经常能够看得到的情景。当然,以上只是部分情景,实际上还有数之不尽的情景,你闲着没事可以自个儿多整理些出来。通过上面三个情景我们可以看到剧中人所制造出的三个期望:

    2017-05-29
  • 2017年交互设计的10大趋势

    UI 设计的趋势是变化非常快的,有的时候我们的脚步总是可能慢了一拍。 随着 2016 年接近尾声,Lin. 为大家整理了外网大牛 Jamie Leeson 总结的 2017 年 UI 设计的 10 个重要的趋势。01. 沉浸式的全屏视频Campos Cof…

    2017-08-02
  • 新手转向资深的必经之路——交互文件命名的最详细规范(上)

    经过一期带团队的体验,阁主发现文件命名有点让人抓狂,实在忍不住更新一篇文章去说说这其中大家约定俗成的规则,不仅包括切图命名规则,还包括文件整理规范。之前楼主有整理过简单的,貌似不够用,今天再来具体说说。

    2017-05-01
  • 机器学习相关——协同过滤,探索推荐引擎内部的秘密,第 2 部分: 深入推荐引擎相关算法 - 协同过滤

    本系列的第一篇为读者概要介绍了推荐引擎,下面几篇文章将深入介绍推荐引擎的相关算法,并帮助读者高效的实现这些算法。 在现今的推荐技术和算法中,最被大家广泛认可和采用的就是基于协同过滤的推荐方法。它以其方…

    2015-12-22
  • 干货推荐|数据可视化的五个步骤

    数据被称作是最新的商业原材料「21世纪的石油」。商业领域、研究领域、技术发展领域使用的数据总量非常巨大,并持续增长。就Elsevier而言,每年从ScienceDirect下载的文章有7亿篇,Scopus上的机构档案有8万个、研究人员档案有 1 千 3 百万,Mendeley上的研究人员档案有 3 百万。对于用户来说,从这个数据海洋中抓到关键信息越来越难。

    2017-05-29
  • 体验不仅是界面——百度UE大讲堂笔记整理

    一、从注册页面看移动端交互设计 不知道你有没有过这样的经历,碰到一个好奇的软件,或者为了下载某个资源需要注册,当看到繁琐的注册页面时,或者是一看到页面就觉得令人心累的注册过程,你就立马放弃了使用这款软…

    2016-03-02
  • 交互设计中的5项视觉指导原则

    【分类】经验分类:经验/观点/自译原作者: Jerry Cao翻译:@ifecIFEC团队译文UI中国旗下翻译团队,由热爱翻译热爱分享的设计师组成。IFEC译者翻译国外行业热文、规范文档。欢迎关注我们的官方微博 @ifec, 加入我们…

    2017-08-04
  • 交互设计入门–了解交互设计

    之前写过类似的文章,想写的东西太多,结果什么都没讲明白。所以重新写一套入门的教程,分「了解交互设计」、「交互设计的职能范围」、「交互设计的常用方法」……几个章节把我对这门行业的理解和经验做个分享。

    2017-08-04
  • 扛住100亿次请求 如何做一个“有把握”的春晚红包系统?(腾讯官方内部技术PPT下载)

    羊年春晚摇一摇活动已经落下帷幕,现在回过头来看看这一全民参与的有趣的活动背后,有着怎样的后台系统?这个系统又是如何被设计与实现出来的?   作者:张文瑞 iotazhang  腾讯 WXG 技术架构部,本文提供PPT…

    2015-11-10
  • 关于用户体验 生活才是最好的老师

    早早起床,天下去小雨,收拾完一切,带上我的花伞出门。今天的任务是买一双早已在网上看好的球鞋![我的主要需求]来到了步行街,街上的人还不少。我的目光在细雨的缝隙间不断的寻找着我心中的那个目标。偶然,在一个个华丽的招牌旁边,我发现了一个黑色的招牌,特别显眼!黑底白字虽然单调却不失档次,门内的贴画很简单,不是某某明星,仅仅是一双鞋子,在鞋子的表面,有几滴水珠。我不禁心中发起感慨,有意思。[广告展示的对比,不光是门头还是贴画,给我视觉上的冲击和...

    2018-02-07