移动端UI设计规范文档
设计尺寸
- 标准设计尺寸：375×812px（iPhone X）
- 包含状态栏和导航栏等系统UI元素
- 设计稿需考虑安全区域（Safe Area）适配
- 支持1x、2x、3x倍图输出
色彩系统
主色调（Primary Colors）
- 主色（Primary-500）:
#3B82F6(蓝色-500) - 用于主要操作按钮、链接、强调元素 - 主色深（Primary-600）:
#2563EB(蓝色-600) - 用于悬停状态、激活状态 - 主色浅（Primary-400）:
#60A5FA(蓝色-400) - 用于次要按钮、背景色 - 主色极浅（Primary-50）:
#EFF6FF(蓝色-50) - 用于背景、卡片背景
辅助色（Secondary Colors）
- 成功色（Success-500）:
#10B981(绿色-500) - 用于成功状态、在线状态、完成操作 - 成功浅（Success-50）:
#ECFDF5(绿色-50) - 用于成功背景 - 警告色（Warning-500）:
#F59E0B(橙色-500) - 用于警告提示、待处理状态 - 警告浅（Warning-50）:
#FFFBEB(橙色-50) - 用于警告背景 - 错误色（Error-500）:
#EF4444(红色-500) - 用于错误提示、删除操作、失败状态 - 错误浅（Error-50）:
#FEF2F2(红色-50) - 用于错误背景 - 信息色（Info-500）:
#3B82F6(蓝色-500) - 用于信息提示、链接 - 信息浅（Info-50）:
#EFF6FF(蓝色-50) - 用于信息背景
中性色（Neutral Colors）
- 文字主色（Text-800）:
#1F2937(灰色-800) - 主要文字、标题 - 文字次色（Text-500）:
#6B7280(灰色-500) - 次要文字、正文 - 文字辅助（Text-400）:
#9CA3AF(灰色-400) - 辅助文字、时间戳、占位符 - 边框色（Border-200）:
#E5E7EB(灰色-200) - 边框、分割线 - 边框浅（Border-100）:
#F3F4F6(灰色-100) - 浅边框 - 背景色（Bg-50）:
#F9FAFB(灰色-50) - 页面背景 - 背景浅（Bg-100）:
#F3F4F6(灰色-100) - 卡片背景、输入框背景 - 卡片背景（White）:
#FFFFFF(白色) - 卡片、输入框背景
状态色（Status Colors）
- 在线状态:
#10B981(绿色-500) - 离线状态:
#9CA3AF(灰色-400) - 未读消息角标:
#EF4444(红色-500) - 进行中状态:
#F59E0B(橙色-500) - 已完成状态:
#10B981(绿色-500) - 已取消状态:
#6B7280(灰色-500)
完整色系方案
色系设计原则
本设计采用现代扁平化设计风格，以蓝色（Blue）作为主色调，配合绿色、橙色、红色等辅助色，形成和谐统一的视觉体系。色系设计遵循以下原则：
- 对比度满足可访问性标准：所有文字与背景的对比度均达到WCAG AA级标准（4.5:1以上）
- 色彩语义化：不同功能模块使用不同颜色进行区分，但保持整体协调
- 层次分明：通过颜色的深浅变化建立清晰的视觉层次
- 情感传达：蓝色传达专业、可信赖的品牌形象
功能模块配色方案
导航栏配色
- 背景色：白色
#FFFFFF - 标题文字：主文字色
#1F2937 - 图标颜色：主色
#3B82F6 - 分割线：边框色
#E5E7EB
底部标签栏配色
- 背景色：白色
#FFFFFF - 未选中图标：辅助文字色
#9CA3AF - 选中图标：主色
#3B82F6 - 未选中文字：辅助文字色
#9CA3AF - 选中文字：主色
#3B82F6
色系应用示例
按钮配色
- 主要按钮：蓝色背景
#3B82F6，白色文字#FFFFFF - 主要按钮悬停：深蓝色背景
#2563EB，白色文字 - 次要按钮：白色背景
#FFFFFF，蓝色边框#3B82F6和文字 - 成功按钮：绿色背景
#10B981，白色文字 - 警告按钮：橙色背景
#F59E0B，白色文字 - 危险按钮：红色背景
#EF4444，白色文字 - 禁用按钮：浅灰背景
#F3F4F6，辅助文字色#9CA3AF
状态配色
- 在线状态：绿色
#10B981 - 离线状态：灰色
#9CA3AF - 成功状态：绿色
#10B981+ 绿色背景#ECFDF5 - 失败状态：红色
#EF4444+ 红色背景#FEF2F2 - 进行中状态：橙色
#F59E0B+ 橙色背景#FFFBEB - 已结束状态：灰色
#6B7280 - 未读消息：红色角标
#EF4444
卡片配色
- 默认卡片：白色背景
#FFFFFF，灰色边框#E5E7EB - 强调卡片：主色背景
#EFF6FF，主色边框#3B82F6 - 成功卡片：绿色背景
#ECFDF5，绿色边框#10B981 - 警告卡片：橙色背景
#FFFBEB，橙色边框#F59E0B - 错误卡片：红色背景
#FEF2F2，红色边框#EF4444
输入框配色
- 默认状态：白色背景
#FFFFFF，边框#E5E7EB - 聚焦状态：白色背景，主色边框
#3B82F6 - 错误状态：白色背景，红色边框
#EF4444 - 禁用状态：浅灰背景
#F3F4F6，边框#E5E7EB - 占位符文字：辅助文字色
#9CA3AF
字体规范
字体家族
- iOS系统字体：-apple-system, SF Pro Text, SF Pro Display
- Android系统字体：Roboto
- 通用字体：system-ui, sans-serif
字号与行高
- 大标题（H1）: 24px / 32px, 粗体（700）, 颜色
#1F2937- 页面主标题 - 标题（H2）: 18px / 26px, 粗体（700）, 颜色
#1F2937- 卡片标题、列表标题 - 正文（Body）: 16px / 24px, 常规（400）, 颜色
#1F2937- 正文内容 - 辅助文字（Caption）: 14px / 20px, 常规（400）, 颜色
#6B7280- 辅助信息、说明文字 - 小字（Small）: 12px / 18px, 常规（400）, 颜色
#9CA3AF- 时间戳、标签、提示文字
字重规范
- 粗体（Bold）: 700 - 用于标题、强调文字
- 中等（Medium）: 500 - 用于按钮文字、标签
- 常规（Regular）: 400 - 用于正文、辅助文字
文字颜色层级
- 主要文字：
#1F2937- 标题、正文 - 次要文字：
#6B7280- 辅助说明 - 弱化文字：
#9CA3AF- 时间戳、占位符 - 强调文字：
#3B82F6- 链接、可点击文字 - 白色文字：
#FFFFFF- 深色背景上的文字
间距规范
基础间距单位
采用8px栅格系统，所有间距均为8的倍数
- 超小间距（XXS）: 4px - 紧密元素间距
- 小间距（XS）: 8px - 相关元素间距
- 默认间距（S）: 12px - 列表项间距
- 中等间距（M）: 16px - 页面边距、卡片内边距
- 大间距（L）: 24px - 区块间距
- 超大间距（XL）: 32px - 大区块间距
- 特大间距（XXL）: 48px - 页面顶部间距
具体应用
- 页面边距: 16px（左右）
- 页面顶部间距: 16px（含导航栏）
- 卡片内边距: 16px
- 卡片外边距: 12px（上下）
- 列表项内边距: 16px
- 列表项间距: 12px
- 按钮内边距: 12px（上下）× 24px（左右）
- 输入框内边距: 12px（上下）× 16px（左右）
- 元素间距: 8px（小元素）、12px（中等元素）
- 区块间距: 24px
圆角规范
圆角尺寸
- 无圆角: 0px - 分割线、边框
- 小圆角: 4px - 标签、徽章
- 默认圆角: 8px - 按钮、输入框
- 中等圆角: 12px - 卡片、消息气泡
- 大圆角: 16px - 大卡片、弹窗
- 圆形: 50% - 头像、圆形按钮
具体应用
- 卡片圆角: 12px
- 按钮圆角: 8px
- 输入框圆角: 8px
- 头像圆角: 50%（圆形）
- 消息气泡圆角: 12px（发送方右上角为4px）
- 标签圆角: 4px
- 弹窗圆角: 16px
- 底部弹出层圆角: 16px（仅顶部）
- 图片圆角: 8px
阴影规范
阴影层级
- 无阴影（Level 0）: 无 - 扁平元素
- 轻微阴影（Level 1）:
0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06)- 卡片 - 默认阴影（Level 2）:
0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06)- 悬浮卡片 - 中等阴影（Level 3）:
0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05)- 弹窗 - 强阴影（Level 4）:
0 20px 25px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.04)- 模态框
具体应用
- 卡片阴影: Level 1 -
0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06) - 悬浮阴影: Level 2 -
0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06) - 按钮阴影: Level 1 -
0 2px 4px rgba(0, 0, 0, 0.1) - 导航栏阴影:
0 1px 0 rgba(0, 0, 0, 0.05)- 轻微底部阴影 - 弹窗阴影: Level 3 -
0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05) - 底部弹出层阴影:
0 -4px 6px rgba(0, 0, 0, 0.05)- 顶部阴影
图标规范
图标库
- 推荐使用: FontAwesome 6.4.0 或更高版本
- 备选方案: Material Icons, Ionicons
图标尺寸
- 超小图标: 12px - 标签内图标
- 小图标: 16px - 按钮内图标、文字旁图标
- 默认图标: 20px - 导航栏图标、列表图标
- 中等图标: 24px - 列表项主图标、操作图标
- 大图标: 32px - 功能入口图标
- 超大图标: 48px - 空状态图标、引导页图标
图标颜色
- 默认图标: 跟随文字颜色
- 主色图标:
#3B82F6- 强调、选中状态 - 成功图标:
#10B981- 成功状态 - 警告图标:
#F59E0B- 警告状态 - 错误图标:
#EF4444- 错误状态 - 辅助图标:
#9CA3AF- 未选中、禁用状态
图标使用原则
- 语义清晰: 图标含义明确，符合用户认知
- 风格统一: 使用同一图标库，保持视觉一致性
- 大小适配: 根据使用场景选择合适尺寸
- 颜色协调: 图标颜色与整体配色方案协调
- 可点击区域: 图标按钮点击区域不小于44×44px
组件规范
按钮组件
主要按钮（Primary Button）
- 背景色：
#3B82F6 - 文字颜色：
#FFFFFF - 圆角：8px
- 内边距：12px × 24px
- 字号：16px，字重：500
- 阴影：
0 2px 4px rgba(0, 0, 0, 0.1) - 最小高度：44px
次要按钮（Secondary Button）
- 背景色：
#FFFFFF - 边框：1px solid
#3B82F6 - 文字颜色：
#3B82F6 - 其他属性同主要按钮
文字按钮（Text Button）
- 背景色：透明
- 文字颜色：
#3B82F6 - 无边框、无阴影
- 内边距：8px × 16px
输入框组件
- 背景色：
#FFFFFF - 边框：1px solid
#E5E7EB - 圆角：8px
- 内边距：12px × 16px
- 字号：16px
- 占位符颜色：
#9CA3AF - 聚焦边框：
#3B82F6 - 最小高度：44px
卡片组件
- 背景色：
#FFFFFF - 边框：1px solid
#E5E7EB（可选） - 圆角：12px
- 内边距：16px
- 阴影：
0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06)
列表项组件
- 背景色：
#FFFFFF - 内边距：16px
- 分割线：1px solid
#E5E7EB - 最小高度：60px
- 点击态：背景色
#F9FAFB
导航栏组件
- 高度：44px（不含状态栏）
- 背景色：
#FFFFFF - 标题字号：18px，字重：700
- 标题颜色：
#1F2937 - 按钮图标：20px
- 底部阴影：
0 1px 0 rgba(0, 0, 0, 0.05)
底部标签栏组件
- 高度：50px（不含安全区域）
- 背景色：
#FFFFFF - 图标尺寸：24px
- 文字字号：12px
- 未选中颜色：
#9CA3AF - 选中颜色：
#3B82F6 - 顶部阴影：
0 -1px 0 rgba(0, 0, 0, 0.05)
交互规范
点击反馈
- 按钮点击: 背景色加深10%，轻微缩放（0.98）
- 列表项点击: 背景色变为
#F9FAFB - 图标点击: 透明度降至0.6
- 最小点击区域: 44×44px
加载状态
- 加载指示器: 使用主色
#3B82F6的旋转动画 - 骨架屏: 使用
#F3F4F6背景，带有闪烁动画 - 加载文字: "加载中..."，颜色
#6B7280
空状态
- 空状态图标: 48px，颜色
#9CA3AF - 空状态文字: "暂无数据"，字号16px，颜色
#6B7280 - 空状态按钮: 次要按钮样式
错误状态
- 错误提示: 红色背景
#FEF2F2，红色文字#EF4444 - 错误图标: 红色
#EF4444，20px - 错误信息: 字号14px
动画规范
- 过渡时间: 200ms（快速）、300ms（默认）、500ms（慢速）
- 缓动函数: ease-in-out（默认）、ease-out（进入）、ease-in（退出）
- 页面切换: 300ms，从右向左滑入
- 弹窗出现: 300ms，从底部滑入 + 淡入
- 元素淡入: 200ms，opacity 0 → 1
适配规范
屏幕适配
- 设计基准: 375px（iPhone X）
- 最小支持宽度: 320px（iPhone SE）
- 最大支持宽度: 428px（iPhone 14 Pro Max）
- 适配方案: 使用相对单位（%、vw）+ 最大最小宽度限制
安全区域
- 顶部安全区域: 44px（状态栏）+ 44px（导航栏）
- 底部安全区域: 34px（iPhone X及以上）
- 使用方式: padding-bottom: env(safe-area-inset-bottom)
横屏适配
- 导航栏: 保持44px高度
- 内容区域: 使用max-width限制，居中显示
- 底部标签栏: 隐藏或调整为侧边栏
可访问性规范
颜色对比度
- 正文文字: 对比度 ≥ 4.5:1（WCAG AA级）
- 大号文字: 对比度 ≥ 3:1（18px粗体或24px常规）
- 图标: 对比度 ≥ 3:1
触摸目标
- 最小尺寸: 44×44px
- 推荐尺寸: 48×48px
- 间距: 相邻可点击元素间距 ≥ 8px
文字可读性
- 最小字号: 12px
- 推荐正文字号: 16px
- 行高: 1.5倍字号（最小）
- 段落间距: 1em
设计资源
设计工具
- Figma: 推荐用于UI设计和原型制作
- Sketch: 备选设计工具
- Adobe XD: 备选设计工具
图片资源
- Unsplash: unsplash.com - 高质量免费图片
- Pexels: pexels.com - 免费图片和视频
- Pixabay: pixabay.com - 免费图片
图标资源
- FontAwesome: fontawesome.com
- Material Icons: fonts.google.com/icons
- Ionicons: ionic.io/ionicons
配色工具
- Coolors: coolors.co - 配色方案生成
- Adobe Color: color.adobe.com - 配色轮工具
- Contrast Checker: webaim.org/resources/c… - 对比度检查
设计检查清单
视觉设计检查
- 颜色使用符合设计规范
- 字体大小和字重正确
- 间距符合8px栅格系统
- 圆角尺寸统一
- 阴影层级合理
- 图标大小和颜色一致
交互设计检查
- 所有可点击元素有明确反馈
- 点击区域不小于44×44px
- 加载状态有明确提示
- 错误状态有清晰说明
- 空状态有友好提示
适配检查
- 在不同屏幕尺寸下显示正常
- 安全区域适配正确
- 横屏显示合理
- 文字不会被截断
可访问性检查
- 颜色对比度符合WCAG标准
- 文字大小可读
- 触摸目标足够大
- 支持屏幕阅读器
