refactoring-ui

Refactoring UI 设计系统

一种实用且有明确主张的 UI 设计方法。在生成前端代码、评审设计或提供视觉改进建议时，应用这些原则。

核心原则

先用灰度设计，最后再添加颜色。 这样能迫使你先通过间距、对比度和排版建立恰当的层次，而不是把颜色当作拐杖。

基础： 优秀的 UI 靠的不是天赋，而是系统。对间距、字体、颜色和阴影使用受限的刻度，才能持续产出专业的效果。先留出过多的留白，再逐步减少；等布局和层次都合理后，再处理细节（图标、阴影、微交互）。

评分

目标：10/10。 通过计算 快速诊断 中符合条件的项目数（共 8 个是非检查项）来评分：score = round(satisfied / 8 × 10)。评分档位由此直接得出：10 = 8 项全部通过（层次在模糊状态和灰度下都清晰可辨，所有数值都遵循刻度）；9 = 恰好有 1 项未通过（通常是层次较弱或留白不足）；6-8 = 有 2-3 项未通过；<=5 = 有 4 项或更多未通过（间距随意、颜色在承担本该由层次承担的作用，或对比度不达标）。务必说明当前分数，以及需要修正哪些具体诊断项才能达到 10/10。

Refactoring UI 框架

无需设计师也能打造专业界面的七项原则：

1. 视觉层次

核心概念： 不能让所有内容都同等重要。通过三个杠杆建立层次：尺寸、字重和颜色。

原理： 当每个元素都争相吸引注意力时，就没有元素能脱颖而出；有意弱化次要内容，能通过对比让主要内容更醒目。

关键要点：

• 组合使用杠杆，而非全部叠加 —— 主要文本可以是大号、粗体或深色，但不要三者兼具；将“三者兼具”留给最重要的单个元素
• 标签是次要内容 —— 表单标签、表头和元数据应辅助数据，而非与其争夺注意力；将它们设为更小、更浅，或小号大写
• 语义颜色 ≠ 视觉权重 —— 对常规破坏性操作而言，低调的次要按钮往往比刺眼的红色更合适

产品应用：

场景	层次技巧	示例
表单字段	弱化标签，突出数值	大号数值上方放置小号大写标签
仪表板	关键指标放大，背景信息缩小	"$42,300" 使用大号字体，"vs last month" 使用小号字体
表格	弱化表头，突出数据	表头使用小号灰色大写字母，数据使用常规样式

设计模式：

• 三级层次：尺寸（大号/常规/小号）、字重（粗体/中等/常规）、颜色（深灰/中灰/浅灰）
• 按钮层次：主要（填充）、次要（描边或低调）、第三级（纯文本）

伦理边界： 不要利用层次技巧隐藏价格、条款或取消选项等重要信息。

设计静态布局之外的组件时，可参阅 references/advanced-patterns.md，了解交互/悬停/焦点状态、表单设计、空状态、圆角系统、文本截断和响应式断点。

2. 间距与尺寸

核心概念： 使用受限的间距比例，而不是随意取值。间距定义了元素之间的关系——距离越近，看起来关联越紧密。

有效原因： 随意设置间距（padding: 13px）会造成不一致；固定比例能促使你审慎决策，并打造协调的布局。宽松的间距显得更精致；过于紧凑则容易让人不知所措。

关键要点：

• 使用以下比例：4、8、16、24、32、48、64px
• 先留出过多的留白，再逐步缩减——你几乎永远不会删得足够多
• 组与组之间的间距必须大于组内元素之间的间距
• 限制宽度：文本控制在 45–75 个字符（max-w-prose），表单控制在 300–500px；几乎不应该使用全宽

产品应用：

场景	间距策略	示例
图标 + 标签	紧密组合（4px）	较小的间距让两者保持关联
卡片分区	分区间隔（24px）	标题、内容、页脚区块
页面分区	大区块间隔（48–64px）	主视觉区、功能、用户评价

CSS 模式：

• p-1(4px) p-2(8px) p-4(16px) p-6(24px) p-8(32px) p-12(48px) p-16(64px)
• max-w-prose(65ch) max-w-md(28rem) max-w-lg(32rem) max-w-xl(36rem)
• 相关元素使用 gap-2，分区之间使用 gap-6

3. 排版

核心概念： 使用模块化字号比例，根据场景限制行高，并将字体系列控制在最多两种。

有效原因： 模块化比例（字号每级约增长 1.2 倍）能形成自然的视觉节奏；标题使用紧凑的行高、正文使用舒缓的行高，可提升不同场景下的可读性。

关键要点：

• 字号比例：12、14、16、18、20、24、30、36px（约为 1.2 的模块化比例，经过手动调整）
• 标题：紧凑行高（1.0–1.25）；正文：舒缓行高（1.5–1.75）；文本越宽，行高越需要加大
• 正文避免使用低于 400 的字重；用粗体（600–700）突出重点，而不是所有内容都加粗
• 最多使用两种字体：一种用于标题，一种用于正文（或使用同一字体系列并调整字重）

产品应用：

场景	排版规则	示例
主视觉标题	36px，行高 1.1，粗体	大气醒目的陈述
正文	16px，行高 1.75，常规字重	阅读起来舒适
说明文字/标签	12–14px，行高 1.5，中灰色	辅助信息

CSS 模式：

• text-xs(12px) text-sm(14px) text-base(16px) text-lg(18px) text-xl(20px)
• font-normal(400) font-medium(500) font-semibold(600) font-bold(700)
• leading-tight(1.25) leading-normal(1.5) leading-relaxed(1.75)

4. 颜色

核心概念： 为每种颜色构建包含 5-9 个色阶的系统化调色板，为灰色添加微妙的色彩倾向，并先以灰度进行设计。

为何有效： 随意搭配的颜色会相互冲突；预定义的色阶系统可确保一致性，而 HSL 调整能自然地生成较浅和较深的变体。

关键要点：

• 每种颜色都需要从近白到近黑的 5-9 个色阶（50-900）；最深色不应是纯黑色——使用 #111827，而不是 #000000
• 纯灰色看起来缺乏生气——为其添加色调（冷色调 UI：蓝色，如 #64748b；暖色调 UI：黄色/棕色，如 #78716c）
• HSL：变浅 = 提高亮度、降低饱和度，并让色相朝 60° 偏移；变深则相反，让色相朝 0°/240° 偏移
• 最低对比度：正文为 4.5:1，大号文本（18px+）为 3:1；白色背景上使用 #374151（gray-700），不要使用更浅的灰色

产品应用：

场景	颜色策略	示例
主调色板	品牌色包含 9 个色阶（50-900）	Blue-500 按钮、Blue-100 背景
语义颜色	成功/警告/错误颜色各有一组色阶	Green-500 表示成功，Red-500 表示错误
文本颜色	三个层级：深、中、浅	text-gray-900、text-gray-600、text-gray-400

CSS 模式：

• text-gray-900（深）text-gray-600（中）text-gray-400（浅）
• 使用 bg-blue-50 作为微妙的背景色，使用 bg-blue-500 表示主要操作
• 使用 border-gray-200 绘制微妙的边框，使用 border-gray-300 绘制更明显的边框

构建深色主题时，请参阅 references/theming-dark-mode.md——其中介绍十六进制色阶、为何最深色应为 #111827 而非黑色（光晕效应），以及如何通过亮度而非阴影来传达层级。若涉及对比度、焦点环、键盘导航或屏幕阅读器支持，请参阅 references/accessibility-depth.md——其中包含完整的 WCAG 2.1 AA 检查清单和修复方法。

5. 深度与阴影

核心概念： 使用阴影阶梯来传达高度——轻微抬起的元素使用小阴影，悬浮元素使用大阴影。

为何有效： 眼睛会根据阴影大小判断元素高于页面的程度；一致的阴影阶梯能清晰地表现高度，让用户直观判断哪些元素可交互、处于悬浮状态或位于背景中。

关键要点：

• 小阴影表示轻微抬起（按钮、卡片）；大阴影表示悬浮（模态框、下拉菜单）
• 优质阴影包含两部分：用于增强清晰度的紧致深色阴影，以及用于营造氛围的较大柔和阴影
• 无阴影也能营造深度：较浅的顶部边框 + 较深的底部边框、微妙的渐变、彼此重叠的元素
• 不要过度使用——如果所有元素都在悬浮，就没有深度可言；阴影颜色应为透明的深色，绝不能是不透明的灰色

产品应用：

场景	阴影级别	示例
按钮	shadow-sm（轻微抬起）	略高于表面
下拉菜单	shadow-lg（悬浮）	菜单明显高于内容
模态框	shadow-xl（最高级别）	覆盖层与页面分离

CSS 模式：

• shadow-sm：0 1px 2px rgba(0,0,0,0.05)
• shadow-md：0 4px 6px rgba(0,0,0,0.1)
• shadow-lg：0 10px 15px rgba(0,0,0,0.1)
• shadow-xl：0 20px 25px rgba(0,0,0,0.15)

为交互元素添加动态效果时，请参阅 references/animation-microinteractions.md——其中介绍持续时间、缓动曲线、加载状态以及 prefers-reduced-motion 规则。

6. 图片与图标

核心概念： 将图片视为设计元素，而不是事后添加的内容。精心设置图标尺寸，并使用叠加层确保图片上的文字清晰易读。

为何有效： 图标尺寸不当会显得别扭，未经处理的图片会破坏一致性；经过精心处理（叠加层、object-fit、圆角）的界面会显得更加精致。

关键要点：

• 根据上下文调整图标尺寸；使用描边宽度和样式一致的图标集
• 切勿拉伸或扭曲图片——使用 object-fit: cover，设置固定宽高比并精心裁剪
• 图片上的文字需要叠加层（半透明渐变）
• 空状态也是一个机会——搭配插画和清晰的 CTA，而不只是文字

产品应用：

上下文	图片/图标技巧	示例
主视觉图片	半透明渐变叠加层	确保文字在任何照片上都清晰可读
头像	尺寸统一、圆形、无头像时显示姓名首字母	40px 圆形，object-fit cover
空状态	自定义插画 + CTA	友好的插画，搭配“开始使用”

CSS 模式：

• 使用 object-fit: cover 和固定的 aspect-ratio，确保显示效果一致
• 图标尺寸：行内图标用 w-4 h-4，导航图标用 w-6 h-6，功能图标用 w-8 h-8
• 叠加层：在图片上显示文字时，使用 bg-gradient-to-t from-black/60 to-transparent

7. 布局与构图

核心概念： 不要将所有内容都居中。通过对齐、重叠和强调变化，打造更具吸引力的构图。

为何有效： 统一的左边缘为每行文字提供固定的视觉参照点，降低了浏览成本；多行文字居中会让这个边缘每行都移动，从而减慢阅读速度。

关键要点：

• 默认左对齐；仅将简短标题、主视觉区、单一操作 CTA 和空状态居中
• 卡片不必包含所有内容——可以让图片延伸到边缘，或与容器重叠
• 改变列表和动态内容流的视觉呈现——突出部分条目，弱化其他条目
• 利用对齐关系，在彼此无关的元素间建立联系

产品应用：

上下文	布局策略	示例
主视觉区	文字居中，留白充足	简短标题 + 补充说明 + 单一 CTA
博客动态流	使用不同尺寸的卡片突出重点	第一篇文章较大，其余文章采用两列网格
内容页面	限制宽度，左对齐	使用 max-w-prose 容器，文字左对齐

CSS 模式：

• 默认使用 text-left，仅在主视觉区和简短标题中使用 text-center
• 功能网格使用 grid grid-cols-3 gap-6；页面容器使用 max-w-4xl mx-auto
• 对带有延伸至边缘的 object-fit: cover 图片的卡片使用 overflow-hidden

布局图表、表格或仪表板时，请参阅 references/data-visualization.md，了解图表类型选择、图表配色、表格密度和仪表板构图。

常见错误

错误	失败原因	修正方法
“看起来不专业”	留白不足，宽度未受限制	增加留白，限制内容宽度
“显得平淡”	缺少层次区分	使用细微阴影，在各区块底部添加边框
“文字难以阅读”	行高不佳、宽度过大、对比度低	增大行高，限制宽度，提高对比度
“所有内容看起来都一样”	缺乏视觉层级	通过字号、字重和颜色区分主要内容与次要内容
“显得杂乱”	所有位置的间距都相同	将相关条目分组，并增大组间距
“颜色不协调”	选择随意，缺乏系统	降低饱和度，增加灰色，限制使用的调色板
“按钮不醒目”	与周围内容的对比度低	提高对比度，添加阴影
任意取值	使用 13、17、23 这类 px 值会导致样式不一致	遵循间距和字体大小规范

快速诊断

审查任意 UI 设计：

问题	如果否	操作
眯起眼睛时，层级是否依然清晰（模糊测试）？	元素相互争夺注意力	增强主要与次要元素的对比
转换为灰度后是否依然有效？	过度依赖颜色	强化尺寸、字重和间距层级
留白是否充足？	很可能不够——大多数设计都过于密集	增加间距，尤其是各组之间的间距
标签是否比数值更不醒目？	标签与数据争夺注意力	缩小标签字号、减轻字重，或使用小号大写字母
间距是否遵循一致的尺度？	任意间距 = 视觉噪声	仅使用 4/8/16/24/32/48/64
文本宽度是否有限制？	长行会让读者疲劳	应用 max-w-prose（约 65ch）
颜色对比度是否足够？	无障碍性不达标	检查 WCAG；白色背景上使用 gray-700+
阴影是否与层级相符？	元素浮在不合适的层级上	根据元素用途匹配阴影尺度

延伸阅读

如需查看包含视觉前后对比示例的完整体系：

• "Refactoring UI"：Adam Wathan 和 Steve Schoger 合著（全书包含数百个视觉示例）
• "The Design of Everyday Things"：Don Norman 著（奠定设计思维与可用性的基础）
• "Don't Make Me Think"：Steve Krug 著（与 Refactoring UI 相辅相成的网页可用性原则）
• Refactoring UI — 官方网站，提供资源和示例

关于作者

Adam Wathan 是 Tailwind CSS 的创作者，Steve Schoger 是其设计语言背后的视觉设计师。他们合著了 Refactoring UI，旨在教授开发者系统化、可重复的设计技巧。他们的方法以受约束的体系取代艺术天赋——为间距、排版、颜色和阴影设定固定尺度，从而打造专业效果。