soul-yongping/开发文档/3、原型/原型设计规范.md

# 原型设计规范

**我是卡若。**

这个文档是写给设计师和前端开发看的。咱们的项目特点很明确：**移动端优先，iOS风格，极致阅读体验**。

---

## 一、设计原则

### 1.1 移动端优先
- 90%的用户是从微信、Soul、朋友圈进来的，都是手机
- 设计稿必须先出手机版，再适配PC
- 断点设置：375px (iPhone SE) / 414px (iPhone 14 Pro Max)

### 1.2 iOS风格
- 圆角：16px / 20px / 24px (统一使用这3个值)
- 阴影：`box-shadow: 0 4px 12px rgba(0,0,0,0.08)`
- 字体：San Francisco (iOS) / PingFang SC (安卓)
- 间距：8px的倍数系统 (8 / 16 / 24 / 32 / 48)

### 1.3 简洁至上
- 每个页面只有1个主要操作按钮
- 减少选择，降低决策成本
- 文字能说清楚的，就别用图

---

## 二、核心页面原型

### 2.1 首页 (Home)

**功能目标**: 3秒内让用户知道这是什么书，并产生购买欲望

**布局结构**:
\`\`\`
[Hero区域]
- 书籍封面 (3D效果)
- 标题：《一场Soul的创业实验》
- 副标题：真实的商业案例库
- 作者：卡若
- 价格标签：¥9.9 (限时优惠)
- 主按钮：立即阅读

[数据统计卡片]
- 已购买人数: 128人
- 阅读人次: 1,234次
- 好评率: 98%

[最新章节快捷入口]
- 横向滚动卡片
- 每张卡片显示：章节号 + 标题 + 标签(免费/付费)

[Soul派对群推广横幅]
- 背景：渐变色
- 文案：每天早上6-9点，Soul派对房不见不散
- 按钮：加入派对

[底部导航栏]
- 首页 | 目录 | 我的
\`\`\`

**交互细节**:
- 向下滚动时，顶部导航栏自动隐藏
- 点击书籍封面，可放大预览
- 点击"立即阅读"，跳转到目录页

**设计稿尺寸**: 375x812 (iPhone X)

---

### 2.2 目录页 (Chapters)

**功能目标**: 清晰展示书籍结构，引导用户阅读

**布局结构**:
\`\`\`
[顶部]
- 返回按钮
- 标题：目录
- 全书购买按钮

[篇章结构]
第一篇 | 真实的人
  ├─ 第1章 | 人与人之间的底层逻辑
  │   ├─ 1.1 自行车荷总... [免费]
  │   ├─ 1.2 老墨... [1元] [锁]
  │   └─ ...
  ├─ 第2章 | 人性困境案例
  │   └─ ...
  
第二篇 | 真实的行业
  └─ ...
\`\`\`

**视觉设计**:
- 篇章标题：粗体，16px，品牌色渐变
- 章节标题：常规，14px，深灰色
- 免费标签：绿色小标签
- 付费标签：橙色小标签 + 锁图标
- 定时解锁：灰色小标签 + 倒计时

**交互细节**:
- 点击免费章节，直接进入阅读
- 点击付费章节，弹出购买弹窗
- 点击已购买章节，进入阅读
- 长按章节，可以分享给好友

---

### 2.3 阅读页 (Read)

**功能目标**: 沉浸式阅读体验，零干扰

**布局结构**:
\`\`\`
[顶部工具栏] (可隐藏)
- 返回按钮
- 进度条 (当前位置/总长度)
- 目录按钮

[正文区域]
- 标题
- 作者 + 发布时间
- Markdown渲染内容
  - 标题层级
  - 段落
  - 引用块
  - 代码块
  - 图片
  - 列表

[底部工具栏] (可隐藏)
- 上一章
- 目录按钮
- 下一章
- 分享按钮
\`\`\`

**视觉设计**:
- 字体大小：16px (可调)
- 行高：1.8
- 段落间距：24px
- 左右边距：24px
- 背景：#FAFAFA (浅灰) 或 #1C1C1E (深色模式)

**交互细节**:
- 点击屏幕中央，显示/隐藏工具栏
- 向上滚动，自动隐藏工具栏
- 阅读到30%时，弹出"扫码解锁全文"弹窗
- 阅读完成，自动跳转到下一章

---

### 2.4 我的页面 (My)

**功能目标**: 用户中心 + 分销中心

**布局结构**:
\`\`\`
[用户信息卡片]
- 头像
- 昵称
- 手机号
- 我的邀请码：REFXXXX (点击复制)

[阅读统计]
- 已购买章节: 12章
- 阅读时长: 3小时28分
- 阅读进度: 45%

[分销中心] (重点突出)
- 背景：渐变色卡片
- 我的收益: ¥256.80
- 待提现: ¥128.90
- 已提现: ¥127.90
- 推荐人数: 28人
- 按钮：推广海报生成 | 立即提现

[功能菜单]
- 我的订单
- 购买记录
- 分享记录
- 设置
\`\`\`

**交互细节**:
- 点击邀请码，自动复制
- 点击"推广海报生成"，生成专属海报
- 点击"立即提现"，弹出提现弹窗

---

### 2.5 匹配书友页 (小程序独有)

**功能目标**: 类Soul星球的匹配功能，增加社交属性

**布局结构**:
\`\`\`
[星空背景]
- Canvas动画
- 星星闪烁效果
- 星球漂浮效果

[中央区域]
- 星球图标 (旋转动画)
- 按钮：开始匹配
- 提示文字：当前在线 128 人

[匹配中]
- 光环扩散动画
- 提示文字：正在寻找志同道合的书友...

[匹配成功]
- 用户头像
- 昵称
- 兴趣标签
- 匹配度：85%
- 共同兴趣：创业、私域运营、AI
- 按钮：打个招呼

[匹配历史]
- 横向滚动
- 显示最近10次匹配记录
\`\`\`

**视觉设计**:
- 背景：深蓝色渐变 (#1A1A2E -> #16213E)
- 星球：渐变色球体 + 光晕效果
- 卡片：毛玻璃效果 + 圆角 + 阴影
- 动画：流畅的过渡效果

---

## 三、组件设计规范

### 3.1 按钮 (Button)

**主按钮** (Primary):
\`\`\`css
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #FFFFFF;
height: 48px;
border-radius: 24px;
font-size: 16px;
font-weight: 600;
\`\`\`

**次按钮** (Secondary):
\`\`\`css
background: #FFFFFF;
border: 1px solid #E5E7EB;
color: #374151;
height: 48px;
border-radius: 24px;
\`\`\`

**文字按钮** (Text):
\`\`\`css
background: transparent;
color: #667eea;
text-decoration: underline;
\`\`\`

### 3.2 输入框 (Input)

\`\`\`css
height: 48px;
border: 1px solid #E5E7EB;
border-radius: 12px;
padding: 0 16px;
font-size: 14px;
background: #FFFFFF;
\`\`\`

**聚焦状态**:
\`\`\`css
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
\`\`\`

### 3.3 卡片 (Card)

\`\`\`css
background: #FFFFFF;
border-radius: 16px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
padding: 24px;
\`\`\`

**悬停效果**:
\`\`\`css
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
transition: all 0.3s ease;
\`\`\`

### 3.4 骨架屏 (Skeleton)

\`\`\`css
background: linear-gradient(
  90deg,
  #F3F4F6 25%,
  #E5E7EB 50%,
  #F3F4F6 75%
);
background-size: 200% 100%;
animation: loading 1.5s infinite;
border-radius: 8px;
\`\`\`

---

## 四、弹窗设计

### 4.1 支付弹窗

**触发时机**: 用户点击"购买"按钮

**内容**:
\`\`\`
[标题] 选择支付方式

[支付方式列表]
○ 微信支付 (推荐)
○ 支付宝
○ USDT (TRC20)
○ PayPal

[商品信息]
- 商品：第1章 | 人与人之间的底层逻辑
- 价格：¥1.00

[按钮] 
- 确认支付 (主按钮)
- 取消 (次按钮)
\`\`\`

### 4.2 登录弹窗

**触发时机**: 未登录用户点击购买或分享

**内容**:
\`\`\`
[标题] 手机号登录

[输入框]
- 手机号输入框
- 验证码输入框 (带倒计时按钮)

[邀请码输入框] (可选)
- 提示：填写邀请码，推荐人可获得佣金

[按钮]
- 登录 / 注册 (主按钮)
- 暂不登录 (文字按钮)
\`\`\`

### 4.3 二维码弹窗

**触发时机**: 阅读到30%或点击"加入派对"

**内容**:
\`\`\`
[标题] 扫码加入Soul派对群

[二维码图片]
- 尺寸：200x200
- 下方文字：长按识别二维码

[按钮]
- 我知道了
\`\`\`

---

## 五、颜色规范

### 5.1 主色调

\`\`\`
品牌主色 (Primary):
- 主色：#667EEA
- 深色：#5A67D8
- 浅色：#7F9CF5

辅助色 (Secondary):
- 成功：#10B981 (绿色)
- 警告：#F59E0B (橙色)
- 错误：#EF4444 (红色)
- 信息：#3B82F6 (蓝色)
\`\`\`

### 5.2 中性色

\`\`\`
文字颜色:
- 标题：#111827 (深灰)
- 正文：#374151 (中灰)
- 辅助：#6B7280 (浅灰)

背景颜色:
- 主背景：#FFFFFF (白色)
- 次背景：#F9FAFB (浅灰)
- 卡片背景：#FFFFFF (白色)
\`\`\`

### 5.3 深色模式

\`\`\`
背景:
- 主背景：#1C1C1E
- 次背景：#2C2C2E
- 卡片背景：#3A3A3C

文字:
- 标题：#FFFFFF
- 正文：#E5E5EA
- 辅助：#98989D
\`\`\`

---

## 六、字体规范

### 6.1 字体系统

\`\`\`css
font-family: 
  -apple-system,           /* iOS */
  BlinkMacSystemFont,      /* macOS */
  'Segoe UI',              /* Windows */
  'PingFang SC',           /* 中文简体 */
  'Hiragino Sans GB',      /* macOS 中文 */
  'Microsoft YaHei',       /* Windows 中文 */
  sans-serif;
\`\`\`

### 6.2 字号规范

\`\`\`
特大标题：32px / 36px (权重: 700)
大标题：24px / 28px (权重: 600)
中标题：20px / 24px (权重: 600)
小标题：18px / 22px (权重: 500)
正文：16px / 24px (权重: 400)
辅助文字：14px / 20px (权重: 400)
小字：12px / 18px (权重: 400)
\`\`\`

---

## 七、动画规范

### 7.1 过渡动画

\`\`\`css
/* 标准过渡 */
transition: all 0.3s ease;

/* 快速过渡 */
transition: all 0.15s ease;

/* 慢速过渡 */
transition: all 0.5s ease;
\`\`\`

### 7.2 加载动画

**骨架屏**:
\`\`\`css
@keyframes loading {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
\`\`\`

**旋转加载**:
\`\`\`css
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
\`\`\`

### 7.3 页面切换动画

**滑动进入** (iOS风格):
\`\`\`css
@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
\`\`\`

---

## 八、响应式断点

\`\`\`css
/* 手机 (默认) */
@media (max-width: 640px) { ... }

/* 平板 */
@media (min-width: 641px) and (max-width: 1024px) { ... }

/* 桌面 */
@media (min-width: 1025px) { ... }
\`\`\`

---

## 九、设计交付规范

### 9.1 设计稿命名

\`\`\`
格式：页面名称-设备-版本号.fig
示例：
- 首页-Mobile-v1.0.fig
- 目录页-Mobile-v1.0.fig
- 阅读页-Mobile-v1.0.fig
\`\`\`

### 9.2 切图规范

\`\`\`
命名：功能-类型-尺寸.png
示例：
- button-primary-normal@2x.png
- icon-lock-24x24@2x.png
- cover-book-400x600@2x.png
\`\`\`

### 9.3 标注规范

- 所有间距必须标注
- 字体大小和行高必须标注
- 颜色使用十六进制色值
- 圆角、阴影参数必须标注

---

## 十、参考案例

### 10.1 iOS原生风格
- **Settings App** (iOS系统设置)
- **Apple Books** (苹果图书)
- **Notion** (笔记应用)

### 10.2 阅读类产品
- **微信读书**
- **得到App**
- **小宇宙播客**

### 10.3 社交匹配类
- **Soul**
- **探探**
- **Tinder**

---

**总结**: 原型设计不是为了好看,是为了让用户"不用想就知道怎么做"。简洁、清晰、高效,这就是我们的设计原则。

---

**更新时间**: 2025年1月14日  
**负责人**: 卡若  
**设计工具**: Figma