名称: refactoring-ui 描述: ‘基于Adam Wathan & Steve Schoger的"Refactoring UI"的实用UI设计系统。当您需要时使用：(1) 修复视觉层次问题，(2) 选择一致的间距和排版比例，(3) 构建具有适当对比度的颜色调色板，(4) 通过阴影和分层添加深度，(5) 首先在灰度下设计，最后添加颜色，(6) 在Tailwind CSS中样式化组件，(7) 在没有设计师的情况下使UI看起来专业。’ 许可证: MIT 元数据: 作者: wondelai 版本: “1.1.0”
重构UI设计系统
一种实用、有见解的UI设计方法。在生成前端代码、审查设计或建议视觉改进时应用这些原则。
核心原则
首先在灰度下设计。最后添加颜色。 这迫使通过间距、对比度和排版建立适当的层次结构，而不是依赖颜色作为支撑。
基础： 优秀的UI不是关于创造力或天赋——而是关于系统。对间距、类型、颜色和阴影的受限比例产生一致的专业结果。从过多的空白开始，然后移除。细节稍后添加——在布局和层次结构工作之前，不要过分关注图标、阴影或微交互。
评分
目标：10/10。 在审查或创建UI设计或前端代码时，根据以下原则的遵循程度评分0-10。10/10表示完全符合所有指南；较低分数表示需要解决的差距。始终提供当前分数和达到10/10所需的具体改进。
重构UI框架
在没有设计师的情况下构建专业界面的七个原则：
1. 视觉层次
核心概念： 并非所有内容都能重要。通过三个杠杆创建层次：大小、重量和颜色。
为什么有效： 当每个元素都争夺注意力时，没有内容突出。通过有意识地去强调次要内容，使主要内容通过对比变得强大。
关键洞察：
- 结合杠杆，不要倍增——主要文本=大 OR 粗体 OR 深色，而不是全部三个
- 将“全部三个”留给页面上最重要的单一元素
- 标签是次要的——表单标签、表头和元数据标签支持数据，而不是竞争
- 语义颜色不等于视觉重量——一个柔和的红色次要按钮通常比危险操作的尖叫色更好
- 通过使标签更小、更轻或大写-小写来去强调标签
产品应用：
| 上下文 | 层次技术 | 示例 |
|---|---|---|
| 表单字段 | 去强调标签，强调值 | 大值文本上方的小大写标签 |
| 导航 | 主要导航粗体，次要导航更轻 | 活跃链接深灰色-900，非活跃灰色-500 |
| 卡片 | 标题大，元数据小而轻 | 卡片标题20px粗体，日期12px灰色-400 |
| 仪表板 | 关键指标大，上下文小 | 收入“$42,300”大，“vs 上个月”小 |
| 表格 | 去强调表头，强调单元格数据 | 表头大写小灰色，数据正常重量 |
设计模式：
- 三级层次表格：大小（大/基础/小）、重量（粗体/中等/正常）、颜色（深/中等/浅灰色）
- 标签-值模式：去强调的标签在强调的值上方
- 按钮层次：主要（填充）、次要（轮廓或柔和）、三级（仅文本）
伦理边界： 不要使用层次技巧来隐藏重要信息，如定价、条款或取消选项。
参见：references/advanced-patterns.md 以获取交互状态和高级组件模式。
2. 间距与尺寸
核心概念： 使用受限的间距比例，而不是任意值。间距定义关系——更靠近的元素更相关。
为什么有效： 任意间距（padding: 13px）创建不一致性。固定比例迫使有意识的决策并产生和谐的布局。慷慨的间距感觉优质；密集的间距感觉压抑。
关键洞察：
- 使用线性或近线性比例：4, 8, 16, 24, 32, 48, 64px
- 从过多的空白开始，然后移除——您几乎永远不会移除足够多
- 组之间的间距应大于组内的间距
- 文本块应受限于45-75个字符（
max-w-prose或 ~65ch） - 表单应最大宽度为300-500px
- 全宽几乎从不适合内容
产品应用：
| 上下文 | 间距策略 | 示例 |
|---|---|---|
| 图标 + 标签 | 紧耦合（4px） | 小间隙保持它们视觉连接 |
| 表单字段 | 相关元素（8-16px） | 输入及其标签紧耦合 |
| 卡片部分 | 部分分离（24px） | 标题块、内容块、页脚块 |
| 页面部分 | 主要部分（48-64px） | 英雄、功能、推荐、页脚 |
| 容器宽度 | 限制到内容 | max-w-prose 用于文本，max-w-md 用于表单 |
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用于部分分离
伦理边界： 不要使用间距来掩藏重要UI元素，如取消订阅按钮或隐私控制。
参见：references/advanced-patterns.md 以获取响应式断点策略。
3. 排版
核心概念： 使用模块化类型比例，根据上下文约束行高，并最多限制到两个字体族。
为什么有效： 模块化比例（如1.25比率）创建自然视觉节奏。标题上的紧行高和正文上的松行高提高跨上下文的可读性。
关键洞察：
- 使用模块化比例：12, 14, 16, 20, 24, 30, 36px（1.25比率）
- 标题需要紧行高（1.0-1.25）；正文需要松（1.5-1.75）
- 更宽的文本需要更多行高
- 避免正文文本的字体重量低于400——它们变得不可读
- 使用粗体（600-700）用于强调，而不是用于所有内容
- 最多两个字体：一个用于标题，一个用于正文（或一个带重量变化的字体族）
产品应用：
| 上下文 | 排版规则 | 示例 |
|---|---|---|
| 英雄标题 | 36px，紧行高（1.1），粗体 | 大的有影响力的陈述 |
| 部分标题 | 24px，行高1.25，半粗体 | 清晰的部分分界 |
| 正文文本 | 16px，行高1.75，正常重量 | 舒适阅读 |
| 字幕/标签 | 12-14px，行高1.5，中等灰色 | 次要信息 |
| 代码/数据 | 等宽，14px，一致宽度 | 表数据对齐 |
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)
伦理边界： 不要使用微小类型大小来隐藏用户条款、条件或费用。
参见：references/advanced-patterns.md 以获取文本截断和响应式排版。
4. 颜色
核心概念： 构建一个系统化的调色板，每个颜色5-9个色调，为灰色添加微妙的饱和度，并首先在灰度下设计。
为什么有效： 随机颜色冲突。一个具有预定义色调的系统化调色板确保整个界面的一致性。HSL调整创建自然的较亮和较暗变体。
关键洞察：
- 每个颜色需要5-9个从近白到近黑的色调（50到900）
- 最暗的色调不是纯黑——使用900级深灰色（如
#111827）而不是纯#000000 - 纯灰色看起来死气沉沉——添加微妙饱和度（酷UI：蓝色色调如
#64748b；暖UI：黄色/棕色色调如#78716c） - HSL调整：较亮=更高亮度，更低饱和度，色相转向60度；较暗=更低亮度，更高饱和度，色相转向0/240度
- 正文文本最小4.5:1对比度；大文本（18px+）最小3:1
- 在白色上使用
#374151（灰色-700），而不是更浅的灰色用于可读文本
产品应用：
| 上下文 | 颜色策略 | 示例 |
|---|---|---|
| 主要调色板 | 9个色调（50-900）用于主要品牌颜色 | 蓝色-500用于按钮，蓝色-100用于背景 |
| 灰色调色板 | 饱和灰色匹配UI温度 | 科技产品的蓝色色调酷灰色 |
| 语义颜色 | 成功、警告、错误各带色调范围 | 绿色-500用于成功，红色-500用于错误 |
| 文本颜色 | 三个级别：深、中等、浅 | text-gray-900, text-gray-600, text-gray-400 |
| 可访问对比度 | 测试所有文本/背景组合 | #374151 在白色上 = 10.5:1 比率 |
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 以获取深色调色板创建和主题实现策略。
5. 深度与阴影
核心概念： 使用阴影比例来传达高度。小阴影用于略微提升的元素，大阴影用于浮动元素。
为什么有效： 阴影创造物理深度的感觉，帮助用户理解哪些元素是交互式的，哪些浮动在表面上，哪些是背景的一部分。
关键洞察：
- 小阴影 = 略微提升（按钮、卡片）；大阴影 = 浮动（模态、下拉菜单）
- 阴影有两个部分：一个紧的暗阴影用于清晰度加上一个大的软阴影用于氛围
- 没有阴影的深度：较亮的顶边框 + 较暗的底边框，微妙渐变背景，重叠元素带偏移
- 不要过度使用阴影——如果所有内容都浮动，没有内容有深度
- 阴影颜色应为透明暗色，不透明灰色
产品应用：
| 上下文 | 阴影级别 | 示例 |
|---|---|---|
| 按钮 | shadow-sm（微妙提升） |
略微高于页面表面 |
| 卡片 | shadow-md（清晰分离） |
内容分组并从背景提升 |
| 下拉菜单 | 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)
伦理边界： 不要使用过多阴影或视觉强调来吸引注意力到欺骗性UI元素（暗模式）。
参见：references/advanced-patterns.md 以获取交互状态和高度层次。
6. 图像与图标
核心概念： 将图像视为设计元素，而不是事后想法。有意识地尺寸图标并使用覆盖来确保图像上的文本可读性。
为什么有效： 尺寸不佳的图标看起来尴尬。未样式化的图像破坏视觉一致性。有意识的图像处理（覆盖、对象拟合、边框半径）使界面感觉抛光。
关键洞察：
- 图标应根据其上下文尺寸——不要在所有地方使用相同大小
- 使用一致的笔画宽度和样式的图标集
- 图像需要处理：对象拟合覆盖、一致纵横比、覆盖用于文本
- 不要拉伸或扭曲图像——使用
object-fit: cover并精心裁剪 - 空状态是一个机会——使用插图，不仅仅是文本
产品应用：
| 上下文 | 图像/图标技术 | 示例 |
|---|---|---|
| 英雄图像 | 覆盖半透明渐变 | 文本在任何照片上可读 |
| 头像 | 一致大小、圆形、回退首字母 | 40px圆形带对象拟合覆盖 |
| 功能图标 | 一致大小、重量和颜色 | 灰色-500中的24px笔画图标 |
| 空状态 | 自定义插图 + 清晰CTA | 友好插图带“开始”按钮 |
| 缩略图 | 固定纵横比带对象拟合覆盖 | 16:9卡片无扭曲 |
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用于图像上文本
伦理边界： 不要使用误导性图像或图标来歪曲功能或产品能力。
参见：references/advanced-patterns.md 以获取图像处理、图标使用和空状态。
7. 布局与构图
核心概念： 不要所有内容居中。使用对齐、重叠和强调变化来创建引人入胜的构图。
为什么有效： 左对齐文本更容易阅读。变化布局保持用户参与。打破刚性框使设计感觉动态和有意识。
关键洞察：
- 默认左对齐文本；仅居中短标题、英雄部分、单一动作CTA和空状态
- 卡片不需要包含所有内容——让图像延伸到边缘、重叠容器或超出边界
- 在列表和馈送中，变化视觉处理——特色一些项目，最小化其他
- 使用对齐来创建无关元素之间的视觉关系
- 交替强调：不是列表中的每个卡片都需要相同布局
产品应用：
| 上下文 | 布局策略 | 示例 |
|---|---|---|
| 英雄部分 | 居中文本，慷慨间距 | 短标题 + 副文本 + 单一CTA |
| 功能网格 | 左对齐文本，一致卡片大小 | 3列网格带图标 + 标题 + 描述 |
| 博客馈送 | 变化卡片大小用于强调 | 第一篇大，下一篇在2列网格中 |
| 侧边栏 | 比主要内容窄，更浅背景 | 导航或过滤器在240-320px宽度 |
| 内容页面 | 受限宽度，左对齐 | max-w-prose 居中容器带左文本 |
CSS模式：
text-left默认，text-center仅用于英雄和短标题grid grid-cols-3 gap-6用于功能网格max-w-4xl mx-auto用于页面容器overflow-hidden在卡片上带object-fit: cover延伸到边缘的图像
伦理边界： 不要使用布局技巧来隐藏或模糊重要用户选择，如选择退出或数据权限。
参见：references/advanced-patterns.md 以获取响应式断点和复杂布局模式。
常见错误
| 错误 | 为什么失败 | 修复 |
|---|---|---|
| “看起来业余” | 空白不足，未受限宽度 | 添加更多空白，限制内容宽度 |
| “感觉平坦” | 元素之间没有深度差异 | 添加微妙阴影，部分上的底边框 |
| “文本难以阅读” | 行高差，太宽，对比度低 | 增加行高，限制宽度，提升对比度 |
| “所有内容看起来一样” | 元素之间没有视觉层次 | 变化主要和次要之间的大小/重量/颜色 |
| “感觉杂乱” | 处处相等间距，无分组 | 分组相关项目，增加组之间间距 |
| “颜色冲突” | 随机颜色选择无系统 | 降低饱和度，使用更多灰色，限制调色板到系统 |
| “按钮不突出” | 与周围元素对比度低 | 增加与周围的对比度，添加阴影 |
| 使用任意值 | px值如13, 17, 23创建不一致性 | 坚持间距和类型比例 |
快速诊断
审计任何UI设计：
| 问题 | 如果否 | 操作 |
|---|---|---|
| 当眯眼时（模糊测试）层次可读吗？ | 元素竞争注意力 | 增加主要和次要之间的对比度 |
| 在灰度下工作吗？ | 依赖颜色进行层次 | 强化大小/重量/间距层次 |
| 有足够的空白吗？ | 可能不——大多数设计太密集 | 增加间距，特别是组之间 |
| 标签相比其值去强调了吗？ | 标签与数据竞争 | 使标签更小、更轻或大写-小 |
| 间距遵循一致比例吗？ | 任意间距创建视觉噪音 | 仅使用4/8/16/24/32/48/64比例 |
| 文本宽度受限于可读性吗？ | 长行导致读者疲劳 | 应用 max-w-prose (~65ch) 到文本块 |
| 颜色有足够对比度吗？ | 可访问性失败，难以阅读 | 使用WCAG对比度检查器，在白色上使用灰色-700+ |
| 阴影适用于高度吗？ | 元素浮动在错误的视觉级别 | 匹配阴影比例到元素目的 |
参考文件
- advanced-patterns.md：空状态、表单设计、图像处理、图标尺寸、交互状态、颜色心理学、边框半径系统、文本截断、响应式断点
- animation-microinteractions.md：何时动画、缓动函数、持续时间、加载状态、动画性能
- accessibility-depth.md：WCAG 2.1 AA清单、焦点管理、屏幕阅读器支持、键盘导航
- data-visualization.md：图表选择、图表颜色、表格设计、仪表板布局
- theming-dark-mode.md：深色调色板创建、暗模式高度、主题实现策略
进一步阅读
此技能基于Adam Wathan和Steve Schoger的实用设计指南。对于完整系统带视觉示例：
- “Refactoring UI” by Adam Wathan & Steve Schoger（完整书籍带数百视觉前后示例）
- “The Design of Everyday Things” by Don Norman（基础设计思维和可用性）
- “Don’t Make Me Think” by Steve Krug（补充Refactoring UI的Web可用性原则）
- Refactoring UI —— 官方站点带资源和示例
关于作者
Adam Wathan 是一名全栈开发者，Tailwind CSS的创造者，最流行的实用优先CSS框架之一。Steve Schoger 是一名视觉设计师，以其实用设计技巧和插图闻名。他们共同创建了 Refactoring UI 来教授开发者如何使用系统化、可重复的技术设计更好的界面，而不是依赖内在艺术天赋。他们的方法强调受限设计系统——对间距、排版、颜色和阴影的固定比例——在不要求设计背景的情况下产生专业结果。