1.1 产品需求设计、页面流程图及项目规划

本文由王宝国、小溪里来撰写和校对

产品目标

头像制作、浏览、分享，基于 Taro 适配微信小程序与web端，基于小程序云开发做后端存储服务以及调用腾讯云特色功能。

特色功能

人脸识别、五官分析 - 适用于大部分节日
人脸年龄变化 - 适用于儿童节、七夕节
大头贴 - 适用于儿童节
……

设计稿展示

产品源泉

从《[我要戴口罩 – 为头像戴上口罩，防护从我做起](https://idealclover.top/archives/602/)》中，我就发现，操作不是特别方便，需要寻找嘴部位置，放大或缩小口罩，甚至还要旋转口罩。此时，我想起从《[「圣诞特辑」纯前端实现人脸识别自动佩戴圣诞帽](https://juejin.im/post/5e02b73fe51d455807699b1f)》中介绍了给人脸自动戴上圣诞帽，那我就想是不是识别出人的嘴部来戴上口罩呢？答案是可行的。

这一功能主要是通过手机相册上传以及获取微信头像和使用相机的方式来上传你需要美化的图片或者头像，在美化图片的时候小程序会根据每个人的需要以及时期的需要来完成对应的美化，比如在抗击疫情期间我们会将图片美化成戴口罩以及加上武汉加油的字，来达到提醒人们戴口罩以及达到众志成城一致抗击疫情的社会效益，同时我们也注重通过小的生活细节来提高生活品质，比如女生我们会选择给女生戴皇冠做女王，这样来提高女生的自信感，同样我们在根据不同时间段更新不同的产品效果，尽敬请大家期待与支持。
——王宝国撰写的产品理解

在完成第一期的自动戴口罩效果后，就思考如何将功能做的更全面，我就想到根据节日来定期制作节日活动，比如女生节给女神戴皇冠、青年节儿童节让人脸有年龄上的变化、七夕节情人节有情侣间的互动效果。

页面流程图

头像编辑页：头像编辑、生成、保存、分享给好友
页面分享页：从群聊中打开别人分享的头像或者从个人中心的头像列表中打开，细节功能区分本人或他人打开
头像列表页：先前生成好，存到云端的头像，可以在这里查看

功能迭代与项目规划

v1 版时想到的产品规划，与 v2 版略有初入。

主要功能由小变大，逐渐变化

自动戴口罩
为女生节制作，女神戴皇冠
为青年节、儿童节制作，人像年龄变换效果
提供海报分享、个人中心、头像列表
云开发 CMS 扩展完成
简易账户体系，登录功能
头像编辑页的深色模式
图形新增与编辑，以替代本地图片

那么就要完成定下分期实现的功能

第一期
- 完成小程序自动戴上圣诞帽或口罩
- 完成用户选择图片，并支持添加不同的图形
- 制作小程序的生成图片功能、保存图片功能
- 制作海报页面，允许用户进行分享，支持在h5端打开
- 本地图片换为云存储的图片，并以此来制作编辑图形的功能
第二期
- 制作个人中心页面，支持跳转到头像列表、致谢页面
- 制作人像年龄变换功能
- 小程序登录后，用户能在h5端进行登录并查看头像列表
- 头像列表页，增加上拉触底加载剩余列表数据

梳理出完整的技能列表：

原生小程序的语法、功能开发、小程序云开发
Taro 多端解决方案来适配微信小程序及web端的技巧
Canvas 画图在小程序与web端的差异
图形拖拽的实现
腾讯云特色功能的技巧，配置、使用、注意细节
小程序云开发的配置，云数据库的技巧、云存储的细节
图片识别加速技巧
图片转换加速技

项目规划：

2020.4.15-2020.5.1:官网需求收集与约定，并完成规划文档
2020.5.2-2020.5.7：官网原型图的实现，以及教程的书写
2020.5.8-2020.5.底：官网 v1 版的实现及上线测试
2020.6：官网 v1 版正式上线，投入运营
2020.8.6-2020.9.8：小程序 v2 版进行功能大迭代
2020.9.8-2020.10：Hi 头像作品展示及技术小册更新文案

推广运营方式：

微信粉丝群引流
腾讯云开发社区推广
图灵社区推广
GitHub 社区引流
在线公开课培训课引流

关于Hi头像官网

对于hi头像的官网需求，主要是为了介绍 Hi 头像小程序功能（让广大用户对我们的小程序产品有一个详细的了解，增强使用效果，同时也收集用户需求，为了改进2.0版本的小程序）以及共享开源教程（这样做是为了满足广大开发者的兴趣需求，同时也希望开发更多开发者加入我们，共同进步），同时也起到推广 Hi 头像小程序的作用。综合来看，我们需要开发一个产品官网同小程序同时运营，这样来相互补充，更好的去运营hi头像这款产品。