01-ME - 页面设计规范#
设计原则#
- 简洁性: 保持界面简洁，避免过度设计
- 一致性: 保持设计风格和交互方式的一致性
- 可访问性: 确保所有用户都能方便使用
- 响应式: 支持多种设备和屏幕尺寸
颜色规范#
主色调#
- 主色: #3B82F6 (蓝色)
- 辅助色: #10B981 (绿色)
- 警告色: #F59E0B (橙色)
- 错误色: #EF4444 (红色)
- 文本色: #1F2937 (深灰)
背景色#
- 浅背景: #F3F4F6 (浅灰)
- 深背景: #111827 (深黑)
- 卡片背景: #FFFFFF (白色)
字体规范#
字体家族#
- 中文: “PingFang SC”, “Microsoft YaHei”, sans-serif
- 英文: “Inter”, “Segoe UI”, sans-serif
字体大小#
- 标题: 24px (H1), 20px (H2), 16px (H3)
- 正文: 14px
- 辅助文本: 12px
间距规范#
内边距#
- 小间距: 8px
- 中间距: 16px
- 大间距: 24px
- 超大间距: 32px
外边距#
- 小间距: 8px
- 中间距: 16px
- 大间距: 24px
- 超大间距: 32px
布局规范#
容器宽度#
- 最大宽度: 1200px
- 标准宽度: 960px
- 窄宽度: 640px
组件规范#
- 尺寸: 40px × 32px (小), 48px × 40px (中), 56px × 48px (大)
- 圆角: 6px
- 阴影: 0 1px 3px rgba(0,0,0,0.1)
输入框#
- 尺寸: 320px × 40px
- 圆角: 6px
- 边框: 1px solid #D1D5DB
- 圆角: 8px
- 阴影: 0 1px 3px rgba(0,0,0,0.1)
- 内边距: 24px
响应式规范#
- 移动端: < 768px
- 平板: 768px - 1024px
- 桌面: > 1024px
响应式布局#
- 移动端: 单列布局
- 平板: 双列布局
- 桌面: 三列布局
图标规范#
图标尺寸#
- 小: 16px × 16px
- 中: 24px × 24px
- 大: 32px × 32px
图标颜色#
- 主要: #3B82F6
- 次要: #6B7280
- 警告: #F59E0B
- 错误: #EF4444
- 成功: #10B981
动画规范#
动画时长#
- 快速: 150ms
- 标准: 250ms
- 慢速: 350ms
动画曲线#
- 默认: ease-in-out
- 快速: cubic-bezier(0.4, 0, 0.2, 1)
无障碍规范#
对比度#
- 文本对比度: ≥ 4.5:1
- 大文本对比度: ≥ 3:1
键盘导航#
设计资源#
设计工具#
设计规范文档#
更新日志#