npm - @guru-ai-product/ai-product-kit - Versions diffs - 0.2.251117192248 → 0.2.251118120602 - Mend

@guru-ai-product/ai-product-kit 0.2.251117192248 → 0.2.251118120602

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (979) hide show

package/mcp/.doc_cache/674c69479a90ad15_4_/347/224/250/346/210/267/347/225/214/351/235/242/344/270/216/344/275/223/351/252/214.md DELETED Viewed

@@ -1,665 +0,0 @@
-# 产品需求文档 - 第四部分：用户界面与体验
-## 文档导航
-← **[上一部分：商业化策略](/Users/wuchong/Develop/AI Product Kit/mcp/.doc_cache/d2585b5df3d21fc9_3_商业化策略.md)** | 📋 **[返回索引](/Users/wuchong/Develop/AI Product Kit/mcp/.doc_cache/1c631acd2940588e_index.md)**
----
-## 4. 用户界面和体验
-### 4.1 用户体验流程
-**流程设计原则**：
-- **以用户为中心**：基于用户目标和任务设计流程
-- **简洁高效**：核心任务3步内完成，减少用户认知负担
-- **渐进式引导**：从简单到复杂，逐步引导用户深入使用
-- **一致性**：统一的交互模式和视觉语言
-#### 4.1.1 新用户引导流程
-**流程目标**：帮助新用户快速理解产品价值，建立使用信心，完成首次核心任务。
-**新用户引导流程图**：
-```mermaid
-flowchart TD
-    A[App启动] --> B{是否首次使用?}
-    B -->|是| C[起始页]
-    B -->|否| D[主界面]
-    C --> E[展示品牌价值]
-    C --> F[隐私条款确认]
-    C --> G[服务条款确认]
-    E --> H[功能介绍页1]
-    F --> H
-    G --> H
-    H --> I[功能介绍页2]
-    I --> J[功能介绍页3]
-    J --> K[功能介绍页4]
-    K --> L{用户选择}
-    L -->|跳过| D
-    L -->|继续| M[权限请求]
-    M --> N{权限授权}
-    N -->|拒绝| O[功能受限模式]
-    N -->|同意| P[首次体验引导]
-    P --> Q[核心功能演示]
-    Q --> R[用户操作指导]
-    R --> S[个性化设置]
-    S --> T[完成引导]
-    T --> D
-    O --> D
-    %% 样式定义
-    classDef startEnd fill:#e1f5fe,stroke:#01579b,stroke-width:2px
-    classDef process fill:#f3e5f5,stroke:#4a148c,stroke-width:2px
-    classDef decision fill:#fff3e0,stroke:#e65100,stroke-width:2px
-    classDef userAction fill:#e8f5e8,stroke:#1b5e20,stroke-width:2px
-    class A,D,T startEnd
-    class C,E,F,G,H,I,J,K,M,P,Q,R,S,O process
-    class B,L,N decision
-    class L userAction
-```
-**流程步骤**：
-1. **起始页**：展示品牌形象和核心价值，包含隐私条款和服务说明
-2. **功能介绍页**：通过3-4个页面依次介绍核心功能，每页聚焦一个主要功能
-3. **权限请求**：请求必要的系统权限，说明权限用途
-4. **首次体验**：引导用户完成一次核心功能的使用
-5. **个性化设置**：根据用户选择进行个性化配置
-**引导页流程说明**：
-- 起始页建立品牌印象，处理法律条款
-- 功能介绍页按重要性排序，突出核心价值
-- 支持用户跳过引导页直接进入应用
-- 提供明确的进度指示和操作指引
-#### 4.1.2 日常使用流程
-**快速操作流程图**：
-```mermaid
-flowchart TD
-    A[打开App] --> B[主界面]
-    B --> C[快速搜索]
-    C --> D[输入关键词]
-    D --> E[查看搜索结果]
-    E --> F{选择结果类型}
-    F -->|内容卡片| G[查看详细内容]
-    F -->|网页结果| H[打开网页]
-    F -->|功能入口| I[进入功能页面]
-    G --> J[保存/分享]
-    H --> K[返回结果页]
-    I --> L[使用功能]
-    J --> M[完成操作]
-    K --> N[继续浏览]
-    L --> O[功能操作完成]
-    M --> P[返回主界面]
-    N --> P
-    O --> P
-    %% 样式定义
-    classDef startEnd fill:#e1f5fe,stroke:#01579b,stroke-width:2px
-    classDef process fill:#f3e5f5,stroke:#4a148c,stroke-width:2px
-    classDef decision fill:#fff3e0,stroke:#e65100,stroke-width:2px
-    classDef userAction fill:#e8f5e8,stroke:#1b5e20,stroke-width:2px
-    class A,P startEnd
-    class B,C,D,E,G,H,I,J,K,L,M,N,O process
-    class F decision
-    class C,D userAction
-```
-**快速操作流程**：
-[描述用户日常快速使用产品的典型流程，如搜索、查看结果、保存等]
-**深度使用流程图**：
-```mermaid
-flowchart TD
-    A[深度使用入口] --> B[功能选择]
-    B --> C[高级设置]
-    B --> D[数据分析]
-    B --> E[历史管理]
-    C --> F[个性化配置]
-    F --> G[保存设置]
-    D --> H[数据筛选]
-    H --> I[结果分析]
-    I --> J[导出报告]
-    E --> K[历史记录查看]
-    K --> L[记录筛选]
-    L --> M[批量操作]
-    M --> N[数据清理]
-    G --> O[设置完成]
-    J --> P[分析完成]
-    N --> Q[管理完成]
-    O --> R[返回主界面]
-    P --> R
-    Q --> R
-    %% 样式定义
-    classDef startEnd fill:#e1f5fe,stroke:#01579b,stroke-width:2px
-    classDef process fill:#f3e5f5,stroke:#4a148c,stroke-width:2px
-    classDef decision fill:#fff3e0,stroke:#e65100,stroke-width:2px
-    classDef userAction fill:#e8f5e8,stroke:#1b5e20,stroke-width:2px
-    class A,R startEnd
-    class B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q process
-    class B decision
-    class C,D,E userAction
-```
-**深度使用流程**：
-[描述用户深度使用产品功能的流程，如高级设置、数据分析等]
-#### 4.1.3 核心用户旅程
-**用户旅程1：[主要使用场景]**
-- **触发点**：[用户什么情况下会使用这个功能]
-- **目标**：[用户想要达到什么目标]
-- **步骤**：
-  1. [步骤1描述]
-  2. [步骤2描述]
-  3. [步骤3描述]
-- **成功标准**：[如何判断用户完成了目标]
-- **可能的障碍**：[用户可能遇到的困难]
-**主要用户旅程流程图**：
-```mermaid
-journey
-    title 主要用户旅程：[场景名称]
-    section 发现阶段
-      用户遇到问题: 5: 用户
-      打开App寻求解决方案: 4: 用户
-    section 探索阶段
-      浏览功能介绍: 3: 用户
-      尝试核心功能: 4: 用户
-    section 使用阶段
-      完成主要任务: 5: 用户
-      获得预期结果: 5: 用户
-    section 满意阶段
-      对结果满意: 4: 用户
-      考虑继续使用: 3: 用户
-```
-**用户旅程2：[次要使用场景]**
-- **触发点**：[用户什么情况下会使用这个功能]
-- **目标**：[用户想要达到什么目标]
-- **步骤**：
-  1. [步骤1描述]
-  2. [步骤2描述]
-  3. [步骤3描述]
-- **成功标准**：[如何判断用户完成了目标]
-- **可能的障碍**：[用户可能遇到的困难]
-**次要用户旅程流程图**：
-```mermaid
-journey
-    title 次要用户旅程：[场景名称]
-    section 触发阶段
-      特定需求出现: 4: 用户
-      想起App功能: 3: 用户
-    section 使用阶段
-      进入相关功能: 3: 用户
-      完成特定任务: 4: 用户
-    section 评估阶段
-      评估使用效果: 3: 用户
-      决定是否重复使用: 2: 用户
-```
-### 4.2 信息架构设计
-**信息架构概述**：
-基于用户体验流程，设计产品信息架构，定义用户界面的层级结构、导航路径和功能组织方式。通过清晰的信息架构设计，用户可以快速理解产品功能，高效完成目标任务。
-**核心架构原则**：
-- **层级清晰**：主要功能一目了然，次要功能合理隐藏
-- **路径简洁**：核心任务3步内完成，减少用户认知负担
-- **一致性**：统一的交互模式和视觉语言
-- **可扩展性**：支持功能迭代和用户需求变化
-#### 4.2.1 信息架构图
-```mermaid
-graph TD
-    A[启动页] --> B{新用户?}
-    B -->|是| C1[起始页]
-    B -->|否| D[主界面]
-    subgraph 引导页分组
-        C1 --> C2[功能介绍页1]
-        C2 --> C3[功能介绍页2]
-        C3 --> C4[功能介绍页3]
-        C4 --> D
-    end
-    D --> E[搜索界面]
-    D --> F[历史记录]
-    D --> G[设置页面]
-    E --> H[搜索结果]
-    H --> K[搜索源弹窗]
-    K --> I[内容卡片]
-    K --> J[网页结果]
-    I --> L[功能页面]
-    L --> M{权限检查}
-    M -->|免费用户| N[解锁弹窗]
-    M -->|付费用户| O[功能界面]
-    N --> N1[广告解锁]
-    N --> N2[付费升级]
-    N1 --> O
-    N2 --> P[付费页面]
-    subgraph 功能分组
-        O --> Q[初始形态]
-        O --> R[使用形态]
-        Q -.->|用户发起操作| R
-        Q --> S[推荐内容]
-        R --> T[历史记录]
-        R --> U[功能操作]
-        R --> V[来源列表弹窗]
-    end
-    F --> W[历史记录]
-    W --> X[记录详情]
-    X --> O
-    subgraph 设置分组
-        G --> Y[账户设置]
-        G --> Z[功能设置]
-        G --> AA[关于页面]
-    end
-    P --> BB[订阅管理]
-    P --> CC[恢复购买]
-    %% 页面样式 - 蓝色
-    style A fill:#e3f2fd
-    style C1 fill:#e3f2fd
-    style C2 fill:#e3f2fd
-    style C3 fill:#e3f2fd
-    style C4 fill:#e3f2fd
-    style D fill:#e3f2fd
-    style E fill:#e3f2fd
-    style F fill:#e3f2fd
-    style G fill:#e3f2fd
-    style L fill:#e3f2fd
-    style O fill:#e3f2fd
-    style P fill:#e3f2fd
-    %% 弹窗样式 - 橙色
-    style K fill:#fff3e0
-    style N fill:#fff3e0
-    style V fill:#fff3e0
-    %% 内容元素样式 - 浅绿色
-    style H fill:#e8f5e8
-    style I fill:#e8f5e8
-    style J fill:#e8f5e8
-    style W fill:#e8f5e8
-    style X fill:#e8f5e8
-    %% 功能样式 - 紫色
-    style S fill:#f3e5f5
-    style T fill:#f3e5f5
-    style U fill:#f3e5f5
-    style N1 fill:#f3e5f5
-    style N2 fill:#f3e5f5
-    style BB fill:#f3e5f5
-    style CC fill:#f3e5f5
-    %% 状态样式 - 浅蓝色
-    style Q fill:#e1f5fe
-    style R fill:#e1f5fe
-    %% 逻辑节点样式 - 白色
-    style B fill:#ffffff
-    style M fill:#ffffff
-    %% 分组容器样式 - 浅灰色背景
-    style 引导页分组 fill:#f5f5f5
-    style 功能分组 fill:#f5f5f5
-    style 设置分组 fill:#f5f5f5
-```
-**架构说明**：
-- **启动流程**：新用户进入引导页分组（起始页→功能介绍页1-3）→ 主界面，老用户直接进入主界面
-- **核心功能**：搜索界面 → 搜索结果 → 搜索源弹窗 → 内容卡片/网页结果 → 功能分组
-- **权限管理**：免费用户功能限制 → 广告解锁/付费升级
-- **历史管理**：历史记录 → 快速恢复功能使用
-- **状态管理**：功能界面支持初始形态和使用形态之间的单向切换
-- **设置管理**：设置分组包含账户、功能、关于等辅助功能
-- **颜色系统**：蓝色(页面)、橙色(弹窗)、浅绿色(内容元素)、紫色(功能)、浅蓝色(状态)、白色(逻辑节点)、浅灰色(分组容器)
-#### 4.2.2 导航层级
-**一级导航**：
-- 搜索界面（主要功能入口）
-- 历史记录（使用记录管理）
-- 设置页面（账户管理）
-**二级导航**：
-- 搜索结果 → 搜索源弹窗
-- 历史记录 → 记录详情/功能恢复
-- 设置页面 → 账户/功能/关于
-**三级导航**：
-- 搜索源弹窗 → 内容卡片/网页结果
-- 功能页面 → 初始形态/使用形态
-- 功能界面 → 推荐内容/历史记录/功能操作/来源列表弹窗
-- 付费页面 → 订阅管理/恢复购买
-### 4.3 设计原则
-**设计原则**：
-- **[原则1]**：[描述设计原则]
-- **[原则2]**：[描述设计原则]
-- **[原则3]**：[描述设计原则]
-- **[原则4]**：[描述设计原则]
-### 4.4 关键界面
-**界面分组说明**：
-当界面数量超过5个时，建议按功能模块进行分组管理，例如：
-- **[引导页设计组]**：起始页、功能介绍页1-4等
-- **[分组1]**：[分组名称和包含的界面类型]
-- **[分组2]**：[分组名称和包含的界面类型]
-- **[分组3]**：[分组名称和包含的界面类型]
-#### 4.4.1 引导页设计组
-**设计说明**：
-引导页是新用户首次接触App的重要入口，通过精心设计的视觉和文案，能够有效传达产品价值，提升用户转化率和留存率。引导页通常包含起始页和3-4个功能介绍页。
-##### 引导页1：起始页
-- **描述**：新用户首次打开App时的起始引导页，包含隐私条款和服务说明
-- **关键元素**：主视觉图片、引导文案、隐私条款链接、服务条款链接、继续按钮
-- **交互流程**：用户首次启动 → 查看起始页 → 阅读条款 → 点击继续
-- **设计说明**：简洁优雅的设计风格，突出品牌形象，清晰展示法律条款
-- **主视觉内容**：[描述主视觉图片或动画的内容，如展示产品核心功能的场景]
-- **界面文案 (Interface Copy)**：
-  - **主标题**：`"[品牌名称或核心价值主张]"`
-  - **引导文案**：`"[简短的功能描述]"`
-  - **继续按钮**：`"[明确的行动指引]"`
-  - **隐私政策链接**：`"Privacy Policy"`
-  - **服务条款链接**：`"Terms of Service"`
-##### 引导页2：功能介绍页1 - [功能名称]
-- **描述**：介绍App的核心功能
-- **关键元素**：功能演示图片/视频、标题文案、说明文案
-- **主视觉内容**：[描述功能演示的图片或视频内容]
-- **界面文案 (Interface Copy)**：
-  - **标题**：`"[功能名称或核心价值]"`
-  - **说明**：`"[简短的功能描述，1-2行]"`
-- **设计原则**：
-  - 每页只传达一个核心信息
-  - 使用动词开头的简洁标题
-  - 控制在1-2行的说明文案
-  - 展示具体的使用场景或效果
-##### 引导页3：功能介绍页2 - [功能名称]
-- **描述**：介绍App的重要功能
-- **关键元素**：功能演示图片/视频、标题文案、说明文案
-- **主视觉内容**：[描述功能演示的图片或视频内容]
-- **界面文案 (Interface Copy)**：
-  - **标题**：`"[功能名称或核心价值]"`
-  - **说明**：`"[简短的功能描述，1-2行]"`
-##### 引导页4：功能介绍页3 - [功能名称]
-- **描述**：介绍App的特色功能
-- **关键元素**：功能演示图片/视频、标题文案、说明文案
-- **主视觉内容**：[描述功能演示的图片或视频内容]
-- **界面文案 (Interface Copy)**：
-  - **标题**：`"[功能名称或核心价值]"`
-  - **说明**：`"[简短的功能描述，1-2行]"`
-##### 引导页5：功能介绍页4 - [功能名称]
-- **描述**：介绍App的高级功能或未来展望
-- **关键元素**：功能演示图片/视频、标题文案、说明文案
-- **主视觉内容**：[描述功能演示的图片或视频内容]
-- **界面文案 (Interface Copy)**：
-  - **标题**：`"[功能名称或核心价值]"`
-  - **说明**：`"[简短的功能描述，1-2行]"`
-**引导页设计最佳实践**：
-- 页面数量控制在4-5页以内，避免用户疲劳
-- 每页聚焦一个核心功能，避免信息堆砌
-- 使用真实的使用场景和效果对比
-- 文案简洁易懂，符合品牌调性
-- 支持左右滑动切换和跳过功能
-- 提供明确的进度指示
-#### 4.4.2 [分组名称]
-##### 界面1：[界面名称]
-**界面功能概述**：
-[描述界面的核心功能和在整个产品中的作用，说明用户通过这个界面可以完成什么任务，以及它如何与其他界面和功能模块协作。概述应该简洁明了，帮助读者快速理解界面的价值和定位。]
-- **描述**：[描述界面的主要功能和用途]
-- **UI 元素说明**：
-  - [列出界面的主要UI元素和布局]
-  - [描述关键元素的位置和样式]
-  - [说明视觉层级和信息架构]
-- **交互说明**：
-  - [描述用户与界面的交互步骤]
-  - [说明手势操作和点击行为]
-  - [描述状态变化和反馈机制]
-- **界面文案 (Interface Copy)**：
-  - **[元素名称]**：`"[文案内容]"`
-  - **[元素名称]**：`"[文案内容]"`
-- **线框图设计草图**：
-  ```
-  [使用ASCII艺术风格绘制界面线框图，包含以下符号约定：
-  ┌─┐ 表示界面边界
-  ├─┤ 表示分隔线
-  │ │ 表示内容区域
-  [按钮] 表示按钮元素
-  [图片] 表示图片元素
-  [文字] 表示文字内容
-  ● 表示状态指示器
-  → 表示流程方向
-  ]
-  ```
-##### 界面2：[界面名称]
-**界面功能概述**：
-[描述界面的核心功能和在整个产品中的作用，说明用户通过这个界面可以完成什么任务，以及它如何与其他界面和功能模块协作。概述应该简洁明了，帮助读者快速理解界面的价值和定位。]
-- **描述**：[描述界面的主要功能和用途]
-- **UI 元素说明**：
-  - [列出界面的主要UI元素和布局]
-  - [描述关键元素的位置和样式]
-  - [说明视觉层级和信息架构]
-- **交互说明**：
-  - [描述用户与界面的交互步骤]
-  - [说明手势操作和点击行为]
-  - [描述状态变化和反馈机制]
-- **界面文案 (Interface Copy)**：
-  - **[元素名称]**：`"[文案内容]"`
-  - **[元素名称]**：`"[文案内容]"`
-- **线框图设计草图**：
-  ```
-  [使用ASCII艺术风格绘制界面线框图]
-  ```
-#### 4.4.3 [分组名称]
-##### 界面3：[界面名称]
-**界面功能概述**：
-[描述界面的核心功能和在整个产品中的作用，说明用户通过这个界面可以完成什么任务，以及它如何与其他界面和功能模块协作。概述应该简洁明了，帮助读者快速理解界面的价值和定位。]
-- **描述**：[描述界面的主要功能和用途]
-- **UI 元素说明**：
-  - [列出界面的主要UI元素和布局]
-  - [描述关键元素的位置和样式]
-  - [说明视觉层级和信息架构]
-- **交互说明**：
-  - [描述用户与界面的交互步骤]
-  - [说明手势操作和点击行为]
-  - [描述状态变化和反馈机制]
-- **界面文案 (Interface Copy)**：
-  - **[元素名称]**：`"[文案内容]"`
-  - **[元素名称]**：`"[文案内容]"`
-- **线框图设计草图**：
-  ```
-  [使用ASCII艺术风格绘制界面线框图]
-  ```
-#### 4.4.4 IAP付费页面（如适用）
-##### IAP付费页面设计
-**界面功能概述**：
-IAP付费页面是用户升级到高级功能的关键界面，通过精心设计的视觉呈现和文案说明，向用户展示付费版本的价值和优势。页面需要在保持品牌调性的同时，清晰传达高级功能的具体价值，促进用户付费转化。
-**设计要点**：
-- **描述**：展示产品高级功能的价值主张，引导用户升级到付费版本
-- **关键元素**：背景图片、主标题、功能列表、价格信息、订阅按钮、恢复购买选项
-- **设计风格**：与产品整体品牌保持一致，使用现代简洁的设计语言
-**背景图片设计说明**：
-- **视觉主题**：[描述背景图片的主题和概念，如展示产品核心功能的视觉化表现]
-- **色调风格**：[描述使用的色调和品牌色彩，营造的氛围感]
-- **构图要求**：背景图片不应干扰文字阅读，保持良好的对比度
-- **元素建议**：[列出可能包含的视觉元素，如图标、抽象图形等]
-**界面文案 (Interface Copy)**：
-- **主标题**：`"[突出价值的主标题]"`
-- **副标题**：`"[详细说明价值主张的副标题]"`
-- **功能亮点文案**：
-  - `"[高级功能1的用户价值描述]"`
-  - `"[高级功能2的用户价值描述]"`
-  - `"[高级功能3的用户价值描述]"`
-  - `"[高级功能4的用户价值描述]"`
-- **价格展示**：`"[价格信息，如$X.XX/month or $XX.XX/year]"`
-- **主要按钮**：`"[主要行动按钮文案]"`
-- **次要按钮**：`"Restore Purchases"`
-- **免费试用**：`"[免费试用信息，如X-day free trial included]"`
-**文案设计原则**：
-- **价值导向**：突出用户能获得的具体价值和体验提升
-- **品牌一致**：延续产品核心主题和品牌调性
-- **简洁明了**：避免过多技术术语，专注于用户利益
-- **紧迫感适度**：通过免费试用等方式降低用户决策门槛
-### 4.5 交互设计
-#### 4.5.1 [交互功能名称]
-**功能概述**：
-[描述交互功能的核心功能和设计理念]
-**核心交互功能**：
-- **[功能1]**：[详细描述]
-- **[功能2]**：[详细描述]
-- **[功能3]**：[详细描述]
-### 4.6 响应式设计
-#### 4.6.1 屏幕适配
-**iPhone尺寸适配**：
-- **iPhone SE (4.7")**：[适配策略]
-- **iPhone Standard (6.1")**：[适配策略]
-- **iPhone Plus (6.7")**：[适配策略]
-**iPad适配策略**：
-- **横屏模式**：[适配策略]
-- **竖屏模式**：[适配策略]
-- **多任务模式**：[适配策略]
-#### 4.6.2 内容优先级
-**核心功能优先级**：
-- **[功能1]**：[优先级说明]
-- **[功能2]**：[优先级说明]
-- **[功能3]**：[优先级说明]
-**次要功能适配**：
-- **[功能1]**：[适配策略]
-- **[功能2]**：[适配策略]
-- **[功能3]**：[适配策略]
-### 4.7 无障碍设计
-> 说明：如无特殊要求，本节可不填写。
-#### 4.7.1 视觉无障碍
-**色彩对比度**：
-- **文字对比度**：[具体要求]
-- **色彩识别**：[具体要求]
-- **高对比度模式**：[支持说明]
-**字体大小**：
-- **动态字体**：[支持说明]
-- **最小尺寸**：[具体要求]
-- **可读性**：[设计要求]
-#### 4.7.2 操作无障碍
-**VoiceOver支持**：
-- **标签描述**：[要求说明]
-- **状态描述**：[要求说明]
-- **操作提示**：[要求说明]
-**触摸辅助**：
-- **最小触摸区域**：[尺寸要求]
-- **间距设计**：[设计要求]
-- **替代操作**：[功能说明]