螞蟻森林,是如何做好體驗設計的?
發(fā)布時間:2022-01-14 11:16 [ 我要自學網(wǎng)原創(chuàng) ] 發(fā)布人: 小劉2175 閱讀: 3261

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

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

那么,設計在其中能做些什么呢?

今年螞蟻森林升級之初,設計團隊就定下了三個關鍵目標:

  • 「真實」:建立更多真實世界的映射,讓用戶更有沉浸感;
  • 「細節(jié)」:融入更多故事和彩蛋,讓場景活起來,傳遞“天更藍,心更暖”的體驗;
  • 「高效」:讓用戶體驗更輕松。


風格,讓螞蟻森林更真實


每一個螞蟻森林的設計師,在做設計前都被要求到真正的森林地塊去走訪。

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

然而真實世界的天空、地面和植物與手機屏幕相比,有著更多細節(jié),也意味著巨大的視覺差異:

超5億用戶的螞蟻森林,是如何做好體驗設計的?

上面兩張圖是很好的對比案例,那么,通過設計語言怎么表達真實還是虛擬?我們在抽象和真實之間,到底選擇誰?

為了便于描述畫面,我們可以用圖形、配色、質(zhì)感和視角這樣四個要素來進行設計:

超5億用戶的螞蟻森林,是如何做好體驗設計的?

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

但100%的真實往往細節(jié)過多、成本高昂,對產(chǎn)品設計來說未必是好事。因此,經(jīng)過多版本嘗試,我們把改版的視覺風格定位在了“微質(zhì)感”上。

用最焦點的主樹及主場景來說,是這樣的:

超5億用戶的螞蟻森林,是如何做好體驗設計的?

通過減少大面積幾何色塊,并合理增加陰影、高光反射面,可以有效塑造層次感和真實感。同樣的手法還被應用在界面中的其他視覺元素:

超5億用戶的螞蟻森林,是如何做好體驗設計的?

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

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

超5億用戶的螞蟻森林,是如何做好體驗設計的?

在阿拉善,設計師一路坐著吉普車從沙漠邊緣進入,穿過層疊的沙丘之后又突然來到一片綠洲,可能是對螞蟻森林演變的一種最好的體驗。

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

超5億用戶的螞蟻森林,是如何做好體驗設計的?

隨著用戶種樹的進度,畫面會從沙漠慢慢變成綠地。

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

超5億用戶的螞蟻森林,是如何做好體驗設計的?


細節(jié),讓螞蟻森林更有趣


在最初設計頁面時,就有構(gòu)想一只可愛的小青蛙。

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

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

超5億用戶的螞蟻森林,是如何做好體驗設計的?

未來,也許保護地的小伙伴們也可以來這里做客:藏狐、黑頸鶴、菲氏葉猴……畢竟,有樹、有動物、有雞,才是我們熱鬧的螞蟻森林。

隨著視覺縱深的擴展,橫向能否也給用戶更多探索的空間?

常見的交互方式是“左滑右滑”,但實驗下來因為不容易被用戶發(fā)現(xiàn)和誤操作概率高,所以最終選用了“ 陀螺儀 ”這種更有趣的交互方式來實現(xiàn)橫向場景的用戶感知。與此同時,還為其他的彩蛋留出了余地。

超5億用戶的螞蟻森林,是如何做好體驗設計的?

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

我們希望通過這些有趣的小彩蛋,為用戶營造出更多開放性故事感,讓整個產(chǎn)品“活”起來。

超5億用戶的螞蟻森林,是如何做好體驗設計的?


整合,讓螞蟻森林更高效


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

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

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

超5億用戶的螞蟻森林,是如何做好體驗設計的?

現(xiàn)在森林主頁就有“ 螞蟻莊園 ”的入口,并采用了場景化(非功能化)的方式來呈現(xiàn)。

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

超5億用戶的螞蟻森林,是如何做好體驗設計的?

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

當觀察了無數(shù)位用戶每天反復穿梭在好友列表和好友主見之間,少則數(shù)十次多則上百次點擊后,我們就在思考有沒有更高效的用戶互訪方式。

通過“找能量”,用戶可以快速訪問一個有“行動點”的好友主頁:有能量可收、有能量快消失、有紅包未領取……借助算法,整個體驗過程變得更加 “傻瓜” 和 “快捷”。從數(shù)據(jù)上來看,用戶活躍度和使用深度都有了明顯的提升。


回歸公益初心,給用戶更好的體驗


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

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

PhotoshopCC2020視頻教程
我要自學網(wǎng)商城 ¥120 元
進入購買
文章評論
0 條評論 按熱度排序 按時間排序 /350
添加表情
遵守中華人民共和國的各項道德法規(guī),
承擔因您的行為而導致的法律責任,
本站有權保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。
V
特惠充值
聯(lián)系客服
APP下載
官方微信
返回頂部
分類選擇:
電腦辦公 平面設計 室內(nèi)設計 室外設計 機械設計 工業(yè)自動化 影視動畫 程序開發(fā) 網(wǎng)頁設計 會計課程 興趣成長 AIGC