浅谈 Affordance

在现实世界中,我们需要学习很多规则。有些用于规范社会行为,例如过马路需要走斑马线,开车要遵守交通规则,要会判断红绿灯,汽车尾部的红灯提醒我门注意车速车距。也有用于指引普通日常行为的规则,例如遥控器的使用说明,洗衣机的洗涤设定流程等等。

在路上
在路上

标识

在介绍 affordance 之前,先介绍一个与之相关的概念「标识(signifier)」。

正如文章开头所说的日常生活中的各种规则都被设计成各种各样的「标识」——交通规则、说明书。

Apple Remote
Apple Remote

遥控器上面有可理解文字的描述,可按下的按钮,这些都是标识提供的「信息」。人「拾取」了这些「信息」,对其进行或多或少的「加工」,然后与其交互并获得相应的反馈,这个过程就是一个完整的认知流程。

使用指引
使用指引

人在对这些标识信息的加工过程中,需要花一定的「力气」,相信很多同学在使用这些日常生活中的物件时,都曾经遇到使用障碍——在没看清楚遥控器上的标识前,我们根本不懂如何使用,有些甚至复杂到看懂了之后也无法灵活地使用。

使用说明
使用说明

然而,有些事物的信息却不需要太多的「力气」去加工。很多好的设计可以让我们效率更高,使用体验更好。人们可以轻易地从这些环境或者事物中拾取各种信息,而且无需加工和理解,即可知道如何使用以达到特定目的。其实这些无意识的「设计」,或者说这些能提供信息的物体属性,一直存在。

Affordance

下图是一个地铁站内的消防箱,用于存放和保护各种应急灭火器材。箱子正面写着「灭火器箱」,红色的涂料也表明了它的重要性和警示意义,盖子上的封条也说明了它不能被随意触碰等。这些认知都是人们对「标识」加工之后得出来的。

消防箱
消防箱

然而,一个在等候地铁进站的疲惫的乘客,坐了上去……抛开伦理道德和法律法规来看,为什么这个带着明显警示意义的箱子,还是有人会坐上去?

「凳子」
「凳子」

可以想象的是,因为这位乘客刚逛完街,实在是太累了,看到这箱子的表面是平整的、牢固的,长度和宽度刚刚好,这些箱子本身的属性加在一起提供了一个「可以坐上去」的信息,乘客拾取了这个信息,自然而然地坐了上去。

Affordance 一词由认知心理学家 James J. Gibson 创造。他用了一块地板来解释 affordance:如果一块地平面是水平的、平整的、坚硬的,面积足够宽广的,那么动物就可以在其上站立、行走或者奔跑。对于动物来说,地板的这四种属性提供了让动物可站立、可行走、可奔跑的特性。这种环境或物体所提供给动物的属性,就叫 affordance,即「可供性」。

上图中的消防箱子「平整」、「牢固」、「长度宽度」的属性,提供了可以坐上去的 affordance,也就是「可供坐下的属性」。

那么,「标识」与「可供性」有什么区别?

红绿灯是最常见的交通标识
红绿灯是最常见的交通标识

「标识」属于普通意识行为,它需要人主动加工和分析各种信息,例如红灯、斑马线、喇叭声等等,这里的「人」包括了设计者与使用者(用户),设计者加工出标识,然后让用户接收和分析标识。而且在接收这些信息的时候,用户的注意力是被吸引集中到信息上面的,例如在马路上我们必须时刻注意各种信号。

司机等红灯的时候,手累了,车窗的高度刚刚好可提供搁手
司机等红灯的时候,手累了,车窗的高度刚刚好可提供搁手

而 affordance 强调的是环境或者物体对于人的行为的拉扯作用。人无需费「力气」去分析加工物体所提供的某些属性,即可轻易地利用这些属性完成任务达成目标。

逛街累了的人,他们很自然地坐在路边的花基栏杆上稍作休息。因为栏杆的高度刚刚好。
逛街累了的人,他们很自然地坐在路边的花基栏杆上稍作休息。因为栏杆的高度刚刚好。

两者的差异在于认知过程所需的「力度」——affordance 的力度在阈值之下,是无意识的。

Without Thought
Without Thought

无印良品的产品设计师深泽直人在《不为设计而设计=最好的设计》一书中说,affordance 是「对动物而言的环境性质,它揭露了人们已经知道却没有发现之事」。他成立的一家取名为「Without Thought」的 workshop,就传达出很多对这类无意识行为的思考,他在很多文章和演讲场合都强调过,人与事物之间的关系应该是自然而然,不加思索的,而且不应添加太多无用的细节来刺激用户,只需「刚刚好」就行。

深泽直人的伞
深泽直人的伞

Affordance 也有好坏之分,越好的 affordance 对人的行为的拉扯力就越强。同样是石头,当你累的时候,你会选择哪一块?

选左边的同学请联系我
选左边的同学请联系我

身边的例子

最近下雨天,大家都带伞,下图是我们在很多地方都可以看到的普通放雨伞的桶。它还经常被误认为垃圾桶,甚至烟灰缸,这就是一个很好的 affordance 案例——一个桶可以被不同的人在不同的场景下,拾取到不同的信息和属性。

普通伞架
普通伞架

对于放雨伞这个行为,我们有没有别的设计方式?

下图是某韩国公司设计的伞架,更简单更纯粹。

韩国的伞架
韩国的伞架

很多时候我们都会把伞卡在瓷砖之间的缝隙之中,然后把伞靠在墙边。深泽直人便通过这个缝隙和墙壁可以提供「支撑伞」的属性,在门口玄关的墙边凿开一条小坑,以此设计出一个不显眼的「伞架」。

深泽直人的伞架
深泽直人的伞架

劳动人民的智慧是无限的,公司的花槽瞬间变伞架,还设计毛线啊?而且,无论有勾还是没勾,一样能架住。这时候,伞的手柄与花槽共同提供了可以挂靠的属性。

公司的伞架
公司的伞架

源起

一年多之前,在 Windows Phone 和 iOS 7 的带动下,兴起了扁平化的风潮。那时看到对扁平化铺天盖地的吐槽,我竟无言以对。

拟物化 vs 扁平化
拟物化 vs 扁平化

我一直在想,在特定场景之下,只要产品能够自动提供或者完成某些特定的需求,让用户不加思索地完成任务,那么高光渐变凹凸感等细节就变得毫无意义,变成多余的「标识」。我开始寻找关于无意识设计的案例,特别是 UI 设计领域的。

Apple 的 iOS 键盘,会根据不同的输入场景,提供不同辅助更能,例如在搜索框激活键盘,右下角的「return」按钮会变成「search」;还会调用不同字符的键盘,例如字母键盘、全数字键盘。

Apple iOS 键盘
Apple iOS 键盘

关于 Apple iOS 的键盘,还有一个黑科技。这是苹果的 No.7,900,156 键盘专利,大概意思就是当用户想输入 apple 这个单词的时候,在敲下字母「a」 后,系统会根据字典来预测例如 apple、action 之类的常用单词,判定下一个字母的位置「P」、「C」,并将这些字母的可触发区域放大,让用户更容易点击。

iOS 键盘专利
iOS 键盘专利

最近另外一个比较好的例子,就是 Apple Watch 的「Short-Look」与「Long-Look」模式。

Apple Watch Short-Look and Long-Look
Apple Watch Short-Look and Long-Look

当 Apple Watch 接收到新消息时,会同过振动通知用户,用户抬起手腕后,Apple Watch 将会激活屏幕显示消息的「Short-Look」模式——仅提供最简单的消息标题、应用名称和图标。如果用户觉得这个信息在当前场景下对自己没什么用处的话,必然会放下手腕,不加理会,此时 Apple Watch 就会忽略掉这条信息,标记为未读,继而关闭屏幕;如果用户觉得该通知信息有用,通常都会想进一步了解更多信息,那么手腕一般不会那么快放下,此时系统会识别这种情况并将通知信息调整为「Long-Look」模式,展示出信息的所有详细内容,并且通过信息的识别,提供一些简单的回应按钮,例如信息内容如果是「今晚去哪吃饭?福建料理还是兰州食堂?」,系统会提供「福建料理」、「兰州食堂」、「忽略」三个按钮给用户选择。

总结

Affordance 还没成熟,还有很多需要完善的地方,尚不足以作为一个工具或者方法论来应用于日常设计工作,也不建议大家这样做,因为如果把握不好,它就会沦为「找借口的工具」。但是我建议大家把它作为一个观察世界的方法或者角度,特别是在日常生活中,希望大家通过认识 affordance,能多留意身边的好例子。

参考来源:
《Affordance 可供性与设计》
《消解设计的界限》
《不為設計而設計=最好的設計》

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

推荐阅读更多精彩内容