---
name: refactoring-ui-principles
description: 设计/美化界面视觉时用：层级、间距、色彩、排版、阴影决策速查（Refactoring UI 方法论）。
version: 1.0.0
author: CC
tags: [design, ui, css, refactoring-ui, 设计原则, 视觉]
---

# Refactoring UI 视觉设计原则

> 来源：Adam Wathan & Steve Schoger《Refactoring UI》全书解析（252 页 PDF → markdown，见 references/refactoring-ui-full.md 完整版）。
> 用途：做任何界面视觉设计/审查时的**决策速查**。工程实现细节（组件、状态、无障碍）走 frontend-ui-engineering skill。

## 触发条件

- 设计/美化任何网页、HTML 原型、组件样式
- 挑选颜色、字体、间距、阴影、圆角
- 审查已有 UI 视觉质量（"看起来哪里不对劲"）
- 用户要求界面"更精致/更专业/不像 AI 生成"

## 核心心法（先记住这 3 条）

1. **层级即设计**（Hierarchy is Everything）——让重要的东西突出、次要的东西退后，比任何装饰都管用
2. **一切皆系统**——间距/字号/颜色/阴影预定义 8-10 档，禁止随手敲任意值
3. **减少决策疲劳**——在受限集合里用排除法选值，而不是从无限池里挑

## 设计流程（从零开始）

1. **先做功能，不是布局**——从"搜索航班"这种具体功能画起，不要先画导航栏
2. **细节后置**——先灰度设计（不用颜色），用间距/对比/大小撑起层级
3. **别过度设计**——短周期：设计简单版→实现→迭代→再设计下一个
4. **当悲观主义者**——设计里别暗示你做不出来的功能
5. **定个性**——字体（serif 优雅/圆体活泼/中性 sans 安全）× 颜色 × 圆角 × 文案语气，保持一致

## 间距与尺寸系统（Layout & Spacing）

- **先给太多留白，再删**——而不是从"不丑"的最小值往上加
- **间距尺度**：从 16px 起步，小端密集大端稀疏，**相邻值差距 ≥25%**（线性倍数不行）
  实用参考：4/8/12/16/24/32/48/64/96/128
- **不用填满整个屏幕**——600px 就够就别拉宽；窄布局拆列别加宽
- **网格别当宗教**——侧边栏用固定宽度（内容驱动），主区域 flex；组件内部别用百分比
- **相对尺寸不缩放**——大元素在小屏要缩得比小元素快；按钮 padding 不要和 font-size 绑定（em 缩放）
- **避免歧义间距**——组外间距 > 组内间距；标题上方间距要大于行高，列表项间距同理

## 文字系统（Typography）

- **字号尺度（手调，勿用数学比例）**：12/14/16/18/20/24/30/36/48
- **用 px 或 rem，禁用 em 做字号尺度**（嵌套会跑出尺度外）
- **行高与字号成反比**：小字 1.5+，大标题可到 1；行高与行长成正比（宽内容 2.0）
- **行长 45-75 字符**（20-35em），图文混排时正文单独限宽
- **混合字号按基线对齐，不垂直居中**
- **两档字重够用**：400/500 正文 + 600/700 强调；<400 仅限大标题
- **链接**：几乎全是链接的界面用加粗/深色，别满屏蓝字；次要链接 hover 才变色
- **右对齐数字**（表格）；两端对齐必须开 hyphenation
- **letter-spacing**：大标题收紧（-0.05em），全大写放宽（+0.05em），正文不动

## 色彩系统（Color）

- **用 HSL 不用 hex**（hue 色相/饱和度/明度，人类直觉）
- **配色三分类**：灰阶 8-10 档 + 主色 5-10 档 + 强调色（红/黄/绿等状态色）几档——5 个色值永远不够
- **预定义色阶**：选基准色（能当按钮背景）→ 最浅（背景tint）/最深（文字）→ 填中间（900/500/100 命名，先 700/300 再补 800/600/400/200）
- **饱和度陷阱**：明度偏离 50% 越远，饱和度要越高（否则发灰）
- **灰不一定是灰**：偏蓝=冷灰，偏黄=暖灰；深灰别用纯黑
- **感知亮度**：√(0.299r²+0.587g²+0.114b²)——变亮向 60°/180°/300° 转 hue，变暗向 0°/120°/240° 转，旋转 ≤20-30°
- **彩色背景上别用灰字**：用同 hue 调饱和度/明度的手挑色，比白色降透明度好看（后者发灰发虚）
- **无障碍**：正文 ≥4.5:1，大字 ≥3:1；白字彩底时常常需要翻转（深字浅底）；别只靠颜色传达信息（红绿盲）

## 深度系统（Depth & Shadows）

- **光从上方来**：凸起=顶部亮边+下方小阴影；凹陷=底部亮边+顶部 inset 阴影
- **阴影=海拔**：小阴影近、大阴影远；按钮小阴影、下拉中阴影、弹窗大阴影
- **双阴影技巧**：`0 4px 6px rgba(0,0,0,.07), 0 5px 15px rgba(0,0,0,.1)` —— 大而软的模拟直射光 + 小而硬的模拟环境光；海拔越高环境光阴影越淡
- **扁平也可以有深度**：同色系浅=近深=远；无模糊的实心偏移阴影（`0 3px 0`）保扁平感
- **重叠制造层次**：卡片跨背景边界、图片给背景色"隐形边框"防撞色

## 图片处理（Images）

- 图烂毁所有——不行就上高质量图库（Unsplash）
- **背景图文字对比**：半透明黑色/白色遮罩（`hsla(0,0%,0%,.55)`）、降图对比度、单色化（降对比→去饱和→multiply 叠色）、大字模糊 text-shadow（`0 0 50px hsla(0,0%,0%,.4)`）
- **图标有设计尺寸**：16-24px 画的图标放大到 48px 会"笨重"——放大请用背景容器包裹，别硬拉
- **截图别缩小**：16px 字缩成 4px 没法看——截小尺寸布局/局部截图/画简化版
- **用户上传图**：固定容器 + `background-size: cover` 裁剪；防背景渗色用 inset 阴影（`inset 0 0 0 1px hsla(0,0%,0%,.1)`），别用边框

## 收尾细节（Finishing Touches）

- **超充默认元素**：列表圆点换图标、引言加大变色、链接自定义下划线、复选框用品牌色
- **彩色强调边框**：卡片顶边/激活导航/告警侧边/标题下短横线——零成本提质感
- **装饰背景**：换背景色、30° 内双色渐变、低对比重复图案（Hero Patterns）、角落几何图形
- **空状态是重点**：插图 + 强调 CTA；无关 UI 全隐藏
- **少用边框**：优先 box-shadow、双背景色、间距来分隔
- **跳出盒子**：下拉菜单可以分栏带图标、表格可以合并列、单选按钮可以做成可点卡片

## 设计审查清单（审已有 UI）

- [ ] 最重要的元素第一眼能看到？次级内容有没有被削弱？
- [ ] 间距/字号/颜色是否来自系统值？（有没有 13px、#7F7F7F 这种手敲值）
- [ ] 文字对比够不够（4.5:1）？彩色背景上是不是用了"白色降透明度"偷懒？
- [ ] 是不是满屏都同等醒目（没有层级）？
- [ ] 边框是不是用太多了？（试试阴影/背景色/间距替代）
- [ ] 图标是不是被放大到设计尺寸之外了？
- [ ] 空状态、加载态、错误态有没有设计？

## 相关

- 完整书全文：`references/refactoring-ui-full.md`（161KB，58 条原则带配图说明）
- 工程实现层：frontend-ui-engineering skill（组件/状态/无障碍）
- 设计系统 token：design-md skill（DESIGN.md 格式）