《植物保姆》系列 App 的主要目的是養成使用者的喝水習慣,透過照顧植物來提醒使用者喝水。
在第二代《植物保姆》的介面設計與體驗上,希望讓使用者產生貼近生活、活潑且有生命力的感受,因此定義了主要概念:「使用起來具有活力的介面」作為新版設計的核心。
讓 App 與使用者產生連結
《植物保姆²》在主畫面上希望使用者對植物產生情感,所以在紀錄喝水時,使用水珠凝聚後澆灑於植物上方的方式呈現,讓使用者在記錄喝水時同時有照顧著植物的意象。
產品中的重要操作行為:紀錄喝水
一代《植物保姆》(左)和《植物保姆²》(右)的紀錄方式比較
在資訊頁面的當日攝取水量上,使用人體的圖形呈現,代表使用者為自己的身體攝取多少水分,希望讓使用者快速接收到訊息,並獲得更有趣的資訊圖表。
初期和成品顯示水量攝取的圖表
在沒有文字敘述時,人體量表圖是不是比圓形進度條更能傳達出「身體補充多少水分」的訊息呢?
營造 App 內植物與使用者互動的真實感
在主畫面中與使用者產生連結後,App 內的其他部分就可以延續此概念,進一步營造真實感。
例如對話框在不同的情境下,運用了不同的方式呈現。初期採用「圓形頭像」的設計,但後來覺得圓形頭像無法表現出生命力,所以改用了「花盆+植物」的對話框,希望使用者在搬移時,能感受到要將養成的植物搬移到樹洞中,而「圓形頭像」更適合在「發現圖鑑」時使用。
希望讓使用者感受到「就像在生活中把桌上的盆栽搬移到室外」的真實感
花店的商品陳列中,初期採用卡片的方式呈現,不過與一代的花店對比之下,一代的情境更符合設計概念且和主畫面有著相似的情境,所以決定沿用一代的呈現方式,希望讓使用者能在主畫面與花店場景中產生呼應的情緒。
像走進了花店中,看到層架漂亮的花盆,產生幫植物裝飾的想像
進一步塑造 App 內的空間與細節
陸續製作出原型後,在互動轉場也使用一樣的設計概念,運用轉場塑造 App 內的空間感。
例如幫植物拍照、分享照片後,照片會往上滑動,取消分享照片則會往下掉落。想傳達出在生活中傳遞給對方照片的感受。
像是拍完照片後,把照片分享給對方的行為
獲得圖鑑的對話框消失後,對話框上的頭像往 Tab Bar 圖鑑的方向掉落,試圖讓使用者了解圖鑑會被放到這個位置、搜集進圖鑑中。
像是搜集郵票的隱喻
設計師佐藤卓的設計中經常考慮到人與人的互動、人與環境的互動。「設計不是主角,它是連繫者」是他的設計哲學,藉由設計的力量,將產品價值與使用者連繫起來成為一體。
在介面與互動設計中,除了清晰地傳達資訊和提供回饋給使用者,是不是能再塑造出產品的個性和趣味性,把生活中的體驗帶入到虛擬世界中,讓產品成為使用者生活中的一部分呢?
References:
- 佐藤卓,2012,《鯨魚在噴水》