什么是设计的可供性?
可供性是一个很值得玩味的专业词汇。一方面,在中文语境下这个词很难翻译得准确,它包含太丰富的语义。另一方面,这个词汇又可以用在很多的设计语境中,任何一个不好的设计,你都可以说它可供性不好,因为可供性跟设计目标几乎是息息相关的。那么可供性究竟是怎么定义的?先看维基:
可供性(affordance),或称为直观功能、预设用途、可操作暗示、支应性、示能性等,指一件物品实际上用来做何用途,或被认为有什么用途。也就是说在物品的某个方面,具有让人明显知道该如何使用它的特性。例如门提供“打开”的功能,椅子提供“支撑”的功能。人们得知如何使用物品有一部分来自认知心理学,另一部分来自物品的外形。
从维基的定义来看,可供性是产品一种不言而喻的功能隐喻,让人一眼就能看出它具有什么功能,该如何操作它。《通用设计法则》这本书则把 affordance 翻译为「功能可见性」,这样翻译似乎更通俗易懂点。书中举了 Don Norman 这个经典的案例来说明 affordance ,门把手的功能可见性是「拉」,但「推」的标示却跟门把手互相矛盾,解决方案是右图,用平面金属板代替把手,消除「拉」的功能可见性。
可供性的设计理念首先是从工业产品发端的。一件好的工业品,使用者可以不假思索地使用它。原研哉的书中经常提到可供性这个概念,强调产品应该融进使用场景,其实就是产品可供性的外延。
上图的两个案例,第一个下垂的拉绳提供强烈的下拉隐喻,一个不假思索的下拉动作,音乐随即响起。第二个案例中的雨伞,设计者为了解决一手提袋子一手拿雨伞的窘境,在雨伞把手上设计出了一个凹下去的凹痕,让使用者不用思考就学会了把袋子挂把手的操作。这两个案例是对可供性这个概念的很好的诠释。通俗点讲,可供性就像是文章的上下文语境,工业产品通过造型和周边环境的映衬,来给用户足够的操作和功能隐喻。
UI 中的可供性
为了不使讨论过于泛化,我们可以把可供性在 UI 中可以理解为隐喻,比如常见的图标、按钮、控件就是 UI 中的隐喻要素。一个齿轮图标代表设置,一支笔的图标表示编辑功能。这种隐喻在 UI 设计中随处可见。但 UI 是二维的,它的功能可供性跟工业产品不一样,工业品可以通过触感、嗅觉、光影等等去增强可供性,UI 只能通过平面的手段去寻找办法。
比如谷歌的 material design 企图通过模拟材料本身的特性来提供界面隐喻。比如光影、质感、符合物理定律的运动等都是为了解决数字世界中的的交互隐喻,提供更有力的可供性。MD 的投影隐喻界面中的层次感,并借鉴了传统的印刷设计——排版、网格、空间、比例、配色,来构建用户熟悉的视觉世界。而这一切都建立在谷歌的理论根据之上:人对材质触感有着天然的感知,这是一切隐喻的基础。
与谷歌截然不同的另一套界面设计理念,苹果在 iOS 7 之后提出的,俗称毛玻璃效果,则从利用玻璃质感来构建 UI 的层级关系。正如 iOS 设计指南中写到:
半透明的 UI 元素底下的内容隐约可见,这种界面的隐喻帮助用户理解当前界面的后面还隐藏着更多内容,层级感一目了然。
毛玻璃的效果确实更接近真实世界的视觉经验,距离 iOS 7 发布四年过去了,大众早已习惯了毛玻璃,众多安卓厂商都在竞相模仿,Material Design 那一套为数字虚拟世界构建的隐喻体系似乎打动不了用户,这说明真实世界的映射映射是多么重要。
图形化隐喻增强 UI 的可供性
在图形化界面的初期,人们对界面的认知是空白的,毫无经验的,所以软件图标基本都是拟物化的,设计者都希望用户可以借用现实经验来理解这些虚拟的数字化产品,所以容量图标画个实体硬盘,主页图标画个房子,设置画个齿轮等等,但随着用户对数字化产品的认知逐渐加深,不再需要借用现实经验来加强用户认知了,因为它本身已经自成体系。
以 iOS 的桌面图标为例,从 iOS 6 到 iOS 11,图标原有拟物化的质感被去掉,代之以抽象的色块、渐变、线条、符号,图标的历史使命,即帮助人们从真实世界跨向虚拟世界的认知跃升已完成。现在 UI 中的图标,已经基本脱离现实的隐喻,想想百度、淘宝、京东等主流应用的图标吧,完全是基于虚拟世界构建的视觉认知。
虽然界面中的图形已经逐渐脱离现实经验的隐喻,但在一些跟实体有关联的产品中,我们还能看到很多用现实经验隐喻来增强界面的使用体验。比如音乐播放界面用唱片机的样子,读书产品的页面跳转模拟真实翻书的效果,共享单车 APP 还是用单车的形象等。UI 利用现实隐喻来增强界面功能可供性的做法会一直存在,只是随着人们虚拟世界的经验越来越丰富,会越来越少而已。
最后
可供性在 UI 设计中的讨论越来越少了,可能是因为扁平化到现在,很多界面越来越多的使用文字按钮了,功能所见即所点,隐喻似乎没有必要了。在更有未来感的科幻片中,你也会发现所有的操作面板几乎都是文字按钮,这样更直观,符合人机交互的理想境界:忘记界面,自如操控。
参考资料
《Universal Principle of Design》by William Lidwell、Kritina Holden、Gil Butler
《The Design of Design》by 原研哉
《iOS Human Interface Guideline》by Apple
《Materila Design》by Google