1. 创意上，根据用户面部，生成专属雷达图与专属歌曲。这支H5与《嗨！点击生成你的人脸12位图》都是网易云音乐M2团队，属于使用人脸识别AI技术，做出的创意方式。在网易云音乐的APP上，可以搜“留声40年”，了解这个主题的更多音乐。

2. 策划上，首先对当代热血青年的描述，引导用户点击拍照，可以直接拍照，也可以选择相册里面的照片；用户上传带有脸部信息的照片后，会给出脸部的宽高比，下巴至脸颊两侧角度等，而后让用户输入名字；最后在8个角度（正能量、风度、与时俱进、诚信、洒脱、幽默、正义感、奋斗）给出雷达图、送给用户的一句话，还有为用户生成的一首歌。

3. 设计上，浅色，红色为主色调，网易云音乐的logo颜色。通过微信聊天信息的形式，展示话术。对于用户上传的照片勾勒出脸部和眼睛线条，增加识别用户脸部的科技感。

4. 技术上，采用了网易AI平台的人脸识别技术，可以识别出面部关键点定位，提供面部五官及轮廓关键点模型定位，能够适应不同性别、年龄、表情、姿态和光照条件，并且支持多人场景。精确定位面部的关键区域位置，获得眉、眼、鼻、口、脸部轮廓等关键点定位信息。目前这个接口还没有对外开放使用，需要合作申请。

图片来自网易AI平台

对于人脸识别，网易AI平台还提供了人脸检测、面部关键点定位、人脸属性分析、人脸验证。

人脸检测：对复杂条件下的静态图片或者视频进行人脸检测和定位跟踪。检测出人脸后，可对人脸进行分析，获得五官轮廓等关键点定位，准确识别多种人脸属性，如性别、年龄、表情等信息。

人脸属性分析：识别人脸的性别、肤色、微笑、眼镜、胡须、闭眼等属性信息。

人脸验证：将两张输入图片提取人脸特征，计算两张人脸的相似度并给出相似度评分。

网易AI平台的官网：https://openai.163.com/。不过，目前大部分API接口都需要合作申请使用。

其中的动画部分：

首屏的人脸动图，采用CSS3的animation实现，前端工程师通过keyframes自定义动画，调整背景图片的位置，形成动画。背景图片拼接方式如下图：

5. 体验上，如果体验过H5案例《嗨！点击生成你的人脸12位图》的用户，体验这支H5后，还是在意料之中。