refactoring-ui

Refactoring UI 设计系统

核心理念

设计决策应出于明确意图，而非仅为装饰。每个视觉选择——颜色、尺寸、间距、字重——都传达层级关系，并引导用户注意力。先留出过多的空白，再逐步减少。先降低对比度，再在需要的地方增强。

编写任何 CSS 之前，请先回答：这应该给人什么感觉？ 金融仪表盘和儿童学习应用需要截然不同的视觉处理。以下章节从战略思考（个性、色彩理论、布局策略）逐步深入到战术执行（间距值、阴影语法、动画时长）。

---

设计思路

设计个性与风格

无论你是否主动选择，每个界面都有自己的个性。主动选择与否，决定了设计是恰到好处，还是显得千篇一律。

个性光谱

在两个坐标轴上定位你的设计：

• 正式 ↔ 随性：结构严谨、严肃，还是轻松、亲切
• 内敛 ↔ 张扬：克制、简约，还是大胆、鲜明

四个象限：

	内敛	张扬
正式	银行、法律、企业、政府	奢侈品牌、高端零售、时尚
随性	开发者工具、文档、实用工具	游戏、社交应用、儿童教育

将设计信号与个性对应起来

每种视觉手段都会将设计推向某个象限：

• Border-radius：2-4px（正式）→ 8-12px（适中）→ 16px+（随性）。应与个性相符——不要默认使用最大值。
• 字体选择：几何无衬线字体，如 Inter/Roboto（现代、中性）；人文无衬线字体，如 Source Sans/Nunito（友好、亲切）；衬线字体，如 Merriweather/Playfair（传统、权威）；等宽字体点缀（技术感、面向开发者）
• 色彩饱和度：低饱和/柔和（内敛）→ 高饱和/鲜明（张扬）。参见“色彩理论”章节。
• 留白密度：充足（正式、高端）→ 紧凑（随性、有活力、数据密集）
• 阴影风格：轻柔、扩散（内敛）→ 偏移明显、效果强烈（张扬）。极简/扁平设计也可以完全不使用阴影。
• 图像风格：摄影（真实、严肃）→ 插画（亲切、有趣）→ 仅使用图标（实用、技术）

领域风格定位

将以下内容作为起点，而非一成不变的规则。具体产品和受众始终优先。

金融科技 / 银行：正式、克制。采用低饱和度的蓝色和绿色、较小的圆角（4-6px）、几何无衬线字体、紧凑的数据布局和极简装饰。通过克制传递信任。

医疗 / 健康：正式、克制。采用令人平静的蓝色、绿色或蓝绿色。留白充足、分区清晰、触控目标较大。无障碍设计不容妥协。避免任何显得活泼俏皮的元素——患者需要的是安心。

电子商务：因市场细分而异。平价 / 大众市场 = 随性、有表现力（明亮的色彩、大型 CTA、充满活力）。奢侈品 = 正式、有表现力（低饱和度配色、衬线字体标题、大量留白、克制的 CTA）。

创意工具：随性、有表现力。在中性色背景上搭配醒目的强调色。采用不对称布局，在空状态和引导流程中展现个性。工具应给人灵感，而非企业化的感觉。

教育：K-12 = 随性、有表现力（暖色调、圆润的形状、友好的字体、插画）。专业 / 成人学习 = 随性、克制（简洁、专注，尽量减少对内容的干扰）。

SaaS 仪表板：随性、克制。以中性色为基础，使用功能性颜色呈现数据和状态。信息密集但井然有序。界面应隐于无形——用户来这里是为了查看数据，而非欣赏设计。

媒体 / 内容：新闻 = 正式、克制（经典字体、结构化网格、极少使用色彩）。娱乐 = 随性、有表现力（醒目的图像、鲜明的色彩、沉浸式布局）。

开发者工具：随性、克制。点缀等宽字体，偏好深色模式，尽量减少装饰。妥善呈现高密度信息。让内容充分舒展，但不要把空间浪费在装饰上。

“这是为谁设计的？”检查清单

在做出任何视觉选择之前，请回答以下问题：

1. 主要用户是谁？（年龄、技术水平、使用场景）
2. 应带来怎样的情绪反应？（信任、兴奋、平静、紧迫感）
3. 在这个领域，什么能建立信任？（克制？精致？友好？数据密度？）
4. 竞品是什么样的？（应该如何与其形成差异，同时避免显得格格不入？）
5. 它属于哪个风格象限？

---

色彩理论与心理学

下方现有的“色彩”部分介绍了如何使用 HSL 构建配色方案并管理色阶。本部分介绍应选择哪些颜色以及为什么。

色轮基础

颜色分为暖色和冷色：

• 暖色一侧（红色、橙色、黄色）：这些颜色会向前凸显，给人更近、更有活力、更紧迫的感觉。用于需要吸引注意力的元素。
• 冷色一侧（蓝色、绿色、紫色）：这些颜色会向后退，给人更远、更平静、更稳定的感觉。用于背景、容器和传递信任的元素。

这种冷暖动态是一个基本工具。采用冷蓝色背景的仪表板搭配暖橙色警示徽标，仅凭色彩的冷暖就能形成自然的视觉层级。

色彩和谐方案

色彩的组合方式决定了整体观感：

类似色（色轮上相邻的色相，例如蓝色 + 蓝绿色 + 绿色）： 协调、平静，内部对比度较低。适合需要营造统一、宁静氛围的界面，例如内容类应用、医疗健康和冥想应用。风险：如果没有中性色或强调色来打破单调，整体可能显得乏味。

互补色（相对的色相，例如蓝色 + 橙色）： 活力十足、对比鲜明。适合需要突出显示的元素，例如背景上的 CTA、营销页面和吸引注意力的场景。风险：如果两种颜色的饱和度都很高，视觉上可能显得刺眼。可降低其中一种颜色的饱和度。

分裂互补色（一种色相 + 其互补色两侧相邻的两种色相）： 色彩鲜明，但比直接使用互补色更平衡。适合需要丰富变化又不显杂乱的设计。它能为你提供一种明确的主色和两种辅助强调色。

三色组（色轮上等距的三种色相，例如红色 + 黄色 + 蓝色）： 鲜明且平衡。适合活泼、有创意的应用。应适度使用：一种颜色作为主色，另外两种降低饱和度作为强调色。三种颜色都全力使用会令人眼花缭乱。

对于大多数产品界面，以类似色搭配一种互补强调色是最稳妥、最专业的起点。

按色相划分的色彩心理学

每种色相都承载着某些联想。可将这些联想作为起点，再根据具体领域和受众进行调整：

蓝色：信任、稳定、平静、专业。普遍来说最安全的选择——也正因如此，它被过度使用。如果你选择蓝色，请确认它确实适合，而不是因为它是默认选项。

绿色：成长、健康、财富、自然、成功。适用于金融科技、健康生活、可持续发展和积极状态。与蓝色搭配时，能同时传达信任与成长。

红色：紧迫、活力、激情、危险。适用于美食与餐饮应用、娱乐、促销 CTA 和错误状态。在界面中应少量使用——一点红色就足以产生强烈效果。作为主色时，它很强烈；作为强调色时，则很有力量。

紫色：奢华、创意、神秘、灵性。适用于美妆、高端产品和创意工具。**注意：AI 大量过度使用紫色／紫罗兰色作为默认选项。**只有在领域确实适合时，才选择紫色。

橙色：温暖、热情、友好、实惠。适用于社交应用、教育、CTA，以及建筑／能源领域。它不像红色那么强烈，比黄色更有活力。在产品设计中使用得较少。

黄色：乐观、醒目、谨慎、温暖。最适合作为高亮色或强调色——由于在白色背景上的可读性问题，很难作为主色。适用于警告、徽章和吸引注意力的场景。

中性色（灰色、米白色、近黑色）：精致感、内容优先的设计。适用于摄影作品集、编辑类网站和开发者工具。让内容本身成为色彩，也是一种设计选择，而且往往是最优雅的做法。

文化背景

色彩联想因文化而异。请考虑你的受众：

• 白色：纯洁与干净（西方）与哀悼（东亚部分地区）
• 红色：危险与停止（西方）与好运和繁荣（中国、印度）
• 绿色：自然与通行（西方）与伊斯兰教（中东）
• 黄色：快乐（西方）与哀悼（拉丁美洲部分地区）

面向全球用户的产品应优先考虑蓝色和绿色（它们在大多数文化中都具有积极联想），并针对目标受众验证这些假设。

将饱和度作为设计手段

饱和度是摆脱千篇一律的 AI 设计时最容易被忽略的工具：

• 高饱和度：充满活力、俏皮、年轻、吸引眼球。适用于消费类应用、儿童产品、营销页面。
• 低饱和度／柔和饱和度：精致、沉稳、成熟、专业。适用于企业、医疗保健、金融、内容型应用。
• 柔和配色技巧：选取任意色相，将饱和度降低 20-40%。这样一来，设计立刻显得更用心、更成熟。大多数 AI 生成的 UI 都使用完全饱和的颜色——柔化颜色是摆脱“AI 风格”最快的方法。
• 混合饱和度策略：背景和容器使用柔和的基础配色，为主要操作和关键数据使用一种高饱和度强调色。这样既能突出重点，又不会造成视觉干扰。

/* AI default: fully saturated, feels generic */
--primary: hsl(250, 90%, 55%);

/* Muted: same hue, instantly more sophisticated */
--primary: hsl(250, 45%, 50%);

/* Even more restrained: works for enterprise/formal */
--primary: hsl(250, 30%, 45%);

配色决策树

1. 确定个性特征（参见“设计个性”部分）→ 这将决定饱和度范围
2. 选择主色相，依据色彩心理学以及你的领域需要传达的信息
3. 选择配色方案，依据所需的变化程度（冷静的风格适合类似色，活力的风格适合分裂互补色）
4. 设定饱和度，使其符合个性特征（正式／内敛 = 柔和，随性／富有表现力 = 鲜明）
5. 构建完整配色，使用下文“颜色”部分中的 HSL 色阶构建方法

---

布局决策框架

布局应由内容和用户目标决定，而不是由模板默认设置决定。

以内容为先的布局选择

先确定主要内容类型，再匹配布局模式：

长篇文本（文章、文档、政策）： 窄幅单列，最大宽度为 65ch。尽量减少侧边栏干扰。阅读是线性的，布局也应如此。

数据比较（分析、定价、功能比较）： 多列数据表或并排面板。用户需要横向浏览。内容可以密集，但要对齐。

状态监控（仪表板、运维控制台、管理概览）： 使用包含视觉指示器（颜色、图标、迷你图）的密集卡片网格。信息密度是一项优势。优先考虑易于浏览，而不是美观。

媒体浏览（画廊、作品集、产品目录）： 采用瀑布流或统一网格。让内容本身成为设计。尽量减少界面装饰，最大化可视空间。

顺序式工作流（引导流程、结账、多步骤表单）： 采用分步／向导式布局。每个屏幕只处理一项任务。显示进度指示器。移除干扰——必要时隐藏主导航。

探索／发现（社交动态、市场平台、内容发现）： 采用非对称布局、大小不一的卡片和视觉吸引点。布局应鼓励用户浏览。根据内容深度选择无限滚动或分页。

信息密度范围

一次显示多少内容，取决于使用者是谁以及他们需要什么：

稀疏（营销网站、引导流程）： 较大的字号（正文 18-24px），充足的留白（区块间距 48-96px），每个屏幕上的元素较少。每个元素都经过审慎选择。内边距本身也是一种设计特征。

适中（大多数产品界面）： 标准字号（正文 16px），均衡的间距（区块间距 24-48px），分组清晰。这是大多数应用最实用的信息密度。

密集（仪表板、管理面板、开发者工具、金融终端）： 紧凑字号（正文 13-14px），更紧凑的间距（区块间距 12-24px），一次显示更多元素。用户是专家——他们需要的是数据，而不是留白。仍需保持清晰的层级和分组。

每种密度都意味着间距比例、字号、组件内边距和边框圆角需要采用不同的默认值。

导航模式选择

根据应用的结构进行选择：

• 顶部水平导航：最适合营销网站和顶层区域少于 5 个的应用。简洁、熟悉，并能留出垂直空间。
• 侧边栏导航：最适合有 5 个或更多区域、层级复杂，或用户经常切换上下文的应用。始终可见，便于浏览。
• 标签栏：最适合同一区域内不同的内容视图。保持在 2–5 个标签。
• 底部导航（移动端）：最适合以移动端为主、拥有 3–5 个核心目的地的应用。方便拇指操作。
• 混合式（顶部导航 + 侧边栏）：最适合文档网站和复杂的 SaaS 应用。顶部导航用于区域切换，侧边栏用于页面树。

领域布局方案

以下是具体的起步方案，可强化各类产品的个性锚点：

金融科技仪表板：采用带图标和标签的侧边栏导航。主区域：顶部一排统计卡片，下方为数据表格或图表。使用紧凑网格。配色柔和，仅在数据可视化和状态指示器中使用醒目颜色。

创意作品集：使用全宽英雄图片。下方采用不对称项目网格。导航保持精简（徽标 + 汉堡菜单，或少量文字链接）。项目之间留出充足空白。让作品自己说话。

医疗门户：居中布局，最大宽度约为 720px。明确的分区标题。表单组留出充足内边距。复杂任务采用分步流程。清晰呈现“下一步”操作。面向患者的屏幕上不要放置密集数据。

电子商务店面：产品网格配筛选侧边栏（移动端可折叠）。带购物车的粘性页眉。突出显示“加入购物车”CTA。产品详情使用快速查看弹窗。视觉层级：图片 → 价格 → 名称 → 评价。

开发者文档：固定侧边栏配可折叠页面树。内容栏较窄（约 65ch）。代码块带语法高亮和复制按钮。长文档提供“本页内容”区域。顶部导航中提供版本选择器。

社交 / 社区应用：单栏信息流，最大宽度约为 600px。悬浮撰写按钮。通过内联互动（点赞、回复）完成操作，无需切换页面。无限滚动。导航保持精简——信息流就是核心体验。

管理面板：侧边栏导航，按组划分区域。数据表格支持排序、筛选和批量选择。设置应按组划分为表单区域，而不是拆成独立页面。层级较深时使用面包屑导航。

内容 / 媒体应用：文章或视频使用宽内容区域。浏览内容时尽量减少界面元素。相关内容放在下方或简洁的侧边栏中。提供阅读 / 观看模式，隐藏界面元素。

避免陷入单页应用的误区

不是所有内容都适合放在同一个屏幕上：

• 多步骤流程：使用向导式流程。不要让用户看到尚未到达的步骤。
• 不常用的设置：使用独立页面或专用面板。不要用很少使用的控件挤占主视图。
• 复杂的详情视图：如果详情有自己的层次（子项、相关内容、操作），应使用独立页面，而非内联展开。
• 经验法则：如果页面需要滚动超过 3 个视口高度，说明页面承载的内容过多。考虑拆分。

---

打破 AI 的默认模式

AI Agent 往往倾向于生成训练数据中的统计平均结果。本节将这些默认模式明确列出，帮助你避免它们。

常见套路

这些模式会让用户觉得“这看起来像是 AI 生成的”：

1. 紫色／蓝色渐变背景——用于页眉、主视觉区、卡片、按钮等所有元素
2. 到处都用最大圆角——不管上下文如何，每个元素都使用 rounded-2xl 或 rounded-full
3. 千篇一律的 SaaS 主视觉区——渐变文字标题、含糊的副标题、“Get Started” 按钮和装饰性斑点
4. 三卡片网格——每个功能／优势／定价版块都用一行三个一模一样的卡片
5. 所有元素都加阴影——每张卡片和每个按钮都有 shadow-lg，营造出“万物皆悬浮”的观感
6. 默认使用靛蓝／紫罗兰色——未指定颜色时，AI 就会选紫色
7. SaaS 落地页模板——主视觉区 → 功能网格 → 用户评价 → CTA。不管项目实际是什么，都套用这套模板
8. 节奏单一——每个版块的间距都一样，造成单调的视觉节拍

为什么会这样

训练数据大量偏向 SaaS 营销网站、Tailwind UI 示例和组件库。这些设计在各自的语境中很出色，但如果每个项目都从同一个源头汲取灵感，结果就会千篇一律。Agent 生成的只是“现代网页设计”的统计平均值。

应对之道

针对每种默认套路，给出具体替代方案：

渐变 → 使用纯色。如果想增加层次感，可以尝试细腻的纹理、带有对比元素的单色背景，或只在一个小型点缀元素（如进度条、状态指示器）上使用渐变，而不是铺满整个版块。

最大圆角 → 根据产品个性选择圆角。正式的金融应用：4-6px。亲和的消费类应用：8-12px。只有头像和标签等特定元素才使用全圆角。统一比圆润更重要。

千篇一律的主视觉区 → 围绕实际产品来设计主视觉区。展示产品、展示真实用例，或者干脆省略主视觉区。最好的主视觉区往往只有清晰的标题和聚焦的 CTA，不加任何装饰元素。

三卡片网格 → 想想内容实际是什么。功能可以用图标列表展示。定价适合用比较表格。用户评价可以用单条轮播引言展示。选择服务于内容的布局，而不是熟悉的模板。

到处都是阴影 → 用边框、背景色差异，或者留白来形成区隔。阴影应该表示高度——用于悬浮在页面上方的交互元素（下拉菜单、模态框）。如果所有东西都有阴影，就没有东西显得高出页面。

默认靛蓝色 → 浏览“色彩理论”一节。根据产品传达的信息选择色相，而不是选择看起来稳妥的颜色。大地色系、搭配赤陶色点缀的暖灰色，或带有一种鲜明点缀色的单色方案，都比靛蓝色更显用心。

所有内容都套 SaaS 模板 → 先参考“设计个性”和“布局决策框架”两节。医疗门户不需要主视觉区。仪表板不需要用户评价。围绕用户的需求构建布局，而不是照搬落地页模板。

节奏单一 → 根据内容之间的关联调整版块间距。相关内容版块之间：48px。主题发生重大转换时：96px。最重要的版块应留出最多呼吸空间。视觉节奏应该有所变化，就像音乐一样。

AI 直觉检查

敲定任何设计之前，先问自己：

“如果我把这个设计给开发者看，他们会猜到是 AI 做的吗？”

如果答案是肯定的，就找出最套路化的元素——通常是配色方案或布局结构——并使用上述框架，让它更贴合项目本身。

---

撰写不带 AI 腔的文案

视觉选择会暴露 AI 生成的 UI，而文案同样会迅速露馅。目标不是写出“出色的营销文案”，而是写出像《纽约时报》的作者所写的散文，而不是试图显得精致的大语言模型。

这些迹象

这些模式一看就像是“AI 写的”：

1. 过度使用长破折号 — 隔不了几句就出现一个——很多时候用逗号、句号或括号效果更好。AI 默认会用长破折号来打断句子节奏。
2. 句子残缺、断断续续。用来强调。出现得太频繁。 — 把简短、顿挫的句子串在一起，营造有力的感觉。真正的写作者会变化句子的节奏。
3. “不只是 X，而是 Y” — 以及类似表达：“不只是 X。”“不仅有 X，还有 Y。”这种平行结构只是条件反射，并非经过思考。
4. “无论你是 X 还是 Y” — 后面跟着两个刻意拼凑的受众群体，并声称双方都能受益。几乎总是可以删掉。
5. “从 X 到 Y” — “从初创公司到大型企业。”“从创意到发布。”这是偷懒地暗示范围广泛。
6. 到处都是三项并列 — “快速、简单、强大。”“为速度、规模和安全性而打造。”每句话都列三项会变成一种毛病。
7. 空洞的强调词 — “真正地”“确实”“令人难以置信地”“无缝地”“轻松地”。这些词只会增加音节，不会增加含义。
8. 营销套话 — “改变游戏规则”“革命性”“尖端”“同类最佳”“新一代”“世界级”。删掉它们。
9. 空洞的开场白 — “在当今快节奏的世界里……” “想象一个……的世界……” “我们生活在一个……的时代。”没人会这么说话。
10. 句子长度千篇一律 — 真正的写作有节奏：一个冗长曲折的句子后面跟着一个短句。连续三个长度适中的句子是 AI 的默认写法。
11. 动名词堆叠的项目符号 — 每个项目都以“构建”“创建”“设计”“赋能”开头。平行结构用到这种程度就单调了。
12. 非加不可的行动号召动词 — “解锁”“发现”“转变”“提升”。选一个能准确描述点击后实际发生什么的动词。

解药

针对每种迹象，对症下药：

破折号 → 能用逗号时就用逗号，能用句号时就用句号。破折号适合用于突然插入的旁述或戏剧性的停顿，不该成为默认连接符。如果一段话里有多个破折号，几乎可以肯定是用多了。一个破折号可以很有力，连用三个就是坏习惯。

零碎的短句 → 让句子舒展开来。一个想法通常可以用带逗号的流畅句子表达，就应该这样写，因为一连串零碎短句会显得气喘吁吁，读起来像是匆忙写成的新闻稿。句子长短要有变化：长句后接短句，短句后接长句。大声读出来，如果读着读着听起来像是在逐条念要点，就重写。

“这不仅是 X，更是 Y” → 直接说 Y。如果确实需要提到 X，就用一个独立句子表达这个想法，而不要把它当作衬托真正重点的陪衬。

“无论你是 X 还是 Y” → 选定实际的用户。如果文案确实面向两个不同的受众，就分别针对他们来写。笼统地说“无论你是……”对谁都没有帮助。

“从 X 到 Y” → 举一个具体例子。“从小团队到《财富》500 强企业”很笼统；“Stripe 和 Notion 的团队都在使用”则很具体。

三个并列项 → 改用两个并列项，或一个有力的形容词。“快速且可靠”胜过“快速、可靠且强大”。一个精心挑选的词，胜过三个平淡的词。

空洞的程度副词 → 删掉。“真正有用”改成“有用”。“快得惊人”改成“快”（或者给出具体数字）。名词已经足以表达意思时，程度副词就是累赘。

营销陈词滥调 → 说明产品实际能做什么。别说“革命性平台”，而要说明它能取代什么，或让用户做到哪些以前做不到的事。

空洞的开场白 → 从具体内容切入。第一句话应该包含具体名词、明确的动词或真实的论断。如果这句开场白可以用在该类别的任何产品上，就重写。

节奏单一 → 大声读出文案。如果每个句子长度都差不多，就打破这种模式。长句后接短句可以突出重点；几个短句后接一个长句，则能让读者从容消化。

动名词堆砌的列表项 → 变换开头形式。可以混用祈使句（“更快交付”）、名词短语（“真实的审计记录”）和完整句子。列表项不必都遵循相同的句式结构。

空洞的行动号召动词 → 使用实际的动词。“开始免费试用。”“查看价格。”“阅读文档。”直白的语言胜过“释放你的潜能”。

参考标准

读一篇《纽约时报》、《大西洋月刊》的专栏，或一位你尊重的作者的作品。留意：

• 句子的长度和结构各不相同
• 节奏主要靠逗号控制，破折号很少出现，只有在出现时才承载重要作用
• 具体胜过抽象（姓名、数字、地点或具体细节）
• 文风有鲜明立场，不是试图取悦所有人
• 形容词经过精心挑选，而不是堆砌

然后读读自己的文案。如果差距一目了然，文案就还需要再打磨一遍。

文案直觉检查

发布任何文案前，先问问自己：

“如果我把这段话大声读出来，听起来像是一个人在说话，还是像一个大模型在努力把话说得很漂亮？”

如果是后者，最常见的问题就是破折号、句子节奏和陈词滥调。修正这三点，文案通常就会变得像人真正会写出来的样子。

---

根据上下文调整组件

同一类型的组件应根据所在位置和用途呈现不同样式。电商网站上的“卡片”和仪表板上的“卡片”是截然不同的设计，只是恰好共用一个名称。

原则

在为任何组件设置样式之前，先问：“这个组件在这里起什么作用？”——而不是“卡片／按钮／表格应该是什么样子？”

上下文决定：

• 边框处理方式（无边框、低调、醒目）
• 内边距密度（紧凑、标准、宽松）
• 悬停行为（无、轻微上浮、颜色变化、展开）
• 内容布局（垂直、水平、图片优先、文本优先）
• 视觉权重（背景、阴影、边框、扁平）

卡片变体

商品卡片（电商）： 图片占主导（卡片高度的 60-70%）。内边距紧凑。价格在视觉上突出。悬停时显示快速添加或尺码选择器。圆角半径应符合品牌个性。

统计卡片（仪表板）： 数字是视觉焦点——字号大、字重粗，也可以根据状态着色。内边距紧凑。可选配迷你趋势图或趋势指示器。无需悬停效果。装饰尽量简洁；数据本身就是设计。

个人资料卡片（社交／团队目录）： 以头像为主。可以采用水平布局（左侧头像，右侧信息）。操作按钮内联排列（发送消息、关注）。采用更温暖、更个性化的样式——可以使用低调的背景色。

设置卡片（管理／偏好设置）： 以文本为主，不使用图片。与相邻卡片分组堆叠。切换开关或输入框置于右侧。装饰尽量简洁——注重功能，而非装饰。与表单样式保持一致。

内容卡片（博客、新闻、媒体）： 以标题为主。元数据（作者、日期、阅读时长）弱化显示。留白充足。悬停时可为标题添加低调的下划线，或改变背景。图片可选——并非每张内容卡片都需要缩略图。

导航变体

营销网站导航：项目精简（4-6 个链接）。通常采用透明样式，并与主视觉区域重叠。Logo 位于左侧，CTA 按钮位于右侧。为保持简洁，在平板设备上也可以折叠为汉堡菜单。

应用仪表板导航：使用固定侧边栏。图标与标签配对显示。可折叠为仅显示图标的形式，以腾出更多内容空间。清晰标示当前选中状态。各分组之间使用低调的分隔线。

文档导航：顶部栏用于显示主要章节或版本选择器。左侧边栏显示可展开／折叠的页面树。长文档可在右侧边栏设置“本页内容”。

移动应用导航：底部标签栏包含 3-5 个项目。图标搭配简短标签。当前选中状态通过颜色体现，而不只是字重变化。中间项目可以是醒目的操作项（撰写、添加）。避免在移动设备上将汉堡菜单用于主导航。

按钮变体

密集数据界面（仪表板、表格、管理后台）： 尺寸较小（text-sm, py-1.5 px-3）。可以仅显示图标，并通过工具提示说明。采用幽灵或描边样式，减少视觉干扰。成组按钮使用按钮组模式。

营销页面： 尺寸较大（text-lg, py-3 px-8）。使用醒目的纯色填充。增加水平内边距以增强视觉存在感。可以添加图标或箭头。主要 CTA 必须一目了然；次要按钮则应明显弱化。

表单场景： 与输入框高度对齐。圆角半径与输入框一致。放置在表单右下方（或在移动设备上占满整行）。提交按钮设为主要按钮；取消按钮采用幽灵／纯文本样式。

破坏性操作场景： 默认弱化处理——不要使用刺眼的红色。使用低饱和度的红色文本或描边样式。悬停时或在确认对话框中，再显示完整的红色样式。绝不要让破坏性操作成为页面上视觉上最突出的元素。

表格变体

财务／数值数据： 数字右对齐，确保小数点对齐。行背景交替变化，方便快速浏览。行高紧凑。滚动时固定表头。数字列使用等宽字体或 tabular-nums 字体特性。

管理面板： 添加复选框列以支持批量选择。操作列使用图标按钮或下拉菜单。列标题支持排序。鼠标悬停时高亮行。适当时支持行内编辑。

对比表格（定价、功能）： 突出显示“推荐”列。表头行固定。功能名称放在左列。布尔型功能使用勾选／叉号图标。在移动设备上，可以在表格行与卡片布局之间切换。

组件上下文检查清单

为组件设置样式前，请先回答：

1. 此页面的信息密度如何？（稀疏／适中／密集 → 决定内边距和尺寸）
2. 此组件附近的主要用户操作是什么？（组件样式不应与主要 CTA 争抢注意力）
3. 我们确立了怎样的个性？（正式的组件与随意的组件看起来不同）
4. 这是焦点，还是配角？（主视觉组件可以添加装饰；辅助组件则应保持低调）

---

执行

视觉层级

层级是优秀 UI 的基础。用户应该能立即理解什么最重要。

层级工具箱

建立层级有三个主要工具：

1. 尺寸 — 较大的元素更引人注目
2. 字重 — 更粗的文本显得更重要
3. 颜色 — 对比度更高的元素更加醒目

关键在于：不要只依赖尺寸。常见错误是把主要内容做得很大，把次要内容做得很小。应当结合使用这三种工具。

降低对比度以弱化视觉强调

与其放大重要内容，不如尝试降低不重要内容的突出程度：

• 次要文本使用更浅的颜色（不要缩小字号）
• 降低辅助信息的字重
• 元数据（日期、标签、计数）使用柔和的颜色

语义颜色与视觉层级

不要让语义凌驾于层级之上。很少使用的“危险”操作，如果会与主要操作争抢注意力，就不应使用亮红色。破坏性次要操作应使用柔和的红色。

/* Primary destructive action - prominent */
.btn-danger-primary { @apply bg-red-600 text-white; }

/* Secondary destructive action - muted */
.btn-danger-secondary { @apply text-red-600/70 bg-transparent; }

标签与数据

展示标签和值的组合时，数据通常比标签更重要：

• 弱化标签（使用更浅的颜色、更小的字号，或使用带字母间距的全大写文本）
• 让值自然地突出显示

<div>
  <span class="text-xs uppercase tracking-wide text-gray-500">Status</span>
  <span class="text-gray-900 font-medium">Active</span>
</div>

---

字体排印

字号比例

使用有意设定级差的模块化比例，避免随意选取字号。

建议比例（基于约 1.25 的比例系数）：

• xs：12px — 小字、说明文字
• sm：14px — 次要文本、元数据
• base：16px — 正文（可读性的最低字号）
• lg：18px — 强调正文、导语段落
• xl：20px — 小标题
• 2xl：24px — 章节标题
• 3xl：30px — 页面标题
• 4xl：36px — 主视觉文本
• 5xl+：48px+ — 展示文本、营销文案

行高

字号越大，行高应越小：

• 小号文本（12-14px）：1.5-1.75（需要更多留白）
• 正文（16-18px）：1.5-1.65
• 标题（24px+）：1.2-1.35（更紧凑的行高显得更精致）

字母间距

• 全大写文本：增加 0.05-0.1em 的字距（大写字母需要更多空间）
• 大号标题：可考虑略微缩小字距（-0.02em）
• 正文：保持默认值

字重策略

避免使用过多字重，选择 2-3 种：

• 常规（400）：正文
• 中等（500）：强调内容、UI 元素
• 半粗体／粗体（600-700）：标题、强强调内容

UI 文本使用中等字重（500），通常比直接加粗显得更精致。

行长

理想的阅读行长：每行 45-75 个字符。对于 16px 字号，大约为 20-35em 或 320-560px。

.prose { max-width: 65ch; } /* ch unit = width of '0' character */

---

颜色

构建调色板

每种颜色都需要一整套色阶（通常为 9-10 个）：

• 50-100：背景、淡色填充
• 200-300：边框、禁用状态
• 400-500：图标、次要文本
• 600-700：主要文本、按钮
• 800-900：标题、高强调文本

使用 HSL 定义颜色

HSL（色相、饱和度、亮度）更直观，适合构建调色板：

/* Base color */
--primary-600: hsl(220, 65%, 50%);

/* Lighter (increase lightness, slightly decrease saturation) */
--primary-100: hsl(220, 60%, 95%);

/* Darker (decrease lightness, can increase saturation slightly) */
--primary-800: hsl(220, 70%, 30%);

关键在于：色相会影响感知亮度。相同亮度下，黄色看起来比蓝色更亮。请相应地调整。

UI 状态颜色

• 悬停：加深一个色阶（500 → 600），或将亮度降低 5-10%
• 激活／按下：再加深一个色阶（600 → 700）
• 禁用：大幅降低饱和度，并提高亮度
• 焦点：使用环形边框／轮廓，不要改变元素的颜色

灰色并非真正的灰色

为灰色增添一丝色彩，让它显得温暖或冷峻：

• 暖灰色：加入少许黄色／橙色（更适合友好、亲切的 UI）
• 冷灰色：加入少许蓝色（更适合专业、技术类 UI）

/* Cool gray (slight blue) */
--gray-600: hsl(215, 15%, 40%);

/* Warm gray (slight yellow) */
--gray-600: hsl(40, 10%, 40%);

无障碍颜色对比度

• 正文：对比度至少为 4.5:1（WCAG AA）
• 大号文本（18px+ 粗体或 24px+）：对比度至少为 3:1
• UI 组件：与相邻颜色的对比度至少为 3:1
• 不要只依赖颜色：同时使用图标、文本或图案

不要使用纯黑色

纯黑色（#000）显得生硬、不自然。改用非常深的灰色：

/* Too harsh */
color: #000;

/* Better - dark but not absolute */
color: #1a1a1a; /* or hsl(0, 0%, 10%) */

---

间距

间距比例

使用以基本单位（通常为 4px 或 8px）为基准的一致比例：

4, 8, 12, 16, 24, 32, 48, 64, 96, 128...

避免使用 13px 或 27px 这类随意的数值。约束有助于保持一致性。

间距关系

• 相关项：间距更小（8-12px）
• 成组但彼此独立的项：中等间距（16-24px）
• 不同区块：更大的间距（32-64px）

原则：距离近意味着彼此相关。将相关项紧密分组；将无关项明确分隔。

从留白过多开始

删减留白比之后再增加容易。先留出充足空间，再仅在必要时缩小间距。大多数设计都过于拥挤，而不是过于宽松。

内边距一致性

按钮和输入框应保持一致的内部比例：

• 水平内边距：垂直内边距的 1.5-2 倍
• 不同尺寸之间保持纵横比

/* Small */
.btn-sm { @apply px-3 py-1.5; }

/* Medium */
.btn-md { @apply px-4 py-2; }

/* Large */
.btn-lg { @apply px-6 py-3; }

---

布局

不要铺满整个宽度

在大屏幕上，内容不应从一边延伸到另一边。使用最大宽度限制：

.container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1rem;
}

网格并非总是最佳选择

并非所有内容都需要 12 列网格。简单布局通常采用以下方式效果更好：

• 最大宽度容器
• 使用 Flexbox 对齐
• 按内容自然排列

给元素留出呼吸空间

过于紧凑的布局显得廉价。为以下元素增加充足的内边距：

• 卡片和面板（至少 24-32px）
• 区块（垂直方向 48-96px）
• 页面边距（移动端为 16-24px，桌面端更大）

对齐方式

• 大多数文本左对齐（更易浏览）
• 简短标题和 CTA 居中对齐（更醒目）
• 表格中的数字右对齐（便于小数点对齐）

---

移动优先的响应式设计

为什么要移动优先

从移动端布局开始，再针对更大的屏幕增加复杂度。优点：

• 迫使你优先安排内容
• 基础样式更简单
• 渐进增强（适用于所有屏幕，在更大的屏幕上体验更佳）

断点策略

不要针对特定设备进行设计。使用基于内容的断点：

• 在布局出现问题时添加断点，而不是使用随意设定的屏幕尺寸
• 常见范围：约 640px（sm）、约 768px（md）、约 1024px（lg）、约 1280px（xl）

移动优先模式

从简单开始，逐步增强：

/* Mobile: stack vertically */
.card-grid {
  display: grid;
  gap: 1rem;
}

/* Tablet+: 2 columns */
@media (min-width: 768px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Desktop: 3 columns */
@media (min-width: 1024px) {
  .card-grid { grid-template-columns: repeat(3, 1fr); }
}

触控目标

移动端按钮和交互元素需要足够大的点击目标：

• 最小尺寸：44x44px（Apple HIG）或 48x48px（Material）
• 为较小的元素增加内边距，扩大点击区域，同时避免视觉上显得臃肿

字体排版缩放

在移动端缩小标题字号——空间更少，不必追求夸张效果：

h1 {
  font-size: 1.875rem; /* 30px mobile */
}

@media (min-width: 768px) {
  h1 { font-size: 2.5rem; } /* 40px tablet+ */
}

@media (min-width: 1024px) {
  h1 { font-size: 3rem; } /* 48px desktop */
}

---

深度与阴影

阴影可营造深度感并区分不同层级。应有意识地使用：

阴影层级系统

为不同层级建立一套阴影比例：

• sm：轻微阴影，用于卡片和轻微抬升效果
• md：默认阴影，用于下拉菜单和弹出层
• lg：明显阴影，用于模态框和对话框
• xl：戏剧化效果，很少需要

自然的阴影方向

光线来自上方。阴影应：

• 向下投射（Y 轴偏移为正值）
• 略微扩散（模糊半径）
• 使用半透明黑色，而不是灰色

/* Natural shadow */
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);

/* Unnatural (shadow going up) - avoid */
box-shadow: 0 -4px 6px rgb(0 0 0 / 0.1);

组合阴影

多层阴影看起来更真实：

/* Two shadows: soft ambient + sharper direct */
box-shadow:
  0 1px 3px rgb(0 0 0 / 0.1),
  0 10px 20px rgb(0 0 0 / 0.05);

注：如果你的设计系统不使用阴影，可以用边框或背景色差异来营造分隔效果。

---

图片和图标

图标尺寸

图标应与相邻文本保持协调：

• 对于行内图标：略小于文本行高
• 对于独立图标：尺寸应与触控目标成比例

<button class="flex items-center gap-2">
  <svg class="w-5 h-5">...</svg>
  <span class="text-base">Save</span>
</button>

图标描边粗细

较细的描边显得更精致，较粗的描边显得更亲切：

• 1.5-2px：现代、优雅
• 2-2.5px：均衡、通用
• 3px+：醒目、活泼

描边粗细应与排版字重相匹配。

---

空状态

不要让空状态一片空白。它们是一个机会：

• 说明这里会显示什么
• 引导用户采取行动
• 使用插图或图标，让空白区域显得更柔和

<div class="text-center py-12">
  <svg class="mx-auto h-12 w-12 text-gray-400">...</svg>
  <h3 class="mt-2 text-sm font-medium text-gray-900">No projects</h3>
  <p class="mt-1 text-sm text-gray-500">Get started by creating a new project.</p>
  <button class="mt-4">Create Project</button>
</div>

---

深色模式设计

深色模式不只是反转颜色，而是需要采用不同的设计方式：

降低对比度，而非反转颜色

• 深色背景上不要使用纯白色文本——过于刺眼。请使用 gray-100 或 gray-200
• 不要使用纯黑色背景——请使用 gray-900 或 gray-950（例如 #0f172a）
• 减少阴影的立体效果——阴影在深色背景上不太明显；改用细微边框或更浅的背景

颜色调整

/* Light mode */
--bg-primary: #ffffff;
--text-primary: #111827;    /* gray-900 */
--text-secondary: #6b7280;  /* gray-500 */

/* Dark mode - not just inverted */
--bg-primary: #0f172a;      /* slate-900 */
--text-primary: #f1f5f9;    /* slate-100 */
--text-secondary: #94a3b8;  /* slate-400 */

饱和度调整

颜色在深色背景上看起来更鲜艳。深色模式下，略微降低主色的饱和度，避免给用户造成过强的视觉刺激。

表面层级

使用更浅的表面（而非阴影）来表示层级：

• 基础层：bg-gray-900
• 凸起卡片：bg-gray-800
• 模态框/下拉菜单：bg-gray-700

---

表单设计模式

表单是用户完成工作的地方。让操作轻松省力：

输入框样式

/* Well-designed input */
.input {
  @apply w-full px-3 py-2
         text-gray-900 placeholder-gray-400
         bg-white border border-gray-300 rounded-lg
         focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
         transition-shadow duration-150;
}

标签位置

• 对于大多数表单，将标签放在输入框上方（而非同行），便于快速浏览
• 只有在空间极其有限时才使用浮动标签
• 必填标记：在标签后添加 *，不要放在标签前

错误状态

• 将边框改为 border-red-500
• 在输入框内（右侧）添加错误图标
• 在输入框下方显示错误消息，使用 text-red-600 text-sm
• 不要只依赖颜色——还要添加图标或文本

字段分组

<fieldset class="space-y-4">
  <legend class="text-sm font-medium text-gray-700">Billing Address</legend>
  
</fieldset>


<fieldset class="space-y-4 mt-8">
  <legend class="text-sm font-medium text-gray-700">Payment Method</legend>
  
</fieldset>

按钮位置

• 主要操作放在右侧（表单中放在右下角）
• 次要/取消操作放在左侧，视觉权重较低
• 破坏性操作应要求用户确认

---

对比度之外的无障碍设计

无障碍设计体现设计质量，而不是打勾了事：

焦点状态

**每个可交互元素都需要清晰可见的焦点状态。**移除轮廓线时，必须提供替代样式：

/* Bad - removes accessibility */
:focus { outline: none; }

/* Good - replaces with visible ring */
:focus {
  outline: none;
  ring: 2px;
  ring-color: blue-500;
  ring-offset: 2px;
}

/* Tailwind shorthand */
.btn { @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2; }

动效敏感性

遵循 prefers-reduced-motion：

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

可交互元素尺寸

• 最小触控目标：44x44px（推荐 48x48px）
• 可点击元素之间应有足够的间距（至少 8px）
• 按钮中的文本应足够大——至少 14px

语义化 HTML

• 操作使用 <button>，导航使用 <a>
• 使用标题层级（h1 → h2 → h3），不要跳级
• 使用 <nav>、<main>、<aside>、<footer> 地标
• 当视觉上下文不足以说明含义时，添加 aria-label

---

细微动画与过渡效果

动效应自然，不要分散注意力：

时长原则

• 微交互：100-200ms（悬停、焦点、切换）
• 短过渡：200-300ms（下拉菜单、工具提示）
• 较长过渡：300-500ms（模态框、页面过渡）
• UI 动效不要超过 500ms——否则会让人感觉迟缓

缓动函数

/* Enter: start fast, end slow (ease-out) */
.dropdown-enter { transition: all 200ms ease-out; }

/* Exit: start slow, end fast (ease-in) */
.dropdown-exit { transition: all 150ms ease-in; }

/* UI interactions: smooth (ease-in-out) */
.btn { transition: all 150ms ease-in-out; }

动画内容

可以添加动画：

• 悬停时的背景颜色变化
• 用于强调的变换（缩放、平移）
• 出现/消失时的透明度变化
• 立体效果变化时的盒阴影

不要添加动画：

• 宽度/高度变化（会导致布局偏移——改用变换：scale）
• 任何会触发布局重新计算的内容
• 同时为过多元素添加动画

悬停反馈

/* Subtle but noticeable */
.card {
  @apply transition-all duration-150 ease-in-out
         hover:shadow-md hover:-translate-y-0.5;
}

.btn {
  @apply transition-colors duration-150
         hover:bg-blue-600;
}

---

设计审核清单

使用此清单检查任何界面：

个性与意图

• 是否经过有意识的设计选择，确定了设计个性，而非沿用默认设置？
• 配色是否符合产品领域和受众？
• 单看设计，别人能否看出这是哪类产品？
• 这个设计看起来是经过精心设计的，还是由默认样式拼凑而成的？
• 别人会猜这是 AI 生成的吗？如果会，最缺乏特色的元素是什么？

文案

• 大声读出来，听起来像真人说的话，还是像模型在努力让表达显得精致？
• 每段超过一个 em dash？请改用逗号或句号。
• 有没有“这不只是 X，而是 Y”／“无论你是 X 还是 Y”／“从 X 到 Y”这样的句式？请删掉或改写。
• 是否删掉了空洞的强调词（“真正地”“无缝地”“令人难以置信地”）和陈词滥调（“颠覆性”“尖端”）？
• 句子长度是否有所变化，还是全都差不多长？
• CTA 是否使用真实的动词（“查看定价”），而非营销话术（“释放潜力”）？

层级

• 能否在 2 秒内找到主要操作？
• 主要、次要和第三级元素之间是否有明确的视觉区分？
• 标签是否比对应的值更低调？

排版

• 是否使用一致的字号比例，没有随意设定的字号？
• 行长是否限制在 45-75 个字符？
• 标题行高是否更紧凑，正文行高是否更舒展？

颜色

• UI 中是否没有纯黑（#000）或纯白（#fff）？
• 灰色是否带有细微的色调倾向（暖色或冷色）？
• 所有文本是否都符合 WCAG AA 对比度标准（正文 4.5:1，大号文本 3:1）？

间距

• 是否使用一致的间距比例？
• 相关元素是否紧密分组，各个版块之间是否清晰分隔？
• 卡片和版块的内边距是否充足？

组件

• 组件是否根据具体情境设计样式，而非套用通用样式？
• 卡片、按钮和导航的样式是否会根据出现位置而变化？

响应式设计

• 是否能在 320px 宽的屏幕上正常使用？
• 移动端的触控目标是否至少为 44x44px？
• 字体大小是否能恰当缩放？

无障碍

• 所有交互元素是否都有清晰可见的焦点状态？
• 是否避免仅靠颜色传达含义？
• HTML 结构是否符合语义？

---

快速参考：常见错误

1. 字号过多 — 坚持使用既定比例
2. 层级之间对比不足
3. 间距过于局促 — 拿不准时就加大间距
4. 纯黑文本 — 改用深灰色
5. 边框过多 — 试试用间距和背景色代替
6. 间距不一致 — 严格遵循既定比例
7. 从桌面端开始设计 — 先做移动端，再逐步增强
8. 数值随意设定 — 每个数值都应来自一套系统
9. 移除焦点轮廓 — 应替换，而不是移除
10. 动画过多 — 微妙胜过炫目
11. 默认使用紫蓝渐变 — 根据领域和受众选择颜色
12. 所有地方都用同一种卡片样式 — 根据情境调整组件
13. 选色没有明确目的 — 运用色彩理论，而非沿用默认设置
14. 所有产品都套用 SaaS 模板 — 根据内容类型匹配布局
15. 尚未理解内容就选择布局 — 应由内容决定布局，而非反过来