10 KiB
原型设计规范
我是卡若。
这个文档是写给设计师和前端开发看的。咱们的项目特点很明确：移动端优先，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 示例：
9.3 标注规范
- 所有间距必须标注
- 字体大小和行高必须标注
- 颜色使用十六进制色值
- 圆角、阴影参数必须标注
十、参考案例
10.1 iOS原生风格
- Settings App (iOS系统设置)
- Apple Books (苹果图书)
- Notion (笔记应用)
10.2 阅读类产品
- 微信读书
- 得到App
- 小宇宙播客
10.3 社交匹配类
- Soul
- 探探
- Tinder
总结: 原型设计不是为了好看,是为了让用户"不用想就知道怎么做"。简洁、清晰、高效,这就是我们的设计原则。
更新时间: 2025年1月14日
负责人: 卡若
设计工具: Figma