前端UI设计规范

技能文档

---
name: qianduan-ui-guifan
description: 面向AI编码场景的前端UI设计规范体系，覆盖视觉层次、排版系统、色彩理论、间距节奏、交互模式、响应式布局、无障碍设计和动效规范等核心领域。当用户需要前端UI设计指导、建立设计规范、优化界面视觉或审查UI实现质量时触发。触发词：UI规范、前端设计规范、UI设计系统、界面规范、视觉规范、前端美化。
title: 前端UI设计规范
category: 开发工具
---

# 前端 UI 设计规范

本规范为 AI 编码场景下的前端界面设计提供系统化指导，确保输出的 UI 专业、一致、可用。

## 一、视觉层次

### 层次建立原则

用户扫视页面时，视觉层次决定信息获取效率。

| 层次 | 手段 | 应用场景 |
|------|------|---------|
| 一级 | 字号 24-32px + 高对比 | 页面标题、核心数据 |
| 二级 | 字号 18-20px + 中对比 | 区块标题、卡片标题 |
| 三级 | 字号 14-16px + 正常对比 | 正文内容 |
| 辅助 | 字号 12-13px + 低对比 | 说明文字、时间戳 |

### 对比度要求

- 正文文本：对比度 >= 4.5:1（WCAG AA）
- 大文本（>= 18px 或 bold 14px）：>= 3:1
- 交互元素：>= 3:1
- 不要仅用颜色传达信息（需配合图标/文字）

## 二、排版系统

### 字号阶梯

```css
/* 基于 1.25 倍率的字号阶梯 */
--text-xs: 12px;    /* 辅助信息 */
--text-sm: 14px;    /* 次要文本 */
--text-base: 16px;  /* 正文基准 */
--text-lg: 20px;    /* 小标题 */
--text-xl: 24px;    /* 区块标题 */
--text-2xl: 32px;   /* 页面标题 */
--text-3xl: 40px;   /* 数据大屏 */
```

### 行高规则

| 文本类型 | 行高 | 说明 |
|---------|------|------|
| 标题 | 1.2-1.3 | 紧凑、有力 |
| 正文 | 1.5-1.75 | 舒适阅读 |
| 多行段落 | 1.6-1.8 | 中文需更大行高 |

### 段落间距

- 段间距 = 行高 × 0.75（约 8-12px）
- 标题上方间距 > 标题下方间距（标题与内容更亲近）
- 使用 8px 网格系统：所有间距为 8 的倍数

## 三、色彩系统

### 语义色

```css
--color-primary: #2563EB;     /* 主色 - 操作、链接 */
--color-success: #16A34A;     /* 成功状态 */
--color-warning: #EAB308;     /* 警告状态 */
--color-danger: #DC2626;      /* 错误/危险 */
--color-info: #0891B2;        /* 信息提示 */

/* 中性色 */
--color-text-1: #111827;      /* 标题 */
--color-text-2: #4B5563;      /* 正文 */
--color-text-3: #9CA3AF;      /* 辅助 */
--color-border: #E5E7EB;      /* 边框 */
--color-bg-1: #FFFFFF;        /* 主背景 */
--color-bg-2: #F9FAFB;        /* 次背景 */
```

### 配色原则

1. **60-30-10 法则**：60% 主色（背景）、30% 辅色（卡片/区块）、10% 强调色（按钮/链接）
2. **同色系渐变**：主色的 50-900 色阶用于 hover/active/disabled 等状态
3. **暗色模式**：背景用深灰（#111827）而非纯黑，文字用浅灰（#F9FAFB）而非纯白

## 四、间距与布局

### 8px 网格

所有间距、尺寸使用 8 的倍数：

```
4px  - 极小间距（图标与文字间）
8px  - 小间距（列表项内）
16px - 中间距（卡片内边距）
24px - 大间距（区块间）
32px - 超大间距（页面区块分隔）
48px - 页面级分隔
```

### 响应式断点

```css
--breakpoint-sm: 640px;   /* 手机横屏 */
--breakpoint-md: 768px;   /* 平板 */
--breakpoint-lg: 1024px;  /* 小屏电脑 */
--breakpoint-xl: 1280px;  /* 标准屏幕 */
--breakpoint-2xl: 1536px; /* 大屏 */
```

### 容器最大宽度

- 移动端：100% - 32px（两侧各16px padding）
- 平板：max-width 768px，居中
- 桌面：max-width 1200px，居中

## 五、交互模式

### 按钮层级

| 层级 | 样式 | 用途 |
|------|------|------|
| 主要 | 实心填充 + 主色 | 页面核心操作（每页最多1个） |
| 次要 | 描边 + 主色文字 | 次要操作 |
| 文字 | 无框 + 主色文字 | 低优先级操作 |
| 危险 | 实心填充 + 红色 | 删除、不可逆操作 |

### 反馈时机

- **点击反馈**：< 100ms（视觉变化）
- **加载反馈**：> 300ms 显示 loading
- **成功反馈**：操作完成后 Toast 提示 2-3 秒
- **错误反馈**：立即显示，需用户手动关闭

### 表单规范

- 标签在输入框上方（非浮动标签）
- 必填项用 * 标注
- 错误信息在输入框下方，红色文字
- 提交按钮在表单底部
- 密码框提供显示/隐藏切换

## 六、无障碍设计

### 必须遵守

- [ ] 所有图片有 alt 属性
- [ ] 表单元素有 label 关联
- [ ] 焦点顺序符合逻辑
- [ ] 焦点状态清晰可见（outline）
- [ ] 可点击区域 >= 44×44px
- [ ] 不依赖纯颜色传达信息
- [ ] 动画可关闭（prefers-reduced-motion）

## 七、动效规范

### 时长标准

| 类型 | 时长 | 缓动函数 |
|------|------|---------|
| 微交互（hover/toggle） | 150ms | ease-out |
| 展开/折叠 | 250ms | ease-in-out |
| 页面切换 | 300ms | ease-in-out |
| 复杂动画 | 400-500ms | cubic-bezier |

### 原则

1. **有目的**：动效传达状态变化，不是装饰
2. **快速**：不超过 500ms，避免等待感
3. **一致**：同类交互使用相同动效
4. **可访问**：尊重 `prefers-reduced-motion` 设置

如何安装此技能？

访问技能市场，点击「安装」按钮，按提示将技能包放入 AI 编程助手的 skills 目录即可。