🎨 UI/UX 设计规范
一、设备适配规范
1.1 屏幕尺寸标准
| 平台 | 设计尺寸 | 倍率 | 物理分辨率 | PPI | 备注 |
|---|---|---|---|---|---|
| iPhone 15 | 393×852pt | @3x | 1179×2556px | 460 | 圆角半径8pt |
| Android | 360×800dp | @2x | 720×1600px | 320 | 状态栏高度24dp |
| Web桌面端 | 1440×900px | 1× | 1440×900px | 96 | 安全边距120px |
1.2 响应式断点
- Mobile (<768px)：单列布局/按钮高度≥44pt/字体基准14px
- Tablet (768-1024px)：两列网格/边距≥32px/字体基准15px
- Desktop (>1024px)：12列网格/最大宽度1440px/字体基准16px
二、色彩系统规范
2.1 标准色板
| 类型 | 色值 | 使用场景 | 状态变化 |
|---|---|---|---|
| Primary | #1890FF | 主要按钮/重要操作 | Hover:#1478D6 |
| Secondary | #FFC53D | 次要按钮/辅助操作 | Active:#FFB022 |
| Error | #FF4D4F | 错误提示/删除操作 | Disabled:40%透明度 |
2.2 中性色阶梯
| 层级 | 色值 | 透明度 | 应用场景 |
|---|---|---|---|
| L1 | #333333 | 87% | 主标题/重要文字 |
| L3 | #999999 | 60% | 辅助文字/说明文本 |
| L5 | #E5E5E5 | 12% | 分割线/边框 |
三、图片资源规范
3.1 尺寸标准
| 类型 | 比例 | 最小尺寸 | 压缩要求 | 格式建议 |
|---|---|---|---|---|
| 商品主图 | 1:1 | 800×800px | JPG质量≥80% | WebP |
| 详情Banner | 16:9 | 1920×1080px | 文件≤500KB | JPG |
| 用户头像 | 圆形 | 256×256px | PNG-24透明背景 | PNG |
3.2 Logo应用
- 最小显示尺寸：48×48px（移动端）/ 160×40px（Web端）
- 安全间距：≥Logo高度的50%
- 特殊场景：深色背景需提供反白版本
四、文字排版系统
4.1 字体阶梯
| 层级 | iOS (SF Pro) | Android (Roboto) | Web (System UI) |
|---|---|---|---|
| 标题1 | 32pt Bold | 32sp Bold | 32px Bold |
| 正文 | 16pt Regular | 16sp Regular | 16px Regular |
| 注释 | 12pt Light | 12sp Light | 12px Light |
4.2 行高准则
- 短文本：1.5×字号（如16px文字行高24px）
- 长段落：1.8×字号（增强可读性）
- 标题组：1.2×字号（紧凑层级关系）
五、核心组件规范
5.1 按钮状态
| 状态 | 样式变化 | 动效时长 |
|---|---|---|
| Normal | 100%饱和度 | - |
| Hover | 亮度增加10%+1px阴影 | 200ms |
| Pressed | 饱和度降低15%+轻微缩小(95%) | 100ms |
| Disabled | 40%透明度 | - |
5.2 表单控件
- 输入框：高度44px/圆角4px/内边距12px
- 单选/多选：选中状态使用主色填充
- 错误提示：即时显示在字段下方，使用#FF4D4F色
六、动效设计原则
6.1 基础参数
| 类型 | 持续时间 | 缓动曲线 | 应用场景 |
|---|---|---|---|
| 微交互 | 200-300ms | ease-out | 按钮点击/开关切换 |
| 页面过渡 | 400-500ms | cubic-bezier(0.4,0,0.2,1) | 路由跳转/模态框弹出 |
| 加载动画 | 800-1200ms | linear | 数据加载/进度指示 |
6.2 特殊场景
- 骨架屏：波动幅度≤10%原尺寸
- 无限滚动：使用视差效果（0.8x速度）