杀人事件里的设计心理学

Photo Courtesy of DKNG Studios

首先声明，这是一篇正经的UX文章，但我要先从一个杀人案件说起。就是这么严肃。

凶器

刑侦类日剧经典，古畑任三郎第二季的第一集讲的是从一个字露出破绽的故事。开场就埋下了伏笔。这里鱼叔饰演的律师在法庭上语气非常欠揍地交叉询问公诉方证人，请她回答不远处的桌面上有什么东西，目的是诱导证人从而降低目击证词可靠性。

除了鱼叔说的法庭这个环境因素，另外一个让证人误判的原因是，那根香蕉放在了竹盘上。把香蕉带上庭已经很奇怪了，哪有边辩护边啃香蕉的律师，脸大如古美门估计都做不出来。香蕉还放在竹盘上，为了透气么？

接下来就是正篇杀人事件，不用怕，没有会引起不适的画面。没看过这部剧的可以猜一下该案件的凶器到底是什么。凶手不用猜，并不是重点。

会碎的、透明的、有把手的、可单手持握的、居家常见的、足以杀人的。大概也只有玻璃水壶了。

剧情在两只老狐狸套路彼此又反套路之间展开，鱼叔作为一个难得有高智商的反派还是难敌本剧智商兼嘴炮担当。

的确很奇怪，古畑手里这个怎么看都是个水瓶，鱼叔却说它是花瓶。可能有人会说，大概律师在家就是用类似的瓶子当花瓶。那么问题来了。一个在此之前只见过现场玻璃碎片，并且主要通过报告书了解案情的辩护律师，怎么会别出心裁改用花瓶指代凶器？

并不是鱼叔眼神不好或者脑子不好，主要是第一印象坑了他。一个插着玫瑰，摆放在一堆植物旁边的玻璃瓶子，的确是个花瓶。但如果把花扔了，放在厨房一堆杯碟旁边，又明显是个水瓶。可惜鱼叔遇上的是古畑老爷，眼神和心思比针还尖还细。

如果是一个从来没见过的物品，怎么使用大多数情况只能从外观上找线索。Norman 认为物理结构上的局限可以将可能的操作方法限定在一定范围内，这里的物理结构即是外显线索。而对于剧中这样常见的玻璃水壶，我们只凭常识或者说记忆就可以得出答案。但把水壶说成花瓶的例子证明了即使是一个日常可见的物品，使用者的认知也极易受到所处语境的影响。

我曾把一个理论上喝冷汤的陶瓷汤碗当作水杯用，因为够大，一次可以接足量的水，而且这个汤碗是带把手的，拿起来很便利。但之所以说是理论上，一来出售它的店家贴的说明标签写的是汤碗，二来它和一堆没有把手的饭碗放在一个货架上。汤碗作水杯，也并不奇怪，对一个物品的功能定义，除了这个物品自身提供的属性、所处语境外，也取决于对该物品的认知。

Affordance / 预设用途

以上都是铺垫，有点长。接下来是过渡，可能也有一点点长。

Affordance 一词经由 Norman 而广为人知，但最早并不是他提出的这个概念。认知心理学家 James J. Gibson 在对生态学的研究中创造了该词，他认为，Affordance 是生物与其环境的对应关系，可以被直接感知或者识别。

Affordance is equally a fact of the environment and a fact of behaviour. It is both physical and psychical, yet neither. An affordance points both ways, to the environment and to the observer
....affordances are properties of things taken with reference to an observer but not properties of the experiences of the observer. They are not subjective values.

Gibson 对 Affordance 的定义是关系，由环境和观测者共同界定的关系。需要强调的是，Affordance 不来自于观测者的主观想法，和观测者的经验也好情绪也好都无关。Affordance 是自环境中彰显给观测者的属性，观测者给定的只是单位；一块有四条长度相等的腿支撑的玻璃，腿的长度可以是1厘米、10厘米或者100厘米，但只有略高于观测者座高（大概等于75厘米）的时候，这个物体才会被认知为可以支撑双手，供书写的。供这个字很重要。

The term affordance refers to whatever it is about the environment that contributes to the kind of interaction that occurs.

中信2010年出版的 Norman 设计心理学一书中将 Affordance 译成 「预设用途」，翻译得很巧妙。用途固然是物品的属性，但只有在特定场景下会被用到的时候，这个属性才被称作用途；玻璃有个属性是透明，但这个属性和玻璃桌面可以被用来支撑书写无关，那这个属性在该场景下就只是属性，不能被称作用途。设计者自然可以为物品设计任意用途，但设计者是为了使用者而设计，使用者会有怎样的预设，决定了用途是什么。

预设用途同时指向物品和使用者。

芬兰建筑师、城市规划师萨里宁曾这么说，

Always design a thing by considering it in its next larger context – a chair in a room, a room in a house, a house in an environment, an environment in a city plan.

一把椅子不仅是一把椅子，它不可能孤立存在，它是某个场景里的椅子。给医院里的小朋友设计的椅子肯定和给航天飞机上的宇航员设计的椅子不一样，不一样的原因是预设用途不一样。

这是什么

以上内容讲的都是实体物件，但理论对于虚拟物体的设计也是通用的。

首先来看一个Gmail的例子，如下图红色箭头所示，一个有着灰底，灰色向左箭头的按钮。箭头的横线下面还有一小段垂直的线条。如果走在路上看到放大版的这个符号，我大概会认为它是一个让我笔直往前走第一个路口左拐的指示标。然而这是个网页。

再看来下图同一个页面右侧的这个符号，它竟然是带透视的，颇具动感，所以点击以后会发生什么东西往左飞出去的事么？并不是完全不可能。

第一次见到这个 Gmail 页面的用户大概会有些一头雾水，那将这两个按钮放在一起看。

可以发现，左侧的灰箭头和其他按钮位于邮件标题的上方，而右侧的灰箭头则在标题下方，和发件人，发送时间在一个层级里。从层级判断，左侧灰箭头高于该邮件，而右侧灰箭头从属于该邮件，如果从发件人邮箱后面跟着的 Unsubscribe 推导的话，右侧灰箭头应该也是同类型的针对发件人的操作。

答案并不复杂，左侧灰箭头是返回收件箱，右侧灰箭头是回复。

如果只从符号语义出发，左侧箭头不如一个 Back，右侧箭头不如一个 Reply 清晰。但实际使用中，当鼠标箭头悬停在这两个按钮之上时，会有对应的 tooltip 给出按钮功能的文字说明。并且在一次学习后，识别符号可能会比文字更快。

这的确是个很小的设计，但并不简单。

预设用途这一概念对于设计的启示，简单概括就是萨里宁说的那句话；设计一件物品要将其置身于语境中，该语境也存在于它之上的语境中，这是一个系统，牵一发动全身，每一个元素的定义都受到其他共存因素的影响。

再来看一个 Twitter 的例子。还是一个灰色箭头，和其他类似视觉表现的 icon 在同一行里。Gmail 的例子在前，这样的符号有可能是返回也有可能是回复。但考虑到箭头所处位置，返回功能不符合逻辑，只剩下回复按钮。也的确是回复按钮。

再来看 Chrome 的例子，仍然是灰色箭头。截图正好把 tooltip 截进去了，所以可以看到，这个灰色箭头的功能是单击返回，长按查看浏览历史。

同样都是灰色的，指左箭头符号的按钮，在不同使用场景下可以有相同或者不同的功能。而之间的区分，完全取决于它视觉属性：形状，大小，颜色，etc.，它与所处环境/语境的关系：出现位置、与其他功能控件的层级关系，和使用者对它和所处语境关系的理解：用户对这一设计的认知和预判，比如，出现在浏览器中的按钮应该可以实现的功能。

把上述四种箭头抽离出各自语境后会发现，按钮本身属性完全无法提供足够线索。它们的功能定义更仰赖于所处语境。

所以如果 shuffle 一下好像也没什么违和。ˊ_>ˋ

链接、按钮、标签卡

说了那么久，核心其实就是一句话，

设计一个元素，要将其置于语境中。

当元素本身不足以将可能使用方法限制到一定范围的时候，用户会自动去周边环境找线索。与此同时，他们也会在大脑中搜索当下看到的信息是否和记忆匹配。这一步就是预设；是否见过类似的东西，当时的场景和现在的是否类似，是否会有类似的功能。

上图是三组「赞」和「转播」。第一组看上去像链接，因为蓝色文字一般就是这么用的，中间一组看上去是按钮。第三组和第一组很类似，两个元素出现先后以及数字和文字的位置不同。

放到具体语境中看。

在图片内容下方的三个控件视觉表现类似，都带数字，区别在于赞的数字灰色有括号。通常情况，蓝色下划线文字表链接，但这是上世纪的范例，目前越来越多的链接设计都不再带下划线，也不局限只用蓝色。

点击转播以后触发出现一个浮层，于是这并不是链接，功能并不是点击前往查看178个转播，而是转播说说看法。类似的，点击赞以后也是增加一个赞，而非查看163个赞。第一组控件都是按钮。

接下来看第二、三组出现的场景。

第二组的符号和语义都很清晰，按钮的视觉形式、icon加上作动词解的说明文字。点击以后发现和第一组是同样的功能。

第三组和第一组的视觉表达以及语境都很类似，所以预设他们功能一致。但这样不合逻辑，因为同一个场景里已经有第二组控件了。即使这里需要控件重复出现，也不需要控件长得不一样。点击以后发现，第三组控件的功能是标签卡，点击分别前往查看178条转播和163个赞。

这里就出现了与预设不一致的问题。

当元素本身、所处语境和预设都不足以让用户找到线索的时候，这个设计会是失败的。

Summary

1. 设计一个元素要将其置于语境中。元素本身、语境以及用户对元素的预设缺一不可。

   
   

2. 请谨慎使用 Affordance 一词。

References:

1. Norman, Donald A. (1998) The design of everyday things. New York, NY: Basic Books
2. Gibson, J. J. (2014). The ecological approach to visual perception: classic edition. Psychology Press.
3. Greeno, J. G. (1994). Gibson's affordances.