🎨 UX 设计入门 · UX 设计师·核心技能

交互设计基础入门:可供性 affordance vs 信号 signifier、自然映射、反馈、概念模型/心智模型/系统映象、执行与评估双鸿沟、四类约束 | UX 设计入门

affordance 是关系、不一定可见,signifier 才是让人看出怎么操作的可感线索;跨过执行与评估两道鸿沟,用四类约束把正确做法变成唯一做法

一句话先懂 · TL;DR

一节讲透交互设计地基的入门课:Norman 借 Gibson 提出的可供性(affordance)是『特定主体在特定环境中可能采取的动作』这一关系——不是物体固有属性、也不一定可见,看不见的可供性等于不存在;真正让人看出『在哪、怎么操作』的是信号(signifier),『你想说加 affordance 时其实想说加 signifier』正是扁平化设计踩过的坑;自然映射(灶台旋钮按灶眼方位排布)让控件与效果的对应不言自明;反馈要即时且有信息量、但过度反馈制造噪音;概念模型/心智模型/系统映象三分说明设计者只能通过系统映象与用户沟通;执行鸿沟(我该怎么做)与评估鸿沟(成了没)是好设计要跨过的两道坎;物理/逻辑/语义/文化四类约束把『正确做法』变成『唯一/最省力的做法』、防错优于报错。事实全部出自 Don Norman《设计心理学》(The Design of Everyday Things 修订版)与 jnd.org 一手来源。

可供性 × 信号:『能操作』和『看得出能操作』是两回事

Norman 从心理学家 J.J. Gibson 那里借来了可供性(affordance)这个概念:affordance 是『特定主体在特定环境中可能采取的动作』这一关系——椅子『可供』坐、按钮『可供』按。

两个要点最常被忽略:

1. 它是关系,不是物体的固有属性
2. 它不一定可见——可供性可以客观存在,但用户看不出来。

所以 Norman 强调,设计里真正要关心的是『被感知到的可供性(perceived affordance)』:用户察觉到的能做什么,比客观上能做什么更重要。看不见的可供性等于不存在。

那靠什么让用户『看出来』?Norman 提出 signifier(信号) 来补可供性的不足:signifier 是『物理或社会世界里一个可被有意义解读的指示/信号』——即用户能感知到的、提示『在哪、怎么做』的线索。

他直言:『忘掉可供性吧,设计必须提供的是 signifier。』因为人是靠线索去理解产品的——可供性本身不会沟通,signifier 才会。

例子:空荡的站台暗示你错过了车;草坪上踩出来的小道(desire line)显示人们想从哪走;滚动条的位置标出文档长度与当前位置。

给设计师的落地:一个能点的元素,必须有让人看出『这能点』的视觉信号(形状/颜色/下划线/光标),否则可供性是隐形的。

⚠️最常见的误用:『给这个按钮加个 affordance』。 设计圈常把 affordance 当『看得出能操作的视觉提示』来用——按 Norman 的精确定义这是误用:可供性 = 能不能做这个动作(关系/可能性);信号 = 让人看出能做、并知道怎么做的可感提示。

扁平化设计踩的坑正是:元素客观上可点(affordance 还在),但去掉了边框/阴影/下划线(丢了 signifier),于是用户看不出它可点。

修正口诀:当你想『让它看起来能点』时,你要补的是 signifier,不是 affordance。
可供性都在,信号丢了:扁平化去掉边框阴影后,能点却看不出能点

映射与反馈:控件对得上位置,动作得到回应

映射(mapping)指控件与其作用之间的对应关系。好设计用『自然映射(natural mapping)』——借空间或物理类比让对应不言自明

- 方向盘左转,车左转;
- 灶台旋钮按灶眼的方位排布,不用贴标签也知道哪个控哪个。

坏映射(如旋钮排成一排,却对应前后两排灶眼)逼用户死记或试错。Norman 视映射为减少认知负担的关键之一:界面里『上一个/下一个』『音量上下』『开关方向』都应顺着用户对空间与因果的直觉。

自然映射:旋钮按灶眼方位排布,不贴标签一眼对应

反馈(feedback)让用户持续知道:系统当前什么状态、我的输入收到没、结果如何。Norman 对反馈的要求是『即时』且『有信息量』

- 按了按钮要立刻有视觉/触觉/声音回应;
- 长任务要有进度
- 反馈内容要说清『发生了什么』,而非只是『响了一下』。

这也正是可用性启发式第 1 条『系统状态可见』的底层原理。

💡但反馈不是越多越好。 满屏闪烁、每步都弹提示反而制造噪音、让人忽略真正重要的反馈(『狼来了』效应)。要点:重要动作给明确反馈,次要动作给轻量反馈。

三个模型、两道鸿沟、四类约束:系统性地定位『不好用』

为什么用户会用错?Norman 区分三个『模型』:

1. 设计者的概念模型——设计者脑中系统如何运作;
2. 用户的心智模型——用户脑中以为它如何运作;
3. 系统映象(system image)——用户从界面/文档/反馈实际看到的一切

关键在于:设计者无法直接把概念模型塞进用户脑里,只能通过『系统映象』传达。好设计 = 让系统映象清晰地传达一个概念模型,使用户自然形成的心智模型与之吻合。心智模型错配 = 误操作的根源——比如以为电梯关门键能立刻关门,其实多是安慰剂。

Norman 用『行动七阶段』描述人怎么用一个东西:目标 → 计划 → 确定动作 → 执行 → 感知系统状态 → 解读 → 对照目标。其中横着两道鸿沟:

- 执行鸿沟(Gulf of Execution)——『我想做的事,和我能怎么操作之间的差距』(我该怎么做?),靠清晰的 signifier、约束、映射来跨;
- 评估鸿沟(Gulf of Evaluation)——『系统现在什么状态,和我能否判断目标达成之间的差距』(成了没?),靠好反馈和可见状态来跨。

设计的核心任务,就是把这两道鸿沟缩到用户不费脑

约束(constraints)是限制可能动作的力量——既能防错、也能引导正确操作。Norman 分四类:

1. 物理约束:形状只能这样插——USB-C 防呆、SIM 卡缺角;
2. 逻辑约束:由逻辑推断下一步——拼图只剩一块就知道放哪;
3. 语义约束:由情境意义决定——摩托车挡风玻璃必须朝前;
4. 文化约束:靠习俗约定——红色 = 停/危险。

善用约束 = 把『正确做法』变成『唯一/最省力的做法』,比事后报错高明得多(呼应可用性启发式第 5 条『防错优于报错』)。

概念模型 → 系统映象 → 心智模型,中间横着执行与评估两道鸿沟

自测 · 学完检查一下

想真正动手做题、记进度、攒连胜?到互动课里练。

按 Norman 的精确定义,下面对可供性(affordance)的理解哪一个是对的?

答案:它是『特定主体在特定环境中可能采取的动作』这一关系——不是物体的固有属性,而且不一定可见

Norman 借自心理学家 J.J. Gibson 的 affordance 是『特定主体在特定环境中可能采取的动作』这一关系——椅子『可供』坐、按钮『可供』按。两个要点:① 它是关系,不是物体的固有属性;② 它不一定可见——可供性可以客观存在但用户看不出来。所以设计里真正要关心的是『被感知到的可供性(perceived affordance)』:用户察觉到的能做什么,比客观上能做什么更重要,看不见的可供性等于不存在。边框/阴影那类视觉提示是 signifier,不是 affordance。(出处:Don Norman《The Design of Everyday Things》修订版;jnd.org『Signifiers, not affordances』)

Norman 提出 signifier(信号)来补可供性的不足。下面哪一项最符合 signifier 的定义?

答案:用户能感知到的、提示『在哪、怎么操作』的线索——如下划线、光标变化、滚动条位置、草坪上踩出来的小道

signifier 是『物理或社会世界里一个可被有意义解读的指示/信号』——用户能感知到的、提示『在哪、怎么做』的线索。Norman 直言:『忘掉可供性吧,设计必须提供的是 signifier』——因为人是靠线索去理解产品的,可供性本身不会沟通,signifier 才会。例:空荡的站台暗示你错过了车、踩出来的小道(desire line)显示人们想从哪走、滚动条位置标出文档长度与当前位置。『客观上允许的动作可能性』是 affordance 的定义,不是 signifier。(出处:Don Norman『Signifiers, not affordances』jnd.org, 2008;《The Design of Everyday Things》修订版)

判断:设计评审时你说『这个按钮看不出能点,给它加个 affordance 吧』——按 Norman 的精确定义,这个说法用词是准确的。

答案:错误

错误,这是设计圈最常见的误用。按 Norman 的精确定义:可供性(affordance)= 能不能做这个动作(关系/可能性);信号(signifier)= 让人看出能做、并知道怎么做的可感提示。按钮客观上已经可点——affordance 一直都在,缺的是让人看出可点的线索,要补的是 signifier。扁平化设计踩的正是这个坑:元素可点却去掉了边框/阴影/下划线(丢了 signifier),用户就看不出它可点。修正口诀:当你想『让它看起来能点』时,你要补的是 signifier,不是 affordance。(出处:Don Norman『Signifiers, not affordances』jnd.org, 2008)

灶台有四个灶眼、呈两排两列。下面哪种旋钮布置最符合 Norman 说的『自然映射(natural mapping)』?

答案:旋钮也按两排两列、对应各灶眼的方位排布——不贴标签也知道哪个控哪个

映射(mapping)指控件与其作用之间的对应关系;自然映射借空间或物理类比让对应不言自明——方向盘左转车左转,灶台旋钮按灶眼的方位排布,就不用贴标签也知道哪个控哪个。旋钮排成一排却对应前后两排灶眼是 Norman 点名的坏映射,逼用户死记或试错;贴标签只是给坏映射打补丁。映射是减少认知负担的关键之一:『上一个/下一个』『音量上下』『开关方向』都应顺着用户对空间与因果的直觉。(出处:Don Norman《The Design of Everyday Things》修订版,灶台旋钮经典案例)

判断:反馈越多越好——每一步操作都弹提示、满屏高亮闪烁,最能让用户放心。

答案:错误

错误。Norman 要求反馈『即时』且『有信息量』:按了按钮要立刻有视觉/触觉/声音回应,长任务要有进度,内容要说清『发生了什么』而非只是『响了一下』。但反馈不能过度——满屏闪烁、每步都弹提示反而制造噪音、让人忽略真正重要的反馈(『狼来了』效应)。正解是:重要动作给明确反馈,次要动作给轻量反馈。这条也正是可用性启发式第 1 条『系统状态可见』的底层原理。(出处:Don Norman《The Design of Everyday Things》修订版;Nielsen NN/g 十大启发式第 1 条)

Norman 区分了三个『模型』。下面哪组对应是正确的?

答案:设计者的概念模型 = 设计者脑中系统如何运作;用户的心智模型 = 用户脑中以为它如何运作;系统映象 = 用户从界面/文档/反馈实际看到的一切

Norman 的三分:① 设计者的概念模型——设计者脑中系统如何运作;② 用户的心智模型——用户脑中以为它如何运作;③ 系统映象(system image)——用户从界面/文档/反馈实际看到的一切。设计者无法直接把概念模型塞进用户脑里,只能通过系统映象传达;好设计 = 让系统映象清晰地传达一个概念模型,使用户自然形成的心智模型与之吻合。三者不是一回事,更不是海报/竞品分析/用户画像。(出处:Don Norman《The Design of Everyday Things》修订版)

你站在一台新咖啡机前:① 一开始不知道该按哪个键才能做出美式;② 按下去之后机器毫无动静,你不知道它开始做了没有。这两个困境分别对应哪道鸿沟?

答案:① 执行鸿沟(我该怎么做?);② 评估鸿沟(成了没?)

Norman 的行动七阶段(目标→计划→确定动作→执行→感知系统状态→解读→对照目标)中横着两道鸿沟:执行鸿沟(Gulf of Execution)=『我想做的事,和我能怎么操作之间的差距』(我该怎么做?),靠清晰的 signifier、约束、映射来跨——①『不知道按哪个键』正是执行侧;评估鸿沟(Gulf of Evaluation)=『系统现在什么状态,和我能否判断目标达成之间的差距』(成了没?),靠好反馈和可见状态来跨——②『毫无动静不知道成没成』正是评估侧。设计的核心任务就是把两道鸿沟缩到用户不费脑。(出处:Don Norman《The Design of Everyday Things》修订版;Norman & Draper 1986《User Centered System Design》)

四个场景:① SIM 卡切了个缺角,只能按一个方向插进卡槽;② 拼图只剩最后一块,不用想也知道放哪;③ 摩托车挡风玻璃必须装在前面才有意义;④ 看到红色就想到停/危险。按 Norman 的四类约束,正确的归类是?

答案:① 物理约束;② 逻辑约束;③ 语义约束;④ 文化约束

Norman 把约束分四类:物理约束(physical)——形状只能这样插,如 USB-C 防呆、SIM 卡缺角(①);逻辑约束(logical)——由逻辑推断下一步,如拼图只剩一块就知道放哪(②);语义约束(semantic)——由情境意义决定,如摩托车挡风玻璃必须朝前(③);文化约束(cultural)——靠习俗约定,如红色=停/危险(④)。红色=停是习俗约定而非物理规律,所以是文化约束不是物理约束。(出处:Don Norman《The Design of Everyday Things》修订版)

判断:设计者无法把自己的概念模型直接装进用户脑袋,只能通过『系统映象』(界面、文档、反馈等用户实际看到的一切)来传达;用户心智模型与之错配,正是误操作的根源。

答案:正确

正确。设计者与用户并不直接对话,用户只能从系统映象(界面/文档/反馈实际看到的一切)反推这个东西怎么用;好设计 = 让系统映象清晰地传达一个概念模型,使用户自然形成的心智模型与之吻合。心智模型错配 = 误操作的根源——经典例子:以为电梯关门键能立刻关门,其实多是安慰剂。(出处:Don Norman《The Design of Everyday Things》修订版)

判断:约束限制了用户能做的动作、是对用户的束缚——所以好设计应当尽量减少约束,用户操作错了再弹报错提示就行。

答案:错误

错误。约束是限制可能动作的力量,但它既能防错、也能引导正确操作——Norman 分物理/逻辑/语义/文化四类。善用约束 = 把『正确做法』变成『唯一/最省力的做法』:SIM 卡缺角、USB-C 防呆就是用『做不到』替用户挡住错误,比事后报错高明得多(呼应可用性启发式第 5 条『防错优于报错』)。一味减少约束再靠报错兜底,恰恰是反着来。(出处:Don Norman《The Design of Everyday Things》修订版)

想边练边学,而不只是读?

到互动课里答题、记进度、攒连胜——游客即可试学,无需注册。

进入互动课程 →

学点新东西,不错过更新

新课程、新功能、学习小技巧——偶尔一封,随时退订。