为了让基于音频 SDK 与大语言模型的宠物情绪识别及健康状态评估系统从概念落地为可用产品，我们以用户场景闭环为核心，对前端界面与交互流程做分层拆解，确保每一步操作都贴合养宠用户真实使用习惯，实现注册登录 — 宠物管理 — 音频上传 — 情绪识别 — 健康评估 — 历史查询全链路流畅体验。作为负责前端开发、健康评估模块与测试优化的成员，本次原型设计将完整呈现我的设计思路与页面规划。

---

一、核心设计思路：三层拆解与闭环构建

本次原型设计以音频采集 — 情绪识别 — 健康评估 — 数据沉淀为核心业务闭环，分层拆解需求、明确智能能力落点、规划用户操作路径，让 AI 能力与前端体验深度融合。

1. 确立产品功能主干：定义核心使用环节

围绕项目目标，抽象出5 大核心功能支柱，构成完整用户操作闭环：

1. 用户与宠物管理：账号注册 / 登录、宠物信息增删改查，单用户支持多宠物绑定。
2. 音频采集与上传：本地音频上传、格式 / 大小校验、预览删除、与宠物精准关联。
3. 宠物情绪识别：对接音频 SDK，输出兴奋 / 焦虑 / 痛苦 / 应激 4 类情绪，展示置信度。
4. 健康评估与养护建议：调用大模型生成心理 + 身体状态分析，输出个性化养护方案。
5. 历史数据管理：按时间查询记录、详情查看、数据删除，保障数据隐私安全。

五大支柱形成登录→添宠→上传音频→识别→评估→查记录闭环，覆盖家庭养宠全场景需求。

2. 定义功能核心价值：明确智能能力落点

在基础功能上注入AI 差异化能力，解决传统宠物管理工具无法 “听懂叫声、评估健康” 的痛点：

• 音频采集模块：支持 MP3/WAV 格式，自动校验文件，降低用户操作门槛。
• 情绪识别模块：可视化展示识别结果与置信度，让抽象声学数据变直观。
• 健康评估模块：结构化输出评估报告，养护建议可复制，贴合实际养宠需求。
• 历史数据模块：支持近 7 天 / 30 天筛选，数据仅本人可见，兼顾便捷性与安全性。

3. 串联用户体验旅程：规划关键使用路径

基于功能模块，规划4 类核心用户路径，确保操作连贯自然：

1. 新用户启动路径：注册 / 登录→完善个人信息→添加宠物→进入首页。
2. 日常检测路径：选择宠物→上传音频→查看情绪结果→获取健康评估。
3. 数据复盘路径：进入历史记录→按时间筛选→查看详情→追溯宠物状态变化。
4. 信息管理路径：个人中心→修改账号信息→更新宠物资料→管理历史数据。

---

二、关键情境下的用户操作流程详解

结合原型页面，拆解用户在不同场景下的完整操作流程，还原真实使用体验。

情境一：新用户初始设置与引导

新用户首次进入系统，通过轻量化引导完成基础配置，快速上手：

1. 进入登录 / 注册页：支持手机号 / 邮箱注册，密码长度≥6 位校验，注册 / 登录成功率 100%。
2. 完善个人信息：填写昵称、联系方式，保障账号安全。
3. 添加宠物信息：录入宠物名称、品种、年龄、性别，支持上传头像，单用户可添加≥3 只宠物。
4. 进入系统首页：展示宠物概况、功能入口，引导完成首次音频检测。

                                                              图 1 登录注册页面

                                                           图 2 宠物信息管理页面

整个流程步骤≤5 步，降低新用户学习成本，适配不同年龄层养宠用户。

---

情境二：音频上传与宠物情绪识别

核心业务场景，实现 “上传叫声→识别情绪” 的核心能力：

1. 首页点击音频上传按钮，选择需检测的宠物。
2. 上传本地音频：支持 MP3、WAV 格式，单文件≤50MB，系统自动校验格式与大小。
3. 音频预览：支持播放 / 暂停，确认无误后提交检测。
4. 情绪识别结果展示：输出兴奋 / 焦虑 / 痛苦 / 应激4 类情绪，标注置信度，同步存储至数据库。
5. 一键跳转健康评估，延续操作流程。

                                                              图 3 音频上传页面

                                                         图 4 情绪识别结果页面

页面采用卡片式设计，识别结果用图标 + 文字可视化，提升可读性。

---

情境三：健康评估与养护建议生成

基于情绪结果与宠物信息，通过大模型生成专业、个性化评估内容：

1. 系统自动拼接情绪结果、宠物基础信息生成 prompt，调用大模型 API。
2. 展示健康评估报告：分心理状态、身体状态两部分解析，解析准确率≥85%。
3. 生成3-5 条养护建议：贴合宠物当前状态，涵盖饮食、互动、就医建议，响应时间≤5s。
4. 支持建议复制、记录保存，方便用户线下执行。

                                            图 5 宠物健康评估与养护建议页面

页面突出核心结论，用分段式排版降低阅读压力，兼顾专业性与易懂性。

---

情境四：历史数据查询与管理

方便用户追溯宠物状态，实现长期健康监测：

1. 点击历史记录入口，按时间倒序展示所有检测记录。
2. 筛选功能：支持近 7 天 / 30 天时间范围查询，查询准确率 100%。
3. 记录操作：点击单条记录查看详情，支持删除操作，数据仅用户自身可见。
4. 数据联动：可从历史记录重新生成养护建议，实现二次利用。

                                                          图 6 历史数据记录页面

该模块解决用户 “无法长期跟踪宠物健康” 的痛点，完善系统价值。

---

情境五：帮助中心与使用指南

满足用户使用答疑、问题反馈需求，提升系统易用性与体验感：

1. 首页 / 个人中心点击帮助中心入口，进入指南页面。
2. 功能指南分类展示：包含注册登录、宠物管理、音频上传、情绪识别、健康评估、历史查询等全功能说明。
3. 常见问题 FAQ：整理高频使用问题与解决方案，用户可快速自查。
4. 意见反馈：提供反馈入口，支持文字提交使用问题与优化建议，便于团队迭代优化。
5. 联系我们：展示团队联系方式，紧急问题可快速沟通。

                                                         图 7 帮助中心与使用指南页

所有帮助内容分类清晰、一键查看，新手也能快速解决使用障碍。

---

三、原型设计亮点与落地规划

1. 设计亮点

• 轻量化适配：前端页面适配 Chrome/Edge 浏览器，加载时间≤2s，表单提交、页面跳转无报错。
• 可视化体验：情绪识别、健康评估结果用图表 + 卡片展示，直观易懂。
• 流程闭环：从注册到历史查询全流程贯通，无操作断点，核心流程成功率≥90%。
• 用户友好：表单校验、操作提示完善，降低用户失误率，优化使用体验。

2. 后续落地计划

1. 基于原型完成5 个核心页面开发，统一页面样式与交互规范。
2. 实现前端与后端接口对接，确保数据正常渲染、功能正常运行。
3. 开展用户试用，收集反馈优化界面与交互，核心问题整改率 100%。
4. 配合团队完成全系统联调，保障前端模块与音频 SDK、大模型 API 无缝衔接。

本次原型设计以用户为中心、场景为导向，将项目需求转化为可落地的前端方案，为后续开发奠定基础。后续我将持续推进页面开发与优化，打造便捷、智能的宠物健康管理体验。