NAS帮助中心页面原型级线框说明
文档信息
| 项目 | 内容 |
|---|
| 文档版本 | v1.0 |
| 创建日期 | 2026-04-13 |
| 更新日期 | 2026-04-13 |
| 关联文档 | [[我的笔记/NAS需求文档/帮助中心/NAS帮助中心产品需求文档(PRD)]]、[[我的笔记/NAS需求文档/帮助中心/软件需求规划]]、[[我的笔记/NAS需求文档/帮助中心/NAS帮助中心产品竞品分析]] |
| 适用范围 | Web / PC 端为主 |
| 目标 | 为 UI、交互、前后端提供帮助中心页面级低保真线框参考 |
一、原型说明目标
本说明用于补充帮助中心 PRD 的页面级表达，重点回答以下问题：
- 帮助中心首页如何组织搜索、学习、排障、支持升级。
- 搜索结果页、文章详情页、排障页分别长什么样。
- 新手入门与问题排障如何区分信息结构。
- 自助无解时，联系支持页如何承接升级支持。
- 内容后台需要哪些基础页面与字段区块。
二、原型设计原则
- 搜索优先：帮助中心首页的第一主入口必须是搜索。
- 任务导向：新手内容按任务组织，排障内容按症状组织。
- 结构先于视觉：先明确模块层级，再进入高保真设计。
- 升级支持不断链：文章页、排障页、无结果页都要能进入联系支持。
- 前后台协同：前台看到的结构，需要后台可配置、可维护。
- 首期克制：首发不做复杂 AI 问答和过度算法推荐，先把基础闭环跑通。
三、原型范围
3.1 本次覆盖页面
前台页面
- 帮助中心首页
- 搜索结果页
- 知识文章详情页
- 新手入门专区页
- 新手任务专题页
- 排障中心页
- 排障专题页
- 联系支持页
- 支持资源聚合页
- 通用空状态 / 无结果状态
后台页面
- 文章管理列表页
- 文章编辑页
- 分类标签管理页
- 首页推荐位配置页
3.2 本次不覆盖
- 高保真视觉稿
- 动效细节
- AI 搜索交互稿
- 社区论坛页面
- 多语言独立页面
四、整体页面结构关系
flowchart TD
A[帮助中心首页] --> B[搜索结果页]
A --> C[新手入门专区]
A --> D[排障中心]
A --> E[联系支持页]
A --> F[支持资源聚合页]
B --> G[知识文章详情页]
C --> H[新手任务专题页]
H --> G
D --> I[排障专题页]
I --> G
G --> E
B --> E
I --> E
J[文章管理列表页] --> K[文章编辑页]
J --> L[分类标签管理页]
J --> M[首页推荐位配置页]
五、全局布局规范
5.1 前台通用布局
┌──────────────────────────────────────────────────────────────────────────────┐
│ Logo / 帮助中心 | 首页 | 新手入门 | 知识中心 | 问题排障 | 联系支持 | 用户态 │
├──────────────────────────────────────────────────────────────────────────────┤
│ 全局搜索框 / 面包屑 / 页面标题 │
├──────────────────────────────────────────────────────────────────────────────┤
│ 页面主体内容 │
│ │
├──────────────────────────────────────────────────────────────────────────────┤
│ 页脚：下载中心 | 安全公告 | 服务状态 | 隐私政策 | 联系方式 │
└──────────────────────────────────────────────────────────────────────────────┘
5.2 通用组件约束
| 组件 | 说明 |
|---|
| 全局搜索框 | 首页首屏大搜索；内页使用顶部收敛版搜索框 |
| 内容类型标签 | 文章 / FAQ / 排障 / 公告 / 资源 |
| 适用范围卡片 | 文章页必须有，显示适用产品和版本 |
| 风险提示框 | 用于高风险排障或操作型文章 |
| 升级支持卡片 | 文章页、排障页、无结果页统一使用 |
| 推荐内容模块 | 相关文章、热门文章、关联资源统一形态 |
六、PC端页面原型说明
6.1 页面 1：帮助中心首页
6.1.1 页面目标
- 承接绝大多数用户的首次进入
- 让用户快速决定“搜 / 学 / 排障 / 联系支持”
- 承载支持资源总入口
6.1.2 低保真布局草图
┌──────────────────────────────────────────────────────────────────────────────┐
│ Logo 首页 新手入门 知识中心 问题排障 联系支持 登录态 │
├──────────────────────────────────────────────────────────────────────────────┤
│ │
│ [ 搜索 NAS 使用问题、错误码、功能名 ] │
│ 热门搜索：远程访问 / 存储池 / 备份 / 权限 / 升级 │
│ │
├──────────────────────────────────────────────────────────────────────────────┤
│ 新手快速开始 │
│ [第一次安装] [创建存储池/卷] [共享文件夹] [远程访问] [设置备份] [用户与权限] │
├──────────────────────────────────────────────────────────────────────────────┤
│ 热门问题 │ 问题排障 │
│ - 无法访问 NAS │ [无法访问 NAS] [硬盘异常] [空间不足] │
│ - 如何配置远程访问 │ [升级失败] [备份失败] [权限异常] │
│ - 如何创建共享文件夹 │ │
├──────────────────────────────────────────────────────────────────────────────┤
│ 支持资源 │
│ [下载中心] [兼容性说明] [安全公告] [服务状态] │
├──────────────────────────────────────────────────────────────────────────────┤
│ 仍未解决？ [联系支持] 最新公告/专题：[系统安全公告] [版本使用说明] │
└──────────────────────────────────────────────────────────────────────────────┘
6.1.3 页面说明
| 区域 | 说明 |
|---|
| 顶部导航 | 固定一级入口 |
| Hero 搜索区 | 首页核心主入口 |
| 新手快速开始 | 面向第一次使用用户 |
| 热门问题 | 面向已有明确问题的用户 |
| 问题排障 | 面向故障排查用户 |
| 支持资源 | 面向下载、公告、状态查询 |
| 联系支持区 | 首页兜底升级路径 |
6.1.4 交互说明
| 交互 | 结果 |
|---|
| 搜索框 Enter 搜索 | 进入搜索结果页 |
| 点击热门搜索词 | 直接进入搜索结果页 |
| 点击新手卡片 | 进入新手任务专题页 |
| 点击排障卡片 | 进入对应排障专题 |
| 点击支持资源 | 进入资源聚合页或对应资源页 |
| 点击联系支持 | 进入联系支持页 |
6.2 页面 2：搜索结果页
6.2.1 页面目标
- 帮助用户快速定位最相关内容
- 通过筛选缩小范围
- 在无结果时提供兜底动作
6.2.2 低保真布局草图
┌──────────────────────────────────────────────────────────────────────────────┐
│ 顶部导航 + 小搜索框 │
├──────────────────────────────────────────────────────────────────────────────┤
│ 搜索：远程访问 共 28 条结果 │
├───────────────────┬──────────────────────────────────────────────────────────┤
│ 筛选条件 │ 结果列表 │
│ [内容类型] │ [文章] 如何配置远程访问 │
│ □ 文章 │ 摘要摘要摘要... │
│ □ FAQ │ 标签：远程访问 / 新手 / NASOS 1.0 │
│ □ 排障 │ │
│ □ 公告 │ [排障] 为什么远程访问失败？ │
│ │ 摘要摘要摘要... │
│ [问题类型] │ 标签：远程访问 / 网络 / 排障 │
│ □ 安装 │ │
│ □ 网络 │ [资源] 远程访问客户端下载 │
│ □ 存储 │ │
│ │ │
│ [系统版本] │ │
│ □ 1.0 │ │
│ □ 1.5 │ │
└───────────────────┴──────────────────────────────────────────────────────────┘
6.2.3 无结果态草图
┌────────────────────────────────────────────────────────────┐
│ 未找到“错误码 0x9999”相关内容 │
│ 你可以尝试： │
│ - 更换关键词 │
│ - 去掉特殊符号 │
│ - 查看热门问题 │
│ │
│ [热门问题推荐] [进入联系支持] │
└────────────────────────────────────────────────────────────┘
6.2.4 交互说明
| 交互 | 结果 |
|---|
| 更换搜索词 | 结果页刷新 |
| 勾选筛选项 | 当前页局部刷新结果 |
| 点击结果项 | 进入文章详情页/资源页 |
| 点击无结果页联系支持 | 进入联系支持页并带入关键词 |
6.3 页面 3：知识文章详情页
6.3.1 页面目标
- 展示结构化知识内容
- 帮助用户判断“这篇是否适用于我”
- 提供相关推荐和升级支持
6.3.2 低保真布局草图
┌──────────────────────────────────────────────────────────────────────────────┐
│ 顶部导航 + 小搜索框 │
├──────────────────────────────────────────────────────────────────────────────┤
│ 面包屑：首页 > 知识中心 > 远程访问 │
├──────────────────────────────────────────────────────────────────────────────┤
│ 标题：如何配置 NAS 远程访问 │
│ 摘要：帮助用户完成外网访问配置 │
│ 更新时间：2026-04-13 │
├───────────────────────────────┬──────────────────────────────────────────────┤
│ 左侧正文 │ 右侧辅助区 │
│ 适用产品：全系列 / X系列 │ 适用范围卡片 │
│ 适用版本：NASOS 1.0 / 1.5 │ - 产品：X系列 / 全系列 │
│ │ - 版本：1.0+ │
│ 一、前置条件 │ │
│ 二、步骤 1 │ 相关文章 │
│ 三、步骤 2 │ - 远程访问失败怎么办 │
│ [风险提示框：公网映射需注意安全]│ - 如何启用 HTTPS │
│ 四、常见问题 │ │
│ │ 相关资源 │
│ │ - 远程访问客户端下载 │
│ │ - 安全公告 │
├───────────────────────────────┴──────────────────────────────────────────────┤
│ 这篇文章是否解决了你的问题？ [是] [否] │
│ 若否： [查看更多相关文章] [联系支持] │
└──────────────────────────────────────────────────────────────────────────────┘
6.3.3 页面说明
| 区域 | 说明 |
|---|
| 面包屑 | 方便回退 |
| 标题摘要区 | 快速理解主题 |
| 正文区 | 结构化步骤和说明 |
| 右侧辅助区 | 适用范围、相关推荐、相关资源 |
| 页尾反馈区 | 解决问题反馈 + 升级支持 |
6.3.4 交互说明
| 交互 | 结果 |
|---|
| 点击相关文章 | 打开对应文章 |
| 点击资源链接 | 跳转对应资源页 |
| 点击“是/否” | 提交文章反馈 |
| 点击“联系支持” | 进入联系支持页并带入文章 ID |
6.4 页面 4：新手入门专区页
6.4.1 页面目标
- 用任务流而不是内容目录帮助新手上手
- 降低第一次使用 NAS 的认知门槛
6.4.2 低保真布局草图
┌──────────────────────────────────────────────────────────────────────────────┐
│ 顶部导航 + 小搜索框 │
├──────────────────────────────────────────────────────────────────────────────┤
│ 标题：新手入门 │
│ 描述：第一次使用 NAS，建议按以下顺序完成基础配置 │
├──────────────────────────────────────────────────────────────────────────────┤
│ [1. 第一次安装与初始化] 预计 10 分钟 难度：低 │
│ [2. 创建存储池/卷] 预计 8 分钟 难度：中 │
│ [3. 创建共享文件夹] 预计 5 分钟 难度：低 │
│ [4. 添加用户与权限] 预计 8 分钟 难度：中 │
│ [5. 配置远程访问] 预计 10 分钟 难度：中 │
│ [6. 设置备份] 预计 10 分钟 难度：低 │
├──────────────────────────────────────────────────────────────────────────────┤
│ 底部说明：如果你已经遇到故障，请前往 [问题排障] │
└──────────────────────────────────────────────────────────────────────────────┘
6.5 页面 5：新手任务专题页
6.5.1 页面目标
6.5.2 低保真布局草图
┌──────────────────────────────────────────────────────────────────────────────┐
│ 面包屑：首页 > 新手入门 > 第一次安装与初始化 │
├──────────────────────────────────────────────────────────────────────────────┤
│ 标题：第一次安装与初始化 │
│ 描述：帮助你完成设备首次启动与基础设置 │
│ 预计耗时：10 分钟 难度：低 │
├──────────────────────────────────────────────────────────────────────────────┤
│ 步骤导航 │ 内容区 │
│ 1. 开机与连接 │ 当前步骤说明 │
│ 2. 初始化向导 │ 关联文章卡片 │
│ 3. 账号设置 │ - 如何首次登录 │
│ 4. 完成验证 │ - 初始化失败怎么办 │
├──────────────────────────────────────────────────────────────────────────────┤
│ 未解决？ [查看排障] [联系支持] │
└──────────────────────────────────────────────────────────────────────────────┘
6.6 页面 6：排障中心页
6.6.1 页面目标
- 让用户按故障症状快速进入对应主题
- 避免用户在目录里盲找技术模块
6.6.2 低保真布局草图
┌──────────────────────────────────────────────────────────────────────────────┐
│ 顶部导航 + 小搜索框 │
├──────────────────────────────────────────────────────────────────────────────┤
│ 标题：问题排障 │
│ 描述：按你遇到的症状选择问题类型 │
├──────────────────────────────────────────────────────────────────────────────┤
│ [无法访问 NAS] [硬盘未识别 / RAID 异常] [空间不足] │
│ [性能过慢] [备份失败] [系统升级失败] │
│ [权限异常] │
├──────────────────────────────────────────────────────────────────────────────┤
│ 常见错误码 / 热门故障专题 │
│ - 错误码 1001：无法连接设备 │
│ - 升级失败后无法进入系统怎么办 │
└──────────────────────────────────────────────────────────────────────────────┘
6.7 页面 7：排障专题页
6.7.1 页面目标
- 对某一类故障提供分层排查路径
- 先做低风险检查，再给高风险操作
6.7.2 低保真布局草图
┌──────────────────────────────────────────────────────────────────────────────┐
│ 面包屑：首页 > 问题排障 > 无法访问 NAS │
├──────────────────────────────────────────────────────────────────────────────┤
│ 标题：无法访问 NAS │
│ 症状说明：设备在局域网中不可见，或远程访问失败 │
├────────────────────────────────┬─────────────────────────────────────────────┤
│ 主体内容 │ 右侧辅助区 │
│ 一、快速检查项 │ 故障标签：网络 / 远程访问 / 排障 │
│ - 是否通电 │ │
│ - 网线是否连接 │ 相关内容 │
│ - 路由器是否正常 │ - 如何配置远程访问 │
│ │ - 网络设置说明 │
│ 二、可能原因 │ │
│ 三、修复步骤 │ 升级支持卡片 │
│ [风险提示框：重置网络前请确认] │ [仍未解决？联系支持] │
│ 四、何时联系客服 │ │
└────────────────────────────────┴─────────────────────────────────────────────┘
6.7.3 交互说明
| 交互 | 结果 |
|---|
| 点击相关内容 | 进入关联文章 |
| 点击联系支持 | 带入故障主题进入支持页 |
| 点击顶部搜索 | 重新搜索该问题 |
6.8 页面 8：联系支持页
6.8.1 页面目标
- 在自助失败时提供明确、顺滑的人工支持升级路径
- 在提交工单前做一次轻量分流
6.8.2 低保真布局草图
┌──────────────────────────────────────────────────────────────────────────────┐
│ 顶部导航 + 小搜索框 │
├──────────────────────────────────────────────────────────────────────────────┤
│ 标题：联系支持 │
│ 描述：如果帮助文章未能解决你的问题，可以联系技术支持 │
├───────────────────────────────┬──────────────────────────────────────────────┤
│ 左侧：问题提交区 │ 右侧：相关文章推荐 │
│ 问题主题： [下拉选择] │ 根据主题推荐： │
│ 搜索关键词： [可回填] │ - 远程访问失败怎么办 │
│ 设备型号： [自动识别/手选] │ - 无法访问 NAS 排障 │
│ 系统版本： [自动识别/手选] │ │
│ 错误码： [输入框] │ │
│ │ │
│ [提交工单] │ [仍要提交工单] │
└───────────────────────────────┴──────────────────────────────────────────────┘
6.8.3 页面说明
| 区域 | 说明 |
|---|
| 问题提交区 | 收集必要上下文字段 |
| 推荐区 | 在提交前进行轻量文章分流 |
| 提交入口 | 调用外部工单系统或内部工单表单 |
6.8.4 交互说明
| 交互 | 结果 |
|---|
| 选择问题主题 | 刷新推荐文章 |
| 提交工单 | 透传主题、关键词、已读文章、设备信息 |
| 点推荐文章 | 新开页或当前页打开文章 |
6.9 页面 9：支持资源聚合页
6.9.1 页面目标
- 集中承载下载、公告、状态等支持外围资源
- 补足帮助中心“支持门户感”
6.9.2 低保真布局草图
┌──────────────────────────────────────────────────────────────────────────────┐
│ 标题：支持资源 │
├──────────────────────────────────────────────────────────────────────────────┤
│ [下载中心] 描述：下载 App / 工具 / 手册 [进入] │
│ [兼容性说明] 描述：查看硬盘/配件兼容信息 [进入] │
│ [安全公告] 描述：查看已发布安全通知 [进入] │
│ [服务状态] 描述：查看系统/云服务状态 [进入] │
└──────────────────────────────────────────────────────────────────────────────┘
6.10 页面 10：通用空状态 / 无结果状态
6.10.1 空状态草图
┌────────────────────────────────────────────┐
│ 暂无内容 │
│ 当前分类下还没有可展示内容 │
│ [返回首页] [联系支持] │
└────────────────────────────────────────────┘
6.10.2 使用场景
- 某分类暂无文章
- 某资源区暂无配置
- 新手专题未配置内容
七、后台页面原型说明
7.1 页面 11：文章管理列表页
7.1.1 页面目标
7.1.2 低保真布局草图
┌──────────────────────────────────────────────────────────────────────────────┐
│ 文章管理 [新建文章] │
├──────────────────────────────────────────────────────────────────────────────┤
│ 搜索标题/ID [____] 分类[下拉] 状态[下拉] 版本[下拉] [查询] [重置] │
├──────────────────────────────────────────────────────────────────────────────┤
│ 标题 类型 问题类型 适用版本 状态 更新时间 操作 │
│ 远程访问配置 教程 网络 1.0/1.5 已发布 2026-04-13 编辑/下线 │
│ 无法访问 NAS 排障 网络 1.0/1.5 草稿 2026-04-12 编辑/发布 │
└──────────────────────────────────────────────────────────────────────────────┘
7.2 页面 12：文章编辑页
7.2.1 页面目标
7.2.2 低保真布局草图
┌──────────────────────────────────────────────────────────────────────────────┐
│ 返回列表 标题：[__________________________] 状态：草稿 │
├──────────────────────────────────────────────────────────────────────────────┤
│ 基础信息 │
│ 摘要：[____________________________________] │
│ 类型：[教程/FAQ/排障/公告] 问题类型：[下拉] │
│ 适用产品：[多选] 适用版本：[多选] │
│ 标签：[多选] │
├──────────────────────────────────────────────────────────────────────────────┤
│ 正文编辑区 │
│ [Markdown/富文本编辑器] │
├──────────────────────────────────────────────────────────────────────────────┤
│ 关联配置 │
│ 相关文章：[多选] 相关资源：[多选] │
│ 风险提示：[可选输入] │
├──────────────────────────────────────────────────────────────────────────────┤
│ [保存草稿] [预览] [发布] │
└──────────────────────────────────────────────────────────────────────────────┘
7.2.3 关键规则
- 未填写适用产品、适用版本、标题、摘要时不可发布
- 公告类文章支持置顶字段
- 排障类文章建议强制展示风险提示配置位
7.3 页面 13：分类标签管理页
7.3.1 低保真布局草图
┌──────────────────────────────────────────────────────────────────────────────┐
│ 分类标签管理 │
├───────────────────────┬──────────────────────────────────────────────────────┤
│ 分类树/标签组 │ 详情编辑区 │
│ - 新手入门 │ 名称：[________] │
│ - 教程 │ 类型：[分类/标签/版本] │
│ - FAQ │ 排序：[__] │
│ - 排障 │ 状态：[启用/停用] │
│ - 安全公告 │ [保存] [新增同级] [删除] │
└───────────────────────┴──────────────────────────────────────────────────────┘
7.4 页面 14：首页推荐位配置页
7.4.1 页面目标
7.4.2 低保真布局草图
┌──────────────────────────────────────────────────────────────────────────────┐
│ 首页推荐位配置 │
├──────────────────────────────────────────────────────────────────────────────┤
│ 模块：热门问题 │
│ 1. [选择文章____________] 排序[1] 状态[启用] │
│ 2. [选择文章____________] 排序[2] 状态[启用] │
├──────────────────────────────────────────────────────────────────────────────┤
│ 模块：新手任务 │
│ 1. [第一次安装与初始化] 排序[1] │
│ 2. [创建存储池/卷] 排序[2] │
├──────────────────────────────────────────────────────────────────────────────┤
│ 模块：首页公告 │
│ [选择公告文章____________] 展示时间：[____ - ____] │
│ │
│ [保存配置] │
└──────────────────────────────────────────────────────────────────────────────┘
八、页面间关键状态说明
8.1 推荐出图状态
首页
搜索结果页
文章详情页
排障页
联系支持页
后台
九、交互补充建议
9.1 首期建议保留的核心动作
- 搜索
- 点击热门问题
- 点击新手任务
- 点击排障症状
- 文章反馈“是否解决问题”
- 联系支持
- 后台保存草稿 / 发布
9.2 首期不建议做重的交互
- 多层复杂筛选器
- 智能机器人对话入口
- 文章页过强社交互动
- 首页过多运营 banner
9.3 风险提示的视觉要求
- 需与普通说明块明显区分
- 颜色建议为橙/红系警示色
- 涉及格式化、重置、重建、删除数据时必须出现
十、首期建议出图清单
10.1 前台页面
- 帮助中心首页-默认态
- 帮助中心首页-带公告态
- 搜索结果页-有结果态
- 搜索结果页-无结果态
- 文章详情页-普通教程态
- 文章详情页-高风险提示态
- 新手入门专区页
- 新手任务专题页
- 排障中心页
- 排障专题页
- 联系支持页
- 支持资源聚合页
10.2 后台页面
- 文章管理列表页
- 文章编辑页
- 分类标签管理页
- 首页推荐位配置页
十一、原型结论
帮助中心低保真原型应突出以下核心：
- 首页必须以搜索为中心，而不是文章列表。
- 新手与排障必须双路径并存：一个按任务，一个按症状。
- 文章页必须先展示适用范围，再展示正文步骤。
- 无结果页、文章页、排障页都必须能升级到人工支持。
- 后台结构必须足够轻量，让内容团队可持续维护。