浅谈 UI 设计中的可供性(affordance)

什么是设计的可供性?

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

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

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

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

门的「推」与「拉」

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

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

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

UI 中的可供性

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

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

Material Design 的理念

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

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

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

控制中心

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

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

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

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

虽然界面中的图形已经逐渐脱离现实经验的隐喻,但在一些跟实体有关联的产品中,我们还能看到很多用现实经验隐喻来增强界面的使用体验。比如音乐播放界面用唱片机的样子,读书产品的页面跳转模拟真实翻书的效果,共享单车 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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,425评论 4 361
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,058评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,186评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,848评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,249评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,554评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,830评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,536评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,239评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,505评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,004评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,346评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,999评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,060评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,821评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,574评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,480评论 2 267