design-guide

设计指南

全面的设计系统，确保你构建的每个 UI 在所有平台（SwiftUI、Android Studio、Web 应用）上都现代、专业且风格统一。

附带资源

此技能包含其他参考资料：

• references/color-palettes.md - 详细的配色方案、强调色选项和平台专属的颜色实现示例。选择或实现颜色时可参考。
• references/component-templates.md - 适用于 SwiftUI、Android Compose 和 React 的按钮、卡片、表单和导航即用代码模板。实现特定组件时可参考。

核心设计原则

1. 简洁极简

• 充分留白
• 避免界面杂乱
• 每个屏幕／区域只有一个主要操作
• 移除不必要的装饰元素
• 让内容有呼吸感

2. 配色方案

中性色基础：

• 使用灰色和灰白色作为基础
• 白色：#FFFFFF
• 浅灰色：#F5F5F5、#EEEEEE
• 中灰色：#9E9E9E、#757575
• 深灰色：#424242、#212121
• 慎用纯黑色：#000000

强调色：

• 为应用选择一种强调色
• 少量用于 CTA、重要操作和关键信息
• 合适的强调色选项：翡翠绿（#10B981）、靛蓝（#6366F1）、玫瑰红（#F43F5E）、琥珀色（#F59E0B）
• 切勿使用常见的紫／蓝渐变

颜色使用规则：

• 80% 中性色、15% 次级中性色、5% 强调色
• 背景：浅灰色或白色
• 文本：浅色背景上使用深灰色
• 交互元素：强调色
• 边框／分隔线：极浅灰色（#E5E5E5）

3. 间距系统（8px 网格）

始终使用 8 的倍数：

• 8px：紧凑间距（图标内边距、行内元素）
• 16px：标准间距（按钮内边距、表单字段间距）
• 24px：区域间距（卡片内部内边距）
• 32px：组件间距（卡片、区域之间）
• 48px：主要区域分隔
• 64px：屏幕级间距（外边距）

应用方式：

• 大多数容器的内边距：16px 或 24px
• 主要区域之间的外边距：32px
• 元素之间的间距：标准为 16px，紧凑组合为 8px
• 切勿使用 13px 或 27px 等任意数值

4. 字体排印

层级：

• H1：32px - 40px，加粗，少用（仅用于页面标题）
• H2：24px - 28px，半粗体（区域标题）
• H3：20px - 24px，半粗体（子区域）
• 正文：16px - 18px，常规（为确保可读性，最小为 16px）
• 小号：14px，常规（说明文字、元数据）
• 极小号：12px，常规（仅用于法律文本，少用）

字体规则：

• 每个项目最多使用 2 种字体
• 一种用于标题（可使用展示字体）
• 一种用于正文（必须易于阅读）
• 推荐搭配：
  • Inter + Inter（同一字体系列，使用不同字重）
  • SF Pro Display + SF Pro Text（Apple 平台）
  • Roboto + Roboto（Android）
  • 始终可以使用系统字体

行高：

• 标题：1.2 - 1.3
• 正文：1.5 - 1.6
• 小号文本：1.4

5. 阴影

轻柔而非厚重：

• 小阴影：0 1px 3px rgba(0,0,0,0.12)
• 中阴影：0 4px 6px rgba(0,0,0,0.1)
• 大阴影：0 10px 15px rgba(0,0,0,0.1)
• 浮动阴影：0 20px 25px rgba(0,0,0,0.1)

使用场景：

• 卡片：使用轻微阴影或边框，二者不要同时使用
• 按钮：悬停时使用非常轻微的阴影
• 模态框／对话框：中阴影
• 下拉菜单：中阴影
• **避免：**厚重的投影、内阴影、多重阴影

6. 圆角

圆角半径指南：

• 小型元素（按钮、输入框）：6px - 8px
• 卡片、容器：8px - 12px
• 大型面板：12px - 16px
• 圆形元素（头像、图标按钮）：50% 或 9999px

不要过度使用：

• 不必为所有元素添加圆角
• 以下元素可以使用直角：
  • 屏幕边缘
  • 全宽区域
  • 数据表格
  • 导航栏

7. 交互状态

每个交互元素都必须具备：

按钮：

• 默认：基础颜色、微妙的阴影
• 悬停：颜色稍深（10%），提升阴影效果
• 激活：呈现按下状态，颜色更深（20%）
• 禁用：40% 不透明度，不响应悬停，不显示指针光标
• 焦点：可见轮廓（2px 强调色，偏移 2px）

表单字段：

• 默认：浅灰色边框（#E5E5E5）
• 焦点：强调色边框（2px），移除阴影
• 错误：红色边框，下方显示错误文本
• 禁用：灰色背景，不可交互
• 有效：微妙的绿色勾号（可选）

链接：

• 默认：强调色，悬停时添加下划线
• 已访问：稍显柔和的强调色
• 切勿使用：蓝色 #0000FF（除非这是你的强调色）

卡片：

• 默认：微妙的阴影或边框
• 悬停：提升效果，阴影稍强
• 激活：立即反馈

8. 移动优先思维

始终先针对移动端设计，再逐步扩展：

• 触控目标至少为 44x44px（iOS）、48x48px（Android）
• 可点击元素之间留有充足间距（至少 8px）
• 便于拇指操作的导航（屏幕底部）
• 移动端采用单列布局
• 响应式断点：
  • 移动端：< 640px
  • 平板：640px - 1024px
  • 桌面端：> 1024px

组件模式

按钮

主按钮（主要操作）：

Background: Accent color
Text: White
Padding: 12px 24px (vertical, horizontal)
Border radius: 8px
Shadow: 0 1px 3px rgba(0,0,0,0.12)
Font: 16px, semibold
Hover: Darken 10%, lift shadow

次要按钮（替代操作）：

Background: White
Text: Accent color
Border: 1px solid accent color
Padding: 12px 24px
Border radius: 8px
Hover: Light accent background (10% opacity)

幽灵按钮（次要操作）：

Background: Transparent
Text: Dark gray
No border
Padding: 12px 24px
Hover: Light gray background

不良按钮示例：

• ❌ 渐变背景
• ❌ 一个按钮中使用多种颜色
• ❌ 内边距过小（显得拥挤）
• ❌ 没有悬停状态
• ❌ 文本过小（< 14px）

卡片

标准卡片：

Background: White
Border: 1px solid #E5E5E5 OR subtle shadow (not both)
Border radius: 12px
Padding: 24px
Margin bottom: 16px

OR

Background: White
Shadow: 0 4px 6px rgba(0,0,0,0.1)
Border radius: 12px
Padding: 24px
Margin bottom: 16px

卡片内容间距：

• 标题与副标题之间：8px
• 副标题与内容之间：16px
• 内容区块之间：24px
• 内容与操作之间：24px

不良卡片示例：

• ❌ 同时使用边框和阴影
• ❌ 阴影过重
• ❌ 内边距不一致
• ❌ 颜色过多

表单

表单字段：

Label: 14px, semibold, dark gray, margin bottom 8px
Input: 
  - Height: 44px minimum
  - Padding: 12px 16px
  - Border: 1px solid #E5E5E5
  - Border radius: 8px
  - Background: White
  - Font: 16px
  - Focus: Accent border, no shadow
  
Error state:
  - Border: Red
  - Helper text: Red, 14px, margin top 4px
  
Field spacing: 24px between fields

表单布局：

• 标签置于输入框上方（不要放在旁边）
• 清晰标示必填项
• 将相关字段分组
• 留有充足间距（至少 24px）
• 提交按钮：移动端占满宽度，桌面端使用自动宽度

不良表单示例：

• ❌ 标签放在输入框内（占位符文本不能替代标签）
• ❌ 文本过小（< 16px）
• ❌ 间距拥挤
• ❌ 没有错误状态
• ❌ 必填字段标示不清

导航

顶部导航：

Height: 64px
Background: White
Border bottom: 1px solid #E5E5E5
Padding: 0 32px (desktop), 0 16px (mobile)
Logo: 32px height
Links: 16px, medium weight, dark gray
Active link: Accent color

底部导航（移动端）：

Height: 56px
Background: White
Shadow: 0 -4px 6px rgba(0,0,0,0.1)
Icons: 24px, centered
Labels: 12px (optional)
Active: Accent color

设计质量检查清单

在认为任何 UI 已完成之前，请确认：

布局：

• 整体留白充足
• 使用 8px 网格保持间距一致
• 不杂乱、不拥挤
• 视觉层级清晰

颜色：

• 使用中性色作为基础色（灰色/白色）
• 只使用一种强调色
• 不使用渐变（除非有明确要求）
• 对比度充足（至少符合 WCAG AA）

排版：

• 层级清晰（字号 + 字重）
• 正文文本至少为 16px
• 字体系列最多使用 2 种
• 行高易于阅读

交互元素：

• 悬停状态清晰
• 激活状态清晰
• 禁用状态清晰
• 焦点状态清晰（键盘导航）

组件：

• 按钮内边距合适
• 表单标签清晰、间距合理
• 卡片使用边框或阴影，不要两者兼用
• 阴影微妙

移动端：

• 触控目标至少为 44x44px
• 在小屏幕上正常使用
• 触控区域间距充足

平台专属说明

SwiftUI

• 使用 .padding()，并采用 8px 网格中的明确数值
• 使用带十六进制初始化器的 Color，确保颜色一致
• 利用 @Environment(\.colorScheme) 支持深色模式
• 使用 SF Symbols 图标（始终保持一致）

Android Studio

• 使用 dp 单位（在 mdpi 上，1dp ≈ 1px）
• 可以使用 Material Design 3 组件，但需自定义颜色
• 使用 dimens.xml 定义间距常量
• 利用 Compose 构建现代 UI

Web（HTML/CSS/React）

• 使用 CSS 变量定义颜色和间距
• 使用移动优先的媒体查询
• 使用语义化 HTML
• 按照本指南使用 Tailwind CSS 类

应避免的反模式

绝对不要这样做：

• ❌ 到处使用彩虹渐变
• ❌ 每个元素都使用不同的颜色
• ❌ 默认使用紫色／蓝色渐变
• ❌ 使用难以辨认的小字（正文小于 16px）
• ❌ 间距不一致（随意设置数值）
• ❌ 使用厚重的阴影
• ❌ 所有元素都使用过度圆润的样式
• ❌ 缺少交互状态
• ❌ 在同一个元素上同时使用边框和阴影
• ❌ 布局杂乱，毫无留白
• ❌ 使用超过 2 种字体
• ❌ 触控目标小于 44px

快速参考

间距： 8、16、24、32、48、64px 排版： 正文至少 16px，最多使用 2 种字体 颜色： 中性色为基础色 + 一种强调色 阴影： 仅使用轻微阴影 圆角： 大多数元素使用 6-12px 交互状态： 始终包含悬停、激活、禁用和聚焦状态

创建任何 UI 组件前，务必先参考本指南。保持一致是打造专业设计的关键。