人工智能画廊H5 | 我和绘画机器人Andy作品展

图片发自App

【案例】我和绘画机器人Andy作品展

【类型】游戏型-图片合成

美图的这个H5采用的是图片合成式的游戏，对于此种类型，一般情况下是通过上传图片或绘画图形，在这个H5中，显然是前者。

【内容策划】

加载页面后，出现button（创建画廊）

单机button后，出现第二个button（点击拍照），选择“拍照或录像”进入人脸识别进行拍照，选择“照片图库”可以直接从手机相册中选择照片。

上传完图片后，进行“扫描”、“验证”等步骤，每个步骤下面都有相应的提示语，告诉用户已经进行到哪一步了。

图片合成后，成生了基于用户自己专属的画廊，用360°全景照片的形式呈现给用户一种3D感，点击不同的画板，对应着不同类型的合成形式，左右滑动还可以切换该类型下的不同形式的合成画。

也可以“重建画廊”或者“邀请朋友参观”

每幅画，可以进行评论，评论的语句可以选择。

邀请朋友参观时，进入分享页面，缺少了引导用户分享的细节处理。

baby作为馆长，用户在观看自己画廊的同时，也可以看到明星馆长的画廊。

看完明星的画廊后，也可返回自己的画廊。

【交互设计】

1、360°全景形式，给人一种3D感，通过移动手机或手滑屏幕两种形式，在空间上浏览整个画廊。点击任意一副画，可以放大观看，通过左右按钮，可以切换在该类型下不同形式的合成画。

也可对画进行评论，同时用于评论的语句不需要自己手动输入，通过“切换按钮”可以切换产品中提供的几种评论语句，很大程度上节省用户的精力，简单又高效。当然如果不怕麻烦的话，也可以自己手动输入。

2、在浏览画廊的时候，都可以看到“分享”或是“重建画廊”的提示，提示可以隐藏避免遮挡进行浏览，也可以一直显示。

点开大图后也会有提示，进入到美图秀秀中，用黑科技画插画像。

3、该H5不仅识别了脸部，还识别了身体部分，并将背景和整体色调，包括衣服的颜色等，做了替换处理，还处理成了多种不同的风格。

4、每个页面也可以关闭或打开背景音乐。

除了以上几点外，在分享时，缺少引导用户分享的提示，这点可以再优化一下。整理来讲，没有过于复杂的交互，形式简单。利用全景呈现也很新颖，不落俗套。在一些细节处理上，也简化了用户的操作。

【视觉设计】

画面和主题很符合，科技感十足。画廊低调的背景色正突出了画作的色彩。案例还让baby作为馆主，代言人不仅仅是一个“摆设”，一定程度上也参与进来了交互，美图的品牌露出也没给人造成反感的感觉。

我是作者：40_N，觉得我的文章有用的话，可关注我和我的专题。

---

相关阅读

H5案例分析 | 滴滴感恩节“真的不用说谢谢”

H5 案例分析 | 单身指数考核研究所