“设计不仅仅是它的外观和感受。设计是它运作的方式。”--史蒂夫·乔布斯
“Design is not just what it looks like and feels like. Design is how it works.”
交互设计关注人与技术的互动。目标是增强人们理解可以做什么,正在发生什么,以及已经发生了什么。交互设计借鉴了心理学、设计、艺术和情感等基本原则来保证用户得到积极的、愉悦的体验。
在下文,我们将了解设计领域的著名学者唐纳德·诺曼在《The Design of Everyday Things》一书中,如何分析我们生活中日常用品的设计,
剖析背后的交互设计原则。让我们对交互设计有全新的认知,帮助设计师实现思维的跃迁。
唐纳德·诺曼是设计界的大拿,曾被美国《商业周刊》评为全球最具影响力设计师之一。他不仅是设计师,还是国际知名的心理学家,是美国计算机学会、心理学会、认知科学学会的会员。
他在 1988 年第一次出版的《The Design of Everyday Things》一书中,通过分析大量我们生活中日常用品的设计,提出了一套以人为本的交互设计原则。
这套原则无论是对交互设计中的人与技术的互动,工业设计中的人和物交互,还是对建筑中人和空间交互都有很深刻的指导意义。
书中最著名的案例则是关于「门」这个我们司空见惯的产品的分析。
带把手的门(转动把手,然后推或拉)、带竖凹槽的门(横向拉门)、带一小块铁板的门(推门)、带一条横杠的门(推门)、转门、自动门
没人教,也不用说明书,我们好像天生就知道怎么用「门」这个产品:
上文提到「门」的设计都具备好设计的两个重要特征:
可视性和易通性
。即操作方式能被发觉,操作过程能被理解。这是认知事物的一个连贯过程,看到和理解。
说白了,就是我一看到就知道应该如何操作,无需额外说明。
可视性(discoverability):
所设计的产品能不能让用户明白怎样操作是合理的,在什么位置及如何操作。
易通性(understanding)
:所有设计的意图是什么,产品的预设用途是什么,所有不同的控制和装置起到什么作用。
有些设计师为了整体美观,会刻意将门的把手隐藏起来,仿佛在跟用户捉迷藏。这样的产品虽显得「别出心裁」,但却违反了「可视性」原则,给用户的使用带来诸多不便。
前一阵我的朋友买了一辆全新的智能电动车,兴致冲冲的来找我炫耀,但当车停在我面前时,我却发现不知道该如何打开车门,心想“是不是我太OUT了,连车门都不会开。”看着我等在车外手足无措的模样,朋友在车内的大屏幕上轻轻一按,车门自动打开。
几乎所有标榜“新造车”和“科技感”的品牌,都将车门把手藏了起来。这些被“藏起来”的设计改善了车辆的空气动力学,看起来颇具未来感,却多了寻找和等候的步骤。极端情况下,有时还可能遇到冬天被冻住的麻烦,且存在安全隐患。所以说,
一个优秀的设计,必须具备可视性和易通性(
易发现易理解)。
设计消除歧义的产品,而不是让原本简单的事情变得复杂。
关于任何设计,我们必须问的问题:如果这是一扇“门”我该如何设计?
知道了什么是好设计,接下来要说的就是,设计一个好产品的原则是什么。
唐纳德·诺曼将交互的「可视性原则」归纳为和五种基本心理学概念相关,这五种基本概念分别是:
示能、意符、约束、映射、反馈。
示能对设计至关重要,它可以给用户提供明确的操作信息,而且不显得繁琐,是实现可视性和易通性的重要手段。
示能是指一个物理对象与人之间的关系。(无论是动物还是人类,甚至机器和机器人,他们之间发生的任何交互作用)示能是物品的特性与决定物品预设用途的主体的能力之间的关系。
椅子可以提供支撑,人们可以坐上去。其中大多数椅子可以被一个人携带,但是有些椅子一个人就无法搬动,比如下面这个三连座,对于单个人来说没有可移动性。有些椅子提供了滑轮,对人们来说这个椅子除了搬移还可以轻松拖动。这种物品表现出来的,让人们一看就知道自己能不能移动它,可以搬动还是拖动它的这种关系就是示能。
相对的,物品表现出来的不可操作性也应该被表现出来,也就是反示能。
大家可以在上下班的地铁上发现很多示能的案例,椅子为人提供坐的示能,把手为人提供抓握示能,玻璃为人提供倚靠的示能,其中上下门是禁止依靠的就提供了一种「反示能」,这里主要依靠的是意符提示。所以,我们把这种揭示"示能"的符号、提示功能、线索、称为「意符」。
示能的符号提示功能叫做意符。
说白了,就是用户在使用前,为了让用户更好地理解和使用而做出的提示。
优良的设计要求对产品的目的、结构和设备的操作,与使用者进行良好的交代。这就是意符的作用。
示能决定可能进行哪些操作,意符则点明操作的位置以及如何操作。
我们可以把界面中的示能理解为隐喻,比如图标、按钮、控件都是UI中的隐喻要素。一个齿轮图标代表设置,一支笔的图标表示编辑功能。这种隐喻在UI 设计中随处可见,它可以加深用户对信息的理解,帮助提升产品的易用性。由于界面以视觉图形占主导,极少有其它物理特性,所以在界面设计中更多采用平面的手段来表达。
一个最基础的开关,我们通过「颜色」的变化(灰色表示关闭,绿色表示打开)来隐喻开或关的状态,可视性很强可以被明显感知到。
一个弹幕开关功能,我们通过「图标形态」的变化(禁止是关闭,对勾是开启)来隐喻开或关的状态。
一个视频页面的播放/暂停功能,我们通过「图标形态」的变化来隐喻播放或暂停的状态。(需要注意的是,暂停图标的隐喻是正在播放,播放图标的隐喻是已暂停)
一个主页的关注功能,我们通过「文字按钮」的变化来隐喻未关注和已关注的状态。
谷歌Material Design 。
通过模拟材料本身的特性来提供界面隐喻。比如投影、质感、符合物理定律的运动等都是为了解决数字世界中的的交互隐喻,让界面更贴近真实物理世界,为用户创造清晰、直观、舒适的操作体验。而这一切都建立在谷歌的设计理念之上:
人对材质触感有着天然的感知,这是一切隐喻的基础
。
苹果IOS 。
另一套界面设计理念是苹果在 iOS 7 之后提出的,俗称毛玻璃效果。毛玻璃效果为界面元素增加一定的模糊和透明度,划分 Z 轴层级,从而营造出层次感。正如 iOS 设计指南中写到:半透明的 UI 元素底下的内容隐约可见,这种界面的隐喻帮助用户理解当前界面的后面还隐藏着更多内容,层级感一目了然。
时代背景下的行业变迁,科技发展,从CLI命令行界面、GUI图形用户界面、CUI对话式用户界面、NUI自然用户界面,大家开始探索更多的交互方式,创造更自然的交互体验成为趋势, 比如手势操作,语音助手,多模态交互。
在未来当设计师接触不同的交互对象(产品、服务),不同的交互介质(鼠标键盘、触屏、VR、AR、MR空间交互),不同的交互环境 (时间、地点、人群)将有更多交互探索和实践。交互将推动未来技术的变化。当然这些都离不开基础的交互原则对设计师的指导。