16-mini-program-ui.md 6.6 KB

小程序 UI 设计规范

1. 设计原则

1.1 核心原则

  • 简洁直观:界面简洁,操作路径短,减少用户认知负担
  • 一致性:保持视觉和操作逻辑的一致性
  • 响应迅速:页面加载和交互反馈及时
  • 易用性:符合微信小程序设计规范,降低学习成本

1.2 适配原则

  • 支持 iOS 和 Android 双平台
  • 适配不同屏幕尺寸(iPhone SE 到 iPad)
  • 考虑深色模式适配

2. 视觉规范

2.1 色彩系统

主色调

  • 品牌主色:#1890ff(蓝色)
  • 辅助色
    • 成功:#52c41a(绿色)
    • 警告:#faad14(黄色)
    • 错误:#ff4d4f(红色)
    • 信息:#1890ff(蓝色)

中性色

  • 文字色
    • 主要文字:#262626
    • 次要文字:#595959
    • 置灰文字:#8c8c8c
    • 辅助文字:#bfbfbf
  • 背景色
    • 页面背景:#f5f5f5
    • 卡片背景:#ffffff
    • 分割線:#e8e8e8

2.2 字体规范

字体家族

  • iOS:-apple-system-font, Helvetica Neue
  • Android:Roboto, Helvetica Neue

字体大小

  • 标题:18px(font-size: 36rpx
  • 正文:16px(font-size: 32rpx
  • 辅助文字:14px(font-size: 28rpx
  • 说明文字:12px(font-size: 24rpx

字重

  • 标题:600(中等)
  • 正文:400(常规)
  • 强调:500(中等)

2.3 间距规范

基础间距

  • 8rpx(4px)
  • 16rpx(8px)
  • 24rpx(12px)
  • 32rpx(16px)
  • 48rpx(24px)
  • 64rpx(32px)

组件间距

  • 卡片内边距:32rpx
  • 列表项间距:24rpx
  • 按钮间距:32rpx
  • 表单间距:48rpx

3. 组件规范

3.1 按钮规范

主要按钮

.button-primary {
  background-color: #1890ff;
  color: #ffffff;
  border-radius: 8rpx;
  padding: 24rpx 48rpx;
  font-size: 32rpx;
  font-weight: 500;
}

次要按钮

.button-secondary {
  background-color: #ffffff;
  color: #1890ff;
  border: 2rpx solid #1890ff;
  border-radius: 8rpx;
  padding: 24rpx 48rpx;
  font-size: 32rpx;
}

禁用状态

.button-disabled {
  background-color: #f5f5f5;
  color: #bfbfbf;
  border: none;
}

3.2 输入框规范

基础样式

.input-base {
  background-color: #ffffff;
  border: 2rpx solid #d9d9d9;
  border-radius: 8rpx;
  padding: 24rpx;
  font-size: 32rpx;
  color: #262626;
}

输入框状态

  • 默认:border-color: #d9d9d9
  • 聚焦:border-color: #1890ff
  • 错误:border-color: #ff4d4f
  • 禁用:background-color: #f5f5f5

3.3 卡片规范

基础卡片

.card-base {
  background-color: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  padding: 32rpx;
}

卡片类型

  • 信息卡片:白色背景,16rpx圆角
  • 操作卡片:带边框,8rpx圆角
  • 统计卡片:带图标和数字展示

3.4 列表规范

列表项样式

.list-item {
  background-color: #ffffff;
  padding: 32rpx;
  border-bottom: 2rpx solid #f0f0f0;
}

列表状态

  • 正常状态:白色背景
  • 点击状态:#f5f5f5背景
  • 加载状态:骨架屏占位

4. 页面布局

4.1 页面结构

导航栏

  • 高度:88rpx
  • 背景色:#ffffff
  • 标题:居中对齐,18px字体
  • 返回按钮:左侧44x44rpx

内容区域

  • 安全区域:左右各32rpx
  • 顶部间距:32rpx
  • 底部间距:32rpx

4.2 栅格系统

响应式布局

  • 小屏幕(≤375px):单列布局
  • 中屏幕(376-414px):双列布局
  • 大屏幕(≥415px):三列布局

间距规范

  • 组件间距:32rpx
  • 段落间距:48rpx
  • 页面间距:64rpx

5. 交互规范

5.1 触摸反馈

按钮反馈

  • 触摸时:透明度降低至0.7
  • 松开后:恢复透明度
  • 动画时长:200ms

列表反馈

  • 触摸时:背景色变为#f5f5f5
  • 松开后:恢复原色或跳转页面

5.2 加载状态

骨架屏

  • 使用灰色占位块模拟内容
  • 动画:脉冲效果
  • 时长:1.5s循环

加载更多

  • 底部显示"加载中..."提示
  • 失败后显示"点击重试"
  • 无更多数据时显示"没有更多了"

5.3 空状态

空数据

  • 居中显示图标和文字
  • 图标:系统默认空状态图标
  • 文字:14px,#8c8c8c颜色

错误状态

  • 显示错误图标
  • 提供重试按钮
  • 错误信息清晰易懂

6. 图标规范

6.1 图标尺寸

功能图标

  • 小图标:48rpx × 48rpx
  • 中图标:64rpx × 64rpx
  • 大图标:96rpx × 96rpx

头像图标

  • 小头像:96rpx × 96rpx
  • 中头像:128rpx × 128rpx
  • 大头像:160rpx × 160rpx

6.2 图标风格

线性图标

  • 线条粗细:4rpx
  • 颜色:#262626(主要)、#8c8c8c(次要)

面性图标

  • 填充颜色:#1890ff(主色)
  • 背景色:rgba(24, 144, 255, 0.1)

7. 动效规范

7.1 过渡动画

页面切换

  • 类型:滑动过渡
  • 时长:300ms
  • 缓动函数:ease-out

元素出现

  • 类型:淡入+缩放
  • 时长:200ms
  • 延迟:50ms

7.2 微交互

按钮点击

  • 缩放:0.95
  • 时长:150ms
  • 缓动函数:ease-in-out

列表滑动

  • 阻尼系数:0.8
  • 回弹距离:32rpx
  • 时长:400ms

8. 适配规范

8.1 屏幕适配

安全区域

  • iPhone X及以上:底部留空88rpx
  • Android全面屏:底部留空64rpx
  • 普通屏幕:底部留空48rpx

字体适配

  • 小屏幕:字体大小-2rpx
  • 大屏幕:字体大小+2rpx
  • 超大屏幕:字体大小+4rpx

8.2 深色模式

色彩映射

  • 背景色:#ffffff → #1a1a1a
  • 文字色:#262626 → #e6e6e6
  • 卡片背景:#ffffff → #2a2a2a
  • 分割线:#e8e8e8 → #3a3a3a

图片适配

  • 图标:使用系统图标自动适配
  • 图片:提供深色模式专用版本

9. 代码规范

9.1 CSS命名规范

BEM命名法

.block__element--modifier

示例

.button--primary {}
.card__header {}
.list-item--active {}

9.2 样式组织

文件结构

styles/
├── base/          # 基础样式
├── components/    # 组件样式
├── layouts/       # 布局样式
├── themes/        # 主题样式
└── utils/         # 工具样式

样式优先级

  1. 内联样式(谨慎使用)
  2. 页面样式
  3. 组件样式
  4. 全局样式

10. 最佳实践

10.1 性能优化

图片优化

  • 使用webp格式
  • 按需加载
  • 压缩至合适尺寸

样式优化

  • 避免深层嵌套
  • 使用transform代替position
  • 减少重排重绘

10.2 可访问性

文字可读性

  • 最小字号:24rpx
  • 行高:1.5倍
  • 对比度:WCAG 2.1 AA标准

触摸目标

  • 最小尺寸:88rpx × 88rpx
  • 间距:至少16rpx
  • 反馈:视觉+触觉