# 微博签到小程序设计指南

## 品牌定位

**应用定位**：微博签到打卡工具，帮助用户养成持续签到的习惯  
**设计风格**：星空主题、仪式感、成就感  
**目标用户**：微博用户，希望通过签到获得奖励的用户

**核心意象**：点亮星空——每次签到都是点亮夜空中的一颗星，连续签到让星空更加璀璨

---

## 配色方案

### 主色板

| 颜色名称 | Tailwind 类名 | 色值 | 意象来源 |
|---------|--------------|------|---------|
| 星空蓝（主色） | `bg-blue-600` | #2563eb | 深夜星空的底色 |
| 星光金（强调色） | `text-yellow-400` | #facc15 | 星星的光芒 |
| 月光蓝（辅助色） | `text-blue-300` | #93c5fd | 柔和的月光 |

### 中性色

| 颜色名称 | Tailwind 类名 | 色值 | 用途 |
|---------|--------------|------|------|
| 深空灰 | `bg-gray-900` | #111827 | 页面背景 |
| 夜空灰 | `bg-gray-800` | #1f2937 | 卡片背景 |
| 星云灰 | `bg-gray-700` | #374151 | 次级背景 |
| 银河白 | `text-white` | #ffffff | 主要文字 |
| 星尘灰 | `text-gray-400` | #9ca3af | 次要文字 |

### 语义色

| 状态 | Tailwind 类名 | 色值 |
|-----|--------------|------|
| 成功/已签到 | `text-green-400` | #4ade80 |
| 警告/未签到 | `text-orange-400` | #fb923c |
| 信息/提示 | `text-blue-400` | #60a5fa |

---

## 字体规范

### 字体选择

- **标题字体**：使用系统默认字体（微信小程序限制）
- **正文字体**：使用系统默认字体

### 字体层级

| 层级 | Tailwind 类名 | 字号 | 行高 | 用途 |
|-----|--------------|------|------|------|
| H1 | `text-3xl font-bold` | 30px | 36px | 签到主标题 |
| H2 | `text-2xl font-bold` | 24px | 32px | 页面标题 |
| H3 | `text-xl font-semibold` | 20px | 28px | 卡片标题 |
| Body | `text-base` | 16px | 24px | 正文内容 |
| Caption | `text-sm` | 14px | 20px | 说明文字 |

---

## 间距系统

### 页面边距

- 页面左右边距：`px-4`（16px）
- 页面上下边距：`py-6`（24px）

### 组件间距

- 卡片间距：`gap-4`（16px）
- 列表项间距：`gap-3`（12px）
- 按钮组间距：`gap-2`（8px）

---

## 组件规范

### 1. 签到按钮（核心组件）

```tsx
// 主签到按钮
<View className="flex justify-center items-center">
  <View className="w-40 h-40 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center shadow-lg shadow-blue-500/50">
    <Text className="text-white text-2xl font-bold">签到</Text>
  </View>
</View>

// 已签到状态
<View className="w-40 h-40 rounded-full bg-gradient-to-br from-green-500 to-green-600 flex items-center justify-center shadow-lg shadow-green-500/50">
  <Text className="text-white text-2xl font-bold">已签到</Text>
</View>
```

### 2. 卡片容器

```tsx
<View className="bg-gray-800 rounded-2xl p-4 shadow-lg">
  {/* 卡片内容 */}
</View>
```

### 3. 列表项

```tsx
<View className="flex flex-row items-center gap-3 py-3 border-b border-gray-700">
  <View className="w-2 h-2 rounded-full bg-blue-500" />
  <Text className="text-white flex-1">内容</Text>
  <Text className="text-gray-400 text-sm">时间</Text>
</View>
```

### 4. 统计卡片

```tsx
<View className="bg-gradient-to-br from-blue-600 to-purple-600 rounded-2xl p-6">
  <Text className="text-blue-200 text-sm">连续签到</Text>
  <Text className="text-white text-4xl font-bold mt-2">7 天</Text>
</View>
```

### 5. 空状态

```tsx
<View className="flex flex-col items-center justify-center py-20">
  <Text className="text-gray-500 text-lg">暂无签到记录</Text>
  <Text className="text-gray-600 text-sm mt-2">开始你的第一次签到吧</Text>
</View>
```

---

## 导航结构

### TabBar 配置

```typescript
{
  tabBar: {
    color: '#9ca3af',
    selectedColor: '#2563eb',
    backgroundColor: '#111827',
    borderStyle: 'black',
    list: [
      {
        pagePath: 'pages/index/index',
        text: '签到',
        iconPath: './assets/tabbar/star.png',
        selectedIconPath: './assets/tabbar/star-active.png'
      },
      {
        pagePath: 'pages/record/index',
        text: '记录',
        iconPath: './assets/tabbar/calendar.png',
        selectedIconPath: './assets/tabbar/calendar-active.png'
      },
      {
        pagePath: 'pages/profile/index',
        text: '我的',
        iconPath: './assets/tabbar/user.png',
        selectedIconPath: './assets/tabbar/user-active.png'
      }
    ]
  }
}
```

### 页面跳转规范

- TabBar 页面跳转：使用 `Taro.switchTab()`
- 普通页面跳转：使用 `Taro.navigateTo()`

---

## 小程序约束

### 包体积限制

- 主包大小：不超过 2MB
- 分包大小：单个分包不超过 2MB
- 总大小：不超过 20MB

### 图片策略

- 使用 CDN 图片链接
- 本地图标使用 PNG 格式（TabBar 必须是本地 PNG）
- 图片压缩后使用

### 性能优化

- 避免过深的组件嵌套
- 列表使用虚拟滚动（长列表场景）
- 图片懒加载
- 避免频繁的 `setState`

---

## 跨端兼容注意事项

### H5/小程序兼容

- Text 换行：垂直排列的 Text 必须添加 `block` 类
- Input 样式：必须用 View 包裹，样式放外层
- Fixed 布局：使用 inline style，避免 Tailwind fixed+flex 失效

### 平台检测

```tsx
const isWeapp = Taro.getEnv() === Taro.ENV_TYPE.WEAPP
```

---

## 设计禁忌

**禁止使用**：
- ❌ 微博橙色默认配色
- ❌ 纯白色背景（不符合星空主题）
- ❌ 过于功能导向的冷冰冰设计
- ❌ 缺乏情感共鸣的界面元素
- ❌ 复杂的动画效果（影响性能）