mapping-natural
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseMapping — natural (spatial and physical)
自然映射(空间与物理层面)
Natural mapping is the form of mapping that requires no learning. The control is positioned where the affected element is, or moves the way the affected element moves, or is shaped like the affected element. The user does not have to think; they reach.
Natural mapping comes in two forms.
Spatial correspondence. The control's position in space matches the affected element's position in space. Stove knobs in a 2×2 grid that mirror the burners. The seat-position controls on a Mercedes-Benz, shaped like a tiny seat — push the headrest forward to recline, push the seat back forward to slide forward. A chart legend whose entries appear in the same vertical order as the data lines they describe, so the topmost legend entry corresponds to the topmost line. A row of speaker volume controls arranged left-to-right in the same order as the speakers in the room.
Physical analogy. The control's motion or shape corresponds to a physical action whose meaning is universally understood — usually because it mimics gravity, force, or direction. Up = more, down = less. Right = forward in time, left = backward. Clockwise = increase, counterclockwise = decrease (in cultures that read left-to-right; the convention is local but extremely strong). Pinch out = zoom in. Pull a slider toward you = grab and bring closer. These mappings are not innate, but they're embodied — users feel them rather than think them — and breaking them generates immediate confusion that no amount of labeling will fix.
自然映射是一种无需学习的映射形式。控件的位置与受影响元素的位置一致,或运动方式与受影响元素的运动方式匹配,或形状与受影响元素相似。用户无需思考,直接操作即可。
自然映射分为两种形式。
空间对应:控件的空间位置与受影响元素的空间位置匹配。例如2×2网格排列的炉灶旋钮,与炉头的布局完全镜像;奔驰汽车的座椅调节按钮被设计成微型座椅形状——向前推头枕部分可调节靠背角度,向前推座椅后部可让座椅向前滑动;图表图例的条目顺序与对应数据线的垂直顺序一致,最上方的图例条目对应图表中最上方的数据线;房间内扬声器按从左到右排列,对应的音量调节控件也按相同顺序排列。
物理类比:控件的运动或形状对应一种普遍理解的物理动作——通常模仿重力、力或方向。向上=增加,向下=减少;向右=时间前进,向左=时间后退;顺时针=增大,逆时针=减小(在从左到右阅读的文化中,这一惯例极具影响力);双指外拉=放大;将滑块向自己方向拉动=抓取并拉近。这些映射并非与生俱来,但用户能直观感知而非刻意思考——打破这类映射会立即引发困惑,再多的标签说明也无法弥补。
Recognizing when natural mapping is available
判断是否可采用自然映射
The form factor either supports natural mapping or it doesn't. A four-burner stove with the burners in a 2×2 grid and physical room for knobs in a 2×2 grid: spatial mapping available. A cooktop with knobs along the front edge and burners behind: spatial mapping not directly available; you'll have to weaken to a labeled or angled approximation. A horizontal slider for an inherently vertical quantity (height, depth, intensity from low-to-high): natural mapping mismatched; consider rotating the slider or changing the metaphor.
The question to ask early in a design is: what is the spatial or physical structure of the thing being controlled, and can the controls share that structure?
产品形态要么支持自然映射,要么不支持。例如四炉头炉灶的炉头呈2×2网格排列,且有足够空间将旋钮也设为2×2网格:此时可采用空间映射。而炉头在后方、旋钮沿前边缘排列的灶台:无法直接实现空间映射,只能退而求其次使用带标签或角度近似的设计。若用水平滑块控制本质上垂直的量(高度、深度、从低到高的强度):自然映射不匹配,可考虑旋转滑块或更换隐喻。
设计初期应思考的问题是:被控制对象的空间或物理结构是什么?控件能否沿用该结构?
Worked examples
实践案例
A four-burner stove control panel
四炉头炉灶控制面板
Bad design: four knobs in a row labeled "FL FR RL RR" (front-left, front-right, rear-left, rear-right). The user has to read the label, decode the abbreviation, locate the burner, and turn the right knob. Three cognitive steps for an action that should require zero. Approximately 5–10% of users will turn the wrong knob in distracted use.
Good design: four knobs in a 2×2 grid, each knob positioned directly in front of (or below) the burner it controls. No label needed. The user reaches for the knob in the position of the burner. The error rate drops near zero.
When the cooktop is too shallow for a 2×2 grid, the next-best approach is to angle the row of knobs so each knob is at least visually closer to its corresponding burner — paired with a small dot or graphic showing the relationship. This is weaker than true spatial correspondence but stronger than abstract labels.
糟糕设计:四个旋钮排成一行,标注“FL FR RL RR”(前左、前右、后左、后右)。用户需要阅读标签、解码缩写、定位炉头,再转动正确的旋钮。本应零认知步骤的操作却需要三步。分心操作时,约5%-10%的用户会转错旋钮。
优秀设计:四个旋钮按2×2网格排列,每个旋钮直接位于对应炉头的正前方(或下方)。无需标签。用户直接伸手去对应炉头位置的旋钮即可,错误率几乎降为零。
若灶台空间不足以容纳2×2网格,次优方案是将旋钮排成一行并调整角度,让每个旋钮至少在视觉上更靠近对应的炉头——同时搭配小点或图形展示对应关系。这种方式虽弱于真正的空间对应,但比抽象标签更有效。
Volume controls on a multi-speaker setup
多扬声器系统的音量控制
Bad design: a settings panel labeled "Speaker 1, Speaker 2, Speaker 3, Speaker 4" with sliders. The user does not remember which physical speaker is which.
Good design: a small floor plan showing the speakers in their actual positions, with each volume slider positioned next to its speaker. Or, if a floor plan is too elaborate, a row of sliders arranged in the same left-to-right order as the speakers in the room, with a brief location label ("Living Room — South Wall").
The principle: the user is reasoning about the room, so the controls should be arranged like the room.
糟糕设计:设置面板标注“扬声器1、扬声器2、扬声器3、扬声器4”并搭配滑块。用户记不清哪个滑块对应哪个实体扬声器。
优秀设计:用小型平面图展示扬声器的实际位置,每个音量滑块放在对应扬声器旁。若平面图过于复杂,也可将滑块按房间内扬声器从左到右的顺序排列,并附上简短位置标签(如“客厅——南墙”)。
核心原则:用户是基于房间布局思考的,因此控件应与房间布局一致。
Chart legend ordering
图表图例排序
Bad design: a multi-line chart with five data series; the legend is alphabetical. The user has to scan the chart, identify a line of interest, then scan the legend to find which series name corresponds to which color. Two scans, with a memory step between.
Good design: the legend is ordered by the vertical position of each line at the right edge of the chart (or the left edge — pick a consistent anchor). The topmost line in the chart has the topmost legend entry. The user's eye traces from the line directly to its label. One scan.
This is a small change with a large effect. It is one of the highest-ROI improvements you can make to a multi-series chart.
糟糕设计:包含五个数据系列的多线图,图例按字母顺序排列。用户需要先扫描图表找到感兴趣的线条,再扫描图例找到对应的系列名称。两次扫描之间还需要记忆步骤。
优秀设计:图例按每条线在图表右边缘(或左边缘——选择一个固定锚点)的垂直位置排序。图表中最上方的线条对应图例中最上方的条目。用户的视线可直接从线条移到对应的标签,只需一次扫描。
这是一个小改动却能带来大效果,是多系列图表优化中投入产出比最高的方案之一。
Video editor timeline
视频编辑器时间轴
Bad design: a "skip forward" button positioned at the top of the screen, far from the timeline. A "split clip" command in a menu somewhere.
Good design: skip controls directly under the timeline, where the user is already looking. Split-clip is a button that appears at the playhead — the visual marker on the timeline — when the playhead is positioned over a clip. The control is at the location it affects.
糟糕设计:“快进”按钮位于屏幕顶部,远离时间轴;“拆分片段”命令藏在某个菜单中。
优秀设计:快进控件直接放在时间轴下方,即用户视线所在的位置;当播放头定位到某个片段上时,拆分片段按钮会出现在播放头(时间轴上的视觉标记)处。控件位于其影响的位置。
Brightness slider direction
亮度滑块方向
Bad design: a brightness slider where dragging down makes the screen brighter. This violates the up-is-more convention.
Good design: dragging up (or right, depending on orientation) increases brightness. The user does not have to think.
This convention is so strong that violating it triggers visible double-takes from users; many will drag the slider the "right" way the first time, see the wrong result, and pause for a moment of disorientation.
糟糕设计:向下拖动滑块会让屏幕变亮,违反了“向上=增加”的惯例。
优秀设计:向上(或向右,取决于方向)拖动滑块可提高亮度。用户无需思考。
这一惯例的影响力极强,违反它会让用户明显愣住;很多用户第一次会按“正确”的方向拖动滑块,看到错误结果后会陷入短暂的迷茫。
Pinch to zoom
双指缩放
The pinch-to-zoom gesture is a strong physical analogy: you are stretching the image between two fingers, the way you might stretch fabric. Reverse pinch (zoom out) corresponds to crumpling, also intuitive. The mapping is so strong that it crossed cultures and platforms within a few years of being introduced and is now nearly universal.
By contrast, "double-tap to zoom in to a fixed level" is a weaker mapping — there's no physical analogy — and survives only because pinch is also available as the natural-mapping fallback.
双指缩放手势是一种强物理类比:就像用手指拉伸布料一样拉伸图像。反向捏合(缩小)对应收拢动作,同样直观。这种映射的影响力如此之强,在推出后的几年内就跨越了文化和平台,如今几乎成为通用操作。
相比之下,“双击缩放至固定比例”是一种较弱的映射——没有物理类比支撑——仅因为双指缩放作为自然映射的备选方案存在,才得以保留。
When natural mapping is not available
无法采用自然映射的情况
If the form factor or screen real estate makes natural mapping impossible, do not fake it. A diagram next to each control showing what it affects is harder to interpret than a clear label. The hierarchy of fallbacks is:
- Use natural mapping if available.
- Use a strong cultural convention (volume slider direction, gear icon for settings) if natural mapping is unavailable.
- Use a labeled control with an unambiguous label (this is fine — labels are not failure, they're insurance).
- Use a contextual cue that highlights the affected region when the control is touched or hovered (the speaker icon flashes when you adjust speaker 2's volume).
Avoid the temptation to invent a fake spatial mapping (a tiny abstract diagram, a color-code that requires a key) when no real one exists.
若产品形态或屏幕空间导致无法采用自然映射,不要强行伪造。每个控件旁配一张说明其作用的图表,比清晰的标签更难理解。 fallback的优先级如下:
- 若可用,优先使用自然映射
- 若自然映射不可用,使用强文化惯例(如音量滑块方向、齿轮图标代表设置)
- 使用标签清晰的控件(这没问题——标签不是设计失败,而是保障措施)
- 使用上下文提示:当控件被触摸或悬停时,高亮显示受影响区域(如调整扬声器2的音量时,扬声器图标闪烁)
当没有真实的空间映射时,不要试图发明虚假的空间映射(如微小的抽象图表、需要对照说明的颜色编码)。
Common anti-patterns
常见反模式
Aesthetic uniformity destroying mapping. Designers arrange controls in a clean grid because it looks tidy, ignoring that the controlled elements are not in a corresponding grid. The four-burner stove with knobs in a row is the canonical example. The fix is to choose a layout that mirrors the controlled space, even at some cost to visual neatness.
Inverted directional mappings. A volume slider where down is louder, a "back" button on the right of the screen, a brightness control that goes left-to-right with darker on the right. These are usually accidents of code (a coordinate system was inverted somewhere, and the visual was not corrected) but they read as design failures and generate constant low-grade confusion.
Mapping by color when color is the only cue. Color-coded controls without spatial correspondence ("the red knob controls the red burner") force the user to look at both control and target, then mentally connect them. They also fail entirely for color-blind users. Color is a useful supplement to spatial mapping but a poor replacement.
Animating between unmapped positions. A control whose effect snaps to a new position with no transition forces the user to re-locate the affected element each time. Animated transitions that move from old to new state preserve the mapping by showing the relationship as motion.
为美观统一性破坏映射:设计师为了视觉整洁将控件排列成规整的网格,却忽略了被控制元素的布局并不对应。四炉头炉灶的旋钮排成一行就是典型例子。解决方法是选择与被控制空间布局一致的控件排列方式,即使牺牲部分视觉整洁度也无妨。
方向映射颠倒:向下拖动音量滑块音量变大、屏幕右侧的“返回”按钮、亮度控件从左到右对应从亮到暗。这些通常是代码失误(某个坐标系被颠倒,而视觉层未修正),但会被视为设计缺陷,持续引发轻微困惑。
仅靠颜色实现映射:仅通过颜色编码而无空间对应关系的控件(如“红色旋钮控制红色炉头”),会迫使用户同时查看控件和目标,再在脑中建立关联。而且这对色盲用户完全无效。颜色可作为空间映射的补充,但不能替代空间映射。
在无映射的位置间切换时无动画过渡:控件作用的对象突然跳转到新位置且无过渡效果,会迫使用户每次都重新定位受影响元素。从旧状态到新状态的动画过渡可通过运动展示对应关系,从而保留映射。
Heuristic checklist
启发式检查清单
Before shipping a new control, ask: Where is the thing being affected, and where is the control? If they are not in the same location or arranged in the same pattern, ask whether they can be. Does the motion of the control correspond to the change in the affected element? If not, can it be made to? If you removed all labels from the controls, could a first-time user still operate them? If yes, the mapping is doing its job.
在发布新控件前,问自己:**受影响的对象在哪里?控件在哪里?**如果它们不在同一位置或未按相同模式排列,能否调整?**控件的运动是否与受影响元素的变化对应?**如果不对应,能否调整?**如果移除所有控件标签,首次使用的用户仍能操作吗?**如果可以,说明映射发挥了作用。
Related sub-skills
相关子技能
- — for the cases where natural mapping isn't available and you have to fall back to convention.
mapping-cultural - — what the control suggests it can do (mapping picks up where affordance leaves off).
affordance - — controls that affect the same thing should be close to each other (the layout-level form of mapping).
proximity - — natural mapping is recognition-driven; the user sees and reaches.
recognition-over-recall
- —— 当自然映射不可用时,需依赖惯例的场景。
mapping-cultural - —— 控件暗示其功能的属性(映射是对功能暗示的延伸)。
affordance - —— 影响同一对象的控件应放在一起(布局层面的映射形式)。
proximity - —— 自然映射基于识别驱动;用户通过视觉识别直接操作。
recognition-over-recall
See also
另请参阅
- — case studies and patterns for spatial mappings, including chart legends, dashboards, and physical control panels.
references/spatial-correspondence.md
- —— 空间映射的案例研究和模式,包括图表图例、仪表盘和物理控制面板。
references/spatial-correspondence.md