diff --git a/iShare_Design/iShare_设计文档.html b/iShare_Design/iShare_设计文档.html new file mode 100644 index 0000000..f4cc85c --- /dev/null +++ b/iShare_Design/iShare_设计文档.html @@ -0,0 +1,895 @@ + + + + + + iShare 设计文档 - 页面结构与交互流程 + + + + +
+
+

🎬 iShare 设计文档

+

流媒体订阅合租分享平台 - 页面结构与交互流程

+
+ + + + +
+

🎨 Figma 设计预览

+

以下是嵌入的Figma设计文件，你可以直接在这里浏览和交互查看所有设计页面。点击下方标签切换不同页面。

+ +
+
+

📐 iShare 完整设计稿

+ ↗ 在Figma中打开 +
+
+ + + + + + + +
+ +
+ +
+ 💡 使用提示
+
    +
  • 点击上方标签可快速切换到不同设计页面
    • +
  • 在嵌入的预览中可以缩放、平移查看设计细节
    • +
  • 点击"在Figma中打开"可进入完整的Figma编辑器
    • +
+
+
+ + +
+

📋 项目概述

+

+ iShare (AiShare) 是一个流媒体订阅服务合租分享平台。用户可以在平台上购买、分享和合租各种流媒体服务账号（如 Netflix、Spotify、Apple TV 等），通过"拼车"模式降低订阅成本。 +

+ +
+ 💡 核心价值主张
+ 通过合租模式，让用户以 10%-30% 的价格享受正版流媒体服务 +
+ +

支持的平台

+
+
+
🖥️
+ Web端
+ 响应式桌面网站 +
+
+
📱
+ Wap端
+ 移动端H5页面 +
+
+
+ + +
+

🗺️ 整体页面架构

+ +
+graph TD + subgraph 入口 + A[首页/欢迎页] --> B{用户状态} + end + + subgraph 认证模块 + B -->|未登录| C[登录页面] + B -->|未注册| D[注册页面] + C --> E[忘记密码] + E --> F[获取验证码] + F --> G[设置新密码] + D --> H[验证码验证] + end + + subgraph 主功能区 + B -->|已登录| I[主页/服务列表] + I --> J[服务详情页] + J --> K[支付页面] + I --> L[广场/拼车] + L --> M[车票详情] + M --> K + I --> N[推广中心] + I --> O[个人中心] + end + + subgraph 底部导航 + P[首页] --- Q[广场] --- R[推广] --- S[我的] + end + + style A fill:#370CE2,color:#fff + style I fill:#E94C89,color:#fff + style K fill:#C22F6C,color:#fff + style L fill:#E94C89,color:#fff +
+ +

页面层级关系

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
层级页面功能说明入口查看设计
L0首页/欢迎页品牌展示、引导登录直接访问
L1主页(服务列表)浏览所有可购买的服务登录后默认页、底部导航
L1广场查看他人发起的合租底部导航
L1推广中心邀请好友、获取返现底部导航
L1登录/注册用户认证首页点击登录
+
+ + +
+

🔐 登录注册流程

+ +

完整认证流程图

+
+flowchart LR + subgraph 登录流程 + A1[登录页面] --> A2{选择方式} + A2 -->|社交登录| A3[微信/谷歌/FB/Twitter] + A2 -->|账号登录| A4[输入手机/邮箱+密码] + A3 --> A5[授权回调] + A4 --> A6[验证账号] + A5 --> A7[登录成功] + A6 --> A7 + A4 -->|忘记密码| B1 + end + + subgraph 忘记密码 + B1[选择验证方式] --> B2{手机/邮箱} + B2 -->|手机| B3[输入手机号] + B2 -->|邮箱| B4[输入邮箱] + B3 --> B5[获取验证码] + B4 --> B5 + B5 --> B6[输入验证码] + B6 --> B7[设置新密码] + B7 --> A1 + end + + subgraph 注册流程 + C1[注册页面] --> C2[输入手机/邮箱] + C2 --> C3[获取验证码] + C3 --> C4[输入验证码] + C4 --> C5[设置密码] + C5 --> C6[注册成功] + C6 --> A7 + end + + style A7 fill:#370CE2,color:#fff + style C6 fill:#370CE2,color:#fff +
+ +
+ +
+ +

登录页面状态

+
+
+

登录_默认 入口

+
    +
  • iShare Logo 展示
    • +
  • 社交登录按钮 (微信/谷歌/FB/Twitter)
    • +
  • 分隔线 "Or"
    • +
  • 手机号/邮箱输入框
    • +
  • 密码输入框
    • +
  • 记住账号复选框
    • +
  • 忘记密码链接
    • +
  • 登录按钮 (主色)
    • +
  • 创建账户链接
    • +
+
+
+

登录_输入 交互

+
    +
  • 输入框获得焦点样式
    • +
  • 实时格式验证
    • +
  • 密码显示/隐藏切换
    • +
  • 按钮激活状态
    • +
+
+
+

忘记密码_手机验证

+
    +
  • 标题：找回密码
    • +
  • 手机号输入框
    • +
  • 获取验证码按钮
    • +
  • 验证码输入框
    • +
  • 下一步按钮
    • +
+
+
+

注册_默认

+
    +
  • 创建账户标题
    • +
  • 手机号/邮箱输入框
    • +
  • 验证码输入框
    • +
  • 密码输入框
    • +
  • 用户协议勾选
    • +
  • 注册按钮
    • +
+
+
+
+ + +
+

💳 服务购买流程

+ +

购买流程图

+
+flowchart LR + A[主页/服务列表] -->|点击服务卡片| B[服务详情页] + B -->|查看| C[服务介绍] + B -->|查看| D[价格套餐] + B -->|查看| E[会员权益] + B -->|查看| F[常见问题] + B -->|点击购买| G[确认订单] + G --> H[选择支付方式] + H --> I[完成支付] + I -->|成功| J[获取账号信息] + I -->|失败| K[重新支付] + K --> H + + style A fill:#370CE2,color:#fff + style I fill:#E94C89,color:#fff + style J fill:#C22F6C,color:#fff +
+ +
+ +
+ +

操作步骤

+
+
+
1
+ 浏览服务
+ 在主页查看服务列表 +
+
+
2
+ 选择服务
+ 点击感兴趣的服务 +
+
+
3
+ 查看详情
+ 了解价格和权益 +
+
+
4
+ 确认购买
+ 选择套餐，确认订单 +
+
+
5
+ 完成支付
+ 支付并获取账号 +
+
+
+ + +
+

🚗 广场/拼车流程

+ +

拼车流程图

+
+flowchart LR + A[进入广场] --> B[浏览车票列表] + B --> C{筛选} + C -->|按服务类型| D[Netflix/Spotify等] + C -->|按价格| E[价格区间] + C -->|按状态| F[可上车/已满员] + D --> G[查看车票详情] + E --> G + F --> G + G --> H{决定} + H -->|上车| I[确认加入] + H -->|返回| B + I --> J[支付车费] + J --> K[上车成功] + K --> L[获取账号信息] + + style A fill:#370CE2,color:#fff + style K fill:#E94C89,color:#fff + style L fill:#C22F6C,color:#fff +
+ +
+ +
+ +
+ ⚠️ 拼车规则说明
+
    +
  • 每个车票有固定的座位数量（通常4-6人）
    • +
  • 上车后不支持退款，请确认后再操作
    • +
  • 账号信息会在支付成功后自动显示
    • +
+
+
+ + +
+

📱 所有页面清单

+ +

Figma 设计文件结构

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Page包含的Frame说明查看
原型分析奈飞小镇、银河录像局、Sharesub竞品分析与参考
全局样式颜色系统、字体规范设计系统基础
登录/注册登录_默认、登录_输入、注册、忘记密码、流程图用户认证完整流程
首页登录欢迎页（Web/Mobile）品牌落地页
主页服务列表、详情页、支付页、FAQ、导航核心功能页面
广场车票_全部、车票_已上车、车票详情拼车社区功能
推广推广页面、邀请规则说明用户增长功能
+ +

底部导航结构

+
+graph LR + A[首页] --- B[广场] --- C[推广] --- D[我的] + + A --> A1[服务列表] + B --> B1[车票列表] + C --> C1[邀请返现] + D --> D1[个人中心] + + style A fill:#370CE2,color:#fff + style B fill:#E94C89,color:#fff + style C fill:#E94C89,color:#fff + style D fill:#E94C89,color:#fff +
+
+ + +
+

🎨 设计规范

+ +
+ +
+ +

主题色 (Theme Colors)

+
+
+
+ #370CE2 + Pink 700 · 主色 +
+
+
+ #C22F6C + Pink 600 · 点击 +
+
+
+ #E94C89 + Pink 500 · 常规 +
+
+
+ #ED6997 + Pink 400 · 悬停 +
+
+
+ #FBC7D4 + Pink 100 +
+
+
+ #FFE8ED + Pink 50 +
+
+ +

中性色 (Neutral Colors)

+
+
+
+ #1D222A + Neutral 700 · 主文字 +
+
+
+ #4E596A + Neutral 600 +
+
+
+ #838C99 + Neutral 500 +
+
+
+ #B8BBBF + Neutral 400 · 占位符 +
+
+
+ #F5F5F5 + Neutral 100 +
+
+
+ #FFFFFF + Neutral 50 · 背景 +
+
+ +

字体规范

+ + + + + + + + + + + + + +
样式字号字重用途
Header24px700 (Bold)页面标题
Subtitle20px700 (Bold)副标题、区块标题
Body Bold16px700 (Bold)强调文字、按钮
Body Regular16px400 (Regular)正文内容
Caption Bold14px700 (Bold)标签、小标题
Caption Regular14px400 (Regular)辅助说明
+
+ + + +
+ + + + diff --git a/iShare_Design/page_structure.json b/iShare_Design/page_structure.json new file mode 100644 index 0000000..475076a --- /dev/null +++ b/iShare_Design/page_structure.json @@ -0,0 +1,112 @@ +{ + "login_register": { + "name": "登录/注册模块", + "frames": [ + { + "id": "login_default", + "name": "登录_默认", + "desc": "默认登录页面，包含社交登录和账号密码登录" + }, + { + "id": "login_input", + "name": "登录_输入", + "desc": "输入状态的登录页面" + }, + { + "id": "register_default", + "name": "注册_默认", + "desc": "默认注册页面" + }, + { + "id": "register_input", + "name": "注册_输入", + "desc": "输入状态的注册页面" + }, + { + "id": "forgot_phone", + "name": "忘记密码_手机验证", + "desc": "通过手机验证找回密码" + }, + { + "id": "forgot_email", + "name": "忘记密码_邮箱验证", + "desc": "通过邮箱验证找回密码" + }, + { + "id": "set_password", + "name": "设置新密码", + "desc": "设置新密码页面" + } + ] + }, + "homepage": { + "name": "首页", + "frames": [ + { + "id": "home_login", + "name": "登录欢迎页", + "desc": "品牌落地页，引导用户登录" + } + ] + }, + "main": { + "name": "主页/服务列表", + "frames": [ + { + "id": "service_list", + "name": "服务列表", + "desc": "展示所有可购买的流媒体服务" + }, + { + "id": "service_detail", + "name": "服务详情", + "desc": "服务介绍、价格、权益" + }, + { + "id": "payment", + "name": "支付页面", + "desc": "订单确认和支付" + }, + { + "id": "faq", + "name": "常见问题", + "desc": "FAQ页面" + } + ] + }, + "plaza": { + "name": "广场/拼车", + "frames": [ + { + "id": "ticket_all", + "name": "车票_全部", + "desc": "所有可加入的合租车票" + }, + { + "id": "ticket_joined", + "name": "车票_已上车", + "desc": "已加入的合租列表" + } + ] + }, + "promotion": { + "name": "推广中心", + "frames": [ + { + "id": "invite", + "name": "邀请返现", + "desc": "推荐好友获得10%返现" + } + ] + }, + "style": { + "name": "设计规范", + "frames": [ + { + "id": "colors", + "name": "颜色系统", + "desc": "主题色和中性色规范" + } + ] + } +} \ No newline at end of file diff --git a/iShare_需求与设计文档.docx b/iShare_需求与设计文档.docx new file mode 100644 index 0000000..d4da5b6 Binary files /dev/null and b/iShare_需求与设计文档.docx differ