576 lines
10 KiB
Markdown
576 lines
10 KiB
Markdown
# 原型设计规范
|
||
|
||
**我是卡若。**
|
||
|
||
这个文档是写给设计师和前端开发看的。咱们的项目特点很明确：**移动端优先，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
|