8.8 KiB
8.8 KiB
《Draw a Cat 小程序复刻项目需求规格说明书》
V1.0 版本
文档目的：明确小程序复刻 Draw a Fish 网站的核心目标、功能范围、技术要求、交互规范及上线标准，为产品设计、开发、测试及验收提供统一依据。 适用范围：产品经理、前端开发、后端开发、测试工程师、UI设计师及项目相关负责人。 核心目标：复刻 Draw a Fish 网站“手绘猫+AI识别+虚拟猫咖互动”核心玩法，适配微信小程序生态，实现无门槛创作、AI实时识别、动态跑动、全球/个人猫咖互动功能，兼顾易用性与性能稳定性。
一、项目基础信息
1.1 产品名称
手绘猫乐园（暂定名，可优化调整）
1.2 产品定位
免费、无门槛的微信小程序，主打 AI 互动手绘体验，面向全年龄段用户，提供“画猫-识别-领养-互动”的完整流程，兼具创意释放与轻社交属性。
1.3 核心参考
复刻原型：Draw a Fish 官网（https://drawafish.com/），核心功能及交互逻辑对齐原网站，适配小程序操作习惯做本土化调整。
二、核心功能需求
2.1 手绘画布模块
2.1.1 基础绘图功能
- 支持画笔粗细调节：提供 3-5 档可选（建议范围 2px-10px），默认中等粗细（5px）。
- 支持颜色选择：至少提供 7 种基础颜色（红、橙、黄、绿、蓝、紫、黑），默认红色，选中颜色有明显视觉标识。
- 支持橡皮擦功能：切换橡皮擦模式后，可清除画布内容，橡皮擦粗细固定为 20px（适配手绘场景，便于快速修正）。
- 支持清空画布：提供“清空”按钮，点击后弹出二次确认提示，确认后清除全部绘制内容，恢复初始画布状态。
2.1.2 画布交互优化
- 画布尺寸：适配手机屏幕，建议宽 300-350px，高 400-450px，居中展示，周边预留工具栏空间。
- 绘制体验：触摸绘制线条流畅，无卡顿、断点；线条端点圆润（lineCap 设为 round），提升手绘质感。
- 实时反馈：画布背景随绘制过程实时轻微变色（参考原网站效果），给予用户视觉反馈。
2.2 AI 猫形识别模块
2.2.1 识别核心逻辑
- 实时计算相似度：绘制过程中，AI 实时判断手绘内容与“猫形”的相似度，以百分比（0%-100%）展示在画布底部，保留一位小数。
- 识别阈值：相似度 ≥ 60% 时，“生成跑动猫”按钮激活；＜60% 时按钮置灰，提示“再画一画更像猫哦”。
- 识别优化：优先识别“猫头朝右”的绘制内容（参考原网站规则），提升识别准确率；支持不同风格手绘猫（简笔画、卡通等）。
2.2.2 识别结果处理
- 达标反馈：相似度达标后，背景色定格为明亮色调，按钮文案为“Make it Run!（生成跑动猫）”，点击后进入猫名输入环节。
- 不达标反馈：相似度持续低于 60% 时，提示用户调整绘制内容（如“尝试画完整的猫头和猫身”）。
2.3 动态猫生成与跑动模块
2.3.1 猫信息设置
- 猫名输入：识别达标后，弹出输入框，允许用户输入猫名（限 1-10 个字符，支持中英文、数字，禁止特殊符号），默认生成随机名称（如“小猫XXX”）。
- 确认提交：输入猫名后点击“确认领养”，将手绘猫转为动态跑动效果，同时保存至数据库。
2.3.2 跑动动画效果
- 动画逻辑：保留手绘猫的原始轮廓、颜色，实现左右跑动、轻微摆尾摆耳的动态效果，跑动速度均匀（可微调，避免过快/过慢）。
- 边界处理：猫跑动至画布边缘时，平滑穿越边界从另一侧出现，循环跑动，无卡顿、跳跃。
- 视觉优化：动态猫带有轻微阴影效果，提升层次感，与猫咖背景区分开。
2.4 猫咖互动模块
2.4.1 全球猫咖
- 作品展示：默认进入全球猫咖页面，展示所有用户提交的动态猫，按提交时间倒序排列，最多同时展示 20 只猫（避免性能压力），支持下拉刷新加载更多。
- 互动功能：每只猫下方显示猫名、相似度、点赞数，支持用户点击“点赞”“点踩”（同一用户对同一只猫仅可操作一次），点赞数实时更新。
- 排行榜：提供“热门猫排行榜”入口，按点赞数倒序排列，展示Top50作品，显示猫名、作者（匿名/昵称）、点赞数、相似度。
2.4.2 个人猫咖（需登录）
- 登录方式：支持微信一键授权登录，获取用户OpenID作为唯一标识，无需注册额外账号。
- 作品管理：个人猫咖页面展示当前用户提交的所有猫作品，支持查看详情（猫名、创建时间、相似度、点赞数）、删除作品。
- 收藏功能：支持收藏全球猫咖中的优质作品，收藏后在个人中心“我的收藏”中查看。
2.5 个人中心模块
- 基础信息：展示用户头像（微信授权头像）、昵称（微信授权昵称），支持修改昵称（限 1-8 个字符）。
- 作品统计：显示用户累计提交猫作品数量、总点赞数、收藏数量。
- 功能入口：提供“我的作品”“我的收藏”“热门排行榜”“关于我们”入口。
- 帮助中心：包含“画猫技巧”“识别规则”“常见问题”，指导用户使用（如“猫头朝右更易通过识别”）。
易用性需求
- 无门槛操作：无需登录即可完成“画猫-识别-领养”核心流程，登录仅用于个人作品管理、收藏功能。
- 视觉引导：工具栏图标、按钮文案清晰，操作流程有明确视觉引导（如颜色选中标识、按钮状态变化），新手用户可快速上手。
- 错误提示：操作错误（如输入非法字符、识别失败）时，提示文案简洁易懂，给出解决方案。
4.3 兼容性需求
- 设备兼容：适配 iOS、Android 主流手机机型，不同屏幕尺寸下画布、工具栏布局自适应，无变形、错位。
- 微信版本兼容：支持微信 7.0.0 及以上版本，低版本提示用户升级微信。
4.4 可维护性需求
- 代码规范：前后端代码遵循行业规范，添加必要注释，便于后期迭代、bug 修复。
- 接口设计：后端接口统一规范，预留扩展字段，便于后续新增功能（如分享、评论）。
- 日志记录：后端记录关键操作日志（用户登录、作品提交、识别结果、报错信息），便于问题排查。
五、交互与UI需求
5.1 整体风格
延续原网站极简、清新风格，主色调采用暖色系（贴合猫的柔软温馨主题），辅助色为白色、浅灰色，避免复杂装饰，聚焦手绘与互动功能。
5.2 核心页面交互
- 首页：默认展示“手绘画布”模块，顶部为标题，底部为工具栏（颜色、粗细、橡皮擦、清空），画布下方显示相似度及激活按钮。
- 猫咖页面：顶部为“全球猫咖/个人猫咖”切换标签，中间为动态猫展示区域，底部为“返回手绘”“排行榜”按钮。
- 个人中心：采用列表式布局，各功能入口清晰，图标与文字搭配，视觉简洁统一。
5.3 反馈交互
- 操作反馈：按钮点击有触觉反馈（微信原生震动），加载状态显示加载动画（如转圈图标），避免用户重复操作。
- 结果反馈：点赞、删除、提交作品后，实时显示反馈文案（如“点赞成功”“作品已删除”），持续 1-2 秒后消失。
六、上线与验收标准
6.1 上线前置条件
- 功能完整性：所有核心功能实现，无缺失、无严重bug（致命、严重级别bug为0）。
- 性能达标：启动速度、绘制流畅度、响应时间符合本需求文档要求。
- 合规性：通过微信小程序审核，内容审核机制正常运行，无隐私合规风险。
- 测试验收：完成功能测试、兼容性测试、性能测试，测试报告合格。
6.2 验收核心指标
- 功能指标：手绘、识别、跑动、猫咖互动、个人中心功能均正常运行，操作流程无阻塞。
- 性能指标：启动速度、绘制流畅度、AI识别响应时间达标，并发场景下无异常。
- 兼容性指标：在指定机型、微信版本下，页面布局、功能无异常，无闪退、卡顿。
- 用户体验：新手用户可在 1 分钟内完成“画猫-识别-领养”全流程，操作无困惑。
七、迭代规划（可选）
V1.0 版本（核心功能版）
实现手绘、AI 模板匹配识别、动态跑动、全球猫咖、个人猫咖基础功能，满足核心玩法。
V1.1 版本（优化升级版）
升级 AI 识别模型（EasyDL），新增作品分享（微信好友、朋友圈）、评论功能，优化动画效果。
V1.2 版本（功能扩展版）
新增猫皮肤、道具系统，支持用户自定义猫的装饰；新增主题猫咖，提升社交互动性。