笔记

界面里的距离不是“留白多一点就高级”，而是一种比线框、卡片和标题更早被看见的关系语言。相近的元素会被自然读成一组；距离拉开，才表示这是另一件事。好的分组，应该让眼睛先理解关系，再去读文字。

这也是格式塔接近律在产品界面里的实际价值。一个设置项如果把标题、说明、状态和按钮放得太散，用户会先看到四个零件；如果它们在一个合适的近距离里聚合，再与下一个设置项保持更大的间隔，用户会先看到“一个可处理的对象”。判断成本会明显下降。

很多界面的问题不是缺少分割线，而是距离没有层级：卡片内外用同一种间距，标题和说明像陌生人，不同模块又靠得太近。于是设计只能不断补边框、补背景、补阴影。真正更克制的做法，是先建立空间比例：组内近，组间远；同级一致，不同级拉开；重要动作离所属内容近，危险动作则通过距离和确认方式变重。

Carbon Design System 把 spacing 当作产品设计里经常被低估的基础，并用 token 让距离在组件内部、组件之间和页面布局里保持一致。这个思路比“凭感觉调 8px 或 16px”更可靠：距离一旦成为系统，团队就能稳定表达相同的信息关系，而不是每个页面重新发明秩序。

追问： 当前正在设计的页面里，有没有某些关系本可以靠距离说明，却被迫用线、卡片、图标或说明文字来补救？

[!quote] 参考资料

• Law of Proximity | Laws of UX
• Spacing – Carbon Design System

把界面做“干净”时，最容易犯的一个错误，是把文字拿掉，只留下图标。问题不在于图标不好，而在于很多图标并没有稳定到可以独自承担动作说明：一个箭头可能是分享、打开、跳转；一颗星可能是收藏、评分、推荐；三个点可能是更多操作，也可能只是把犹豫藏起来。

图标的价值是加速识别，不是替代命名。真正熟练的用户会先读形状，但大多数人在关键操作前仍需要一句短文字来确认：这到底会发生什么。尤其是低频功能、跨文化图形、破坏性动作、支付/发布/权限相关动作，只用符号会把界面的不确定性转嫁给用户。

克制的设计不是把所有字都删掉，而是让文字只出现在会降低判断成本的位置。常见做法可以很轻：主操作用“图标 + 动词”，工具栏里的高频图标保留 tooltip 和可访问名称，危险操作不要只给垃圾桶图标，而要让“删除”“移除”“清空”这些不同后果被明确区分。

也不要把 tooltip 当成万能补丁。tooltip 通常需要 hover 或 focus 才出现，在触屏、紧张操作、快速扫视时并不等于可见说明。它适合补充，不适合承担主信息。一个更稳的判断方法是：如果用户必须先停下来猜图标，再用 tooltip 验证猜测，那这个图标其实已经在拖慢任务。

追问： 当前界面里有哪些图标按钮，一旦遮住旁边的文字或提示，就会让人无法确定下一步后果？

[!quote] 参考资料

• Nielsen Norman Group: Icon Usability
• Material Design 3: Tooltips
• W3C WCAG Understanding SC 1.1.1: Non-text Content

GOV.UK 的“一页一件事”不是把表单做得更长，而是把每一次判断变得更轻。好的数字服务不应该把纸面表格原样搬到屏幕上；屏幕的优势在于可以按顺序提问、按答案分支、只在需要时出现下一步。

这个做法的关键不是“每页只有一个输入框”这么机械，而是每一页都形成一个完整的小场景：一个清楚的问题、必要的说明、可操作的答案、继续或返回的路径。用户不必一边读十几个字段，一边猜哪些与自己有关；系统承担了排序、分支和排除无关问题的责任。

它也解释了为什么有些“极简表单”并不真正简单。视觉上字段少，如果问题本身含糊、上下文不够、返回路径不清楚，用户仍然会停住。相反，一页一个问题可以看起来更慢，却让每一步更确定：当前要回答什么、为什么要回答、答完会去哪里，都在同一个注意力范围里。

迁移到产品界面时，可以把它理解成一种节奏设计：不要把用户需要做的判断一次性摊开，而是让界面按照意图成熟的顺序出现。设置向导、权限申请、风险确认、复杂筛选、开户/报名流程都适用。真正需要警惕的是为了追求“少页数”把无关字段合并到一起，结果省下的是系统页面，增加的是人的犹豫。

追问： 当前正在设计的流程里，哪些字段或选项只是因为“同属一个表单”才被放在一起，而不是因为用户会在同一刻做出同一个判断？

[!quote] 参考资料

• GOV.UK Service Manual: Structuring forms
• GOV.UK Design System: Question pages

Paul Rand 的很多标志之所以耐看，不只是因为它们足够简洁，而是因为简洁里常常藏着一个轻微的“玩笑”。这个玩笑不是卖萌，也不是表情包式的趣味，而是把品牌的抽象关系压缩成一个可以被记住的视觉动作。

IBM 的条纹让沉重的字母变成一种有节奏的机器感；UPS 旧标志把包裹放在盾牌上，几乎用一个儿童也能理解的动作说明“安全送达”；ABC 的圆形字母没有多余姿态，却把广播网络变成一个稳定、低噪声、随处可复制的印章。

这里最值得吸收的不是复古企业标志的外形，而是“记忆机制”。一个好标志不一定要讲完整故事，但它应该让人能够复述：我看见了什么关系？它为什么是这个形状？它缩小、反白、重复出现时还成立吗？

今天很多 logo 容易陷入两种极端：一种是过度抽象，最后只剩下几何体；另一种是过度解释，试图把品牌愿景全部塞进一个符号。Rand 的价值在于提醒设计工作：真正有效的识别，往往是在最少形状里留下一个可感知的转折，让理性秩序和人味同时存在。

追问： 如果一个作品集或产品 logo 只能保留一个“让人记住的动作”，它应该是形状上的、文字上的，还是使用场景里的？

[!quote] 参考资料

• Paul Rand — IBM Logo
• Paul Rand — UPS Logo
• Paul Rand — ABC Logo

真正让人安心的界面，不是把每个动作都做得很隆重，而是在关键动作之后留出一条可以回头的路。用户按下按钮时，最需要的往往不是庆祝动画，而是三个判断：刚才发生了什么、有没有影响重要内容、如果按错了能不能恢复。

这也是“撤销”比“确认弹窗”更温和的地方。很多低风险动作不必在发生前拦住用户，因为拦截会打断节奏，让界面变得像一连串关卡。更好的做法是让动作先完成，再用轻量反馈说明结果，并在短时间内提供撤销入口。比如归档一封邮件、移除一个标签、移动一个任务，完成后出现一条安静的提示：“已归档，可撤销。”

但这不意味着所有操作都应该靠撤销解决。删除账户、支付、公开发布、覆盖大量数据这类高风险动作，仍然需要更明确的确认、后果说明和二次判断。关键不在于是否弹窗，而在于界面有没有按照风险分层：轻动作给回头路，重动作给停顿和解释。

很多产品的误区，是把反馈做成单纯的“成功提示”。绿色勾、烟花、toast 都只能证明系统收到了动作，却没有帮助用户理解后果。真正好的状态反馈会把操作结果放回工作现场：对象去哪了、页面为什么变了、下一步还能做什么。

追问： 如果把一个常用功能里的所有“确认弹窗”拿掉，哪些动作应该改成撤销，哪些动作必须保留停顿？

[!quote] 参考资料

• Material Design — Snackbars
• Apple Human Interface Guidelines — Alerts
• NN/g — Confirmation Dialogs Can Prevent User Errors

一句话结论

NASA 的视觉识别真正值得研究的地方，不只是“worm”标志看起来很未来，而是它把未来感翻译成了一套可执行的规范：尺寸、留白、颜色、字体、车辆、建筑、出版物、标牌，都被放进同一个通信系统里。好的品牌不是一张漂亮图形，而是一种让组织持续说同一种话的秩序。

研究对象

1975 年，Richard Danne 与 Bruce Blackburn 为 NASA 设计了新的 Logotype，也就是后来常被称为 “worm” 的 NASA 字标。1976 年发布的《NASA Graphics Standards Manual》把它扩展成完整的视觉通信系统。NASA 现在的品牌指南也明确记录：worm 在 1976–1992 年间是官方标志，之后可作为与 “meatball” 徽章并置的补充图形使用；同时，NASA 对这些标志的使用有严格限制。

这里的重点不在于复古字体，也不在于把四个字母连成连续线条这件事本身。更值得拆解的是：一个国家级机构如何把“探索未来”这种抽象气质，落到普通人每天会遇到的界面——车辆编号、办公标识、任务资料、建筑外立面、出版物封面、制服与设备标记。

背景

NASA 原有的 “meatball” 徽章包含星体、轨道、矢量和球体，信息丰富，也带有明显的时代象征。它有叙事感，但在复杂媒介里会遇到一个问题：图形细节多，应用尺寸、背景和工艺稍有变化，识别就容易变浑。

Danne 与 Blackburn 的 worm 反过来走向“少”。它没有画火箭，也没有画星球，只保留 NASA 四个字母的几何连续性。这个动作并不是把品牌变冷，而是把 NASA 从一枚徽章变成一种可部署的信号：远看是一条红色节奏，近看才读出字母。

代表作品 / 关键画面

第一类关键画面，是手册里的规范页。保护空间、最小尺寸、颜色、背景对比、居中方式，这些看似枯燥，却决定了标志能不能在真实环境里保持尊严。NASA 当前品牌指南甚至提醒：meatball 并不是完全对称的，居中时应以蓝色球体为准，而不是把整个物件机械居中。这里体现的是一种很细的视觉判断——规范不是为了束缚设计师，而是为了避免每一次落地都重新争论。

第二类关键画面，是 worm 被放到巴士、飞机、建筑和资料上的应用。红色字标在白色车身上不是装饰，它像一个公共系统的签名：清楚、直接、低解释成本。它没有把“太空”视觉化成星空背景，而是让组织本身呈现出工程感、速度感和现代性。

第三类关键画面，是 logotype 的保护空间。很多标志在展示稿里很好看，一进入真实页面就被标题、照片、按钮、边框挤压。NASA 手册把留白变成可测量的空间，这一点很重要：留白不是审美偏好，而是识别系统的呼吸权。

视觉 / 交互语言

worm 的语言很明确：连续线、圆角转折、低细节、高速度。它的未来感不是来自炫技，而是来自减少摩擦。字母之间的连接让它不像一组排版文字，更像一个可被喷涂、贴附、缩放、移动的工程符号。

这和界面设计很接近。一个按钮、状态标签、导航栏或数据卡片，如果只在单屏稿里好看，还不能算成熟。它必须能承受不同长度的文字、不同背景、禁用态、错误态、移动端窄屏、深色模式和权限差异。NASA 手册的价值就在于，它把“看起来统一”推进到“可以被不同团队稳定执行”。

可迁移原则

第一，先定义关系，再定义风格。NASA 的规范不是先问“要不要更酷”，而是先回答：徽章、字标、部门名称、车辆编号、背景色、出版物标题之间是什么关系。界面设计也一样，主操作、次操作、危险操作、系统反馈、空状态、导航层级需要先形成关系语法，之后再谈视觉情绪。

第二，未来感可以很安静。真正耐看的现代感，往往不是更多渐变、发光和三维材质，而是更少的解释成本。worm 的力量来自可识别的轮廓和稳定的部署方式，不是来自复杂装饰。

第三，把留白写进规则。很多设计失败不是因为元素不好看，而是因为元素没有保护区：标志贴边、按钮太挤、表单提示贴得太近、卡片之间没有节奏。留白一旦只是“凭感觉”，就很容易在交付时被压缩掉；留白一旦成为规则，系统才有长期一致性。

第四，不要表面模仿。把一个 SaaS 产品做成红色 worm 风格，通常只是复古表演。真正可借鉴的是它的系统思维：少量核心形状，明确的使用限制，可测量的空间，跨媒介的执行方式，以及对误用场景的提前预防。

追问

如果一个产品或作品集只能保留三条视觉规范，哪三条最能保护它在不同页面、不同设备、不同内容长度下仍然像同一个系统？

参考资料

• NASA Brand Guidelines
• NASA Graphics Standards Manual - NASA
• NASA Graphics Standards Manual (1976) PDF

一致性不是把每个页面做得一样，而是让相同的关系在不同场景里保持相同形状。真正需要稳定的，不是颜色、圆角或某个组件外观，而是用户对“这是主操作”“这是风险”“这里可返回”“这个状态还没完成”的判断方式。

Material Design 把状态分成 hover、focus、pressed、dragged、disabled 等，是因为界面里的“可操作性”需要一套可学习的语法。NN/g 谈一致性与标准时也强调：一致性能减少重新学习，让用户把注意力放回任务本身。

所以一致性不是视觉保守，而是认知节省。比如同一个产品里，危险操作有时是红色文字，有时是蓝色实心按钮，有时藏在更多菜单里；单看每一处都可能不丑，但合在一起会让用户每次都重新判断风险。相反，主要、次要、危险、禁用、完成这些关系如果有稳定的形状，界面即使密度很高，也会显得安静。

需要避免的是“表面统一”：所有按钮都同色、所有卡片都同尺寸、所有页面都套同一个模板。这样的统一会抹平关系，反而让真正重要的差异变得不清楚。好的系统应该允许内容变化，但不允许关系随意漂移。

追问： 把界面里的文字暂时遮住后，是否还能看出哪些是主要动作、哪些是风险状态、哪些只是辅助信息？

[!quote] 参考资料

• Material Design 3: States
• Nielsen Norman Group: Consistency and Standards

把表单标签放进输入框里，看起来是在节省空间，实际是在把说明交给记忆。placeholder 最大的问题不是“不够美”，而是它会在用户开始输入后消失；当人需要复查、修改、处理报错，或被打断后回来继续填写时，原本应该稳定存在的上下文已经不见了。

NN/g 把这种做法说得很直接：placeholder 可以作为补充提示，但不应该替代 label。GOV.UK Design System 也要求文本输入必须有标签，并且大多数情况下标签应该可见。这里的“可见”不是视觉保守，而是一种界面责任：字段名、填写内容和错误修复路径，需要在同一个现场同时成立。

常见误区是把“页面更干净”理解成“文字更少”。但表单不是海报，它的美感来自确认感：用户扫一眼能知道每个字段在问什么，输入后还能检查自己填得对不对。尤其在地址、证件、付款、报名这类低频任务里，隐藏标签会让用户为设计的留白付出额外认知成本。

更稳的做法是：label 放在输入框上方，保持短、直接、句子式；placeholder 只在确实需要示例时作为次级提示；复杂说明放到 hint text，而不是塞进框内。留白应该保护判断，而不是拿走判断所需的线索。

追问： 如果把一个表单填满以后再回头检查，哪些字段即使内容已经输入，也仍然能让人立刻知道“这里原本在问什么”？

[!quote] 参考资料

• GOV.UK Design System: Text input
• Nielsen Norman Group: Placeholders in Form Fields Are Harmful
• W3C WCAG 2.2: Contrast (Minimum)

Figma 的多人协作界面值得观察的地方，不是“很多人同时在线”这件事本身，而是它把远端的人变成了可感知、可定位、可回应的现场。协作如果只停留在权限、版本和消息列表里，人会不断失去上下文；Figma 选择把协作直接放回画布。

彩色光标、姓名标签、评论气泡这些元素看起来很轻，却解决了三个关键问题：谁在这里、他正在看哪里、这件事和哪个对象有关。它们没有另开一个“协作中心”，而是贴着被讨论的对象出现，让反馈不脱离材料本身。

这也是 Figma 与许多传统设计工具的分界：协作不是完成设计之后的审批流程，而是设计过程中的一层空气。颜色让人被识别，位置让意图被理解，评论让决定留下痕迹。界面因此不需要把所有沟通都写成正式文档，仍然能维持基本秩序。

可迁移的原则是：多人系统里的“ presence ”不能只是在线头像。真正有用的存在感，要靠位置、动作、对象关系和状态共同构成。做协作型产品时，与其增加更多通知，不如先问：用户能不能在当前工作表面上，直接感到别人正在怎样参与？

但这件事也有边界。存在感太强会变成干扰，颜色、动效和提示如果持续抢眼，工作材料反而退到后面。好的协作提示应该像房间里的脚步声：足够让人知道有人在场，又不会替代正在进行的工作。

追问： 一个协作界面里，哪些信息必须贴在对象旁边，哪些信息应该退到历史记录或通知里？

[!quote] 参考资料

• Figma Design
• Figma: The Collaborative Interface Design Tool

川内伦子的照片常被形容为“温柔”，但真正值得借鉴的不是柔和色调，而是她把日常碎片组织成秩序的方式：光、留白、局部、短暂动作，都不是气氛装饰，而是在替画面建立观看路径。

在《Illuminance》这样的作品里，很多画面并不急于交代完整事件。它只截取一束光、一块皮肤、一只动物、一个反射面，让观看者先感到“有什么正在发生”，再慢慢补足关系。这种克制不是信息不足，而是把解释权从说明文字交还给感知。

这对界面设计也有提醒：很多页面失败，不是因为内容不够，而是因为所有内容都用同一种声量出现。川内伦子的照片像是在说，秩序可以来自轻重、距离和停顿。一个界面不一定要把每个模块都做成卡片、描边、标题和按钮；有时只要让主要动作更清楚，让次要信息退后，让空白承担呼吸，结构就会浮出来。

但不要把这种方法误解成“调淡一点”。柔和只是结果，关键是选择：留下哪个瞬间，省略哪部分上下文，让观看者在哪里停住。做作品集、产品页或摄影叙事时，真正可迁移的原则是：先建立观看的节奏，再安排信息的完整性。

追问： 一个页面里，哪些信息其实不需要立刻被解释，而应该先被“感觉到”？

[!quote] 参考资料

• Rinko Kawauchi Biography
• Rinko Kawauchi Works
• Rinko Kawauchi — Illuminance
• Rinko Kawauchi — Halo
• Rinko Kawauchi — M/E

键盘焦点不是可访问性清单里的一圈蓝线，而是界面给用户留下的“当前位置”。当鼠标离开、触控不存在、或用户只能用 Tab 键移动时，焦点边界就是唯一的空间线索：现在在哪里，按下 Enter 会发生什么，下一步会去哪里。

很多界面会把 hover 做得很细，却把 focus 处理得很弱，甚至直接 outline: none。这看似让画面更干净，实际是把操作路径擦掉了。对键盘用户来说，一个没有焦点的按钮并不是“更极简”，而是不可确认；一个只改变阴影或浅灰背景的输入框，也很容易在高亮主题、深色模式、低视力场景里消失。

好的焦点状态不一定刺眼，但必须足够明确。W3C 在 WCAG 2.4.7 里强调“用户知道哪个元素拥有键盘焦点”，在 2.4.13 里进一步把问题从“有没有”推进到“是否足够看得见”：焦点区域至少要接近 2px 周长的面积，并与相邻状态有足够对比。Carbon 的键盘指南也把焦点和 Tab 顺序放在一起谈，因为焦点不是孤立样式，而是一条可预测的路径。

界面设计里可以把焦点当成一种安静的边界设计：它不抢主视觉，但在需要时立刻出现；它不改写组件性格，但清楚告诉用户“此刻这里可操作”。尤其在按钮组、菜单、标签页、表格单元这些密集区域，焦点边界要比 hover 更可靠，因为它承载的是行动确认，而不是装饰反馈。

一个实用判断是：把鼠标收起来，只用 Tab、Shift+Tab、Enter 和 Space 走一遍主要流程。如果眼睛需要停下来猜当前位置，焦点就太弱；如果焦点顺序跳跃、绕远或进入不可见区域，问题就不只是样式，而是信息架构没有尊重操作路径。

追问： 当前界面里，哪些“看起来更干净”的处理，其实是在删除用户确认位置的线索？

[!quote] 参考资料

• W3C WAI：Understanding SC 2.4.7 Focus Visible
• W3C WAI：Understanding SC 2.4.13 Focus Appearance
• Carbon Design System：Accessibility / Keyboard

一句话结论

1964 年东京奥运会的图形符号价值，不在于“画得简洁”，而在于它把一场国际赛事中复杂的语言、场馆和行动问题，翻译成一套可以被快速识别的身体语法。

研究对象

东京 1964 常被视为现代奥运视觉传播的重要转折点之一。它面对的不是单一海报问题，而是一个更接近今天产品设计的问题：大量来自不同国家的人，需要在陌生城市、陌生场馆、不同语言之间迅速理解“这是什么”“往哪里走”“该做什么”。

在这种场景里，文字会变慢，装饰会变吵。图形符号之所以重要，是因为它把信息从语言层降到感知层：先看见一个动作，再理解一个项目；先识别一个方向，再决定下一步。

背景

体育项目本身很适合被符号化，因为它们有清晰的身体姿态：游泳、射箭、体操、摔跤，都能通过轮廓、重心和动作方向被压缩成图形。但难点也正在这里：如果每个项目都只是各画各的“小人”，系统会很快变成插画集合，而不是公共信息系统。

东京 1964 的启发，是把图形当作一套语法来处理：相近的比例、稳定的正负形关系、明确的动作重心、统一的黑白/底色逻辑，让不同项目在同一张地图、票券、导视牌里仍然属于同一个世界。

代表画面 / 关键机制

第一层是轮廓。好的公共符号通常不依赖细节，而依赖“剪影是否成立”。哪怕缩小、远看、印刷质量下降，只要轮廓仍然能区分，信息就还活着。

第二层是动作。体育图标不是静物，它要抓住一个项目最能被认出的姿态：弓被拉开的方向、跳水身体的弧线、赛跑的前倾。动作越准确，符号越不需要解释。

第三层是系统。单个图标可以漂亮，但公共设计关心的是几十个符号放在一起时是否仍然安静、稳定、可预测。真正的克制不是每个图标都少画一点，而是每个图标都服从同一套判断秩序。

视觉 / 交互语言

这套思路很像今天的软件界面：图标不是装饰，而是导航、状态和动作的入口。一个“上传”“同步”“警告”“权限”图标如果只追求风格统一，却没有抓住对象、状态和后果，用户仍然需要读文字才能确认。

因此，图标系统的审美不应只问“是否好看”，还要问三个更朴素的问题：弱注意力下能否被认出？不同尺寸下是否仍然成立？和文字、颜色、位置放在一起时，是在帮助判断，还是在制造第二套噪音？

可迁移原则

1. 先找最小可识别姿态。 图标设计不是把对象画全，而是找到最少多少信息仍然能让人认出它。
2. 把风格降级为语法。 真正可持续的图标系统，靠比例、线面、圆角、空隙、方向这些规则保持一致，而不是靠“看起来同一种风格”。
3. 在真实压力里验证。 公共导视要面对距离、速度、拥挤和跨语言；软件图标也要面对小尺寸、低耐心、深色模式、禁用态、错误态和新用户。
4. 不要让图标替代必要文字。 符号可以降低第一眼成本，但复杂动作、危险后果、不可逆操作仍然需要文字确认。克制不是取消说明，而是让说明出现在最需要的位置。

东京 1964 给今天界面设计的提醒是：一个优秀图标系统不是“更漂亮的一批 icon”，而是一种把复杂环境变得可行动的秩序。它安静，但不是空；它简化，但不是省略责任。

参考资料

• The Olympic pictograms: a century of tradition and innovation
• Tokyo 1964 Olympic Design Programme
• Lance Wyman: Mexico 68 and pictogram systems

等待不是界面的空白时间，而是一段仍然需要被设计的体验。真正糟糕的等待，不只是慢，而是让人不知道系统是否听见、正在做什么、还有没有下一步。

很多产品把 loading 当成一个视觉占位：放一个 spinner，或者加一点动效，就以为完成了反馈。但 spinner 只回答了“系统没死”，没有回答“正在处理哪件事”“大概要经过几个阶段”“我现在能不能离开”。当等待超过一两秒，用户失去的不是耐心，而是对关系的判断。

更好的等待设计会把时间拆成方向感。比如上传、导入、付款、生成报告这类流程，界面可以告诉用户当前处在“校验文件 / 上传 / 处理 / 完成”中的哪一步；如果无法给出准确百分比，也至少可以给出状态文本、预计范围、可取消路径，或完成后会发生什么。

这里的克制不是让 loading 更安静，而是让它少表演、多交代。一个细小的状态句，有时比一段精致动画更能安抚人，因为它恢复了用户对系统的理解权。

追问： 当一个界面必须让人等待时，它现在只是在“装饰时间”，还是在帮助用户理解这段时间的方向？

[!quote] 参考资料

• Nielsen Norman Group: Response Times: The 3 Important Limits
• Material Design 3: Progress indicators
• Carbon Design System: Progress indicator

空状态最常见的误区，是把“没有内容”当成一个需要被装饰的洞：放一张可爱的插画、写一句轻松的话，然后结束。这样看起来比空白友好，却没有回答用户真正紧张的问题：这里为什么是空的？系统是否已经完成？下一步能做什么？

Carbon Design System 对空状态的定义很直接：它是应用中没有数据显示给用户的时刻，但它应该让用户保持被告知、被支持，并回到一条可继续前进的路径。也就是说，空状态不是视觉缓冲区，而是一段很短的产品说明书。

反面做法通常有三种。第一，只说“这里什么都没有”，但不说明这是首次使用、筛选无结果、权限不足，还是加载失败。第二，把主要篇幅给插画和品牌语气，却不给行动入口。第三，在搜索或筛选场景里不保留用户刚才的条件，让人不知道该改哪里。

更好的空状态通常只需要四个层次：状态说明、原因或条件、下一步动作、必要时给一个轻量学习线索。它不一定要热闹，也不一定要极简；关键是把“不在场的内容”翻译成“用户现在可以理解和处理的关系”。

在界面设计里，空不是留白本身，而是一种未完成的对话。留白可以安静，但不能让用户独自猜测。

追问： 当前界面里有没有某个“空白区域”，其实应该回答用户的一个具体问题，而不是只负责好看？

[!quote] 参考资料

• Carbon Design System: Empty states
• Nielsen Norman Group: Designing Empty States in Complex Applications
• Material Design 2: Empty states

1984 年的 Macintosh 是一台硬件极度受限的机器：9 英寸黑白屏幕，512×342 分辨率，没有颜色，没有抗锯齿。但打开它的那一瞬间，你看到的不是一个冷冰冰的操作系统——而是一个微笑。那个微笑只有 32×32 像素，两粒圆眼，一条弧线嘴。它就是 Happy Mac。

这个微笑出自 Susan Kare 之手。她拥有纽约大学美术博士学位，加入苹果前从未设计过软件。Jobs 给她的任务是：为一台即将改变世界的机器画图标，每个图标限定在 32×32 的黑色像素格子里。没有 Photoshop，没有 Sketch。她用一本方格笔记本，一个像素一个像素地填。

Kare 的做法和今天的图标设计流程几乎相反。她不是先画矢量再导出小尺寸，而是直接在最小约束里做决定。32×32 的格子是一个残酷的编辑器：多一个像素嘴就歪了，少一个像素眼睛就没了。但也正是这种残酷，迫使命中真正重要的东西——一个图标的可识别性不是来自细节，而是来自轮廓。Happy Mac 在缩到 16×16 时依然看得出在笑；Bomb 图标（系统崩溃提示）在极小的空间里同时传达了"出事"和"不是你的错"——它是炸弹，但扁扁的、圆圆的，甚至有点可爱。Kare 故意没用骷髅或者红色警告，因为"用户已经很难过了，不需要再被恐吓"。

她的图标灵感来自日常物品和视觉记忆：手表代表等待、剪刀代表剪切、油漆桶代表填充、垃圾桶代表删除。这些隐喻不需要说明书——它们从物理世界直接搬运到屏幕上，让完全没有计算机经验的人也能凭直觉理解。Command 键上的 ⌘ 符号则来自她翻字典时找到的瑞典露营地标志——一个抽象但无文化负担的图形，替代了 Jobs 讨厌的苹果 logo 泛滥。

这些图标还有一个被今天的设计容易忽略的品质：它们有呼吸感。32×32 的格子里，Kare 不追求填满，而是大量使用留白和不对称。废纸篓图标微微倾斜，像真的会被踢到的垃圾桶；剪刀图标稍微偏左张开，似乎正要合上。这种细微的不完美让图标有了重量和方向，而不是冷冰冰的几何体。

一个很容易被忽略的配套工作是 Chicago 字体。Kare 在方格纸上逐像素绘制了这款位图字体，专门为低分辨率屏幕设计。它不像后来的系统字体那样追求中性的优雅——它有点粗、有点方、有点笨，但它在那个屏幕上极其好读，也有一种诚实的手工感。这种"为介质而设计"的意识，在今天被 Retina 屏幕惯坏的设计中反而稀缺了。

Susan Kare 的工作说明了一件事：技术约束不是设计的敌人，而是它的脚手架。32×32 像素不是"做不了更精细"的遗憾，而是"必须在 1024 个决策里把话说完"的纪律。今天的图标可以做到无限分辨率、渐变、半透明、动态效果，但很多时候它们反而失去了当初 32×32 像素时代的那种直觉第一性和情感温度。

追问： 你最近做的一个界面元素，去掉颜色、去掉圆角、去掉阴影之后，它的轮廓本身还认得出来吗？

[!quote] 参考资料

• Susan Kare — Apple Icons
• Susan Kare on Designing the Mac's Original Icons (Computer History Museum)
• The Woman Behind Apple's First Icons (Priceonomics)

深泽直人的“Without Thought”不是把产品做得安静，而是让使用者在还没有开始思考说明书之前，身体已经知道下一步该做什么。它的重点不是造型上的“无感”，而是把动作、位置、重量和日常经验调到同一条线上。

MUJI 的壁挂式 CD 播放器是一个很好的切片：它不把“播放”做成一个需要寻找的按钮，而是借用了换气扇拉绳的经验。拉一下，声音开始；再拉一下，声音停止。这个动作本身已经包含反馈和状态切换，所以产品不需要大声解释自己。

±0 的加湿器也类似。它像一只低矮的水盆，开口、体量和圆润边缘都在提示“这里和水有关”。好的克制不是删除特征，而是保留最接近日常经验的那个特征，让它承担交互说明。

迁移到界面设计里，这意味着不要急着给每个功能加一层解释文案或新手引导。先问：这个动作能不能从位置、形状、状态和前后关系里被感觉到？例如可拖拽区域是否真的像可以移动，保存状态是否在编辑节奏中自然出现，危险操作是否在距离和确认方式上显得“更重”。

误区是把“无意识”误解成“没有提示”。深泽直人的安静并不是含糊，而是把提示藏进熟悉动作里。界面如果只是变得更空、更浅、更少文字，却没有让行为路径更自然，就只是把理解成本转嫁给用户。

追问： 一个功能如果去掉说明文字，只靠位置、状态和动作反馈，还能被正确使用吗？如果不能，缺的究竟是文案，还是行为线索？

[!quote] 参考资料

• Naoto Fukasawa Design — About
• Naoto Fukasawa Design — Wall mounted CD Player
• Naoto Fukasawa Design — Humidifier

按钮的尺寸不只是“看起来够大”，它还要为两件事留余地：手指的误差，以及文字被放大后的呼吸。Material Design 在按钮规范里把样式分成 elevated、filled、tonal、outlined、text 等层级，但真正值得注意的细节，是这些样式并不是为了让按钮更花，而是让主次动作在一眼之内被分开。

常见误区是把按钮当成一个固定胶囊：字号、圆角、内边距在视觉稿里刚好，于是界面看上去很整齐。但真实使用里，用户可能打开 200% 文字大小，文案可能从两个字变成一句话，按钮也可能出现在拥挤的底部栏里。此时如果只追求“紧凑”，按钮会先失去阅读性，再失去可点击性。

Material 的 accessibility 文档提醒：可用按钮与背景至少需要 3:1 的对比；按钮标签在 Android 上放大到 200% 后，应尽量避免过度换行或被截断。这个要求看似偏工程，实则是很基础的视觉秩序：按钮应该在状态变化、字号变化、语言变化后，仍然像一个稳定的动作入口。

所以设计按钮时，先不要问它够不够“精致”，而要问它有没有保留余量：文案能否更短，内边距能否承受放大，主按钮是否真的只留给最重要动作，次级动作是否安静但仍可辨认。克制不是把按钮做小，而是让它在压力场景里不慌。

追问： 当前界面里最重要的那个按钮，如果文字放大到 200%，它还能保持清楚、稳定、可点击吗？

[!quote] 参考资料

• Material Design 3: Buttons overview
• Material Design 3: Buttons accessibility
• WCAG 2.2: Target Size (Minimum)
• WCAG 2.2: Resize Text

一句话结论

Mexico 68 的视觉系统厉害之处，不只是那个足够醒目的标志，而是它把一个标志扩展成了可走、可读、可记忆的公共秩序。Lance Wyman、Eduardo Terrazas 与组委会团队没有把奥运会做成一组漂亮海报，而是把城市、场馆、交通、票券、制服、图标和文化活动放进同一种视觉语法里。

这是一种很适合今天界面设计借鉴的能力：先找到一个能够生长的基本关系，再让所有界面细节从这个关系里自然长出来。

研究对象

研究对象是 1968 年墨西哥城奥运会视觉识别，核心设计者通常指向 Lance Wyman，并与 Eduardo Terrazas、Pedro Ramírez Vázquez 等人共同形成完整系统。V&A 对官方海报的说明里提到，这套设计把 Op Art 的动态视觉、前西班牙时期墨西哥图案感，以及 Huichol 民间艺术的线性图像合在一起，表达一种“现代墨西哥”的形象。

真正值得注意的是：这里的“民族性”并没有被处理成表面纹样贴图。它被抽象成线、同心、扩散、振动和节奏，然后接入奥运五环、年份“68”和 Mexico 字样。传统不是装饰材料，而是系统生成规则的一部分。

背景

1968 年的墨西哥城是第一次在拉丁美洲举办夏季奥运会。大型国际活动需要在短时间里服务大量陌生人：语言不同、方向感不同、对城市不熟悉，还要在拥挤环境中快速找到场馆、入口、项目和路线。

因此，这套视觉识别的任务不只是传播形象，也是一套临时城市界面。它要让人还没读完说明时，就已经能感到“这是同一个系统”；它要让图标、数字、线条和色彩在远处、运动中、拥挤中依然保持辨识度。

代表作品 / 关键画面

第一个关键画面是 Mexico 68 logotype。五环被转化为“68”的一部分，字母则通过平行线和同心扩散获得统一节奏。标志不依赖复杂图形，而依赖一个可以不断延展的构造方法：线从字形里长出来，又可以扩展到海报、环境图形和导视。

第二个关键画面是项目图标和文化图标。它们不是各画各的插画，而是在相似的几何约束下保持个性。运动项目需要迅速识别，文化项目则需要承载地方性；二者的共同点是都被压进一种清晰、粗壮、可复制的图形语言中。

第三个关键画面是官方海报。V&A 提到，海报把平行线向四边扩散，形成强烈眩目效果，也有黑白和彩色多个版本。它之所以耐看，不是因为“炫”，而是因为视觉冲击来自同一个标志逻辑的放大，不是另起炉灶的装饰。

视觉 / 交互语言

这套系统的第一层语言是线。线既是字形的一部分，也是运动感、城市路径和节庆能量的隐喻。它没有把“动感”画成奔跑姿势，而是通过重复、错视和扩散，让静态图形本身带有速度。

第二层语言是高对比。大量黑白、强色和彩色组合让图形在远距离和复杂环境里保持存在感。这里的高对比不是为了刺激，而是为了公共信息的可靠性。公共空间里的视觉不应该温吞到需要仔细欣赏才看懂。

第三层语言是可移植。一个好的识别系统，不只在标志页成立，也要能放进地图、票券、制服、路牌、场馆外墙和纪念品。Mexico 68 的可贵之处在于：标志不是主视觉的终点，而是整个系统的语法起点。

可迁移原则

第一，先设计生成规则，再设计单张画面。 如果一个界面系统只是在每个页面上重复 logo、颜色和圆角，它仍然可能是散的。更稳的方式是先确定一种关系：信息如何分层、操作如何出现、状态如何反馈、视觉元素如何从同一个规则里变化。

第二，把识别度放在使用情境里判断。 Mexico 68 的图形不是只在画册里好看；它要在城市里、远距离、移动中工作。界面设计也一样，按钮、图标、状态和提示不能只在静态稿里成立，还要在焦虑、分心、弱网、错误输入和小屏幕里成立。

第三，地方性或品牌感应该进入结构，而不是贴在表面。 很多产品想做“有性格”，最后只是在空页面上加插画、在标题上加特殊字体。Mexico 68 更高级的地方是把文化来源转译为线性节奏和系统方法。对软件来说，品牌感也可以体现在信息组织、动效节奏、语言分寸和默认设置里，而不只是视觉皮肤。

第四，强视觉不等于不克制。 这套系统非常醒目，但并不混乱，因为它的变化受规则约束。克制不是低饱和、少元素、大片空白；克制是知道什么可以变化，什么必须保持不变。

对界面设计的启发

如果把 Mexico 68 看作一个产品设计案例，它像是在回答一个很实际的问题：怎样让陌生人在复杂系统里快速建立信任？答案不是加更多说明，而是让所有接触点持续释放同一种秩序感。

一个复杂工具、内容平台或 AI 产品也可以这样做。导航、空状态、命令面板、卡片、通知、错误反馈和文档页面，最好不要像不同团队临时拼起来的部件。它们需要共享一套可感知的语法：相同的层级逻辑、相同的反馈节奏、相同的命名方式，以及相同的“下一步”暗示。

追问： 一个界面的品牌感，能不能不靠更显眼的装饰，而靠一套持续、可感知、能帮助行动的秩序建立起来？

参考资料

• Mexico 68 Olympic Games - Lance Wyman
• Iconic design – the official poster for the Mexico 1968 Olympic Games · V&A
• File:68 Olympic emblem.png - Wikimedia Commons
• File:Alfabeto 68.svg - Wikimedia Commons

好的界面不是把所有可能性一次性摆出来，而是先让人知道“下一步该做什么”。渐进披露的重点并不是隐藏功能，而是把复杂判断推迟到用户已经产生意图之后。第一屏要承担方向感，第二步才承担细节。

这件事很容易被误解成“少放一点东西”。但真正的少，不是数量少，而是用户在当前时刻需要比较的东西少。比如一个创建流程，一开始只需要让人判断：继续、换模板、还是查看更多；高级规则、例外条件、危险操作可以等选择发生后再出现。这样界面不是变贫乏，而是把注意力放在时间顺序里。

Apple Human Interface Guidelines 里对 disclosure controls 的提醒很朴素：它们应该揭示与当前上下文有关的附加信息，而不是把页面变成一堆折叠仓库。NN/g 对 progressive disclosure 的解释也类似：先显示少量最重要选项，减少认知负担；再根据用户需要逐步展开更专门的内容。

可迁移的原则是：**不要问一个还没有形成意图的人做精细判断。**在界面设计里，第一层信息应该帮助进入；第二层信息才帮助调校；第三层信息再处理例外。若把三层同时摊开，用户看到的是“功能丰富”，身体感受到的却是“我不知道从哪里开始”。

追问： 当前界面里，有哪些信息其实应该等用户完成第一个选择之后再出现？

[!quote] 参考资料

• Apple Human Interface Guidelines: Disclosure controls
• Nielsen Norman Group: Progressive Disclosure

很多表单错误看起来“已经设计过”：输入框变红、旁边出现红字、按钮下面再加一段提示。但常见误区是，把错误状态理解成一种颜色，而不是一条可修复的路径。红色只能制造警觉，不能自动回答三个问题：哪里错了、为什么错、下一步怎么改。

GOV.UK Design System 的 Error message 做得克制，但它的克制不是少写字。它把错误说明放在问题和提示之后，用红色边线把这一组内容连起来，保留用户原来的输入，并让文案直接指向可修复动作，例如“日期必须早于今天”。这比一句“格式错误”更像界面在承担责任：系统没有把判断压力推回给用户，而是把关系重新摆清楚。

WCAG 也提醒过同一件事：颜色不应成为传达信息的唯一方式。这里的重点不只是照顾色觉差异，也是在照顾疲惫、分心、赶时间的人。越是关键状态，越不能只靠视觉情绪；它需要文字、位置、形状、焦点、语义和保留现场共同工作。

反面案例通常有三种：只把边框标红但不解释；用“此字段必填”这类泛化文案代替具体问题；提交失败后清空输入，让用户重新劳动。它们的问题不是“不够好看”，而是把修复成本藏进了用户的下一秒。

更好的做法是：让错误信息贴近相关字段，复用字段名称，说明具体原因，保留已填内容，并在页面顶部用错误摘要帮助用户回到问题位置。颜色仍然可以存在，但它只负责提醒，不负责全部沟通。

追问： 当前界面里有哪些状态，是只靠颜色在说话，而没有给出真正的修复路径？

[!quote] 参考资料

• GOV.UK Design System: Error message
• GOV.UK Design System: Error summary
• W3C WAI: Understanding SC 1.4.1 Use of Color