小程序 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 占位图规范

Unsplash 占位图使用

默认占位图：使用 Unsplash 提供的免费高质量图片
图片尺寸：根据组件需求选择合适的尺寸
格式：https://source.unsplash.com/{width}x{height}/?{关键词}

使用示例

头像占位图：https://source.unsplash.com/200x200/?portrait
封面占位图：https://source.unsplash.com/400x300/?nature
背景占位图：https://source.unsplash.com/800x600/?landscape
商品图片：https://source.unsplash.com/300x300/?product

关键词分类

人物：portrait, person, people, man, woman
自然：nature, landscape, mountain, forest, ocean
城市：city, building, architecture, street
抽象：abstract, pattern, texture, gradient
技术：technology, computer, phone, digital
食物：food, coffee, fruit, restaurant
商业：business, office, workspace, meeting

实现代码示例

// 头像组件
const AvatarPlaceholder = ({ size = 200 }) => {
  const placeholderUrl = `https://source.unsplash.com/${size}x${size}/?portrait`;
  return <Image src={placeholderUrl} mode="aspectFill" />;
};

// 封面组件
const CoverPlaceholder = ({ width = 400, height = 300, keyword = 'nature' }) => {
  const placeholderUrl = `https://source.unsplash.com/${width}x${height}/?${keyword}`;
  return <Image src={placeholderUrl} mode="aspectFill" />;
};

// 带错误处理的占位图
const SmartImage = ({ src, placeholder, ...props }) => {
  const [imageSrc, setImageSrc] = useState(src || placeholder);
  
  const handleError = () => {
    setImageSrc(placeholder);
  };
  
  return (
    <Image 
      src={imageSrc} 
      onError={handleError}
      {...props}
    />
  );
};

2.3 字体规范

字体家族

iOS：-apple-system-font, Helvetica Neue
Android：Roboto, Helvetica Neue

字重

标题：600（中等）
正文：400（常规）
强调：500（中等）

2.4 间距规范

基础间距

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

字体适配

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/         # 工具样式

16-mini-program-ui.md 8.4 KB Riwayat Mentahan

小程序 UI 设计规范

1. 设计原则

1.1 核心原则

1.2 适配原则

2. 视觉规范

2.1 色彩系统

主色调

中性色

2.2 占位图规范

Unsplash 占位图使用

使用示例

关键词分类

实现代码示例

2.3 字体规范

字体家族

字体大小

字重

2.4 间距规范

基础间距

组件间距

3. 组件规范

3.1 按钮规范

主要按钮

次要按钮

禁用状态

3.2 输入框规范

基础样式

输入框状态

3.3 卡片规范

基础卡片

卡片类型

3.4 列表规范

列表项样式

列表状态

4. 页面布局

4.1 页面结构

导航栏

内容区域

4.2 栅格系统

响应式布局

间距规范

5. 交互规范

5.1 触摸反馈

按钮反馈

列表反馈

5.2 加载状态

骨架屏

加载更多

5.3 空状态

空数据

错误状态

6. 图标规范

6.1 图标尺寸

功能图标

头像图标

6.2 图标风格

线性图标

面性图标

7. 动效规范

7.1 过渡动画

页面切换

元素出现

7.2 微交互

按钮点击

列表滑动

8. 适配规范

8.1 屏幕适配

安全区域

字体适配

8.2 深色模式

色彩映射

图片适配

9. 代码规范

9.1 CSS命名规范

BEM命名法

示例

9.2 样式组织

文件结构

样式优先级

16-mini-program-ui.md 8.4 KB

Riwayat Mentahan