一致性：系统感从哪来
有一种界面，单看每处都还行，合起来却透着一股散装味。它缺的说到底就一样东西：一套大家共同遵守的变量。这一节讲 design token，变量先行，样式跟随。
散装感的来路很具体：这个按钮高 36，那个高 40；这张卡圆角 8，那张 16；这里的玫红深一点，那里浅一点。每处都是当时随手写的，单看都说得过去，拼起来就露馅。解法是把这些「随手写」收编成变量：先定 token（主色、圆角、控件高度、间距档位），所有样式从 token 取值。写样式的人少做决定，界面自然长得像一家人。
一致性听着像洁癖，其实买的是真金白银的东西。《About Face 4》引尼尔森的账：统一的界面标准靠可预见性提高产出、减少错误，用户在一个地方学会的规律，换个页面还管用，学习成本和培训费用都在降。苹果和微软都乐于让第三方应用长得像自家系统，图的就是用户到哪都不用重新学。
| 一致，用户赚到什么 | 不一致，用户赔上什么 |
|---|---|
| 按钮长这样、行为就那样，闭着眼预判 | 每个新页面都要重新试探一遍 |
| 学一次，全站通用 | 「上一页明明是点右上角保存的」 |
| 界面退到背景，注意力全给内容 | 差异不断把注意力拽向界面本身 |
同一本书也把丑话说在前头：标准管的是外观和感觉这层语法，管不了更深的逻辑，把标准当灵丹妙药，和以为有了格式手册就能写出好小说一样不可取。所以这一节教的是给界面立变量，不是给创造力上锁。
这不是课堂虚构。本站课程列表页 learn.html 的源码里就躺着这样两行变量，原注释一并抄给你：
你正在看的这个网站，顶栏那五个按钮就是被这两个变量管着的：谁也不许自带尺寸，统一读 36px 高、10px 圆角。哪天想全站换风格，改这两行就够了。
注意刚才发生了什么：你只改了一个变量，按钮、卡片、输入框、头像框、弹窗一起变。风格是变量的取值，系统感是变量的存在。取值可以争论，变量必须先有。
token 立好之后，剩下的功夫是揪漂移。下面这页设置乍看挺正常，其实藏着五处不一致，AI 生成的界面里这五类漂移天天见。找到就点它。
《About Face 4》把一致性的裁判标准说成两句话：任何元素的存在要有足够的理由，任何差异的存在也要有足够的理由。删除按钮比别的按钮红，理由充分：行为不同的元素，就该在视觉上明显区分，长得一样却干不一样的事才坑人。反过来，同一层级的两张卡圆角一个 8 一个 16，谁也说不出为什么，那就是该收编的漂移。这本书还给了个顺手的杠杆思路：与其加新元素，不如让一个元素多干几件事，元素越少，一致性越容易守住。
这一节学的东西最后要变成一段话，放在你让 AI 写界面的 Prompt 最前面。下面这张变量表拿去就能用，取值按自己产品改，关键是让每个决定都有出处，AI 就没机会替你随手写。
系统感来自共同变量：先定 token（主色、圆角、控件高度），样式从 token 取值，散装感自然消失。
检查一致性最快的办法：把两屏截图并排放，盯着按钮、圆角、主色深浅，看有没有各自漂移。
让 AI 做界面时，先交变量表：把主色、圆角、控件高度写进 Prompt，再让它动手，产出的一致性立刻不同。
裁判标准两句话：任何元素的存在要有理由，任何差异的存在也要有理由。删除按钮的红留下，说不出理由的圆角收编。
内容来源：小山学堂「审美工程」专题原创；一致性与标准的价值、「差异要有理由」等原则整理自《About Face 4：交互设计精髓》第 17 章（Alan Cooper 等）。