一致性：系统感从哪来
好看的站点背后都有一套设计变量。拆开本站真实的 CSS：控件高度、圆角、配色为什么全站只有一档，改一处全站生效
本页解决的问题
先给结论「一致性：系统感从哪来」要解决的关键问题是什么？
好看的站点背后都有一套设计变量。拆开本站真实的 CSS：控件高度、圆角、配色为什么全站只有一档，改一处全站生效
把品味变成产品可重复的行为。 有用的结果不是一句“我觉得更好”。它应该是一条看得见的规则、一个小例子，以及判断体验何时低于标准的方法。
记录一个前后对比，让别人不用听解释也能看懂质量线。
表面更精致了，却没有减少用户的不确定感。
散装感的来路很具体：这个按钮高 36，那个高 40；这张卡圆角 8，那张 16；这里的玫红深一点，那里浅一点。每处都是当时随手写的，单看都说得过去，拼起来就露馅。解法是把这些「随手写」收编成变量：先定 token（主色、圆角、控件高度、间距档位），所有样式从 token 取值。写样式的人少做决定，界面自然长得像一家人。
一致性听着像洁癖，其实买的是真金白银的东西。《About Face 4》引尼尔森的账：统一的界面标准靠可预见性提高产出、减少错误，用户在一个地方学会的规律，换个页面还管用，学习成本和培训费用都在降。苹果和微软都乐于让第三方应用长得像自家系统，图的就是用户到哪都不用重新学。
| 一致，用户赚到什么 | 不一致，用户赔上什么 |
|---|---|
| 按钮长这样、行为就那样，闭着眼预判 | 每个新页面都要重新试探一遍 |
| 学一次，全站通用 | 「上一页明明是点右上角保存的」 |
| 界面退到背景，注意力全给内容 | 差异不断把注意力拽向界面本身 |
同一本书也把丑话说在前头：标准管的是外观和感觉这层语法，管不了更深的逻辑，把标准当灵丹妙药，和以为有了格式手册就能写出好小说一样不可取。所以这一节教的是给界面立变量，不是给创造力上锁。
这不是课堂虚构。本站课程列表页 learn.html 的源码里就躺着这样两行变量，原注释一并抄给你：
你正在看的这个网站，顶栏那五个按钮就是被这两个变量管着的：谁也不许自带尺寸，统一读 36px 高、10px 圆角。哪天想全站换风格，改这两行就够了。
注意刚才发生了什么：你只改了一个变量，按钮、卡片、输入框、头像框、弹窗一起变。风格是变量的取值，系统感是变量的存在。取值可以争论，变量必须先有。
token 立好之后，剩下的功夫是揪漂移。下面这页设置乍看挺正常，其实藏着五处不一致，AI 生成的界面里这五类漂移天天见。找到就点它。
《About Face 4》把一致性的裁判标准说成两句话：任何元素的存在要有足够的理由，任何差异的存在也要有足够的理由。删除按钮比别的按钮红，理由充分：行为不同的元素，就该在视觉上明显区分，长得一样却干不一样的事才坑人。反过来，同一层级的两张卡圆角一个 8 一个 16，谁也说不出为什么，那就是该收编的漂移。这本书还给了个顺手的杠杆思路：与其加新元素，不如让一个元素多干几件事，元素越少，一致性越容易守住。
这一节学的东西最后要变成一段话，放在你让 AI 写界面的 Prompt 最前面。下面这张变量表拿去就能用，取值按自己产品改，关键是让每个决定都有出处，AI 就没机会替你随手写。
这张表管的是「从今天起新写的界面」。要是项目已经跑了一阵、样式早就各写各的，光给变量表不够，得先把散落的实现收回来——那是一台手术，步骤在 Vibe Coding · 样式收敛：一个按钮不要八套 CSS：怎么盘点欠债、怎么分批合并、哪些差异该留着。
系统感来自共同变量：先定 token（主色、圆角、控件高度），样式从 token 取值，散装感自然消失。
检查一致性最快的办法：把两屏截图并排放，盯着按钮、圆角、主色深浅，看有没有各自漂移。
让 AI 做界面时，先交变量表：把主色、圆角、控件高度写进 Prompt，再让它动手，产出的一致性立刻不同。
裁判标准两句话：任何元素的存在要有理由，任何差异的存在也要有理由。删除按钮的红留下，说不出理由的圆角收编。
内容来源：newwebplay AI「审美工程」专题原创；一致性与标准的价值、「差异要有理由」等原则整理自《About Face 4：交互设计精髓》第 17 章（Alan Cooper 等）。
从「单看都还行，合起来就散装」把感觉变成判断
「散装感的来路很具体：这个按钮高 36，那个高 40；这张卡圆角 8，那张 16；这里的玫红深一点，那里浅一点。每处都是当时随手写的，单看都说得过去，拼起来就露馅。解法是把这些「随手写」收编成变量： 先定 token（主色、圆角、控件高度、间距档位），所有样式从 token 取值 。写样式的人少做决定，界面自然长得像一家人」指出，AI 降低了做出“能用”成品的门槛，读者真正需要练的是看出哪里不对，并把感觉说成可以执行的要求。
观察用户的下一步，而不是只看表面
「一致性听着像洁癖，其实买的是真金白银的东西。《About Face 4》引尼尔森的账： 统一的界面标准靠可预见性提高产出、减少错误 ，用户在一个地方学会的规律，换个页面还管用，学习成本和培训费用都在降。苹果和微软都乐于让第三方应用长得像自家系统，图的就是用户到哪都不用重新学」可以转成几个可观察的问题：用户是否知道现在发生了什么，是否知道下一步做什么，出错或空白时能否恢复，以及信息层级是否让重要内容先被看见。
漂亮不等于容易用
把「裁判标准两句话： 任何元素的存在要有理由，任何差异的存在也要有理由。删除按钮的红留下，说不出理由的圆角收编」用在第二个页面或流程上，记录一个具体犹豫点和一个改动后的用户动作；能被观察到的变化，才是体验改善。
从「单看都还行，合起来就散装」走到「一致性买的是什么」
「单看都还行，合起来就散装」先把问题落在「散装感的来路很具体：这个按钮高 36，那个高 40；这张卡圆角 8，那张 16；这里的玫红深一点，那里浅一点。每处都是当时随手写的，单看都说得过去，拼起来就露馅。解法是把这些「随手写」收编成变量： 先定 token（主色、圆角、控件高度、间距档位），所有样式从 token 取值 。写样式的人少做决定，界面自然长得像一家人」上；到了「一致性买的是什么」，讨论继续推进到「一致性听着像洁癖，其实买的是真金白银的东西。《About Face 4》引尼尔森的账： 统一的界面标准靠可预见性提高产出、减少错误 ，用户在一个地方学会的规律，换个页面还管用，学习成本和培训费用都在降。苹果和微软都乐于让第三方应用长得像自家系统，图的就是用户到哪都不用重新学」。两段连起来，重点就不只是记住一个结论，而是看清它成立所依赖的条件。
把这条判断带到下一个场景
评估体验时，把抽象的“好看”或“顺手”换成用户动作：他是否看懂状态、找到了下一步、能从错误中恢复，并且愿意继续使用。
- 「单看都还行，合起来就散装」：散装感的来路很具体：这个按钮高 36，那个高 40；这张卡圆角 8，那张 16；这里的玫红深一点，那里浅一点。每处都是当时随手写的，单看都说得过去，拼起来就露馅。解法是把这些「随手写」收编成变量： 先定 token（主色、圆角、控件高度、间距档位），所有样式从 token 取值 。写样式的人少做决定，界面自然长得像一家人
- 「一致性买的是什么」：一致性听着像洁癖，其实买的是真金白银的东西。《About Face 4》引尼尔森的账： 统一的界面标准靠可预见性提高产出、减少错误 ，用户在一个地方学会的规律，换个页面还管用，学习成本和培训费用都在降。苹果和微软都乐于让第三方应用长得像自家系统，图的就是用户到哪都不用重新学
- 「最后的要点」：你正在看的这个网站，顶栏那五个按钮就是被这两个变量管着的：谁也不许自带尺寸，统一读 36px 高、10px 圆角。哪天想全站换风格，改这两行就够了
最后的「最后的要点」把讨论落到「你正在看的这个网站，顶栏那五个按钮就是被这两个变量管着的：谁也不许自带尺寸，统一读 36px 高、10px 圆角。哪天想全站换风格，改这两行就够了」。回看这条线索时，最值得保留的是：当输入、规模或风险改变，哪些判断需要重新做一遍。
我把这篇文章里的一个判断改写成了今天可以验证的小实验。比记住结论更有用的是，知道下一步要观察什么。
读完以后我先回头找它成立的条件，而不是直接把方法搬进项目。这个顺序让后面的取舍清楚很多。
如果把这个判断放到真实工作里，最先需要补的约束是什么？我想知道从阅读到第一次实践之间，哪一步最值得先做。
还没有这篇文章的讨论。