zyc/rtc_prd

Fork 0

zyc cfd57aa23a Add remaining assets

2026-02-04 17:43:43 +08:00

13 KiB

Raw Blame History

Airhub App PRD (产品需求文档)

产品概述

Airhub 是一款用于连接和控制智能硬件设备的移动应用，支持蓝牙配对、WiFi配网、NFC识别和设备控制。

支持的产品

产品	图标	AI功能	连接方式	主题色	备注
毛绒机芯	卡皮巴拉 + AI角标	✅	蓝牙 + WiFi	暖棕色	完整流程
电子吧唧 AI版	圆形屏幕 + AI角标	✅	蓝牙 + WiFi	科技蓝	完整流程
普通电子吧唧	圆形屏幕 (无角标)	❌	仅蓝牙	浅灰蓝	仅蓝牙传图
AI手链	手绳图标 + AI角标	✅	NFC扫描	活力橙	RFID标签，无电子元件
洛天依	洛天依形象	✅	外部链接	青绿色	跳转下载专属APP

设备识别：蓝牙设备通过SN码识别，AI手链通过NFC RFID识别

页面架构

首页 (立即连接)
    │
    ├─ 蓝牙搜索页 ──→ 发现设备 ──→ 设备详情页
    │                              │
    │                              ├─ 毛绒机芯/电子吧唧AI → WiFi配网 → 设备控制页
    │                              └─ 普通电子吧唧 → 直接进入设备控制页
    │
    ├─ NFC扫描 (全局) ──→ AI手链详情页
    │
    └─ 产品选择页 (卡片列表) ──→ 各设备详情页
                              └─ 洛天依 → 外部下载链接

核心页面

0. APP启动逻辑

APP启动
    ├─ 首次使用 (无已连接设备) → 显示欢迎首页
    └─ 有已连接设备 → 显示最后操作的设备首页

使用 localStorage 记录 lastActiveDevice，每次操作设备时更新

1. 欢迎首页 ✅ 已完成

Logo (像素风) + 吉祥物 (浮动) + 渐变背景 + "立即连接"
仅首次使用或无设备时显示

2. 蓝牙搜索页

马里奥问号箱子动画 → 发现设备变换为产品图标
SN码识别设备类型

3. 产品选择页

卡片形式展示所有产品
点击跳转对应设备页面
洛天依卡片 → 外部下载链接

4. 设备控制页 (Device Control)

4.1 通用结构

头部：沉浸式 Header，包含切换设备入口、设备状态指示。
底部：悬浮式 Tab 导航栏 (Icon Only)，提供核心功能入口。

4.2 毛绒机芯 (卡皮巴拉) 首页

UI布局：
- Header：
  - 左侧：🔄 切换按钮 (跳转产品列表)
  - 右侧：
    - 🟢 在线状态 (绿点 + "在线")
    - 🔋 电量显示 (Icon + 百分比)
    - ⚙️ 设置入口
- Main (视觉核心)：
  - 居中展示卡皮巴拉形象 (PNG)
  - 交互：待机呼吸动画
- Footer (功能导航)：
  - 🏠 首页 (Home)：当前设备状态
  - 📖 故事 (Story)：AI故事生成入口
  - 🎵 歌曲 (Music)：音乐/音效控制
  - 👤 我的 (User)：设备专属个人中心
- 交互弹窗：故事生成器 (Story Generator)：
  - 入口：点击底部的 [故事] Tab。
  - 逻辑：
    - Tab分类：角色 / 环境 / 道具。
    - 限制：每类最多选3个，总数最多9个。
    - 自动跳转：单类选满3个后，自动跳转下一 Tab。
    - 选中态：右上角“毛绒徽章”对钩 (Apple Style)，无顶部预览栏。

5. WiFi配网页

选择网络 → 输入密码 → 配网进度 → 成功/失败

特殊逻辑

NFC全局监听

APP任意页面 + 扫描AI手链NFC
    ├─ APP未打开 → 拉起APP → 跳转AI手链页面
    └─ APP已打开 → 直接跳转AI手链页面

切换设备

所有设备详情页头部有 🔄 图标
点击跳转到产品选择页

设计规范 (Visual Design System)

🎨 双层主题色体系

Airhub 采用 双层主题色体系，确保品牌统一性的同时支持产品个性化：

1️⃣ App 级主视觉 (Global Theme)

适用范围：首页 → 蓝牙搜索 → WiFi配网 → 产品列表页

属性	值	说明
主渐变	`#22D3EE → #3B82F6 → #6366F1 → #8B5CF6`	青 → 蓝 → 靛 → 紫，水平渐变
背景	粉紫流动渐变	柔和梦幻感，多层 radial-gradient 叠加
按钮	3D 发光胶囊 (见下方质感规范)	所有主要 CTA 按钮

2️⃣ 产品级主题色 (Product Theme)

适用范围：UI主色调、卡片背景、按钮激活态。采用 4色阶全息渐变 以提升通透感与高级感。

产品	标识色	4色阶渐变定义 (Left → Right)	风格描述
毛绒机芯	暖杏褐	`#E6B98D` (35%) `#E8C9A8` (30%) `#D4A373` (25%) `#B07D5A`	醇厚：左侧杏色起手不发白，右侧收于深褐，质感扎实。
电子吧唧AI	科技青	`#22D3EE` (35%) `#60A5FA` (30%) `#818CF8` (25%) `#A78BFA`	鲜艳：左侧高亮青色（同首页按钮），右侧转紫，色彩跨度大。
普通吧唧	柔光紫	`#C084FC` (35%) `#D8B4FE` (30%) `#C4B5FD` (25%) `#A78BFA`	通透：左侧亮紫，中间过渡到柔和淡紫，避免油漆感。
AI手链	活力橙	`#FDBA74` (35%) `#FB923C` (30%) `#FBAF85` (25%) `#E07B54`	轻盈：左侧亮橙，右侧收于赤陶色，拒绝死板橘红。
洛天依	未来绿	`#34D399` (35%) `#5EEAD4` (30%) `#22D3EE` (25%) `#2DD4BF`	偏光：翠绿 → 冰蓝 → 青色，极具未来感的冷色流动。

规则：

左实右虚：渐变左侧起始色必须有足够饱和度，严禁使用近白色。

4色阶：必须包含4个色彩节点，模仿光线在玉石/光盘表面的折射效果。

通透尾部：渐变右侧颜色稍微提亮或降低"实心感"，保持呼吸感。

✨ 按钮质感规范 (Glowing Pill Button Standard)

无论主题色如何变化，所有主要按钮的"质感"必须统一。

┌─────────────────────────────────────────────┐
│  ▓▓▓ 顶部高光层 (rgba(255,255,255,0.15))  ▓▓▓ │
│                                             │
│              按钮文字 (白色)                 │
│                                             │
│  ▒▒▒ 底部暗边 (inset shadow)             ▒▒▒ │
└─────────────────────────────────────────────┘
      ↓↓↓ 外发光 (主题色, opacity 0.15~0.4) ↓↓↓

质感属性	CSS 实现
形状	`border-radius: 50% of height` (胶囊形)
3D 凸起	`inset 0 1px 1px rgba(255,255,255,0.3)` 顶部高光
底部暗边	`inset 0 -1px 2px rgba(0,0,0,0.1)`
外发光	`0 0 15px {主题色/0.35}, 0 0 30px {主题色/0.25}, 0 6px 20px {主题色/0.4}`
扫光动画	`shine` 动画，3s 周期

3. Visual System & Themes (New Standard)

Global / Home Page (AI Tech):
- Theme: High-Tech, futuristic, crisp.
- Colors: Purple, Blue, Pink Gradients.
- Buttons: Glassmorphism or Tech Gradient.
Device Page: Capybara (Warm Plush):
- Theme: Soft, organic, warm, friendly.
- Colors: "Plush Gradient" -> Soft Tan (#ECCFA8) to Warm Brown (#C99672).
- Goal: Match the physical product "Plush Machine Core" feel.
- Note: Avoid "Vibrant Tech Orange" (Safety/Alert color) for main actions here.

4. Technical Architecture

Frontend: Native JS, CSS Variables for theming. | 按压反馈 | transform: scale(0.98) |

CSS 变量定义 (建议)

:root {
  /* App 全局主题 */
  --theme-gradient: linear-gradient(90deg, #22D3EE 0%, #3B82F6 35%, #6366F1 65%, #8B5CF6 100%);
  --theme-glow-1: rgba(34, 211, 238, 0.35);
  --theme-glow-2: rgba(99, 102, 241, 0.25);
  --theme-glow-3: rgba(99, 102, 241, 0.4);
}

/* 产品主题覆盖 (示例：毛绒机芯) */
.theme-plush-core {
  --theme-gradient: linear-gradient(90deg, #D4A574 0%, #C08552 100%);
  --theme-glow-1: rgba(212, 165, 116, 0.35);
  --theme-glow-2: rgba(192, 133, 82, 0.25);
  --theme-glow-3: rgba(192, 133, 82, 0.4);
}

🧩 视觉一致性规则

规则	说明
背景统一	所有页面使用相同的动态渐变背景系统
按钮质感统一	所有主要按钮遵循 "Glowing Pill" 规范，仅颜色变化
卡片风格	轻量玻璃拟态 (`bg-white/20~30 + blur`)，带 `drop-shadow` 光晕
动作按钮	Glass Halo Capsule (见下方详细规范)
图标风格	像素风 SVG (Pixel Art)，统一 24x24 viewBox
动效时长	微交互 150-300ms，页面过渡 300-500ms
边框策略	玻璃态元素使用 `1px rgba(255,255,255,0.3)` 弱边框

✨ 毛玻璃光晕胶囊规范 (Glass Halo Capsule Standard)

用于卡片内部或深色渐变背景上的次要/功能性操作按钮。

属性	实现方式
背景	`rgba(255, 255, 255, 0.2)` + `backdrop-filter: blur(8px)`
边框	`1px solid rgba(255, 255, 255, 0.3)`
形状	`border-radius: 20px` (胶囊形)
文字/图标	针对不同操作设置颜色 (如 `#EF4444` 或 `#B07D5A`)
防遮挡光晕	核心重点：使用 `filter: drop-shadow(0 0 2px #FFF) drop-shadow(0 0 5px rgba(255,255,255,0.8))` 确保彩色内容在深色背景下不“吃字”。

📜 渐变遮罩滚动页规范 (Gradient Mask Scroll Standard)

用于设置页、法务文档（用户协议、隐私政策）等长文本滚动页面。

核心逻辑

Header：背景完全透明，不使用毛玻璃，保持视觉纯净。
Content：内容区域使用 CSS mask-image 实现顶部淡出效果，滚动时文字优雅消失，而非被 Header 硬切。

参数标准

属性	值	说明
内容顶部间距	`calc(safe-area + 120px)`	内容初始位置，避开 Header
遮罩透明区	`0px ~ 100px`	此区域完全透明（文字不可见）
遮罩过渡区	`100px ~ 130px`	30px 渐变过渡至完全显示

CSS 实现

.content-scroll {
    padding-top: calc(env(safe-area-inset-top, 20px) + 120px);
    
    /* 淡出遮罩 */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0px, transparent 100px, black 130px, black 100%);
    mask-image: linear-gradient(to bottom, transparent 0px, transparent 100px, black 130px, black 100%);
    
    /* 隐藏滚动条 */
    scrollbar-width: none;
}
.content-scroll::-webkit-scrollbar { display: none; }

适用页面

privacy.html - 隐私政策
agreement.html - 用户协议
collection-list.html - 个人信息收集清单
sharing-list.html - 第三方信息共享清单
settings.html - 设置页 (已应用)

🔧 共享 UI 组件规范

所有页面必须使用以下共享组件，定义在 styles.css 中，确保一处修改全局生效。

Layout Tokens (CSS 变量)

:root {
  --header-padding-top: calc(env(safe-area-inset-top, 20px) + 12px);
  --page-padding-x: 20px;
  --safe-area-bottom: env(safe-area-inset-bottom, 20px);
}

共享组件类名

类名	用途	规格
`.page-header`	页面头部	Grid 布局 (`40px 1fr 40px`) 实现完美居中
`.back-btn`	返回按钮	40×40px, 12px圆角, 简单玻璃磨砂 (首页/蓝牙同款)
`.page-title`	页面标题	18px/700, 居中 (Grid Column 2)
`.primary-btn`	主按钮	Glowing Pill 质感, 高度 58px
`.scroll-container`	滚动容器	iOS 惯性滚动, 统一内边距

使用示例

<!-- Grid 让标题绝对居中，无需 Spacer -->
<header class="page-header">
    <button class="back-btn">←</button>
    <h1 class="page-title">选择产品</h1>
</header>
<main class="scroll-container">
    <!-- 页面内容 -->
</main>

字体规范

用途	字体	字重
正文/UI	Inter	400-600
Logo/像素元素	Press Start 2P	400
回退字体栈	-apple-system, BlinkMacSystemFont, Roboto	-

为什么选择 Inter？

专为数字屏幕设计，高可读性

被 GitHub、Figma、Linear 等知名产品使用

支持多语言，中英文混排效果好

免费开源，无授权问题

技术接口预留

// 蓝牙设备发现回调
onBluetoothDeviceFound(device) { /* SN码解析 */ }

// NFC扫描回调
onNFCTagRead(tagId) { /* RFID识别 */ }

// 设备类型枚举
DEVICE_TYPES = {
    PLUSH_CORE: 'plush_core',       // 毛绒机芯
    BADGE_AI: 'badge_ai',           // 电子吧唧AI
    BADGE_BASIC: 'badge_basic',     // 普通电子吧唧
    BRACELET_AI: 'bracelet_ai',     // AI手链
    LUOTIANYI: 'luotianyi'          // 洛天依
}

文档最后更新: 2026-02-04

13 KiB Raw Blame History Unescape Escape

Airhub App PRD (产品需求文档)

产品概述

支持的产品

页面架构

核心页面

0. APP启动逻辑

1. 欢迎首页 ✅ 已完成

2. 蓝牙搜索页

3. 产品选择页

4. 设备控制页 (Device Control)

4.1 通用结构

4.2 毛绒机芯 (卡皮巴拉) 首页

5. WiFi配网页

特殊逻辑

NFC全局监听

切换设备

设计规范 (Visual Design System)

🎨 双层主题色体系

1️⃣ App 级主视觉 (Global Theme)

2️⃣ 产品级主题色 (Product Theme)

✨ 按钮质感规范 (Glowing Pill Button Standard)

3. Visual System & Themes (New Standard)

4. Technical Architecture

CSS 变量定义 (建议)

🧩 视觉一致性规则

✨ 毛玻璃光晕胶囊规范 (Glass Halo Capsule Standard)

📜 渐变遮罩滚动页规范 (Gradient Mask Scroll Standard)

核心逻辑

参数标准

CSS 实现

适用页面

🔧 共享 UI 组件规范

Layout Tokens (CSS 变量)

共享组件类名

使用示例

字体规范

技术接口预留

13 KiB

Raw Blame History