UI设计规范文档
1. 设计原则
1.1 一致性
- 保持界面元素的一致性
- 使用统一的颜色方案
- 保持字体和图标风格统一
- 统一的交互模式
1.2 简洁性
- 避免界面元素过度拥挤
- 使用清晰的视觉层次
- 突出重要信息
- 减少不必要的装饰元素
1.3 可用性
- 确保所有功能易于访问
- 提供清晰的反馈
- 保持操作流程简单直观
- 提供必要的帮助信息
2. 颜色规范
2.1 主色调
- 主色：#1890FF（蓝色）
- 辅助色：#52C41A（绿色）
- 警告色：#FAAD14（橙色）
- 错误色：#F5222D（红色）
2.2 中性色
- 标题文字：#262626
- 正文文字：#595959
- 次要文字：#8C8C8C
- 禁用文字：#BFBFBF
- 边框颜色：#D9D9D9
- 背景色：#F0F2F5
3. 字体规范
3.1 字体家族
- 中文：PingFang SC
- 英文：Helvetica Neue
3.2 字号规范
- 主标题：24px
- 次标题：20px
- 小标题：16px
- 正文：14px
- 辅助文字：12px
4. 布局规范
4.1 间距
- 页面边距：24px
- 组件间距：16px
- 内部间距：8px
4.2 栅格系统
- 使用24栅格系统
- 响应式断点：
- xs: <576px
- sm: ≥576px
- md: ≥768px
- lg: ≥992px
- xl: ≥1200px
5. 组件规范
5.1 按钮
- 主要按钮：实心背景
- 次要按钮：描边样式
- 文字按钮：纯文字样式
- 按钮高度：32px/40px
5.2 表单
- 输入框高度：32px
- 标签对齐：右对齐
- 必填项标记：红色星号
5.3 表格
- 表头背景色：#FAFAFA
- 行高：48px
- 斑马纹：隔行变色
6. 交互规范
6.1 状态反馈
- 加载状态：使用加载动画
- 成功提示：绿色对勾图标
- 错误提示：红色错误图标
- 警告提示：黄色警告图标
6.2 动画效果
- 过渡时间：0.3s
- 缓动函数：ease-in-out
- 弹窗动画：fade + slide
7. 响应式设计
7.1 移动端适配
- 优先考虑移动端体验
- 使用弹性布局
- 关键信息优先展示
- 触控区域最小44x44px
7.2 桌面端优化
