螞蟻森林是一款讓設(shè)計(jì)師幸福感爆棚的產(chǎn)品，畢竟這個(gè)朋友們都在用、不為消費(fèi)娛樂(lè)、讓世界變得更好。順便，還得了個(gè)聯(lián)合國(guó)“地球衛(wèi)士獎(jiǎng)”。

四年前螞蟻森林正式上線，無(wú)數(shù)用戶在其中踐行自己的“ 低碳美學(xué) ”。如今，當(dāng)產(chǎn)品使用用戶數(shù)已超5億，在這樣的高度和廣度，需要給到用戶一些更新的體驗(yàn)。

那么，設(shè)計(jì)在其中能做些什么呢？

今年螞蟻森林升級(jí)之初，設(shè)計(jì)團(tuán)隊(duì)就定下了三個(gè)關(guān)鍵目標(biāo)：

「真實(shí)」：建立更多真實(shí)世界的映射，讓用戶更有沉浸感；

「細(xì)節(jié)」：融入更多故事和彩蛋，讓場(chǎng)景活起來(lái)，傳遞“天更藍(lán)，心更暖”的體驗(yàn)；

「高效」：讓用戶體驗(yàn)更輕松。

風(fēng)格，讓螞蟻森林更真實(shí)

每一個(gè)螞蟻森林的設(shè)計(jì)師，在做設(shè)計(jì)前都被要求到真正的森林地塊去走訪。

初到螞蟻森林時(shí)，“ 荒蕪 ” 是對(duì)大環(huán)境的第一印象，代表著造林所面對(duì)惡劣條件?！坝行颉?是邁入林地后對(duì)螞蟻森林的又一感受，代表著人類在其中穩(wěn)步推進(jìn)。

然而真實(shí)世界的天空、地面和植物與手機(jī)屏幕相比，有著更多細(xì)節(jié)，也意味著巨大的視覺(jué)差異：

上面兩張圖是很好的對(duì)比案例，那么，通過(guò)設(shè)計(jì)語(yǔ)言怎么表達(dá)真實(shí)還是虛擬？我們?cè)诔橄蠛驼鎸?shí)之間，到底選擇誰(shuí)？

為了便于描述畫面，我們可以用圖形、配色、質(zhì)感和視角這樣四個(gè)要素來(lái)進(jìn)行設(shè)計(jì)：

如上圖所示，圖形、配色和質(zhì)感越往右邊走，我們的視覺(jué)感官就會(huì)愈發(fā)真實(shí)。

但100%的真實(shí)往往細(xì)節(jié)過(guò)多、成本高昂，對(duì)產(chǎn)品設(shè)計(jì)來(lái)說(shuō)未必是好事。因此，經(jīng)過(guò)多版本嘗試，我們把改版的視覺(jué)風(fēng)格定位在了“微質(zhì)感”上。

用最焦點(diǎn)的主樹及主場(chǎng)景來(lái)說(shuō)，是這樣的：

通過(guò)減少大面積幾何色塊，并合理增加陰影、高光反射面，可以有效塑造層次感和真實(shí)感。同樣的手法還被應(yīng)用在界面中的其他視覺(jué)元素：

除了這些場(chǎng)景元素以外，產(chǎn)品中還有很多功能以按鈕的形式出現(xiàn)。

作為畫面的一員，他們同樣需要在不影響固有認(rèn)知的前提下，配合做一些視覺(jué)改變，使得界面中所有元素互相配合，形成統(tǒng)一的視覺(jué)感官。

在阿拉善，設(shè)計(jì)師一路坐著吉普車從沙漠邊緣進(jìn)入，穿過(guò)層疊的沙丘之后又突然來(lái)到一片綠洲，可能是對(duì)螞蟻森林演變的一種最好的體驗(yàn)。

因此，運(yùn)用“時(shí)間”和“空間”技巧，我們想把這種真實(shí)感受送到用戶面前。首先在構(gòu)圖和透視上，我們使用更具縱深感的平行透視，將用戶目光焦點(diǎn)送到遠(yuǎn)方。

隨著用戶種樹的進(jìn)度，畫面會(huì)從沙漠慢慢變成綠地。

大色塊的做法只能通過(guò)顏色表達(dá)變化，差異性有限，給人的視覺(jué)沖擊并不夠強(qiáng)。通過(guò)由近及遠(yuǎn)的視覺(jué)變化，搭配微質(zhì)感，可以讓用戶明顯感受到種樹如何為沙漠帶來(lái)綠色，同時(shí)白天和夜晚的差別也會(huì)更大。

細(xì)節(jié)，讓螞蟻森林更有趣

在最初設(shè)計(jì)頁(yè)面時(shí)，就有構(gòu)想一只可愛(ài)的小青蛙。

想當(dāng)然地，我們認(rèn)為綠地里會(huì)有青蛙。但當(dāng)實(shí)地去螞蟻森林地塊探訪后（是的，每個(gè)螞蟻森林的設(shè)計(jì)師都必須要去現(xiàn)場(chǎng)走訪一次），才發(fā)現(xiàn)沙漠環(huán)境里那么干燥，完全不可能出現(xiàn)青蛙。

雖然被現(xiàn)實(shí)打了臉，不過(guò)在最終的方案里，我們還是保留了這只青蛙，并且還為它配上了一只白色的蝴蝶， 許愿在螞蟻森林將沙漠真正變成綠洲的時(shí)候，這些小動(dòng)物都能自由自在地生活在其中。

未來(lái)，也許保護(hù)地的小伙伴們也可以來(lái)這里做客：藏狐、黑頸鶴、菲氏葉猴……畢竟，有樹、有動(dòng)物、有雞，才是我們熱鬧的螞蟻森林。

隨著視覺(jué)縱深的擴(kuò)展，橫向能否也給用戶更多探索的空間？

常見的交互方式是“左滑右滑”，但實(shí)驗(yàn)下來(lái)因?yàn)椴蝗菀妆挥脩舭l(fā)現(xiàn)和誤操作概率高，所以最終選用了“ 陀螺儀 ”這種更有趣的交互方式來(lái)實(shí)現(xiàn)橫向場(chǎng)景的用戶感知。與此同時(shí)，還為其他的彩蛋留出了余地。

白天，通過(guò)左右晃動(dòng)陀螺儀可以在頁(yè)面最左側(cè)發(fā)現(xiàn)一對(duì)放風(fēng)箏的小朋友。而在晚上，頁(yè)面的右上角還能看到沙漠的銀河。大家可以自行打開支付寶，點(diǎn)進(jìn)螞蟻森林里面去體驗(yàn)一番。

我們希望通過(guò)這些有趣的小彩蛋，為用戶營(yíng)造出更多開放性故事感，讓整個(gè)產(chǎn)品“活”起來(lái)。

整合，讓螞蟻森林更高效

除了視覺(jué)升級(jí)之外，此次螞蟻森林改版還對(duì)產(chǎn)品功能進(jìn)行了整合。四年來(lái)，不斷迭代的功能已經(jīng)讓我們的森林變得“不堪重負(fù)”：6個(gè)能量球、能量保護(hù)罩、好友澆水、紅包、營(yíng)銷資源位……

當(dāng)極限情況下，可能連基礎(chǔ)的用戶體驗(yàn)都無(wú)法保障。為了給界面減負(fù)，我們從數(shù)據(jù)出發(fā)，首先將一些不常用的功能進(jìn)行收納整合。

比如放話被挪到了與好友互相收能量的模塊附近，更符合用戶動(dòng)線；攻略更適合作為新人引導(dǎo)融入在產(chǎn)品試用過(guò)程中，因此收納起來(lái)讓出了寶貴的空間。

現(xiàn)在森林主頁(yè)就有“ 螞蟻莊園 ”的入口，并采用了場(chǎng)景化（非功能化）的方式來(lái)呈現(xiàn)。

我們相信游戲化產(chǎn)品更適合把事物融入場(chǎng)景中，并不會(huì)影響點(diǎn)擊率。所以，我們把“合種”從icon按鈕拿了下來(lái)，當(dāng)作畫面里的一部分去展示。經(jīng)過(guò)線上測(cè)試，合種的點(diǎn)擊率提升非常明顯。

細(xì)心的小伙伴肯定已經(jīng)對(duì)界面右下角的“找能量”功能很熟悉了。

當(dāng)觀察了無(wú)數(shù)位用戶每天反復(fù)穿梭在好友列表和好友主見之間，少則數(shù)十次多則上百次點(diǎn)擊后，我們就在思考有沒(méi)有更高效的用戶互訪方式。

通過(guò)“找能量”，用戶可以快速訪問(wèn)一個(gè)有“行動(dòng)點(diǎn)”的好友主頁(yè)：有能量可收、有能量快消失、有紅包未領(lǐng)取……借助算法，整個(gè)體驗(yàn)過(guò)程變得更加 “傻瓜” 和 “快捷”。從數(shù)據(jù)上來(lái)看，用戶活躍度和使用深度都有了明顯的提升。

回歸公益初心，給用戶更好的體驗(yàn)

游戲化的方式做產(chǎn)品，不代表要做一個(gè)真的游戲。

公益產(chǎn)品是互聯(lián)網(wǎng)環(huán)境中難得的一片凈土，讓設(shè)計(jì)，給它更好的用戶體驗(yàn)。因?yàn)槲浵伾?，我們選擇每天早起收能量，選擇騎共享單車而不開車，又結(jié)識(shí)了一個(gè)個(gè)一起種樹的人，在螞蟻森林的每一秒，每一克能量，都因設(shè)計(jì)變得真實(shí)、有價(jià)值。視覺(jué)化的升級(jí)并不單純只有感官的改善，進(jìn)而也會(huì)帶來(lái)產(chǎn)品體驗(yàn)和業(yè)務(wù)數(shù)據(jù)的提升。

當(dāng)然，新的視覺(jué)風(fēng)格上線后，是不是所有人都喜歡？

答案是否定的，我們也收到了不少用戶的寶貴建議，到現(xiàn)在也依然在持續(xù)優(yōu)化顏色、細(xì)節(jié)。

文章來(lái)自微信公眾號(hào)：AlibabaDesign