设计闲话 #16: 界面中的无意识设计

什么是设计的可供性?

可供性是一个很值得玩味的专业词汇。一方面,在中文语境下这个词很难翻译得准确,它包含太丰富的语义。另一方面,这个词汇又可以用在很多的设计语境中,任何一个不好的设计,你都可以说它可供性不好,因为可供性跟设计目标几乎是息息相关的。那么可供性究竟是怎么定义的?先看维基:

可供性(affordance),或称为直观功能、预设用途、可操作暗示、支应性、示能性等,指一件物品实际上用来做何用途,或被认为有什么用途。也就是说在物品的某个方面,具有让人明显知道该如何使用它的特性。例如门提供“打开”的功能,椅子提供“支撑”的功能。人们得知如何使用物品有一部分来自认知心理学,另一部分来自物品的外形。

茶杯把手意味着可以茶杯可以「拿起来」

从维基的定义来看,可供性是产品一种不言而喻的功能隐喻,让人一眼就能看出它具有什么功能,该如何操作它。《通用设计法则》这本书则把
affordance 翻译为「功能可见性」,这样翻译似乎更通俗易懂点。书中举了 Don
Norman 这个经典的案例来说明 affordance
,门把手的功能可见性是「拉」,但「推」的标示却跟门把手互相矛盾,解决方案是右图,用平面金属板代替把手,消除「拉」的功能可见性。

门的「推」与「拉」

可供性的设计理念首先是从工业产品发端的。一件好的工业品,使用者可以不假思索地使用它。原研哉的书中经常提到可供性这个概念,强调产品应该融进使用场景,其实就是产品可供性的外延。

原研哉《设计中的设计》中的设计案例

上图的两个案例,第一个下垂的拉绳提供强烈的下拉隐喻,一个不假思索的下拉动作,音乐随即响起。第二个案例中的雨伞,设计者为了解决一手提袋子一手拿雨伞的窘境,在雨伞把手上设计出了一个凹下去的凹痕,让使用者不用思考就学会了把袋子挂把手的操作。这两个案例是对可供性这个概念的很好的诠释。通俗点讲,可供性就像是文章的上下文语境,工业产品通过造型和周边环境的映衬,来给用户足够的操作和功能隐喻。

Hi-iD
的文章《Affordance(可供性)和设计》很经典,厘清了可供性和无意识设计
(Without-thought) 的概念。

UI 中的可供性

为了不使讨论过于泛化,我们可以把可供性在 UI
中可以理解为隐喻,比如常见的图标、按钮、控件就是 UI
中的隐喻要素。一个齿轮图标代表设置,一支笔的图标表示编辑功能。这种隐喻在
UI 设计中随处可见。但 UI
是二维的,它的功能可供性跟工业产品不一样,工业品可以通过触感、嗅觉、光影等等去增强可供性,UI
只能通过平面的手段去寻找办法。

比如谷歌的 material design
企图通过模拟材料本身的特性来提供界面隐喻。比如光影、质感、符合物理定律的运动等都是为了解决数字世界中的的交互隐喻,提供更有力的可供性。MD
的投影隐喻界面中的层次感,并借鉴了传统的印刷设计——排版、网格、空间、比例、配色,来构建用户熟悉的视觉世界。而这一切都建立在谷歌的理论根据之上:人对材质触感有着天然的感知,这是一切隐喻的基础。

Material Design 的理念

与谷歌截然不同的另一套界面设计理念,苹果在 iOS 7
之后提出的,俗称毛玻璃效果,则从利用玻璃质感来构建 UI 的层级关系。正如
iOS 设计指南中写到:

半透明的 UI
元素底下的内容隐约可见,这种界面的隐喻帮助用户理解当前界面的后面还隐藏着更多内容,层级感一目了然。

毛玻璃的效果确实更接近真实世界的视觉经验,距离 iOS 7
发布四年过去了,大众早已习惯了毛玻璃,众多安卓厂商都在竞相模仿,Material
Design
那一套为数字虚拟世界构建的隐喻体系似乎打动不了用户,这说明真实世界的映射映射是多么重要。

控制中心

可供性 (affordance) 由 Don Norman
带进设计领域,它指一件物品根据其物理特性而提供给人的行为的可能性[[1]](https://www.jianshu.com/p/99790091c476#fn1)。而无意识设计
(Without-thought)
是深泽直人的理念,通过审视人们的潜意识行为,再为之设计。原研哉在《设计中的设计》中认为,两者有异曲同工之处。

图形化隐喻增强 UI 的可供性

在图形化界面的初期,人们对界面的认知是空白的,毫无经验的,所以软件图标基本都是拟物化的,设计者都希望用户可以借用现实经验来理解这些虚拟的数字化产品,所以容量图标画个实体硬盘,主页图标画个房子,设置画个齿轮等等,但随着用户对数字化产品的认知逐渐加深,不再需要借用现实经验来加强用户认知了,因为它本身已经自成体系。

以 iOS 的桌面图标为例,从 iOS 6 到 iOS
11,图标原有拟物化的质感被去掉,代之以抽象的色块、渐变、线条、符号,图标的历史使命,即帮助人们从真实世界跨向虚拟世界的认知跃升已完成。现在
UI
中的图标,已经基本脱离现实的隐喻,想想百度、淘宝、京东等主流应用的图标吧,完全是基于虚拟世界构建的视觉认知。

iOS 图标扁平化的过程就是在逐渐减少现实隐喻

虽然界面中的图形已经逐渐脱离现实经验的隐喻,但在一些跟实体有关联的产品中,我们还能看到很多用现实经验隐喻来增强界面的使用体验。比如音乐播放界面用唱片机的样子,读书产品的页面跳转模拟真实翻书的效果,共享单车
APP 还是用单车的形象等。UI
利用现实隐喻来增强界面功能可供性的做法会一直存在,只是随着人们虚拟世界的经验越来越丰富,会越来越少而已。

提供丰富现实隐喻的应用界面

可供性现在已经被广泛运用在交互设计领域,但如果要找出用户界面中的无意识设计例子,似乎一下子很难想出来。界面中有没有无意识设计的例子?

最后

可供性在 UI
设计中的讨论越来越少了,可能是因为扁平化到现在,很多界面越来越多的使用文字按钮了,功能所见即所点,隐喻似乎没有必要了。在更有未来感的科幻片中,你也会发现所有的操作面板几乎都是文字按钮,这样更直观,符合人机交互的理想境界:忘记界面,自如操控。


在探究这个问题之前,有必要先讨论两者的异同。

参考资料

《Universal Principle of Design》by William Lidwell、Kritina 
Holden、Gil Butler

澳门威尼斯人app,《The Design of Design》by 原研哉

《iOS Human Interface Guideline》by Apple

《Materila Design》by Google

澳门威尼斯人app 1

深泽直人设计的雨伞架

常见的雨伞架,在架子上有一些孔洞,让人们可以将伞插进去。但深泽先生坚持不做出这样的设计。他观察到,当人们需要放伞却没有雨伞架的时候,人们会将伞柄靠在墙上,末端卡在地砖的缝隙、让伞得以平衡。因此,他给出的方案是在地面上开辟一条凹槽。

当人们想要放伞的时候,会留意到地面的凹槽,潜意识地把雨伞靠着墙边。从可供性的角度来看,地板缝隙的凹槽状拥有可以支撑棍子的可供性,深泽先生准确洞察到了它,并尝试放大。从这个例子可以看出可供性和无意识设计的相似。

澳门威尼斯人app 2

Post Author: admin

发表评论

电子邮件地址不会被公开。 必填项已用*标注