SPARKFUL
真抱歉,这个页面尚未被翻译成你的语言,但是我们正在努力中了!

Blog

SPARKFUL 团队心得与生活点滴

透過設計細節讓 App 與使用者產生連結 :以《植物保姆》為例

experience-design
name

《植物保姆》系列 App 的主要目的是養成使用者的喝水習慣,透過照顧植物來提醒使用者喝水。

在第二代《植物保姆》的介面設計與體驗上,希望讓使用者產生貼近生活、活潑且有生命力的感受,因此定義了主要概念:「使用起來具有活力的介面」作為新版設計的核心。

讓 App 與使用者產生連結

《植物保姆²》在主畫面上希望使用者對植物產生情感,所以在紀錄喝水時,使用水珠凝聚後澆灑於植物上方的方式呈現,讓使用者在記錄喝水時同時有照顧著植物的意象。

產品中的重要操作行為:紀錄喝水

一代《植物保姆》(左)和《植物保姆²》(右)的紀錄方式比較

在資訊頁面的當日攝取水量上,使用人體的圖形呈現,代表使用者為自己的身體攝取多少水分,希望讓使用者快速接收到訊息,並獲得更有趣的資訊圖表。

初期和成品顯示水量攝取的圖表

在沒有文字敘述時,人體量表圖是不是比圓形進度條更能傳達出「身體補充多少水分」的訊息呢?

營造 App 內植物與使用者互動的真實感

在主畫面中與使用者產生連結後,App 內的其他部分就可以延續此概念,進一步營造真實感。

例如對話框在不同的情境下,運用了不同的方式呈現。初期採用「圓形頭像」的設計,但後來覺得圓形頭像無法表現出生命力,所以改用了「花盆+植物」的對話框,希望使用者在搬移時,能感受到要將養成的植物搬移到樹洞中,而「圓形頭像」更適合在「發現圖鑑」時使用。

希望讓使用者感受到「就像在生活中把桌上的盆栽搬移到室外」的真實感

花店的商品陳列中,初期採用卡片的方式呈現,不過與一代的花店對比之下,一代的情境更符合設計概念且和主畫面有著相似的情境,所以決定沿用一代的呈現方式,希望讓使用者能在主畫面與花店場景中產生呼應的情緒。

像走進了花店中,看到層架漂亮的花盆,產生幫植物裝飾的想像

進一步塑造 App 內的空間與細節

陸續製作出原型後,在互動轉場也使用一樣的設計概念,運用轉場塑造 App 內的空間感。

例如幫植物拍照、分享照片後,照片會往上滑動,取消分享照片則會往下掉落。想傳達出在生活中傳遞給對方照片的感受。

像是拍完照片後,把照片分享給對方的行為

獲得圖鑑的對話框消失後,對話框上的頭像往 Tab Bar 圖鑑的方向掉落,試圖讓使用者了解圖鑑會被放到這個位置、搜集進圖鑑中。

像是搜集郵票的隱喻

設計師佐藤卓的設計中經常考慮到人與人的互動、人與環境的互動。「設計不是主角,它是連繫者」是他的設計哲學,藉由設計的力量,將產品價值與使用者連繫起來成為一體。

在介面與互動設計中,除了清晰地傳達資訊和提供回饋給使用者,是不是能再塑造出產品的個性和趣味性,把生活中的體驗帶入到虛擬世界中,讓產品成為使用者生活中的一部分呢?

References:

  1. 佐藤卓,2012,《鯨魚在噴水》
divider
相关文章
name

如何為產品注入玩心?Fourdesire 遊戲化設計的五個心法

Sammy 是 Fourdesire 的助理製作人,在 2017 年底加入 Fourdesire 後,開始參與遊戲化產品設計,目前負責經營《記帳城市》以及研發新產品。這篇文章會有這幾年在 Fourdesire 參與產品設計的正面和側面觀察,一...阅读更多
name

配樂與音效,在互動作品中該扮演什麼角色?

多數影像的配樂與音效都是在作品完成之後,再交給配樂師進行後製,或許你會說這是專業分工和業界流程,亦可以減少修改的問題,那如果配樂、音效與作品同時開始進行製作呢?3 月 6 日(三)以「配樂與音效在作品製作上,該扮...阅读更多
name

接案還是創作?李百罡:「滿足他人也是一種能力。」

3 月 6 日(三)由 FourdesireU 主辦的「配樂與音效在作品製作上,該扮演什麼樣的角色?」講座,邀請到製作獨立遊戲《返校》配樂與原聲帶的作曲家張衞帆,以及 App《Walkr》、《記帳城市》配樂音效製作人李百罡...阅读更多