# 小程序 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

#### 实现代码示例
```typescript
// 头像组件
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

#### 字体大小
- 标题：18px（`font-size: 36rpx`）
- 正文：16px（`font-size: 32rpx`）
- 辅助文字：14px（`font-size: 28rpx`）
- 说明文字：12px（`font-size: 24rpx`）

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

### 2.4 间距规范

#### 基础间距
- 8rpx（4px）
- 16rpx（8px）
- 24rpx（12px）
- 32rpx（16px）
- 48rpx（24px）
- 64rpx（32px）

#### 组件间距
- 卡片内边距：32rpx
- 列表项间距：24rpx
- 按钮间距：32rpx
- 表单间距：48rpx

## 3. 组件规范

### 3.1 按钮规范

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

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

#### 禁用状态
```css
.button-disabled {
  background-color: #f5f5f5;
  color: #bfbfbf;
  border: none;
}
```

### 3.2 输入框规范

#### 基础样式
```css
.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 卡片规范

#### 基础卡片
```css
.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 列表规范

#### 列表项样式
```css
.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命名法
```css
.block__element--modifier
```

#### 示例
```css
.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
- 反馈：视觉+触觉