@guru-ai-product/ai-product-kit 0.2.251113215925 → 0.2.251117145040

package/skills/aipk_requirements/documentation/template/4.2_/345/205/263/351/224/256/347/225/214/351/235/242.md

@@ -0,0 +1,248 @@
+# 产品需求文档 - 第四部分（中）：关键界面
+
+## 文档导航
+
+← **[上一部分：用户体验流程与信息架构](./4.1_用户体验流程与信息架构.md)** | **[下一部分：交互与响应式设计](./4.3_交互与响应式设计.md)** → | 📋 **[返回索引](./index.md)**
+
+---
+
+## 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：[界面名称]
+
+<!-- ⚠️ 以下为规范说明，请勿输出到最终文档 ⚠️ -->
+**重要说明**：页面标题必须放在表格外部，作为表格的标题。表格包含两列：左侧是页面说明，右侧是设计图。如果设计图是线框图，使用`<pre><code>`包裹；如果是设计图文件，使用`<img>`标签。参考格式规范：`skills/aipk_design/format-requirement-pages-with-design/requirement-page-table-format.md`
+<!-- ⚠️ 规范说明结束 ⚠️ -->
+
+**界面功能概述**：
+[描述界面的核心功能和在整个产品中的作用，说明用户通过这个界面可以完成什么任务，以及它如何与其他界面和功能模块协作。概述应该简洁明了，帮助读者快速理解界面的价值和定位。]
+
+<table>
+<tr>
+<th>页面说明</th>
+<th>设计图</th>
+</tr>
+<tr>
+<td><strong>描述</strong>：<br>[描述界面的主要功能和用途]<br><br><strong>UI 元素说明</strong>：<br>- [列出界面的主要UI元素和布局]<br>- [描述关键元素的位置和样式]<br>- [说明视觉层级和信息架构]<br><br><strong>交互说明</strong>：<br>- [描述用户与界面的交互步骤]<br>- [说明手势操作和点击行为]<br>- [描述状态变化和反馈机制]<br><br><strong>界面文案 (Interface Copy)</strong>：<br>- [元素名称]："[文案内容]"<br>- [元素名称]："[文案内容]"</td>
+<td>
+<!-- ⚠️ 以下为规范说明，请勿输出到最终文档 ⚠️ -->
+*如果设计图是线框图，使用以下格式：*
+<!-- ⚠️ 规范说明结束 ⚠️ -->
+<pre><code>
+┌─────────────────────────────────────┐
+│ [界面标题]                    [返回] │
+├─────────────────────────────────────┤
+│ ┌─────────────────────────────────┐ │
+│ │ [组件1标题]                     │ │
+│ │ [文字内容] [图片]               │ │
+│ │ [按钮1] [按钮2]                 │ │
+│ └─────────────────────────────────┘ │
+├─────────────────────────────────────┤
+│ ┌─────────────────────────────────┐ │
+│ │ [组件2标题]                     │ │
+│ │ [文字内容]                      │ │
+│ │ [按钮3]                         │ │
+│ └─────────────────────────────────┘ │
+└─────────────────────────────────────┘
+</code></pre>
+<!-- ⚠️ 以下为规范说明，请勿输出到最终文档 ⚠️ -->
+*如果设计图是图片文件，使用以下格式：*
+<!-- ⚠️ 规范说明结束 ⚠️ -->
+<img src="./assets/[界面名称].png" alt="[界面名称]">
+</td>
+</tr>
+</table>
+
+##### 界面2：[界面名称]
+
+**界面功能概述**：
+[描述界面的核心功能和在整个产品中的作用，说明用户通过这个界面可以完成什么任务，以及它如何与其他界面和功能模块协作。概述应该简洁明了，帮助读者快速理解界面的价值和定位。]
+
+<table>
+<tr>
+<th>页面说明</th>
+<th>设计图</th>
+</tr>
+<tr>
+<td><strong>描述</strong>：<br>[描述界面的主要功能和用途]<br><br><strong>UI 元素说明</strong>：<br>- [列出界面的主要UI元素和布局]<br>- [描述关键元素的位置和样式]<br>- [说明视觉层级和信息架构]<br><br><strong>交互说明</strong>：<br>- [描述用户与界面的交互步骤]<br>- [说明手势操作和点击行为]<br>- [描述状态变化和反馈机制]<br><br><strong>界面文案 (Interface Copy)</strong>：<br>- [元素名称]："[文案内容]"<br>- [元素名称]："[文案内容]"</td>
+<td>
+<!-- ⚠️ 以下为规范说明，请勿输出到最终文档 ⚠️ -->
+*如果设计图是线框图，使用以下格式：*
+<!-- ⚠️ 规范说明结束 ⚠️ -->
+<pre><code>
+┌─────────────────────────────────────┐
+│ [界面标题]                          │
+├─────────────────────────────────────┤
+│ [文字内容]                          │
+│ [数据展示]                          │
+├─────────────────────────────────────┤
+│ [按钮1] [按钮2]                     │
+└─────────────────────────────────────┘
+</code></pre>
+<!-- ⚠️ 以下为规范说明，请勿输出到最终文档 ⚠️ -->
+*如果设计图是图片文件，使用以下格式：*
+<!-- ⚠️ 规范说明结束 ⚠️ -->
+<img src="./assets/[界面名称].png" alt="[界面名称]">
+</td>
+</tr>
+</table>
+
+#### 4.4.3 [分组名称]
+
+##### 界面3：[界面名称]
+
+**界面功能概述**：
+[描述界面的核心功能和在整个产品中的作用，说明用户通过这个界面可以完成什么任务，以及它如何与其他界面和功能模块协作。概述应该简洁明了，帮助读者快速理解界面的价值和定位。]
+
+<table>
+<tr>
+<th>页面说明</th>
+<th>设计图</th>
+</tr>
+<tr>
+<td><strong>描述</strong>：<br>[描述界面的主要功能和用途]<br><br><strong>UI 元素说明</strong>：<br>- [列出界面的主要UI元素和布局]<br>- [描述关键元素的位置和样式]<br>- [说明视觉层级和信息架构]<br><br><strong>交互说明</strong>：<br>- [描述用户与界面的交互步骤]<br>- [说明手势操作和点击行为]<br>- [描述状态变化和反馈机制]<br><br><strong>界面文案 (Interface Copy)</strong>：<br>- [元素名称]："[文案内容]"<br>- [元素名称]："[文案内容]"</td>
+<td>
+<!-- ⚠️ 以下为规范说明，请勿输出到最终文档 ⚠️ -->
+*如果设计图是线框图，使用以下格式：*
+<!-- ⚠️ 规范说明结束 ⚠️ -->
+<pre><code>
+┌─────────────────────────────────────┐
+│ [界面标题]                          │
+├─────────────────────────────────────┤
+│ [文字内容]                          │
+│ [数据展示]                          │
+├─────────────────────────────────────┤
+│ [按钮1] [按钮2]                     │
+└─────────────────────────────────────┘
+</code></pre>
+<!-- ⚠️ 以下为规范说明，请勿输出到最终文档 ⚠️ -->
+*如果设计图是图片文件，使用以下格式：*
+<!-- ⚠️ 规范说明结束 ⚠️ -->
+<img src="./assets/[界面名称].png" alt="[界面名称]">
+</td>
+</tr>
+</table>
+
+#### 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.1_用户体验流程与信息架构.md)** | **[下一部分：交互与响应式设计](./4.3_交互与响应式设计.md)** → | 📋 **[返回索引](./index.md)**

package/skills/aipk_requirements/documentation/template/4.3_/344/272/244/344/272/222/344/270/216/345/223/215/345/272/224/345/274/217/350/256/276/350/256/241.md

@@ -0,0 +1,87 @@
+# 产品需求文档 - 第四部分（下）：交互与响应式设计
+
+## 文档导航
+
+← **[上一部分：关键界面](./4.2_关键界面.md)** | 📋 **[返回索引](./index.md)**
+
+---
+
+## 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支持**：
+
+- **标签描述**：[要求说明]
+- **状态描述**：[要求说明]
+- **操作提示**：[要求说明]
+
+**触摸辅助**：
+
+- **最小触摸区域**：[尺寸要求]
+- **间距设计**：[设计要求]
+- **替代操作**：[功能说明]
+
+---
+
+← **[上一部分：关键界面](./4.2_关键界面.md)** | 📋 **[返回索引](./index.md)**

package/skills/aipk_requirements/documentation/template/index.md

@@ -47,13 +47,31 @@
 - **适用场景**：商业化规划、盈利模式设计、产品定价
 - **关键输出**：商业化模式设计、定价方案、收入预测
 
-### [第四部分：用户界面与体验](./4_用户界面与体验.md)
+### 第四部分：用户界面与体验
 
 - **内容概述**：界面设计要求、用户体验流程、交互规范、UI草图
 - **适用场景**：UI/UX设计、原型制作、用户测试
 - **关键输出**：界面布局、交互流程、设计规范
 - **特殊要求**：必须包含每个关键界面的UI草图
 
+#### [第四部分（上）：用户体验流程与信息架构](./4.1_用户体验流程与信息架构.md)
+
+- **内容概述**：用户体验流程设计、信息架构设计、设计原则
+- **适用场景**：流程设计、信息架构规划、设计规范制定
+- **关键输出**：用户流程图、信息架构图、设计原则
+
+#### [第四部分（中）：关键界面](./4.2_关键界面.md)
+
+- **内容概述**：关键界面设计、界面分组、UI草图
+- **适用场景**：界面设计、原型制作、UI评审
+- **关键输出**：界面设计说明、UI草图、界面文案
+
+#### [第四部分（下）：交互与响应式设计](./4.3_交互与响应式设计.md)
+
+- **内容概述**：交互设计、响应式设计、无障碍设计
+- **适用场景**：交互设计、多设备适配、无障碍优化
+- **关键输出**：交互规范、适配策略、无障碍方案
+
 ## 使用指南
 
 ### 文档导航规范