ZogginWeb 电脑端沉浸式记单词功能优化升级业务需求文档

一、文档概述

1.1 文档目的

本文档用于明确 ZogginWeb 电脑端沉浸式记单词功能的优化升级需求，梳理需求背景、核心目标、详细需求及落地优先级，为产品、开发、测试等相关岗位提供统一的需求标准和执行依据，确保优化功能贴合用户需求、符合业务发展方向，最终提升用户学习体验和产品竞争力。

1.2 文档范围

本次需求覆盖 ZogginWeb 电脑端记单词页面的核心优化，包括「自动隐藏+悬浮唤出导航」升级、全局沉浸式体验优化、交互细节打磨、技术落地要求及优先级规划，不涉及移动端、后端数据架构等无关模块。

1.3 核心优化背景

当前 ZogginWeb 电脑端记单词页面存在以下核心痛点，影响用户沉浸感和学习效率，需通过优化升级解决：

导航栏固定显示，占用屏幕空间且分散用户注意力，违背沉浸式学习的核心需求；
学习过程中存在多余干扰元素（如非必要弹窗、冗余导航按钮），易打断用户专注状态；
电脑端操作适配不足，缺乏便捷的快捷键体系，用户操作效率偏低；
视觉体验有待提升，部分元素设计突兀，长期学习易产生视觉疲劳；
个性化适配不足，无法满足不同用户（深度背词、快速复习）的差异化需求。

注：单词释义隐藏逻辑已完成优化，本次需求不涉及该部分，仅围绕导航优化及全局沉浸式体验展开整合升级。

二、需求目标

2.1 核心目标

以「提升用户沉浸感、降低学习干扰、优化操作便捷性」为核心，打造兼顾实用性、科学性和个性化的电脑端沉浸式记单词体验，解决现有导航干扰、操作繁琐等痛点，提升用户学习效率和产品使用粘性。

2.2 具体目标

导航体验：实现导航自动隐藏+悬浮唤出，彻底消除导航对学习的视觉干扰，同时保证导航操作便捷性，用户唤出/隐藏导航操作成本降低80%；
沉浸体验：通过干扰屏蔽、视觉优化、全屏模式等功能，提升用户专注度，用户单次学习时长提升30%以上；
操作效率：完善电脑端专属快捷键体系，实现全流程无鼠标操作，单词切换、导航控制等核心操作效率提升50%；
个性化适配：提供多维度自定义设置，覆盖导航、视觉、学习模式等，满足不同用户差异化需求，个性化设置使用率达到40%；
技术落地：优化方案需具备低开发成本、易落地的特点，按优先级推进，确保各阶段优化功能按时上线，无明显性能问题。

三、核心业务需求

本次优化以「自动隐藏+悬浮唤出导航」为基础框架，深度融合全局沉浸式优化亮点，所有需求均围绕「无干扰、高便捷、全适配、易落地」展开，具体分为五大模块。

3.1 导航优化需求（核心模块）

核心需求：实现导航自动隐藏+悬浮唤出，简化导航元素，降低视觉干扰，同时保证导航功能可及性，联动全局优化场景。

隐藏与唤出逻辑：
- 用户进入记单词页面后，顶部导航栏需在1秒内平滑淡出隐藏，仅保留顶部2px半透明触发条（颜色与页面背景高度融合，视觉上几乎不可见）；
- 鼠标移至顶部触发条区域，导航栏以毛玻璃半透明效果（opacity: 0.85）平滑滑入，背景采用低饱和浅灰，与页面背景自然融合；
- 鼠标移开导航栏后，3秒内自动淡出隐藏，无需用户手动操作；
- 支持快捷键（Esc键、Ctrl/Cmd + B）快速唤出/隐藏导航，Esc键在全屏模式下优先执行退出全屏操作，非全屏模式下控制导航。
导航元素简化：
- 导航栏仅保留3个核心元素：缩小化Logo、右上角「退出学习」按钮（小叉号图标，突出可点击性）、极简圆形用户头像；
- 用户头像下拉菜单包含其他导航入口（我的计划、单词本、统计、设置等），删除所有非必要导航按钮；
- 导航栏所有元素（除「退出学习」按钮）采用低饱和度颜色，鼠标悬停时轻微提亮，避免分散用户注意力。
场景联动适配：
- 进入全屏专注模式后，导航触发条同步隐藏，仅保留角落「退出全屏」按钮，彻底屏蔽导航干扰；退出全屏后，自动恢复导航隐藏/唤出逻辑；
- 开启专注模式后，导航唤出延迟至1秒，避免用户误触；关闭专注模式后，恢复正常唤出速度。

3.2 全局沉浸式优化需求

核心需求：整合全屏模式、干扰屏蔽、视觉护眼、个性化设置等功能，与导航优化深度联动，打造无干扰、高适配的沉浸式学习环境。

3.2.1 全屏专注模式需求

入口设计：单词卡片右上角设置「全屏学习」极简图标按钮，默认半透明，鼠标悬停时显形；
功能实现：点击按钮触发浏览器全屏（F11），同时隐藏浏览器地址栏、书签栏，屏蔽外界干扰；
全屏状态适配：仅保留核心学习元素（单词卡片、发音按钮、底部熟悉度选择按钮、角落退出全屏按钮），导航触发条完全隐藏；
快捷键联动：支持F键快速进入/退出全屏，与导航快捷键形成互补，实现无鼠标高效操作。

3.2.2 电脑端专属快捷键体系需求

打造全流程无鼠标快捷键体系，所有快捷键可在设置中自定义，适配不同用户习惯，具体快捷键及功能如下：

|--------------|------------------|-----------------------|
| 快捷键 | 功能 | 业务说明 |
| 空格/回车 | 显示/隐藏单词释义 | 强化主动回忆逻辑，适配已优化的释义隐藏功能 |
| 1/2/3 | 快速选择「忘记/模糊/认识」 | 减少鼠标操作，提升单词学习效率 |
| Esc | 唤出/隐藏导航 / 退出学习 | 联动导航优化，降低导航操作成本 |
| F | 进入/退出全屏专注模式 | 快速切换全屏状态，强化沉浸感 |
| ←/→ | 上一个/下一个单词（释义显示后） | 适配电脑端键盘操作习惯，提升操作流畅度 |
| Ctrl/Cmd + B | 强制唤出/隐藏导航 | 适配特殊场景，提升导航操作灵活性 |

3.2.3 视觉与护眼优化需求

背景优化：学习页背景采用低饱和莫兰迪渐变色，支持用户自定义；导航唤出时，背景轻微模糊，突出导航但不遮挡单词卡片；
主题切换：新增深色模式、护眼模式、自定义主题开关，放置在用户头像下拉菜单；开启主题后，同步优化导航颜色（如深色模式下导航为深灰半透明），适配不同学习场景；
单词卡片优化：卡片居中放大，字体加粗，音标清晰；发音按钮采用圆形悬浮动效（鼠标悬停时轻微放大）；释义显示时采用平滑淡入+下滑动画，与导航唤出动效风格统一。

3.2.4 干扰屏蔽机制需求

弹窗屏蔽：学习页内自动屏蔽所有非学习类弹窗、通知（如广告、系统通知），仅保留学习相关提示（如学习时长提醒、单词熟悉度提示）；
专注模式升级：用户头像下拉菜单新增「专注模式」开关，开启后实现4点功能：① 导航唤出延迟至1秒；② 屏蔽所有非学习功能入口；③ 隐藏用户头像、Logo等冗余元素；④ 每15分钟弹出轻微学习时长提醒；
误触防护：单词卡片区域外（除导航触发条、快捷键操作），点击操作无效，避免用户误触分心。

3.2.5 个性化自定义需求

在设置页（用户头像下拉菜单可进入）增加「学习界面自定义」模块，支持用户根据自身习惯调整优化参数，具体如下：

导航设置：可选择导航显示模式（自动隐藏+悬浮唤出/极简顶部栏/侧边栏，默认自动隐藏）、导航唤出延迟时间（1-5秒可调）、导航透明度；
学习设置：保留「单词学习模式」（沉浸式回忆/快速浏览）、释义显示逻辑，新增卡片大小调整、字体大小调整功能；
快捷键设置：所有快捷键可自定义修改，支持恢复默认设置；
视觉设置：支持主题颜色、背景样式、卡片样式自定义，护眼模式亮度可调。

3.3 交互细节优化需求

核心需求：打磨交互细节，提升操作流畅度和用户体验，打造差异化优势，具体如下：

导航动效：导航唤出采用线性渐变淡入+轻微上浮动效，时长0.3秒；隐藏时采用渐变淡出+下沉动效，与页面融合自然；
单词切换动效：单词翻页采用平滑滑动+轻微缩放动效，与释义显示动效风格统一；切换后自动隐藏释义，强化主动回忆逻辑；
状态反馈：点击发音按钮时，按钮出现轻微震动反馈；选择熟悉度后，按钮有颜色高亮反馈，同时底部弹出极简提示（如"已标记为模糊"），提示不遮挡单词卡片；
学习进度展示：屏幕角落设置极小的隐藏区域，鼠标悬停时显示今日学习时长、已背单词数，不干扰学习且满足用户进度查看需求。

3.4 技术落地需求

核心需求：确保优化功能技术可落地、低开发成本，无明显性能问题，具体技术要求如下：

导航逻辑：使用mousemove监听鼠标Y轴坐标，配合节流函数降低性能损耗；采用CSS过渡实现平滑唤出/隐藏，通过visibility控制元素显隐，避免布局抖动；
快捷键实现：使用keydown事件监听，区分不同快捷键功能，避免快捷键冲突，确保操作响应流畅；
全屏模式：调用浏览器fullscreen API，监听全屏状态变化，同步调整导航、元素显隐，退出全屏时恢复原有布局；
动效实现：优先采用CSS过渡+transform属性，无需引入复杂动画库；如需更细腻动效，可引入轻量级GSAP库，控制开发成本；
个性化设置：使用localStorage存储用户自定义配置，页面加载时自动读取，无需后端额外存储，实现快速落地；
性能要求：所有动效、快捷键操作响应延迟≤100ms，页面加载时间≤300ms，无卡顿、闪退等问题。

3.5 兼容性需求

浏览器兼容性：支持主流电脑端浏览器（Chrome、Edge、Firefox、Safari）最新版本，确保所有优化功能正常显示和操作；
屏幕适配：适配不同尺寸电脑屏幕（笔记本、台式机），确保单词卡片、导航元素、按钮等布局合理，无错位、遮挡问题。

四、需求优先级规划

按「从易到难、用户感知度、业务价值」排序，分四个优先级推进，确保核心功能快速落地，后续逐步优化完善，具体如下：

|----------|---------------------------------------------|------|-------------------------------------|
| 优先级 | 需求内容 | 上线周期 | 业务价值 |
| 🔴 第一优先级 | 导航自动隐藏+悬浮唤出核心逻辑、单词卡片视觉优化、基础快捷键（空格/回车/Esc/F） | 1-2周 | 快速解决核心导航干扰痛点，用户感知明显，开发成本低，快速实现沉浸感提升 |
| 🟠 第二优先级 | 全屏专注模式、干扰屏蔽机制、护眼模式/深色模式 | 2-3周 | 强化沉浸感，解决用户分心、视觉疲劳问题，进一步提升用户学习体验 |
| 🟡 第三优先级 | 个性化自定义设置、完整快捷键体系、交互动效打磨 | 3-4周 | 适配不同用户差异化需求，提升操作流畅度，打造产品差异化优势 |
| 🟢 第四优先级 | 数据统计（学习时长/单词进度）、状态反馈优化、A/B测试迭代 | 长期优化 | 根据用户数据持续打磨体验，优化功能细节，提升用户留存和产品竞争力 |

五、预期收益

5.1 用户层面收益

沉浸感提升：消除导航、冗余元素干扰，用户可专注于单词学习，降低分心概率；
操作便捷性提升：快捷键+悬浮导航，减少鼠标操作，提升学习效率；
体验个性化：多维度自定义设置，适配不同用户学习习惯，提升用户满意度；
护眼效果提升：低饱和背景、深色/护眼模式，减少长期学习的视觉疲劳。

5.2 业务层面收益

用户留存提升：优化后的沉浸式体验可提升用户使用粘性，减少用户流失；
产品竞争力提升：差异化的沉浸体验的，区别于同类背词产品，增强产品核心优势；
学习效果优化：科学的操作逻辑（主动回忆、无干扰），可提升用户单词记忆效率，强化产品核心价值；
开发成本可控：按优先级落地，核心功能开发成本低、周期短，快速实现业务价值。

六、风险与应对措施

|---------------|-------------|---------------------------------------|
| 潜在风险 | 影响范围 | 应对措施 |
| 用户不适应导航自动隐藏逻辑 | 所有电脑端记单词用户 | 新增导航模式切换选项，允许用户切换至极简顶部栏；首次使用时弹出简短引导提示 |
| 快捷键冲突，影响操作体验 | 依赖键盘操作的用户 | 开发阶段进行快捷键冲突测试；支持用户自定义快捷键，提供默认备选方案 |
| 不同浏览器兼容性问题 | 使用非主流浏览器的用户 | 开发阶段针对主流浏览器进行兼容性测试，针对异常浏览器提供基础适配方案 |
| 动效过多导致页面卡顿 | 低配置电脑用户 | 优化动效代码，降低性能损耗；新增动效开关，允许用户关闭非必要动效 |

七、附则

7.1 需求变更说明

本次需求确定后，若需变更，需由需求提出方提交需求变更申请，经产品、开发等相关岗位确认后，方可调整，变更内容需同步更新至本文档。

7.2 文档维护

本文档由产品团队负责维护，根据需求落地进度、用户反馈及业务调整，及时更新文档内容，确保文档的准确性和时效性。

7.3 生效日期

本文档自发布之日起生效，作为本次 ZogginWeb 电脑端沉浸式记单词功能优化升级的唯一业务需求依据。