cover_image

微信为小程序电商新增 AR 效果!试色、试衣还有更多可能性,让顾客更开心的买买买

capability微信AR服务商第三方AR 引擎试妆阿玛尼
sage

<p><img class="aligncenter size-full wp-image-1232833" src="https://s3.ifanr.com/wp-content/uploads/2019/07/try.jpg" alt="" width="1280" height="720" srcset="https://s3.ifanr.com/wp-content/uploads/2019/07/try.jpg 1280w, https://s3.ifanr.com/wp-content/uploads/2019/07/try-360x203.jpg 360w, https://s3.ifanr.com/wp-content/uploads/2019/07/try-768x432.jpg 768w, https://s3.ifanr.com/wp-content/uploads/2019/07/try-1024x576.jpg 1024w" sizes="(max-width: 1280px) 100vw, 1280px" /></p> <p>微信很久没有放出新能力了。</p> <p>但好饭不怕晚,7 月 5 日微信公布的最新能力就能让不少小程序开发者、服务商、品牌方兴奋不已。</p> <h3>微信小程序里的 AR 能力</h3> <p>这一次,微信小程序可实现 AR 效果,并正式向品牌商户、AR 引擎服务商开放了接入。</p> <p>目前唯一支持实时 AR 的小程序就是「阿玛尼美妆官方精品商城」,利用 AR 功能,用户在一分钟内就能成功试「涂」十几个口红色号,对比线下的试色,效率高到飞起。现在微信版本为 7.0.5 的用户都能够体验到这个 AR 试妆的功能。</p> <p>知晓程序第一时间体验了一下这个有 AR 功能的小程序,和大家汇报一下实际的体验情况。</p> <p>在支持 AR 功能商品下方选择「立即试色」就能看到两种试色方式:</p> <ul> <li>实时试色</li> <li>上传照片</li> </ul> <p>实时试色接近于我们平时看到的美妆镜效果。选择的色号都能实时展现,即使摇摇头,嘴唇颜色也不会「跟丢」。只是在人脸迅速移动时,口红颜色可能会出现在脸的其它部位,零点几秒后就能找到正确的位置。</p> <p>不过要是拿反了手机,那摄像头只能录到你倒着的脸,试色就不能成功。</p> <p><img class="aligncenter size-full wp-image-1232817" src="https://s3.ifanr.com/wp-content/uploads/2019/07/ezgif-4-44b6884ece1e.gif" alt="" width="360" height="635" /></p> <p>上传照片和实时试色略有不同,选取的图片必须有清晰的五官,这才能帮助算法识别嘴唇并定位。</p> <p><img class="aligncenter size-full wp-image-1232812" src="https://s3.ifanr.com/wp-content/uploads/2019/07/lips.jpg" alt="" width="1000" height="994" srcset="https://s3.ifanr.com/wp-content/uploads/2019/07/lips.jpg 1000w, https://s3.ifanr.com/wp-content/uploads/2019/07/lips-360x358.jpg 360w, https://s3.ifanr.com/wp-content/uploads/2019/07/lips-768x763.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <p>如果算法定位嘴唇不够精准,用户还能手动调整,定位至正确的区域,勾勒出嘴唇的廓形。同时,上传照片的 AR 试妆法还能和本身的唇色进行对比,让用户更直观的看到试色效果。</p> <p><img class="aligncenter size-full wp-image-1232813" src="https://s3.ifanr.com/wp-content/uploads/2019/07/ezgif-4-fec8cb079428.gif" alt="" width="270" height="540" /></p> <p>在很多喜欢的颜色中难以取舍?直接生成的四色拼图让你可以更方便地寻求好友建议。</p> <p><img class="aligncenter size-full wp-image-1232814" src="https://s3.ifanr.com/wp-content/uploads/2019/07/0-4.png" alt="" width="788" height="784" srcset="https://s3.ifanr.com/wp-content/uploads/2019/07/0-4.png 788w, https://s3.ifanr.com/wp-content/uploads/2019/07/0-4-360x358.png 360w, https://s3.ifanr.com/wp-content/uploads/2019/07/0-4-768x764.png 768w" sizes="(max-width: 788px) 100vw, 788px" /></p> <p>两种方法都能达到试妆的目的,那这个新功能对于目标用户来说到底怎么样呢?知晓君找到了四个经常购买口红的真实口红用户,请她们体验了一下,并告知我们这个 AR 试色功能能否帮助她们种草并下单。</p> <p><strong>OO(拥有 17 支口红):</strong></p> <blockquote><p>不会主动去用,买口红也不会想到先去小程序里试色。还是会先去小红书看一看,喜欢就找代购直接买,应该不会特意上小程序试个色。</p></blockquote> <p><strong>SS(拥有 11 支口红):</strong></p> <blockquote><p>我觉得还行。但每个女孩子唇色其实不一样,有的人唇色很深涂裸色其实不会有试色那么明显的效果。这个试色没有考虑到我们的唇色深浅问题,感觉就像是小时候的贴画一样,贴了个特定颜色的嘴唇贴画在脸上。</p> <p>不过嘴唇定位很准,有些太粉嫩和太暗沉的颜色看到就可以拔草了。看了一圈,我觉得 201 的牛血色挺种草的。不过也要去专柜试一下再买,毕竟我比较穷。</p></blockquote> <p><img class="aligncenter size-full wp-image-1232816" src="https://s3.ifanr.com/wp-content/uploads/2019/07/lips-1.jpg" alt="" width="2048" height="1536" srcset="https://s3.ifanr.com/wp-content/uploads/2019/07/lips-1.jpg 2048w, https://s3.ifanr.com/wp-content/uploads/2019/07/lips-1-360x270.jpg 360w, https://s3.ifanr.com/wp-content/uploads/2019/07/lips-1-768x576.jpg 768w, https://s3.ifanr.com/wp-content/uploads/2019/07/lips-1-1024x768.jpg 1024w" sizes="(max-width: 2048px) 100vw, 2048px" /></p> <div class="editor-image-source"> <p>▲ 图片来自:Paticua</p> </div> <p><strong>YY(拥有 5 支口红):</strong></p> <blockquote><p>显色度太高了,我觉得在我嘴唇上不一定有这么重的颜色。另外这个试色(让我)皮肤都白了一个色号,可能也会有色差。但有一部分还是会种草的,试出来荧光色就直接 pass 了,好看的那些烂番茄色、紫罗兰还是会考虑的。</p></blockquote> <p><strong>LL(拥有 4 支口红):</strong></p> <blockquote><p>不会想拥有,这个价格比代购贵好几十。就算小程序试了颜色想要,我肯定也要去线下试色。因为我涂口红也不会厚涂,一般都薄凃,两个效果差很多。就算很想要,应该也只会去找代购买吧。</p> <p>不过这个试色不用反复擦嘴唇是个优点,以前试两三个颜色嘴就开始疼了。这个倒是不会反复擦嘴唇,但颜色参考性也没有线下强。</p></blockquote> <p>我们调查的四位用户都表示自己有被种草的可能,但直接购买的可能性较低,如若进一步尝试或会找代购下单。而她们所反映的颜色显色度太高,没有定制化地做到千人千色也是用户会关注的问题。</p> <p><img class="aligncenter size-full wp-image-1232815" src="https://s3.ifanr.com/wp-content/uploads/2019/07/lipstick.jpg" alt="" width="1620" height="1080" srcset="https://s3.ifanr.com/wp-content/uploads/2019/07/lipstick.jpg 1620w, https://s3.ifanr.com/wp-content/uploads/2019/07/lipstick-360x240.jpg 360w, https://s3.ifanr.com/wp-content/uploads/2019/07/lipstick-768x512.jpg 768w, https://s3.ifanr.com/wp-content/uploads/2019/07/lipstick-1024x683.jpg 1024w" sizes="(max-width: 1620px) 100vw, 1620px" /></p> <div class="editor-image-source"> <p>▲ 图片来自:Glamour UK</p> </div> <h3>AR 的更多可能场景</h3> <p>微信的这个 AR 新功能不像其他 AR 技术应用一样对硬件有着较高的要求。通过微信小程序摄像头的帧处理能力,结合第三方引擎,便可实现 AR 的效果。</p> <p>基于小程序能力和谷歌 TensorFlow 机器学习开源平台支持,欧莱雅集团旗下的 ModiFace 试妆引擎开发了 AR 动态试妆能力,「阿玛尼美妆官方精品商城」小程序的试妆功能也就此诞生。</p> <p>作为阿玛尼这款小程序的 AR 引擎服务商。ModiFace 是一家创建了很多定制 AR 美容应用的公司,在 2018 年被欧莱雅集团收购,它所推出的「Style My Hair」是一款 AR 试发型的产品。</p> <p><img class="aligncenter size-full wp-image-1232807" src="https://s3.ifanr.com/wp-content/uploads/2019/07/STYL-MY-HAIR-1-750x400.jpg" alt="" width="750" height="400" srcset="https://s3.ifanr.com/wp-content/uploads/2019/07/STYL-MY-HAIR-1-750x400.jpg 750w, https://s3.ifanr.com/wp-content/uploads/2019/07/STYL-MY-HAIR-1-750x400-360x192.jpg 360w" sizes="(max-width: 750px) 100vw, 750px" /></p> <div class="editor-image-source"> <p>▲ Style My Hair</p> </div> <p>在更早之前,它也推出过类似的彩妆试妆产品,功能比之更强大。</p> <p>这是 AR 引擎服务商在小程序的新机会。正如微信所说「服务商不仅可以整包品牌的 AR 定制需求,还可以把 AR 服务封装成插件,上架在微信开放平台服务市场,供更多开发者和品牌商了解使用。」</p> <p><img class="aligncenter size-full wp-image-1232806" src="https://s3.ifanr.com/wp-content/uploads/2019/07/sephora_virtual_artist_tutorials_5_HR.0.jpg" alt="" width="1200" height="800" srcset="https://s3.ifanr.com/wp-content/uploads/2019/07/sephora_virtual_artist_tutorials_5_HR.0.jpg 1200w, https://s3.ifanr.com/wp-content/uploads/2019/07/sephora_virtual_artist_tutorials_5_HR.0-360x240.jpg 360w, https://s3.ifanr.com/wp-content/uploads/2019/07/sephora_virtual_artist_tutorials_5_HR.0-768x512.jpg 768w, https://s3.ifanr.com/wp-content/uploads/2019/07/sephora_virtual_artist_tutorials_5_HR.0-1024x683.jpg 1024w" sizes="(max-width: 1200px) 100vw, 1200px" /></p> <div class="editor-image-source"> <p>▲ ModiFace 试妆案例</p> </div> <p>而在 AR 方面积累能力的服务商也能够发挥优势,或调用第三方 AR 引擎,或与已经具备 AR 能力的服务商伙伴合作,开发相对的 AR 场景服务。</p> <p>在小程序里的 AR 能力应用中,AR 试妆只是第一个相关案例。这种 AR 试衣/试妆的技术可以用于时尚、美妆等零售业,服装、假发、化妆品都可能成为 AR 广泛应用的领域,这也是我们以往经常能够看到的 AR 应用案例。节省用户时间,快捷地帮助用户体验试穿。</p> <p>在这方面,家居行业的「重」或许也能用 AR 在小程序中的应用「轻」下去。iOS 系统中的应用的「测距仪」就利用了 AR 技术将设备变成卷尺。将家具等数据输入系统,利用 AR 相关的技术,家居行业也可以让用户在新家试用新家具。</p> <p><img class="aligncenter size-full wp-image-1232808" src="https://s3.ifanr.com/wp-content/uploads/2019/07/maxresdefault-5.jpg" alt="" width="1280" height="720" srcset="https://s3.ifanr.com/wp-content/uploads/2019/07/maxresdefault-5.jpg 1280w, https://s3.ifanr.com/wp-content/uploads/2019/07/maxresdefault-5-360x203.jpg 360w, https://s3.ifanr.com/wp-content/uploads/2019/07/maxresdefault-5-768x432.jpg 768w, https://s3.ifanr.com/wp-content/uploads/2019/07/maxresdefault-5-1024x576.jpg 1024w" sizes="(max-width: 1280px) 100vw, 1280px" /></p> <p>根据市场技术研究机构 ABI Research 在 2018 年发布的《AR 在零售业中的应用》显示,到 2022 年,AR 技术将帮助全球电商的销售额增长 3%,即 1220 亿美元。ABI Research 高级分析师 Nick Finill 也表示「将 AR 集成到现有移动商务平台相对容易的特性,及其对用户体验可能产生的正面影响都将主要推动消费者的需求。」</p> <p>AR 在电商方面的应用相较其他领域更为成熟,在小程序里应该也会是被深度挖掘的领域。从第一个试妆开始,接下来在不同领域的应用都值得期待。</p> <p><img class="aligncenter size-full wp-image-1232810" src="https://s3.ifanr.com/wp-content/uploads/2019/07/IMG_9006-1.jpg" alt="" width="2400" height="1600" srcset="https://s3.ifanr.com/wp-content/uploads/2019/07/IMG_9006-1.jpg 2400w, https://s3.ifanr.com/wp-content/uploads/2019/07/IMG_9006-1-360x240.jpg 360w, https://s3.ifanr.com/wp-content/uploads/2019/07/IMG_9006-1-768x512.jpg 768w, https://s3.ifanr.com/wp-content/uploads/2019/07/IMG_9006-1-1024x683.jpg 1024w" sizes="(max-width: 2400px) 100vw, 2400px" /></p> <div class="editor-image-source"> <p>▲ 图片来自:Ars Technica</p> </div> <p>另一个是广告。以往我们能看到一些用小程序进行营销的案例,现在则可以大胆想一想把 AR 用到小程序品牌营销中。请了明星代言人的当然不能浪费这些流量,将代言人和 AR 技术结合,在商品展示等方面都有更多的可能性。</p> <p>线上线下的联动也多了一种方式。之前传统的集徽章、集 logo 都可以玩出多种互动花样,线上线下的联动,也能够有效地提升消费者的忠诚度。</p> <p>小游戏则是需要更多创造者发挥想象的部分。在一款爆火的《Pokémon Go》之后,AR 游戏市场还需要更多成功的案例来提振信心。小程序支持了 AR 效果的展现,小游戏也可能就在不远处。</p> <p><img class="aligncenter size-full wp-image-1232809" src="https://s3.ifanr.com/wp-content/uploads/2019/07/pokemon-go-gyarados-hero.jpg" alt="" width="1600" height="1200" srcset="https://s3.ifanr.com/wp-content/uploads/2019/07/pokemon-go-gyarados-hero.jpg 1600w, https://s3.ifanr.com/wp-content/uploads/2019/07/pokemon-go-gyarados-hero-360x270.jpg 360w, https://s3.ifanr.com/wp-content/uploads/2019/07/pokemon-go-gyarados-hero-768x576.jpg 768w, https://s3.ifanr.com/wp-content/uploads/2019/07/pokemon-go-gyarados-hero-1024x768.jpg 1024w" sizes="(max-width: 1600px) 100vw, 1600px" /></p> <div class="editor-image-source"> <p>▲  图片来自:iMore</p> </div> <p>但是只引入 AR 技术进小游戏是没什么意义的,它需要的是更好的结合和新奇的玩法。支付宝蚂蚁庄园中就有一个「AR 跳跳乐」的小游戏,但这个游戏只是引入了 AR 技术,在玩法方面并没有什么革新。</p> <p><img class="aligncenter size-full wp-image-1232805" src="https://s3.ifanr.com/wp-content/uploads/2019/07/ezgif-2-854dcb5f9000.gif" alt="" width="588" height="294" srcset="https://s3.ifanr.com/wp-content/uploads/2019/07/ezgif-2-854dcb5f9000.gif 588w, https://s3.ifanr.com/wp-content/uploads/2019/07/ezgif-2-854dcb5f9000-360x180.gif 360w" sizes="(max-width: 588px) 100vw, 588px" /></p> <p>小程序支持 AR 能力,这初步满足了部分开发者和品牌的诉求。但怎么使用 AR 能力,甚至创新一些交互场景,这都是开发者、品牌方、服务商所需要思考的。</p> <p>目前,仅微信版本 7.0.5 的用户才能体验此功能。没有下载最新版本的用户,可以在知晓程序后台回复「新版」下载微信 7.0.5 版本。</p> <p>关于微信此次支持的实现 AR 效果,你有怎样的期待?又有哪些相关问题想要询问微信团队?知晓程序下周将对话微信小程序团队,或许你的问题就能得到解答。</p>