实习日志 / Refactoring UI（书版）要点总结与取舍稿

Refactoring UI（书版）要点总结与取舍稿

Refactoring UI（书版）要点总结与取舍稿

来源：《Refactoring UI》(Adam Wathan & Steve Schoger) 全书，MinerU 提取件逐节盘点（9 章 42 节，全覆盖）。 版权约束：本文件只含原则提炼，不含原书文本；原书与提取件均不入仓库。

使用方式：每节的「建议」行是我的取舍意见，直接编辑它即为裁决—— 认可就不动；不同意就改写（如把「采用」改成「不采」或改并入位置）；整节划掉即弃。 「现行关系」是与 MANAGE.md §11 已有条款的事实性对照，供合并参考。

建议取值说明：采用=写成 skill 条款；References=只在文末出处区留名，不入正文；不采=完全不引入。

第 1 章 Starting from Scratch

1.1 Start with a feature, not a layout

要点：新设计从一个具体功能做起，不从外壳（导航/布局）开始——没做过几个功能之前不具备决定外壳的信息。早期忽略字体/阴影/图标等细节，可用粗马克笔纸上草稿逼自己只看结构。灰度起稿：先不引入颜色，强迫用间距、对比、尺寸做层级，之后再上色。草图是一次性的，别过度投入。 现行关系：无对应。属设计流程论，非代码可校验约束。 建议：每次加新功能（涉及更改前端代码）之前与用户讨论其功能设计并根据后面的原则推荐UI设计

1.2 Don't design too much

要点：不要预先设计所有功能。短周期循环：设计下一个功能的简单版 → 实现 → 在能用的真实界面上迭代修设计问题 → 再设计下一个。悲观设计：不在 UI 里暗示还没准备好实现的功能（例：评论框先别画附件区），永远先做可发布的最小有用版本。 现行关系：无对应。流程论。 建议：只取悲观设计原则，这能有效防止gpt等模型把开发过程的文案垃圾写入前端

1.3 Choose a personality

要点：界面个性由四个具体因素决定：①字体（衬线=典雅正式；圆角无衬线=活泼；中性无衬线=朴素百搭）；②颜色（蓝=安全默认；金=贵重；粉=玩趣）；③圆角（小=中性；大=活泼；无=严肃正式）——且全站必须统一，方角圆角混用几乎总是更差；④文案语气（正式 vs 亲和）。拿不准时参考目标用户群常用网站的气质，但别抄直接竞品。 现行关系：圆角已在拟议 token 清单内（见 1.4/3.2）。 建议：设计界面气质前要先与用户商讨调性并做适当调研。在skill用引用一个单行文件维护，单行文件的内容是是否已经定调。若已经定调，则该要点不再要求agent读取

1.4 Limit your choices

要点：无限选项导致决策瘫痪（12px 还是 13px 之争毫无意义）。预先定义受限系统，从系统里选而不是从连续值里挑。淘汰法选值：猜一个档，与相邻两档并排比较，三选一。应当系统化的清单：字号、字重、行高、颜色、margin、padding、宽度、高度、box-shadow、圆角、边框宽、透明度。不必一次全定义，但要带着系统心态设计，避免同一个微观决策做两次。 现行关系：现行 §11 无 token 总则；11.2 已有「语义化 CSS 变量禁硬编码色值」（仅颜色）。 建议：采用——本节是「设计 token 总则」的立法依据：上述清单中的值一律取自预定义 CSS 变量刻度，禁逐像素手调、禁在组件里出现刻度外裸值。建议新增 §11.0（token 总则），统摄 11.2 色值条款。淘汰法属操作技巧，随 References。

第 2 章 Hierarchy is Everything

2.1 Not all elements are equal / Size isn't everything

要点：层级不能只靠字号缩放。三工具并用：字号、字重（正文用 400 或 500 一档 + 强调用 600 或 700 一档，两档足够；小字号禁 <400，需要弱化时用降色阶而不是降字重）、文字颜色（三档：深色=主内容、灰=次要、更浅灰=辅助）。 现行关系：11.5 字重条款（≤2 真实档、语义变量引用）已定稿，本节是其原文印证。「文字颜色三档」现行未明文。 建议：字重部分无需动；新增细则「正文文字色固定三档灰阶变量（主/次/辅助），组件禁自造中间灰」，并入 §11.5 或 token 总则。

2.2 Don't use grey text on colored backgrounds

要点：彩色背景上禁用灰字。灰字在白底上有效是因为降低了对比，但在彩底上显得 washed out、像坏掉。也禁用白字降透明度的偷懒法——文字发闷且背景透字。正确做法：手选与背景同 hue、调整饱和度和亮度得到的颜色。 现行关系：现行 §11.6 第 1 条（文章版）即此条，书版补全了「禁白字降透明度」和正确做法。 建议：采用，以书版为准重写 §11.6 对应条款。

2.3 Emphasize by de-emphasizing

要点：主元素突不出来时，别再给它加码，降级它的竞争者。例：active 导航项不够突出，把 inactive 项变灰比给 active 加更多样式更有效。同样适用于组件级：去掉次要元素的背景、边框，让主元素相对上升。 现行关系：无对应。 建议：采用，一句话条款并入 §11.4（B 端界面强调纪律）。

2.4 Labels are a last resort

要点：label: value 格式是偷懒默认。①格式或上下文可自明的数据不加 label（邮箱、电话、价格一望即知）；②能合并就合并进值（"12 left in stock" 优于 "In stock: 12"）；③必须加 label 时 label 是配角，字号更小、对比更低、字重更轻；④例外：查阅型详情页——用户就是来找特定字段值的页面，label 反而要能被扫读，可适当强调。 现行关系：无对应。例外条恰是 Workbench 案件详情页的真实场景。 建议：采用，并入 §11.4，例外条款必须保留。

2.5 Separate visual hierarchy from document hierarchy

要点：语义标签服务文档结构，样式服务视觉层级，二者独立。h1 不必是页面最大的字——很多界面里 section 标题实际是辅助信息，视觉上应该小。选标签看语义（无障碍/SEO），定样式看层级需要。 现行关系：与 11.2「语义 HTML 优先」互补：标签怎么选归 11.2，样式与标签解耦归本条。 建议：采用，并入 §11.2 相邻位置。

2.6 Balance weight and contrast

要点：加粗会增大视觉重量。深色图标在浅色文字旁过重时，降对比（调浅）来平衡；反之，细线条元素（1px 边框、细图标）太弱时，加重量（加粗描边）来补偿低对比。重量与对比是可互相置换的两个杠杆。 现行关系：无对应。 建议：在用户明确要求优化UI时启动。实际上，只有我会做这个工作，所以保留这一条基本上是为我设计的，只不过skill里不用专门写是为我设计的

2.7 Semantics are secondary（含 Destructive actions）

要点：按钮样式首先服从层级、其次才是语义。三级形态：primary=实心高对比；secondary=描边或浅底；tertiary=链接样式。每页只有一个真 primary 动作。破坏性动作≠自动红色加粗：若它不是页面主动作，就用 secondary/tertiary 形态；真正的红色实心大按钮只出现在确认对话框里（那一步删除才是主动作）。 现行关系：§11.6 第 5、6 条（文章版：主按钮唯一、红实心只留确认对话框）即此，书版补全三级形态定义。 建议：采用，以书版为准重写 §11.6 对应条款（保留自定阈值「每视图至多 1 实心主按钮」）。

第 3 章 Layout and Spacing

3.1 Start with too much white space

要点：起稿时给过量留白再删减到合适，比不够再加容易得到干净布局。密集 UI（如 dashboard 要同屏大量数据）是合法的，但必须是刻意决策，不是默认的挤。 现行关系：无对应。 建议：Workbench 采用密集布局须在 PR 中声明为显式决策只是现行。实话说，这个UI我要做一次重构。所以也是类似于2.6和1.3的一次性设计

3.2 Establish a spacing and sizing system

要点：线性刻度（4 的倍数一路排）不行，因为间距的感知是相对的：小值处差 2px 是巨变，大值处差 2px 无感。规则：相邻档差 ≥25%。以 16px 为基准值向两端展开（如 4, 8, 12, 16, 24, 32, 48, 64, 96, 128, 192…）。定义好后从刻度里选，不逐像素调。 现行关系：⚠️ 与现行 11.4「8px 间距基数」有表述冲突。二者可调和：8px 基数管「值必须是刻度成员」，≥25% 管「刻度怎么生成」（8 基数刻度取 4/8/12/16/24/32/48/64 即同时满足两者）。 建议：采用，并入 token 总则；条款合并表述为「间距/尺寸取预定义刻度（8px 基数生成，相邻档差 ≥25%），组件禁裸值」。

3.3 You don't have to fill the whole screen

要点：界面不必占满屏幕，内容需要多宽就多宽（600px 够就限 600px，用 max-width）。大画布上做小组件难，可先缩小画布再放回。真需要填宽屏时，用多列填（如表单拆双列），而不是把单列拉宽。别硬撑。 现行关系：无对应。 建议：采用要义一条：「容器宽度按内容需要设 max-width，禁为填满屏幕拉伸表单/正文列」，并入 §11.3 或 11.4。

3.4 Grids are overrated

要点：12 列栅格不是教条。侧栏这类元素给固定宽/max-width（按内容定），主区吃剩余空间，比百分比列更稳。"Don't shrink an element until you need to"——空间够时元素保持其理想尺寸，只在空间不足时才收缩。 现行关系：与 3.3 同主题。 建议：采用，与 3.3 合并为一条。

3.5 Relative sizing doesn't scale

要点：禁用 em 定义元素间比例关系。大屏上 45px 标题 vs 18px 正文（2.5 倍），到小屏正确的关系可能是 24px vs 14px（1.7 倍）——比例不恒定，em 会把错误比例固化。大元素在小屏要缩得更狠，小元素基本不缩。同理，大小两个按钮的 padding 不是等比缩放，是独立定值。 现行关系：无对应。 建议：采用：「字号与间距用 px/rem 定绝对档位，禁用 em 建立元素间比例耦合」，并入 token 总则或 §11.5。

3.6 Avoid ambiguous spacing

要点：组间距必须大于组内距，否则归属关系歧义、被迫用分隔线补救。三个高发点：label 要贴近它的 input（而不是等距漂在两个 input 之间）、章节标题贴近其下文而远离上文、列表项间距要大于项内行距。 现行关系：无对应。 建议：采用，并入 §11.1 或 §11.3。

第 4 章 Designing Text

4.1 Establish a type scale

要点：模块化比例（4

4.2 Use good fonts

要点：稳妥策略：系统字族或流行的中性无衬线。筛选质量的经验法则：忽略字重少于 5 档的字族（档少通常意味着制作粗糙）。正文/UI 字体选为可读性设计的（x-height 高、字距略宽）。参考热门榜单（群体智慧）和讲究排版的网站在用什么。 现行关系：11.5 已有「字族≤2 + font-display

4.3 Keep your line length in check

要点：行长 45–75 字符（约 20–35em）最可读。布局很宽时段落仍要限宽——即使旁边的图片/表格等更宽的元素存在，文本列也保持窄。 现行关系：11.5 已有 45–75ch，本节为印证；「混排时段落独立限宽」是补充。 建议：现行保留；补充句并入 11.5。

4.4 Baseline, not center

要点：同一行混排不同字号时（卡片大标题+右侧小操作、金额+单位），按基线对齐而非垂直居中。居中在字号差大且间距近时错位明显；基线是眼睛本来就在用的对齐参照。 现行关系：无对应。Workbench 卡片头、金额展示均是该场景。 建议：采用，并入 §11.5。

4.5 Line-height is proportional

要点：行高不是一刀切 1.5。两个比例关系：①与行长成正比——窄栏 1.5 够，宽栏要到 2（行越长回扫越易迷路）；②与字号成反比——小字需要更大行距，大标题几乎不需要，行高可低至 1。 现行关系：⚠️ 现行 11.5「行高 1.4–1.6」没有标题例外，会禁掉正确的大标题排版（大标题 1.5 行高会松散难看）。 建议：采用并修订现行条款为：「正文行高 1.4–1.6（行长偏宽取上限）；标题行高 1.1–1.3」。

4.6 Not every link needs a color

要点：链接密集的界面（列表页、卡片流，几乎处处可点）不必每个链接都上主题色+下划线，会喧宾夺主。多数链接用字重或更深的颜色做微强调即可；纯辅助性链接可以默认无样式、hover 才显色/下划线。 现行关系：无对应。Workbench 表格行、案件卡片正是链接密集场景。 建议：采用，并入 §11.4。

4.7 Align with readability in mind

要点：①文本对齐跟随语言方向，英文默认左对齐；②居中只用于 ≤2–3 行的标题/短块，更长的要么左对齐要么缩短文案；③表格数字右对齐（小数点竖向对齐才可比）；④justified 文本必须开连字符（hyphens: auto），否则词间距难看——但 justified 本身只适合仿印刷场景。 现行关系：数字右对齐已在 11.4（tabular-nums 条款）。①②为新增；④场景本仓库不存在。 建议：①②采用并入 §11.5；④不采。

4.8 Use letter-spacing effectively

要点：默认信任字体设计师，不动 letter-spacing。仅两个白名单例外：①标题——用为正文设计的宽字距字族做大标题时可收紧（约 -0.05em）模拟标题字族；反向不行（标题字族缩小用不可行）；②all-caps——必须加宽（约 +0.05em），全大写字母高度一致、辨识特征少，默认字距难读。 现行关系：all-caps 加宽已在此前拟稿中出现；「默认禁调+白名单」的完整结构未写全。 建议：采用完整版三段式条款（默认禁调 / 标题可收紧 / all-caps 必加宽），并入 §11.5。

第 5 章 Working with Color

5.1 Ditch hex for HSL

要点：CSS 中用 HSL 而非 hex/RGB——H(0-360 色相)/S(饱和)/L(亮度) 对应人眼直觉，同 hue 家族一眼可辨、调档只动一个通道。注意 HSL 与设计工具里的 HSB 不是一回事（B 与 L 定义不同），换算要当心。 现行关系：无对应。 建议：采用，并入色板条款：「新增颜色一律以 HSL 书写」。

5.2 You need more colors than you think

要点：一套真实 UI 需要的颜色远超 5 色模板：灰阶 8–10 档（文字/背景/边框全靠它）；主色 5–10 档（超浅档做 tinted 背景、深档做文字）；语义色（红/黄/绿）各自也要多档；复杂 UI 总量可达 10 色 × 5–10 档。 现行关系：11.2 有「语义化 CSS 变量」，无档位规格。 建议：采用，并入色板条款（档位数写入）。

5.3 Define your shades up front

要点：禁用 lighten()/darken() 之类函数动态生成色阶——那是 35 个雷同蓝色的来源。预定义固定档位：先选 base（经验法则：能胜任按钮底色的那档），再定最深、最浅两端，然后填中间；9 档制（100–900）好分好用。灰阶同理（最深档不必纯黑）。没有科学公式，靠眼睛调，但必须一次定完、之后只选不调。 现行关系：同上，并入色板条款。 建议：采用。

5.4 Don't let lightness kill your saturation

要点：亮度趋近 0% 或 100% 时饱和度的视觉效果消失，所以色阶两端的档要手动提高饱和度补偿，否则浅档深档全发灰。进阶技巧：旋转色相调亮度——不同色相固有亮度不同（黄 60°/青 180°/品红 300° 亮；红 0°/绿 120°/蓝 240° 暗），把颜色往邻近更亮色相转（≤20–30°）可以变亮而不发灰。 现行关系：无对应。属色板制作期技巧，运行时无断言可校验。 建议：部分采用——「色阶两端档提饱和度补偿」写进色板条款作制作要求；hue 旋转技巧 References。

5.5 Greys don't have to be grey

要点：纯灰（饱和度 0）呆板。灰阶可带温度：掺蓝=冷灰、掺黄/橙=暖灰；一套 UI 温度要统一。同样受 5.4 影响：越靠两端的灰档，掺色的饱和度要越高才能维持温度感。 现行关系：无对应。 建议：采用一句（灰阶可带温度、全套统一），并入色板条款。

5.6 Accessible doesn't have to mean ugly

要点：WCAG 4.5

5.7 Don't rely on color alone

要点：约 8% 男性红绿色盲。颜色只能作为辅助强调：涨跌趋势加箭头/图标，不能只靠红绿；图表区分线条用明暗对比（同色深浅）而不是不同色相，色盲者靠明暗仍可分辨。 现行关系：11.3 已有「状态禁纯颜色表达」，本节印证；「图表用明暗而非多色相」是补充细则。 建议：现行保留，补充句并入 11.3。

第 6 章 Creating Depth

6.1 Emulate a light source

要点：模拟深度的总原则：光源在上方。raised（凸起，如按钮）=上缘一条更亮的内高光（inset box-shadow 或浅色 border-top）+ 下方带 y 偏移的暗投影；inset（凹陷，如输入井/勾选槽）=内部上缘暗内影 + 下缘亮边。别拟物过头，取意不取形。 现行关系：现行 §11.6 第 2 条（阴影 offset-y>0）的物理学依据即此。 建议：采用为阴影条款的「制作依据」段（token 怎么造），不单列条款。

6.2 Use shadows to convey elevation

要点：阴影不是装饰，是 z 轴语义：小阴影=贴近页面的可点元素（按钮）、中阴影=浮起元素（dropdown）、大阴影=贴脸元素（modal）。定义 5 档阴影 token 足够（先定最小和最大，中间近线性填充）。用的时候想「这元素在 z 轴哪层」，不想「哪个阴影好看」。交互换档：按下=减档（贴近页面）、拖起=加档（提离页面）。 现行关系：§11.6 第 2 条（文章版）只有「offset-y>0 且取 token」，书版给出完整体系。 建议：采用，以书版为准重写 §11.6 对应条款：5 档 token + z 轴语义映射 + 交互换档。

6.3 Shadows can have two parts

要点：精致阴影常由两段合成：第一段模拟直射光投影（y 偏移大、blur 大、较淡），第二段模拟环境光死角（紧贴、更暗、偏移和 blur 都小）。第二段随 elevation 升高而减弱，最高档时应几乎或完全消失（现实中物体离表面越远，贴底暗影越散）。 现行关系：同上，书版独有。 建议：采用，并入 6.2 重写后的阴影条款（作为 token 制作规格）。

6.4 Even flat designs can have depth

要点：flat 风格同样能表达深度：①用明暗色——亮色=近、暗色=远（基于光源在上的直觉）；②用 solid shadow——无 blur 的实心短投影，既有层次又保持 flat 气质。 现行关系：无对应。 建议：作为一次性设计

6.5 Overlap elements to create layers

要点：让元素骑跨背景分界（卡片一半在 banner 上一半在页面上）、头像叠进列表边缘等，制造分层感。叠放图片时给图片加与背景同色的边框（"隐形边框"）防止两图直接相贴穿帮。 现行关系：无对应。营销页美学倾向，Workbench 用处小。 建议：我不确定，需要进一步讨论

第 7 章 Working with Images

7.1 Use good photos

要点：烂照片毁掉一切。要么雇专业摄影师，要么用优质图库（Unsplash 等）。绝对不要用占位图设计、幻想上线前用手机随手拍替换——从来行不通。 现行关系：本仓库前端无营销图/hero 图场景。 建议：References。

7.2 Text needs consistent contrast

要点：图上排字难读的根源是图的明暗动态太大。四种解法：①半透明 overlay（黑压亮区托白字/白提暗区托黑字）；②直接降低图片对比度（记得补亮度）；③单色化（降对比→去饱和→solid fill + multiply 混合）；④text-shadow 做成光晕（大 blur、零偏移，如 0 0 50px 半透明黑）。 现行关系：本仓库无图上排字场景。 建议：做成解决方案，仅在用户提出这类问题时启用

7.3 Everything has an intended size

要点：一切素材有其设计尺寸。①16–24px 的图标禁放大到 3–4 倍（缺细节、显笨重）——需要大就把小图标装进带背景色的容器形状里撑场；②截图禁整页缩小 70%（16px 字变 4px 糊字）——改用小屏布局截图、局部截图，或干脆画简化示意图；③favicon 等超小尺寸禁直接缩 logo——按目标尺寸重绘简化版。 现行关系：§11.6 第 4 条（文章版：图标≤1.5×）即此，书版补全三场景与替代方案。 建议：采用，以书版为准重写 §11.6 对应条款（保留自定阈值「放大不超过设计尺寸 1.5×」作为机械可查线）。

7.4 Beware user-uploaded content

要点：用户上传的图不受你控制，两道防线：①固定容器 + 居中裁剪（background-size: cover 或 object-fit: cover），禁用原始宽高比直排——否则版式被撑破；②防背景 bleed：浅色图贴浅色背景会融掉，解法是极淡的内阴影（box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.1)）或半透明内边框——不要用实线 border（会跟图片颜色打架，而内阴影几乎无人察觉却有效）。 现行关系：无对应。claimant 端 FNOL 有事故照片上传，Workbench 要展示这些照片——本节是全书与本仓库业务最直接相关的一节。 建议：采用，新增条款并入 §11.1 或 11.3。

第 8 章 Finishing Touches

8.1 Supercharge the defaults

要点：不加新元素也能提质感：列表圆点换成图标（✓/箭头/贴内容的主题图标如安全列表用锁）；引用的引号放大上色变成视觉元素；链接可做加粗彩色半叠底线；checkbox/radio 用品牌色自绘替换浏览器默认——仅此一项就能从「没设计」变「有设计」。 现行关系：无对应。claimant 端表单有 checkbox/radio。 建议：唯 checkbox/radio 一句采用（「表单控件选中态用主题色变量，不留浏览器默认蓝」）并入 §11.1；其余 References。

8.2 Add color with accent borders

要点：不会画插画也能加彩：彩色装饰条——卡片顶边、active 导航项侧边、alert 侧边、标题下短横。一个彩色矩形零绘画门槛，却显著提升「被设计过」的感觉。 现行关系：无对应。alert 侧彩条、active 导航条与 Workbench 相关，但属「允许的技巧」而非「必须的约束」。 建议：作为技巧而不仅仅是reference

8.3 Decorate your backgrounds

要点：背景增趣三法：换背景色分区（单面板强调或整段分节）；渐变用相差 ≤30° 的两个 hue；低对比重复纹理（可整面/可单边）；单个几何图形或插画点缀。共同纪律：与内容的对比要压低，不干扰可读性。 现行关系：无对应。营销页向。 建议：要采用

8.4 Don't overlook empty states

要点：依赖用户生成内容的界面，空状态是优先级不是事后补——它是用户第一眼。做法：插画/图片抓注意力 + 强化 CTA 引导第一步；有 tabs/filters 等辅助 UI 时空状态期整体隐藏（没内容时那些控件毫无意义）。 现行关系：11.4 已有空状态两分条款（有数据结构 vs 引导型），本节印证；「空态隐藏 tabs/filters」是新增细则。 建议：采用补充细则，并入 11.4 现有空状态条款。

8.5 Use fewer borders

要点：需要分隔时别条件反射用 border，三个更轻的替代：①box-shadow（描边感更柔）；②相邻区域用两种背景色（已有色差就删掉多余边框）；③直接加大间距。边框过多=界面显忙乱。 现行关系：§11.6 第 3 条（文章版：边框最后手段，表格例外）即此，书版给出三替代的明确清单。 建议：采用，以书版为准重写 §11.6 对应条款（表格例外保留）。

8.6 Think outside the box

要点：别被组件刻板印象锁死：dropdown 不必是白盒竖排链接，可以分区、多列、带图标和描述；表格非排序列可以合并成带层级的复合单元格（姓名+职务一格），也可加图片加色彩；一组重要的 radio 可做成可选卡片。约束有力量，但偶尔需要自由。 现行关系：与 skill「约束」定位相反，除一点：「表格非排序列可合并」对 Workbench 表格密度有实际价值。 建议：与1.3节相同的一次性设计

第 9 章 Leveling Up

9.1 Look for decisions you wouldn't have made

要点：看到好设计时问「设计师做了什么我想不到的决定」（反色 datepicker、按钮放输入框内、标题双色……），持续积累非直觉技巧。 建议：References（学习方法论）。

9.2 Rebuild your favorite interfaces

要点：不开 devtools 复刻喜欢的界面，从「为什么我的版本不像」里自学出「标题收行高」「大写加字距」「叠双阴影」这类细节。 建议：References（学习方法论）。

附：两处需要显式裁决的交叉点

1. 间距基数：现行 11.4「8px 基数」 vs 书版「16px 基准 + 相邻档差 ≥25%」。我的调和案（见 3.2）：保留 8px 基数作为刻度成员资格，叠加 ≥25% 作为刻度生成规则，两者兼容。
2. 行高条款修订：现行 11.5「1.4–1.6」需按 4.5 增加标题例外（1.1–1.3），否则与正确的大标题排版冲突。