浅谈 Affordance

作者: SuerB | 来源:发表于2015-05-02 22:58 被阅读1695次

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

在路上在路上

标识

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

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

Apple RemoteApple Remote

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

使用指引使用指引

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

使用说明使用说明

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

Affordance

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

消防箱消防箱

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

「凳子」「凳子」

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

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

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

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

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

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

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

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

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

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

Without ThoughtWithout 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-LookApple Watch Short-Look and Long-Look

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

总结

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

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

相关文章

  • 浅谈 Affordance

    在现实世界中,我们需要学习很多规则。有些用于规范社会行为,例如过马路需要走斑马线,开车要遵守交通规则,要会判断红绿...

  • 超市的蓝海就在这里

    ——学习Affordance 有感 Affordance直击“痛点” 第一次听到Affordance来自吴伯凡老师...

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

    什么是设计的可供性? 可供性是一个很值得玩味的专业词汇。一方面,在中文语境下这个词很难翻译得准确,它包含太丰富的语...

  • Affordance & Design (1)

    1:Affordance 这个词在很多地方被翻译成可供性,能供性或者维基上的承担特质。因为它其实不是一个很容易明确...

  • Affordance and design (2)

    1:Signifier跟 affordance 的区别 Signifier是一种提示,表象的是什么样子,一眼望知,...

  • Affordance and design (3)

    设计心理 1,别人在你的网站上看见的内容未必符合你的设想,他们的个人背景、文化水平、对眼前事物的熟悉度以及期待看到...

  • W13B1设计心理学

    技巧卡 名称:前馈的力量 印象:示能(affordance也译作可供性)、意符(signifiers)这些专业术语...

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

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

  • 2020-07-02

    浅谈 浅谈模块设计宏内核 浅谈接口设计Flags 浅谈稳定性设计重试 浅谈人员业务结构设计矩阵式 浅谈接口设计 |...

  • Affordance与扁平化

    不成文,当读书笔记吧。 起因是老罗在批判苹果全面扁平化的微博(http://weibo.com/164057136...

网友评论

    本文标题:浅谈 Affordance

    本文链接:https://www.haomeiwen.com/subject/jxibfttx.html