AI 把写代码的门槛抹平之后，UI 成了区分玩具与真实商业产品的最后壁垒。用户给一个新产品的耐心只有 3 秒，界面若是一股「AI 塑料感」，底层再惊艳信任也当场归零。作者对照《Refactoring UI》（Adam Wathan、Steve Schoge 著）全书 9 章 50 篇，提炼出 20 条可执行的军规，每条配一张前后对比图。核心主张只有一句：UI 设计不是玄学，是一套可计算、可度量、可规则化的视觉逻辑——这正是「人人都是 UI 设计师」的底气。
一、动手之前：定基调
01 给设计选一种个性
字体、色彩、圆角、措辞四个旋钮共同决定个性：衬线显优雅、圆体无衬线显俏皮、中性无衬线显克制；蓝稳妥、金精致、亮色趣味；小圆角中性、大圆角活泼、直角严肃。动手前定好基调，后续视觉决策才不会互相打架；同一界面里保持一致比选什么更重要。
02 先灰度，后上色
起步阶段别纠结字体阴影图标。在灰度模式下设计，你只能靠间距、对比度、字重与尺寸交代层级——骨架因此被迫长稳。之后只在主要操作与选中状态上注入品牌色，焦点自然清晰。
二、视觉层级：靠字重与颜色，别硬扛字号
03 字号并非万能
只靠字号分层，结果必然是主标题膨胀、辅助文字看不清。让字重与颜色分担：重点用 600/700 加粗，次要文字用中灰弱化。两三种文字色配两种字重就够；别用低于 400 的字重，小字号下几乎不可读。
04 弱化竞争者来凸显主角
选中项怎么都不突出时，别再给它加戏——把旁边的未选中项调浅、降字重，让它们退成背景。给喧闹的配角按下静音键，主角不用浓墨重彩也是焦点。
05 不到万不得已，别用标签
janedoe@example.com 一看就是邮箱，$19.99 显然是价格——数据格式常常自明，上下文补足其余。砍掉「邮箱：」「电话：」这类前缀，把人名加大加粗置顶，界面立刻干净。检索型数据表是例外：用户靠指标名找数据，标签保留且颜色可深于数据。
06 按钮按重要性分级，而非按语义
一个页面通常只有一个主要操作。主要操作实心高对比，次要操作线框或浅底，辅助操作纯文本链接。删除这类危险操作若非当前主任务，也先按次要样式做，等确认对话框里才升格为红色主操作。
三、空间与布局
07 从过度留白开始
常规做法是「挤了加点边距」，元素只拿到不至于难看的最小空间。反过来：先给远超所需的空间，再慢慢收紧。单个元素看着偏多的留白，放进整页往往刚刚好。
08 不必填满整个屏幕
画布 1400px 不代表内容要撑满。表单 600px 够就只用 600px，强行拉宽只会稀疏散乱。宽画布上不知如何下手时，从 400px 的移动端宽度起手设计，满意后再放进大屏或分栏。
09 间距的亲疏之别
标签与它的输入框要近，输入框与下一组要远。组间距必须大于组内距——这一条法则无需任何线条，就让归属关系自明。排版同理：小标题离下文近、离上文远。
10 等比缩放并非总是有效
桌面正文 18px 配 45px 标题（2.5 倍），移动端正文缩到 14px 时标题若仍按 2.5 倍算出 35px，必然笨拙撑屏。原则：越大的元素，缩到小屏时缩得越多。手机上标题 20–24px（1.5–1.7 倍）往往刚好。
四、文本与排版
11 行长与行高联动，别写死 1.5
行高的职责是帮视线折返：行长越长，行高要越大（窄段落 1.5，宽段落到 1.8–2.0）；字号越大，行高要越小（大标题 1.1–1.2 最好）。段落行长控制在每行 45–75 个字符（约 20–35em）。
12 基线对齐，而非几何居中
同一行里大小字号混排时，align-items: center 会让小字悬空。改用 align-items: baseline——所有字母「坐」在同一条隐形横线上，阅读视线本就顺着它平移，视觉重心立刻落地。
五、色彩与无障碍
13 你需要的颜色，远比想象中多
在线生成器的五色方案做不出真实产品。成熟界面的底色是体系：8–10 档中性灰（文字到近白的均匀步长）加品牌主色 5–10 档加红黄绿等语义色各 5–10 档。十种颜色、每种一个梯队是常态——浅底才不抢戏，深字才不发虚。
14 浅底深字：无障碍不一定难看
WCAG 要求正文对比度 4.5:1。彩底白字要达标，底色得压得极深，一个辅助标签反而成了全场最抢眼的元素。反转对比是正解：浅黄底配深棕字、浅红底配暗红字——语义保留、对比达标（可到 AAA）、绝不喧宾夺主。
15 不要只靠颜色传递信息
红跌绿涨，对红绿色盲是同一种颜色。加一个维度：方向箭头、三角、感叹号。双通道传达意味着完全剥离颜色后状态依然可读；颜色只应强化已经传达的信息，不做唯一载体。
六、质感与图片
16 用强调色边框添彩
没有摄影与插画资源时，一道彩色边框是性价比最高的亮点：卡片顶一条彩条、选中导航一道亮线、提示框侧边一抹色。不需要设计天分，却打破大面积白色的单调，给了界面视觉重心。
17 图上文字，先治理背景
真实照片光影反差剧烈，调文字颜色永远追不上每个像素。把力气花在背景上：叠半透明黑蒙版（rgba(0,0,0,0.4–0.6)）、降图片对比度、去色后正片叠底品牌色、或给文字加无偏移的大模糊半径光晕。
18 万物皆有其适用尺寸
24px 的图标拉到 64px，矢量不糊但比例失调、线条粗笨——正确做法是保持图标原尺寸，外包一个浅底圆形容器填充空间。产品截图同理：整页缩 70% 塞进小卡片，文字成蚂蚁线；截核心局部，或画简化示意图。
七、细节打磨
19 慎用边框
区分相邻元素，先想三个替代：背景色差（页面 #f8fafc 配卡片 #ffffff）、拉开留白、微弱阴影。边框不是禁用，是克制——背景差或留白已说明归属时，果断删线，否则界面就是一张噪点爆炸的 Excel。
20 别忽视空状态
用模拟数据做出来的漂亮界面，新用户第一次进来看到的是空表格。「空状态」要优先设计：友好的插画或图标加一个明确的行动按钮（「创建你的第一个项目」），同时藏起筛选器、排序这些暂时无用的空壳控件。空状态是用户与功能的第一面。
没有一条依赖艺术天分
回头看这 20 条：灰度先行是工程分层，亲疏法则是格式塔心理学，浅底深字与双通道传达是容错设计。正如原著第九章所说，设计直觉不是天赋，是大量刻意练习后的条件反射。两项极简练习：拆解建库——用 Linear、Stripe、Raycast 练眼，看到触动的细节就截图追问（标题字重多少？组间距是组内距几倍？）；像素级复刻——挑一张打动你的卡片，不看源码，用 HTML/CSS 做 1:1 还原，在间距与对比度的反复权衡里体会高手的思考。
规则是跑道，不是自动驾驶。相信你的眼睛，而不是死记数字。