chaohua_coze/design_guidelines.md

微博签到小程序设计指南

品牌定位

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

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

---

配色方案

主色板

颜色名称	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. 签到按钮（核心组件）

// 主签到按钮
<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. 卡片容器

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

3. 列表项

<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. 统计卡片

<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. 空状态

<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 配置

{
  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 失效

平台检测

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

---

设计禁忌

禁止使用：

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