审美工程 · 6 / 12 一致性：系统感从哪来 有一种界面，单看每处都还行，合起来却透着一股散装味。它缺的说到底就一样东西：一套大家共同遵守的变量。这一节讲 design token，变量先行，样式跟随。 design token CSS 变量 系统感 一句话速览 好看的站点背后都有一套设计变量。拆开本站真实的 CSS：控件高度、圆角、配色为什么全站只有一档，改一处全站生效 单看都还行，合起来就散装 散装感的来路很具体：这个按钮高 36，那个高 40；这张卡圆角 8，那张 16；这里的玫红深一点，那里浅一点。每处都是当时随手写的，单看都说得过去，拼起来就露馅。解法是把这些「随手写」收编成变量： 先定 token（主色、圆角、控件高度、间距档位），所有样式从 token 取值 。写样式的人少做决定，界面自然长得像一家人。
一致性买的是什么 一致性听着像洁癖，其实买的是真金白银的东西。《About Face 4》引尼尔森的账： 统一的界面标准靠可预见性提高产出、减少错误 ，用户在一个地方学会的规律，换个页面还管用，学习成本和培训费用都在降。苹果和微软都乐于让第三方应用长得像自家系统，图的就是用户到哪都不用重新学。
一致，用户赚到什么 不一致，用户赔上什么 按钮长这样、行为就那样，闭着眼预判 每个新页面都要重新试探一遍 学一次，全站通用 「上一页明明是点右上角保存的」 界面退到背景，注意力全给内容 差异不断把注意力拽向界面本身
同一本书也把丑话说在前头：标准管的是外观和感觉这层语法，管不了更深的逻辑，把标准当灵丹妙药，和以为有了格式手册就能写出好小说一样不可取。所以这一节教的是给界面立变量，不是给创造力上锁。
真实案例：你正在看的这个顶栏 这不是课堂虚构。本站课程列表页 learn.html 的源码里就躺着这样两行变量，原注释一并抄给你： :root{ /* 顶栏控件的统一高度与圆角：分享、主题、交流群、语言、账号按钮共用一档， auth.js 注入的那几个也读这里，避免各写各的尺寸拼出一排高低不齐的按钮 */ --xa-ctl-h: 36px ; --xa-ctl-r: 10px ; } 你正在看的这个网站，顶栏那五个按钮就是被这两个变量管着的：谁也不许自带尺寸，统一读 36px 高、10px 圆角。哪天想全站换风格，改这两行就够了。
开关拨一下，散装立现
变量开关 点击切换
同一排顶栏按钮，切到「各写各的」看看会发生什么。
xueai.miyang.cn/slides/learn.html
分享 主题 交流群 语言 账号
统一变量 各写各的
统一变量： 五个按钮读同一对 token，高度 36、圆角 10。谁也没突出，排在一起就是齐的。
改一个变量，五种控件一起变
一个圆角变量管全站 拖动滑块
下面五种控件的圆角都读同一个变量 --demo-radius，拖动滑块试试。
主按钮 输入框
卡片 弹窗 确认删除这条记录？
--demo-radius
12px
12 附近： 圆润友好，大多数产品的安全区。 注意刚才发生了什么：你只改了一个变量，按钮、卡片、输入框、头像框、弹窗一起变。 风格是变量的取值，系统感是变量的存在 。取值可以争论，变量必须先有。
找茬：哪个 App 像同一个人做的
找茬：哪边更好 点选一边
同一个小 App 的列表页和详情页缩略图。哪边像同一个团队做的？点选一边。
方案 A
新建
详情
保存
方案 B
新建
详情
保存
实战演习：这页设置藏了五处不一致 token 立好之后，剩下的功夫是揪漂移。下面这页设置乍看挺正常，其实藏着五处不一致，AI 生成的界面里这五类漂移天天见。找到就点它。
找不一致 0 / 5
提示：盯着按钮、圆角、蓝色、图标和行距看，各有一处漂了。
settings.example.com
设置
账号资料 头像、昵称、绑定手机 编辑
登录与安全 密码、两步验证 修改密码
通知 推送、邮件、免打扰 管理
通用 语言、字号、主题 管理
遇到问题？ 帮助中心
从最扎眼的那处开始点。
差异不是罪，没理由才是 《About Face 4》把一致性的裁判标准说成两句话： 任何元素的存在要有足够的理由，任何差异的存在也要有足够的理由 。删除按钮比别的按钮红，理由充分：行为不同的元素，就该在视觉上明显区分，长得一样却干不一样的事才坑人。反过来，同一层级的两张卡圆角一个 8 一个 16，谁也说不出为什么，那就是该收编的漂移。这本书还给了个顺手的杠杆思路：与其加新元素，不如让一个元素多干几件事，元素越少，一致性越容易守住。
下面四处差异，哪处的存在有足够理由 单选
A 详情页把卡片圆角从 12 换成 16，「换换口味，不然太单调」 B 全站按钮都是蓝色，只有「删除账号」是红色 C 同一层级的两个栏目标题，一个 18px 一个 20px D 侧栏图标一半线性风格、一半面性风格，「哪个好看用哪个」
落地：把变量表交给 AI 这一节学的东西最后要变成一段话，放在你让 AI 写界面的 Prompt 最前面。下面这张变量表拿去就能用，取值按自己产品改， 关键是让每个决定都有出处，AI 就没机会替你随手写 。
给 AI 的变量表 复制
全站样式先遵守这张变量表，再动手写页面： // 颜色：一个主色 + 中性色，语义色只给状态用 主色 #2563eb（悬停加深为 #1e40af，禁止出现第二种蓝） 中性色 文字 #111827 / 次要 #6b7280 / 边框 #e5e7eb 语义色 成功 #16a34a / 危险 #dc2626，只用于状态，不做装饰 // 尺寸：全部读档位，禁止随手写数 圆角 一律 10px（头像例外，用圆形） 控件高度 一律 36px 间距 只允许 8 / 16 / 24 / 40 四档 字号 只允许 13 / 15 / 18 / 24 四档，字重只用 400 和 700 // 验收：交付前自查 按钮、圆角、蓝色、图标风格、行距五项逐屏核对， 出现表外取值视为未完成。 点右上角复制，粘到你下一次让 AI 写界面的 Prompt 开头。
这张表管的是「从今天起新写的界面」。要是项目已经跑了一阵、样式早就各写各的，光给变量表不够，得先把散落的实现收回来——那是一台手术，步骤在 Vibe Coding · 样式收敛：一个按钮不要八套 CSS ：怎么盘点欠债、怎么分批合并、哪些差异该留着。
本节要点
✓ 系统感来自共同变量： 先定 token（主色、圆角、控件高度），样式从 token 取值，散装感自然消失。 ✓ 检查一致性最快的办法： 把两屏截图并排放，盯着按钮、圆角、主色深浅，看有没有各自漂移。 ✓ 让 AI 做界面时，先交变量表： 把主色、圆角、控件高度写进 Prompt，再让它动手，产出的一致性立刻不同。 ✓ 裁判标准两句话： 任何元素的存在要有理由，任何差异的存在也要有理由。删除按钮的红留下，说不出理由的圆角收编。
内容来源： 小山学堂「审美工程」专题原创；一致性与标准的价值、「差异要有理由」等原则整理自《About Face 4：交互设计精髓》第 17 章（Alan Cooper 等）。