当前位置:首页 >教程首页 > U I 设计 > AI+UX设计大师班 >超五亿用户的蚂蚁森林是如何做好体验设计的?

超五亿用户的蚂蚁森林是如何做好体验设计的?

发布时间:2020-12-16 11:18:05

蚂蚁森林是一款让设计师幸福感爆棚的产品,毕竟这个朋友们都在用、不为消费娱乐、让世界变得更好。顺便,还得了个联合国“地球卫士奖”。那么超5亿用户的蚂蚁森林是如何做好体验设计的?

四年前蚂蚁森林正式上线,无数用户在其中践行自己的“ 低碳美学 ”。如今,当产品使用用户数已超5亿,在这样的高度和广度,需要给到用户一些更新的体验。

那么,设计在其中能做些什么呢?

今年蚂蚁森林升级之初,设计团队就定下了三个关键目标:

「真实」:建立更多真实世界的映射,让用户更有沉浸感;

「细节」:融入更多故事和彩蛋,让场景活起来,传递“天更蓝,心更暖”的体验;

「高效」:让用户体验更轻松。

风格,让蚂蚁森林更真实

每一个蚂蚁森林的设计师,在做设计前都被要求到真正的森林地块去走访。

初到蚂蚁森林时,“ 荒芜 ” 是对大环境的第一印象,代表着造林所面对恶劣条件。“有序” 是迈入林地后对蚂蚁森林的又一感受,代表着人类在其中稳步推进。

然而真实世界的天空、地面和植物与手机屏幕相比,有着更多细节,也意味着巨大的视觉差异:

1.jpg

上面两张图是很好的对比案例,那么,通过设计语言怎么表达真实还是虚拟?我们在抽象和真实之间,到底选择谁?

为了便于描述画面,我们可以用图形、配色、质感和视角这样四个要素来进行设计:

2.jpg

如上图所示,图形、配色和质感越往右边走,我们的视觉感官就会愈发真实。

但100%的真实往往细节过多、成本高昂,对产品设计来说未必是好事。因此,经过多版本尝试,我们把改版的视觉风格定位在了“微质感”上。

用最焦点的主树及主场景来说,是这样的:

3.jpg

通过减少大面积几何色块,并合理增加阴影、高光反射面,可以有效塑造层次感和真实感。同样的手法还被应用在界面中的其他视觉元素:

4.jpg

除了这些场景元素以外,产品中还有很多功能以按钮的形式出现。

作为画面的一员,他们同样需要在不影响固有认知的前提下,配合做一些视觉改变,使得界面中所有元素互相配合,形成统一的视觉感官。

5.jpg

在阿拉善,设计师一路坐着吉普车从沙漠边缘进入,穿过层叠的沙丘之后又突然来到一片绿洲,可能是对蚂蚁森林演变的一种最好的体验。

因此,运用“时间”和“空间”技巧,我们想把这种真实感受送到用户面前。首先在构图和透视上,我们使用更具纵深感的平行透视,将用户目光焦点送到远方。

6.gif

随着用户种树的进度,画面会从沙漠慢慢变成绿地。

大色块的做法只能通过颜色表达变化,差异性有限,给人的视觉冲击并不够强。通过由近及远的视觉变化,搭配微质感,可以让用户明显感受到种树如何为沙漠带来绿色,同时白天和夜晚的差别也会更大。

7.jpg

细节,让蚂蚁森林更有趣

在最初设计页面时,就有构想一只可爱的小青蛙。

想当然地,我们认为绿地里会有青蛙。但当实地去蚂蚁森林地块探访后(是的,每个蚂蚁森林的设计师都必须要去现场走访一次),才发现沙漠环境里那么干燥,完全不可能出现青蛙。

虽然被现实打了脸,不过在最终的方案里,我们还是保留了这只青蛙,并且还为它配上了一只白色的蝴蝶, 许愿在蚂蚁森林将沙漠真正变成绿洲的时候,这些小动物都能自由自在地生活在其中。

8.gif

未来,也许保护地的小伙伴们也可以来这里做客:藏狐、黑颈鹤、菲氏叶猴……毕竟,有树、有动物、有鸡,才是我们热闹的蚂蚁森林。

随着视觉纵深的扩展,横向能否也给用户更多探索的空间?

常见的交互方式是“左滑右滑”,但实验下来因为不容易被用户发现和误操作概率高,所以最终选用了“ 陀螺仪 ”这种更有趣的交互方式来实现横向场景的用户感知。与此同时,还为其他的彩蛋留出了余地。

9.gif

白天,通过左右晃动陀螺仪可以在页面最左侧发现一对放风筝的小朋友。而在晚上,页面的右上角还能看到沙漠的银河。大家可以自行打开支付宝,点进蚂蚁森林里面去体验一番。

我们希望通过这些有趣的小彩蛋,为用户营造出更多开放性故事感,让整个产品“活”起来。

10.gif

整合,让蚂蚁森林更高效

除了视觉升级之外,此次蚂蚁森林改版还对产品功能进行了整合。四年来,不断迭代的功能已经让我们的森林变得“不堪重负”:6个能量球、能量保护罩、好友浇水、红包、营销资源位……

当极限情况下,可能连基础的用户体验都无法保障。为了给界面减负,我们从数据出发,首先将一些不常用的功能进行收纳整合。

比如放话被挪到了与好友互相收能量的模块附近,更符合用户动线;攻略更适合作为新人引导融入在产品试用过程中,因此收纳起来让出了宝贵的空间。

11.jpg

现在森林主页就有“ 蚂蚁庄园 ”的入口,并采用了场景化(非功能化)的方式来呈现。

我们相信游戏化产品更适合把事物融入场景中,并不会影响点击率。所以,我们把“合种”从icon按钮拿了下来,当作画面里的一部分去展示。经过线上测试,合种的点击率提升非常明显。

12.jpg

细心的小伙伴肯定已经对界面右下角的“找能量”功能很熟悉了。

当观察了无数位用户每天反复穿梭在好友列表和好友主见之间,少则数十次多则上百次点击后,我们就在思考有没有更高效的用户互访方式。

通过“找能量”,用户可以快速访问一个有“行动点”的好友主页:有能量可收、有能量快消失、有红包未领取……借助算法,整个体验过程变得更加 “傻瓜” 和 “快捷”。从数据上来看,用户活跃度和使用深度都有了明显的提升。

回归公益初心,给用户更好的体验

游戏化的方式做产品,不代表要做一个真的游戏。

公益产品是互联网环境中难得的一片净土,让设计,给它更好的用户体验。因为蚂蚁森林,我们选择每天早起收能量,选择骑共享单车而不开车,又结识了一个个一起种树的人,在蚂蚁森林的每一秒,每一克能量,都因设计变得真实、有价值。视觉化的升级并不单纯只有感官的改善,进而也会带来产品体验和业务数据的提升。

当然,新的视觉风格上线后,是不是所有人都喜欢?

答案是否定的,我们也收到了不少用户的宝贵建议,到现在也依然在持续优化颜色、细节。所以,屏幕前的你,对蚂蚁森林有什么好的建议?

作者微信公众号:「AlibabaDesign」

学员作品赏析
  • 2101期学员李思庭作品

    2101期学员李思庭作品

  • 2104期学员林雪茹作品

    2104期学员林雪茹作品

  • 2107期学员赵凌作品

    2107期学员赵凌作品

  • 2107期学员赵燃作品

    2107期学员赵燃作品

  • 2106期学员徐正浩作品

    2106期学员徐正浩作品

  • 2106期学员弓莉作品

    2106期学员弓莉作品

  • 2105期学员白羽新作品

    2105期学员白羽新作品

  • 2107期学员王佳蕊作品

    2107期学员王佳蕊作品

专业问题咨询

你担心的问题,火星帮你解答

微信扫码在线答疑

扫码领福利1V1在线答疑

点击咨询
添加老师微信,马上领取免费课程资源

1. 打开微信扫一扫,扫描左侧二维码

2. 添加老师微信,马上领取免费课程资源

×

同学您好!

您已成功报名0元试学活动,老师会在第一时间与您取得联系,请保持电话畅通!
确定