25 KiB
25 KiB
页面截图与还原指南
本文档用于小程序和移动端APP开发时的界面还原参考。
设计规范
颜色系统
/* 主色调 */
--app-brand: #00CED1; /* 主品牌色 - 青色 */
--app-brand-light: #00CED1/20; /* 浅品牌色 */
/* 辅助色 */
--gold: #FFD700; /* 金色 - 用于收益/VIP */
--green: #07C160; /* 绿色 - 微信相关 */
--orange: #FFA500; /* 橙色 - 警告/即将过期 */
--red: #E91E63; /* 红色 - 重要/热门 */
--purple: #7B61FF; /* 紫色 - 资源对接 */
/* 背景色 */
--bg-primary: #000000; /* 纯黑背景 */
--bg-card: #1c1c1e; /* 卡片背景 */
--bg-input: #0a0a0a; /* 输入框背景 */
/* 文字色 */
--text-primary: #ffffff; /* 主文字 */
--text-secondary: rgba(255,255,255,0.7); /* 次要文字 */
--text-tertiary: rgba(255,255,255,0.4); /* 三级文字 */
字体规范
标题: 18-24px, font-weight: 600-700
副标题: 14-16px, font-weight: 500
正文: 14px, font-weight: 400
辅助文字: 12px, font-weight: 400
极小文字: 10px, font-weight: 400
圆角规范
按钮: 12px (rounded-xl)
卡片: 16px (rounded-2xl)
头像: 50% (rounded-full)
输入框: 12px (rounded-xl)
标签: 6px (rounded-md)
页面清单
1. 首页 (/)
页面尺寸: 375 x 812 (iPhone标准)
页面结构:
┌─────────────────────────────────────┐
│ 状态栏 (44px) │
├─────────────────────────────────────┤
│ │
│ 书籍封面图片 (200x280) │
│ │
│ 一场SOUL的创业实验场 │
│ (text-3xl, gradient) │
│ │
│ 来自Soul派对房的真实商业故事 │
│ (text-sm, gray-400) │
│ │
│ ┌──────────────────────────────┐ │
│ │ 62个真实案例 │ 每日更新 │ │
│ └──────────────────────────────┘ │
│ │
│ ┌────────────┐ ┌────────────┐ │
│ │ 立即阅读 │ │ ¥9.9购买 │ │
│ │ (白底黑字) │ │ (渐变背景) │ │
│ └────────────┘ └────────────┘ │
│ │
├─────────────────────────────────────┤
│ 底部导航栏 (60px) │
│ [首页] [目录] [找伙伴] [我的] │
└─────────────────────────────────────┘
关键元素:
- 书籍封面: 居中, 带阴影
- 标题: 渐变色 from-[#00CED1] to-[#20B2AA]
- 购买按钮: 渐变色 from-[#FFD700] to-[#FFA500]
2. 目录页 (/chapters)
页面结构:
┌─────────────────────────────────────┐
│ Header: ← 目录 │
├─────────────────────────────────────┤
│ ┌─────────────────────────────────┐ │
│ │ 📚 一场SOUL的创业实验场 62章 │ │
│ │ 书籍信息卡片 │ │
│ └─────────────────────────────────┘ │
│ │
│ [基础版 ¥9.9] [最新版 ¥XX.X] │ ← 版本切换(可隐藏)
│ │
│ ┌─────────────────────────────────┐ │
│ │ 📖 序言｜为什么我每天... [免费]│ │
│ └─────────────────────────────────┘ │
│ │
│ ▼ 01 第一篇｜真实的人 │
│ ├ 1.1 荷包：电动车出租... [免费]│
│ ├ 1.2 老墨:资源整合... [¥1] │
│ └ 1.3 笑声背后的MBTI [¥1] │
│ │
│ ▶ 02 第二篇｜真实的行业 │
│ ▶ 03 第三篇｜真实的错误 │
│ ... │
│ │
├─────────────────────────────────────┤
│ 底部导航 │
└─────────────────────────────────────┘
关键元素:
- 章节状态标签: 免费(绿色), 已购(蓝色), ¥1(灰色)
- 折叠/展开: 点击篇标题切换
- 版本切换: 两个并排按钮
3. 阅读页 (/read/[id])
页面结构:
┌─────────────────────────────────────┐
│ ← 返回 第1章 人与人... [分享] │
├─────────────────────────────────────┤
│ │
│ 1.1 荷包：电动车出租的被动收入模式 │
│ (text-2xl, font-bold) │
│ │
│ 文章内容... │
│ (text-base, leading-relaxed) │
│ │
│ ... 更多内容 ... │
│ │
│ ┌─────────────────────────────────┐│
│ │ 🔒 需要购买才能继续阅读 ││
│ │ ││
│ │ ┌─────────┐ ┌─────────┐ ││
│ │ │购买本章 │ │购买全书 │ ││
│ │ │ ¥1 │ │ ¥9.9 │ ││
│ │ └─────────┘ └─────────┘ ││
│ └─────────────────────────────────┘│
│ │
│ ┌────────────┐ ┌────────────┐ │
│ │ ← 上一篇 │ │ 下一篇 → │ │
│ └────────────┘ └────────────┘ │
│ │
└─────────────────────────────────────┘
关键元素:
- 付费墙: 半透明渐变遮罩
- 购买按钮: 两个并排, 不同颜色
- 导航按钮: 宽度适中(flex-1, max-w-[140px])
4. 找伙伴页 (/match)
页面结构:
┌─────────────────────────────────────┐
│ ← 返回 找伙伴 │
├─────────────────────────────────────┤
│ │
│ ┌─────────┐ │
│ │ │ │
│ │ 👥 │ ← 匹配按钮 │
│ │开始匹配 │ (圆形) │
│ │匹配创业伙伴│ │
│ │ │ │
│ └─────────┘ │
│ │
│ 当前模式: 创业合伙 │
│ │
│ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │
│ │ ⭐ │ │ 👥 │ │ ❤️ │ │ 🎮 │ │
│ │创业 │ │资源 │ │导师 │ │团队 │ │
│ │合伙 │ │对接 │ │顾问 │ │招募 │ │
│ └────┘ └────┘ └────┘ └────┘ │
│ │
│ 免费匹配机会: 3/3 │
│ │
└─────────────────────────────────────┘
匹配结果卡片:
┌─────────────────────────────────────┐
│ ✨ 匹配成功！ │
│ │
│ ┌─────────────────────────────────┐│
│ │ 👤 创业先锋 85%匹配度 ││
│ │ [创业者] [私域运营] ││
│ │ ││
│ │ 共同兴趣: ││
│ │ 📚 都在读《创业实验》 ││
│ │ 💼 对私域运营感兴趣 ││
│ │ ││
│ │ 核心理念: ││
│ │ 专注私域流量运营5年... ││
│ └─────────────────────────────────┘│
│ │
│ ┌────────────┐ ┌────────────┐ │
│ │ 一键加好友 │ │ 重新匹配 │ │
│ └────────────┘ └────────────┘ │
└─────────────────────────────────────┘
5. 我的页面 (/my)
页面结构:
┌─────────────────────────────────────┐
│ 我的 │
├─────────────────────────────────────┤
│ ┌─────────────────────────────────┐ │
│ │ 👤 用户昵称 VIP │ │
│ │ ID: 3f92**** │ │
│ │ │ │
│ │ ┌────┐ ┌────┐ ┌────┐ │ │
│ │ │ 12 │ │ 5 │ │ ¥89│ │ │
│ │ │已购 │ │推荐 │ │收益│ │ │
│ │ └────┘ └────┘ └────┘ │ │
│ └─────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────┐ │
│ │ 💰 我的收益 │ │
│ │ 累计收益: ¥89.00 │ │
│ │ 可提现: ¥89.00 │ │
│ │ │ │
│ │ ┌──────────┐ ┌──────────┐ │ │
│ │ │ 推广中心 │ │ 提现 │ │ │
│ │ └──────────┘ └──────────┘ │ │
│ └─────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────┐ │
│ │ 📦 我的订单 → │ │
│ │ 🎁 推广中心 → │ │
│ │ ℹ️ 关于作者 → │ │
│ │ ⚙️ 设置 → │ │
│ └─────────────────────────────────┘ │
│ │
├─────────────────────────────────────┤
│ 底部导航 │
└─────────────────────────────────────┘
6. 分销中心页 (/my/referral)
页面结构:
┌─────────────────────────────────────┐
│ ← 返回 分销中心 🔔 ⚙️ │
├─────────────────────────────────────┤
│ ┌─────────────────────────────────┐ │
│ │ 累计收益 ¥89.00 │ │
│ │ 90%返利 待结算: ¥0.00 │ │
│ │ │ │
│ │ ┌──────────┐ ┌──────────┐ │ │
│ │ │ 申请提现 │ │自动提现:开启│ │ │
│ │ └──────────┘ └──────────┘ │ │
│ └─────────────────────────────────┘ │
│ │
│ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │
│ │ 3 │ │ 1 │ │ 2 │ │ 0 │ │
│ │绑定中│ │已付款│ │即将过期│ │总邀请│ │
│ └────┘ └────┘ └────┘ └────┘ │
│ │
│ ┌─────────────────────────────────┐ │
│ │ ⚠️ 推广规则 │ │
│ │ • 好友通过你的链接购买，立享5%优惠│ │
│ │ • 好友成功付款后，你获得90%收益 │ │
│ │ • 绑定期30天，期满未付款自动解除 │ │
│ └─────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────┐ │
│ │ 👥 绑定用户 (5) ▼ │ │
│ │ ├ [绑定中] [已付款] [已过期] │ │
│ │ │ │ │
│ │ │ 小明 2025/12/24 [5天] │ │
│ │ │ 小红 2026/1/8 [20天] │ │
│ │ │ 阿强 2025/12/21 [2天后过期] │ │
│ └─────────────────────────────────┘ │
│ │
│ 我的邀请码: REFMKEL7JAC │
│ │
│ ┌─────────────────────────────────┐ │
│ │ 🖼️ 生成推广海报 → │ │
│ │ 💬 分享到朋友圈 → │ │
│ └─────────────────────────────────┘ │
└─────────────────────────────────────┘
7. 设置页 (/my/settings)
页面结构:
┌─────────────────────────────────────┐
│ ← 返回 设置 │
├─────────────────────────────────────┤
│ ┌─────────────────────────────────┐ │
│ │ 🛡️ 账号绑定 │ │
│ │ 绑定后可用于提现和找伙伴功能 │ │
│ ├─────────────────────────────────┤ │
│ │ 📱 手机号 │ │
│ │ 138****1234 ✓ │ │
│ ├─────────────────────────────────┤ │
│ │ 💬 微信号 │ │
│ │ 未绑定 去绑定 │ │
│ ├─────────────────────────────────┤ │
│ │ 💳 支付宝 │ │
│ │ 未绑定 去绑定 │ │
│ └─────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────┐ │
│ │ ⚠️ 提示：绑定至少一个支付方式才能提现│ │
│ └─────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────┐ │
│ │ 退出登录 │ │
│ └─────────────────────────────────┘ │
└─────────────────────────────────────┘
8. 推广海报弹窗
弹窗结构:
┌─────────────────────────────────────┐
│ × │
├─────────────────────────────────────┤
│ [真实商业案例] [每日更新] │
│ │
│ 一场SOUL的 │
│ 创业实验场 │
│ 来自Soul派对房的真实商业故事 │
│ │
│ ┌────┐ ┌────┐ ┌────┐ │
│ │ 62 │ │ 5% │ │90%│ │
│ │真实案例│ │好友优惠│ │你的收益│ │
│ └────┘ └────┘ └────┘ │
│ │
│ [人性观察] [行业揭秘] [赚钱逻辑] │
│ [创业复盘] [资源对接] │
│ │
│ ┌─────────────────────────────────┐│
│ │ 通过我的链接购买，立省5% ││
│ └─────────────────────────────────┘│
│ │
│ [卡] 卡若 推荐你来读 │
│ │
│ ┌───────────┐ │
│ │ QR Code │ │
│ │ (扫码) │ │
│ └───────────┘ │
│ │
│ 长按识别 · 立即试读 │
│ 邀请码: REFMKEL7JAC │
├─────────────────────────────────────┤
│ 长按上方图片保存，或截图分享 │
│ │
│ [ 复制链接 ] [ 保存图片 ] │
└─────────────────────────────────────┘
9. 支付弹窗
弹窗结构:
┌─────────────────────────────────────┐
│ × │
├─────────────────────────────────────┤
│ 确认支付 │
│ │
│ ┌─────────────────────────────────┐│
│ │ 📚 整本购买 ││
│ │ 一场SOUL的创业实验场 ││
│ │ ¥9.9 ││
│ └─────────────────────────────────┘│
│ │
│ 选择支付方式: │
│ │
│ ┌─────────────────────────────────┐│
│ │ 💚 微信支付 ● ││
│ └─────────────────────────────────┘│
│ │
│ ┌───────────┐ │
│ │ QR Code │ │
│ │ (微信扫码) │ │
│ └───────────┘ │
│ │
│ 请使用微信扫码完成支付 │
│ │
│ ┌─────────────────────────────────┐│
│ │ 确认支付 ¥9.9 ││
│ └─────────────────────────────────┘│
└─────────────────────────────────────┘
10. 管理后台 (/admin)
桌面端布局:
┌────────────────────────────────────────────────────────────────┐
│ 一场SOUL的创业实验 · 管理后台 │
├──────────┬─────────────────────────────────────────────────────┤
│ │ │
│ 📊 概览 │ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ │
│ │ │ 156 │ │¥1234│ │ 89 │ │57.1%│ │
│ 📝 内容 │ │总用户 │ │总收入 │ │订单数 │ │转化率 │ │
│ │ └──────┘ └──────┘ └──────┘ └──────┘ │
│ 👥 用户 │ │
│ │ ┌───────────────────────────────────────────────┐ │
│ 🎁 分销 │ │ 最近订单 │ │
│ │ ├───────────────────────────────────────────────┤ │
│ 💰 提现 │ │ 整本购买 2026-01-18 14:30 +¥9.9 微信 │ │
│ │ │ 单节购买 2026-01-18 13:15 +¥1.0 微信 │ │
│ ⚙️ 设置 │ │ 整本购买 2026-01-18 11:20 +¥9.9 微信 │ │
│ │ └───────────────────────────────────────────────┘ │
│ │ │
│ │ ┌───────────────────────────────────────────────┐ │
│ 退出 │ │ 新注册用户 │ │
│ │ └───────────────────────────────────────────────┘ │
└──────────┴─────────────────────────────────────────────────────┘
开发还原注意事项
1. 响应式适配
- 以 iPhone 13/14 (375px宽) 为基准设计
- 使用相对单位: rem, %, vh/vw
- 使用 flex 布局
2. 动画效果
- 页面切换: 从右滑入
- 弹窗: 从底部滑入 + 背景淡入
- 按钮: active 状态缩放 95%
- 匹配中: 旋转动画 + 脉冲
3. 触摸反馈
- 按钮点击: scale(0.95) + 背景变化
- 列表项: 背景色 white/5%
4. 图标使用
- 使用 Lucide Icons 图标库
- 或使用相似的线性图标
5. 字体
- iOS: -apple-system
- Android: Roboto
- 备用: sans-serif
文档版本：v2.0 | 更新日期：2026-01-18