《植物保姆》結合「植物養成遊戲」與「喝水提醒 app」,使用者喝下的每一杯水都是澆灌植物的養分,在照顧小植物的同時也照顧自己的身心健康。
2012 年推出的第一代《植物保姆》是 Fourdesire 的第一款產品;六年後,第二代《植物保姆》於 2019 年上線。「Fourdesire 生活遊樂場」當天由兩代《植物保姆》設計師張閔傑與周庫盟進行精彩對談,分享《植物保姆》系列是如何在兩代差異之中維持產品間的重要聯繫!
第一代《植物保姆》產品由來
庫盟:《植物保姆》系列在全球已累積超過 1300 萬個下載,閔傑覺得《植物保姆》能夠達到這麼高的下載量,主要原因是什麼呢?
閔傑: 個人認為是因為它的機制夠簡單,不需要花很多時間學習。當時的靈感來源是曾經很流行的「電子雞」;當年學生會偷偷帶去學校,因為每 2 至 4 小時需餵食一次,如果被老師沒收的話虛擬寵物很容易死掉,孩子都會哭得唏哩花啦。團隊從這個共同的回憶延伸思考:為什麼大家願意花心力照顧虛擬寵物,卻不願意多多照顧自己呢?因此發想出《植物保姆》的核心機制:為虛擬植物澆水的同時,也順便提醒自己喝下一杯水。
第二代《植物保姆》設計差異
兩代《植物保姆》的設計雖然有所差異,但也維持了產品的核心概念
閔傑: 庫盟使用過第一代《植物保姆》嗎?當時的使用者體驗如何?
庫盟: 第一次使用《植物保姆》是在 iPhone 4s 上,那時比較流行《Angry Bird》、《Candy Crush》等休閒遊戲,帶有遊戲性質的工具 app 非常少見。當時覺得《植物保姆》把植物放在窗台的畫面、陽光灑進來的整體氣氛營造得很好。但過幾年開始從擬物流行到扁平的設計風格時,慢慢覺得第一代《植物保姆》的介面有點過時(笑)後來決定使用新的設計風格來打造第二代《植物保姆》,但同時想要保留產品的核心概念。
閔傑: 兩代《植物保姆》的 app 主畫面正中央都是植物,讓使用者一眼就能看到它;而 app 中最重要的「喝水按鈕」也都是放在使用者最容易點擊到的位置。設計第一代時嘗試過許多形式的按鈕,像是直接點擊就可以餵水、按下去後跳出確認對話框「確定要餵水嗎?」等等。後來與製作人和工程師來回討論測試後使用「長壓」的方式,用大約 1.5 秒的動畫跟水流音效營造喝水體驗。
兩代《植物保姆》喝水按鈕演進過程
庫盟: 第二代的喝水按鈕從真實的杯子變成一個水滴,除了跟「水」更直接相關,也可以把「幫自己補充水分」和「幫植物補充水分」兩個意象結合在一起。另外為了增加產品活潑感,做了水珠飛上去、停留幾秒後澆在植物上的動畫。當時先畫出分鏡後請工程師製作,最後看到動畫被做出來的時候覺得非常感動!
第二代喝水按鈕增加水珠動畫來營造活潑感
兩代差異比較:多水杯設定
第一代多水杯設定位於主畫面下方展示架
閔傑: 第一代《植物保姆》做到一半時,團隊想到:若使用者在家中跟辦公室用不同的杯子喝水,就會需要設定不同容量的水杯。於是去調查市面上常見的杯子,並在主畫面下方新增展示架頁面,以「more cups」的字樣提示。
庫盟: 第二代把多水杯設定與喝水按鈕結合在一起,使用者只要長壓按鈕再左右滑動,就可以直接在紀錄喝水的同時選擇水杯容量。而主畫面下方是以全新的「溫室」機制取代。
第二代多水杯設定為長壓喝水按鈕並滑動後跳出
全新溫室機制與 app 架構
使用者可以把長大的植物收藏進溫室當中
庫盟: 第二代《植物保姆》的主畫面下方是「溫室」,讓使用者把長大的植物收藏在裡面。後來藝術家在繪製畫面時想到溫室可以被堆疊,因此改為「樹幹」的設計,隨著越來越多植物被放進去,樹幹也會越長越高。因應樹幹的設計,最後便把整個主畫面場景從窗台搬到戶外,樹幹長高的同時後面的場景會跟著變化。
第二代《植物保姆》採用更簡潔的 App 架構
庫盟: 第二代《植物保姆》也採用更簡潔的 App 架構:將植物主畫面放在中間,其他功能都放在主畫面兩側,並以底部的 tab bar 來指引使用者,希望整體操作可以更直覺簡單。將這個架構比喻成「便利商店」的話,就像最多消費者購買的茶飲、可樂會在飲料櫃正中間,兩邊則是酒或冷凍食品。
設計彩蛋公開
兩位設計師個人最喜愛的彩蛋就藏在圖片中!
閔傑: 曾經想製作透過藍牙與手機連線的小公仔,小公仔可以發光來提醒使用者該喝水了!另外,我們也在第一代《植物保姆》藏了一個小彩蛋:只要套用萬聖節造型花盆並在晚上幫植物拍照,就可以在主畫面拍到可愛的小鬼魂。當時為了實現這個功能,還特別拜託了工程師一番呢!
庫盟: 個人最喜歡第二代的水量圖表設計,使用人體形狀很直覺傳達出使用者還需要喝多少的水!
閔傑: 最後透露,團隊正在製作全新的特殊造型花盆,包含《Walkr》、《記帳城市》與第一代《植物保姆》紀念花盆。不只如此,全新的小植物也即將登場,敬請期待!
《植物團隊》團隊透露:全新小植物即將登場!
現場 Q&A
- Q:Fourdesire 團隊設計師們如何維持多個產品間的設計一致性?
- A:初期概念階段會有很多不同的設計方式,但後期收斂想法後,就必須制定出設計規範(Guideline),確定產品的核心調性。例如《植物保姆》的設計風格就強調:清澈的水感、植物的彈性、玻璃杯子的透明感。另外 Fourdesire 設計團隊每兩週會固定進行練習,讓設計師們針對同一個題目做設計並一起討論。例如:用幾個特定顏色和形狀製作出三種情緒。過程中會發現不同設計師詮釋情緒的方式都不一樣,可以利用這個機會溝通、聆聽與瞭解彼此,在討論的過程中便可以找到一致的共識。
關於 Fourdesire 生活遊樂場
Fourdesire 一年一度的使用者見面會「生活遊樂場」是團隊與使用者近距離交流的珍貴機會!今年的第三屆「Fourdesire 生活遊樂場」,團隊與 150 位熱情使用者分享「玩心設計」的核心理念以及產品製作的點點滴滴,邀請大家一起成為生活玩樂家!
閱讀其他活動紀錄:
- 走在登月 50 週年之後:Walkr 的新探險(上)|Fourdesire 生活遊樂場活動紀錄 #1
- 走在登月 50 週年之後:Walkr 的新探險(下)|Fourdesire 生活遊樂場活動紀錄 #2
- 新財務長計畫幕後直擊:誕生過程大公開|Fourdesire 生活遊樂場活動紀錄 #3
- 替你的生活帶來玩心|Fourdesire 生活遊樂場活動紀錄 #5
了解更多 Fourdesire 玩心設計:
- Fourdesire http://fourdesire.com/
- 《植物保姆》https://plantnanny.app
- 《記帳城市》http://fortunecityapp.com/
- 《Walkr》http://walkrgame.com/