# 设计UI

## 规则（Rules）

# UI设计规范

## 1. 画风一致

UI风格必须与画风指南一致。

✅ 画风指南"二次元" → UI用圆角、明亮配色、卡通图标
❌ 画风指南"二次元" → UI用直角、暗黑配色、拟物图标

## 2. 规范统一

所有界面必须遵循统一的色彩体系、字体规范和间距规范。

✅ 按钮主色=#1890ff，字号=14px，间距=8px倍数
❌ 每个页面用不同颜色和字号

## 3. 组件复用

相同功能的UI组件必须复用，禁止重复造轮子。

✅ 使用统一的Button组件
❌ 每个页面写不同的按钮样式

## 方法（Methods）

# UI设计方法

## 步骤

### 1. 分析需求
分析画风指南和需求文档，确定设计方向。

### 2. 制定色彩体系
定义：主色、辅色、成功色、警告色、错误色、文字色、背景色。

### 3. 制定字体规范
定义：正文字号、标题字号、行高、字重。

### 4. 制定间距规范
定义：基础间距（通常为8px的倍数）、内边距、外边距。

### 5. 设计组件库
定义常用组件：按钮、输入框、表格、弹窗、导航等。

### 6. 输出规范文档
输出UI设计规范文档。

## 技巧（Tips）

# UI设计技巧

## 1. 8px网格

使用8px作为基础间距单位，所有间距都是8的倍数，保持视觉一致性。

## 2. 常见问题

| 问题 | 原因 | 解决 |
|------|------|------|
| UI与画风不搭 | 未参考画风指南 | 先读画风指南再设计 |
| 组件风格不统一 | 缺乏设计规范 | 先制定规范再设计组件 |
| 间距混乱 | 未使用统一间距系统 | 使用8px网格 |