「我的夢想不是完成更多,而是擁有更少的待辦事項。」 ──  Francine Jay, 作家

《記事探險》是一款讓你紀錄待辦事項的生產力 App,可以透過三步驟展開生活探險:

  1. 記錄當天要完成的事項
  2. 完成事項,發展獨一無二的島嶼版圖
  3. 回顧事項的進度與歷程

《記事探險》透過建立島嶼和板塊,鼓勵大家練習管理每天的待辦事項,接著使用回顧事項的功能,去反思自己的待辦規劃,找到屬於自己的生活節奏。

本篇文章會由設計師庫盟和工程師小夫帶大家從「心」察覺,打造出屬於你的《記事探險》,以及分享產品溫馨又有趣的開發故事,希望可以陪伴使用者們一起戒斷拖延症的壞習慣。

|團隊成員,設計師庫盟(左)、工程師小夫(右)

《記事探險》的第一塊板塊

|《記事探險》的板塊和產品介面

專案誕生的最初,是源自於設計師庫盟的一個想法「有沒有玩法單純,不用花太多時間在 APP 上,可以專心地完成待辦事項的產品?」

在概念期,一開始是由製作人 Taco 、藝術家 Weixiu 和設計師 Ku 共同討論出產品的風格調性。當時在討論畫面風格時,藝術家在提案中選出了「杯子蛋糕」的概念,包含可愛迷你、造型多變,還有最重要的「收集感」,都與想像中產品希望帶給使用者的感受有相似之處, 團隊便開始朝著這個方向著手打造《記事探險》。

前期的設計過程

設計師庫盟特別分享:在發展產品概念時,為了了解使用者的意圖和動機,進而打造更人性化且友善的產品,他下班後就會跑去誠品書店,閱讀「哲學」或「認知心理學」的書籍,培養自己的邏輯思考和思辨能力,也透過閱讀補充更多能量,包含與哲學相關《笛卡兒的思辨健身房》、認知領域《圖解認知心理學》以及設計專業《觀看的方式》,都是很好的入門書籍推薦。

1.從設計師開始創造

|時間軸的多次嘗試

最一開始,介面設計上僅有事項列表、時間軸、事項狀態等主要項目,然而,後來加入更多功能和機制後,衍生出了更多需要釐清優先順序的細節,例如等級、遊戲貨幣、日期呈現等。為了避免介面資訊呈現過於混亂,開發團隊也花了許多時間討論合適的方式。

舉例來說,在「時間軸」的設計上,團隊也嘗試做了許多版本,持續調整、修正後,才成為了大家今天看到的《記事探險》頁面,透過時間軸,可以清楚的看見每天的待辦理事項。

2.與藝術家結合的過程

|板塊的多種樣式呈現

在介面框架完成之後,產品設計中開始加入由藝術家創作的豐富元素,例如象徵不同完成狀態的島嶼板塊,而這個階段也是經過了多次的討論與磨合,將覺得可以修正的部分透過簡報、文件等方式記錄下來,持續溝通以確保團隊成員的資訊一致性。

在主畫面中,以三種視覺語言來呈現三種狀態,分別是「完成」、「取消」和「延期」:

  1. 完成:以一個底座為基礎,在板塊上方搭配不同的物件。
  2. 取消:以打叉元素為基礎。
  3. 延期:以能被延伸的元素為基礎。(像是纜車、橋樑、運輸帶等)

這三種狀態的形狀上有很大的差異,好處是「能夠讓使用者在主畫面中,快速地分辨事項的狀態」。最後以這樣的規則,套用不同的主題中去做變化,能夠讓使用者切換不同的主題時,都能夠以相同的方式來理解事項狀態。

3.把產品設計規格化

|不同主題的樣式呈現,幻霧工廠(左)、落日雪嶺(右)

在產品風格和設計大致底定之後,就要進入「規格化」階段了。

透過規格化,既有的物件會有一套明確的準則規範,讓開發團隊有清楚的原則,進而持續產出、重複利用,是提高品質穩定度、降低投入時間成本的重要環節。包含顏色、介面,只要跟著詳細的規範和設定,就可以順利產出有一致性的產品風格,更容易去調整畫面上的視覺。而在《記事探險》中也有多元的主題可以使用,在製作主題樣式時,同樣使用了「規格化」的方式,創造更多不同的使用感受,增加豐富度與探索場景。

|使用 AE 模擬的「事件透視」呈現方式

而在靜態介面後,也為動態效果製作了規範,用同樣的方式完成了動態設計的內容,設計師庫盟也特別分享,他最喜歡的動態細節是長壓手機螢幕,就可以跳出「事件透視」的功能,原因是這是《記事探險》中看起來最「酷」的效果:)。

揭秘工程師的開發過程

接下來,工程師小夫會揭密《記事探險》從概念發想到實際製作的心路歷程,還有藏在產品背後的開發小巧思。

1.2D 到 3D 的開發過程

|工程師眼中的產品視角

在過往 Fourdesire 的產品較多以 2D 為主,《記事探險》則是第一個導入 3D 模型的產品。

之所以採用 3D 模型開發是,為了結合「專注當下」的待辦事項核心,希望在介面上特別突出「今天」和未來數日的任務,也因此延伸設定出畫面上的「最佳視角區域」,讓使用者能夠更聚焦在這個視角範圍內,結合球面元素前後滾動,來瀏覽時間間隔較遠的島嶼板塊。

島嶼板塊的模型也相當有趣,為了讓視覺俯角的畫面呈現看起來更自然,便用了傾斜的這個功能輔助,讓「最佳視角區域」呈現出來的樣式也是最佳狀態。

2.彎曲測試多種方式

|多次嘗試才找到的最佳角度!

在彎曲測試時,工程師多次嘗試不同的做法:一開始採用「拋物線」的彎曲方式,但發現會讓物件變形,後來調整為球面的「圓形弧度」切入,並同步考慮前面所提及的最佳視角,經過無數次測試之後,終於成功找到了最自然的彎曲方式,也是現在介面中採用的最佳角度。

3.特效層層疊加後

|右邊的鯨魚看起來更像是在海平面下生活

為了在有限的介面中增加畫面的豐富度,工程師在開發過程中也透過「渲染特效」、「空氣遠近法」等方式,嘗試強化板塊的明暗對比、距離感等,讓每一個板塊看起來更加獨立;為了呼應島嶼主題的視覺,也加入雲霧的效果,讓畫面更有真實感。

工程師小夫特別以「鯨魚」這個特殊奇觀為例:「為了讓鯨魚看起來真的像是在海底游泳,在海面上加入了一層『海平面』,更顯幾分真實。」

4.編輯器升級,分工更順暢

|工程師為《記事探險》打造出的編輯器,是使用「 Unity 的 Editor GUI Layout 」製作的

由於《記事探險》有許多的 2D、3D 美術和設計元素,為了讓開發團隊協作的過程更加順利,《記事探險》團隊也特別打造了內部開發使用的「編輯器」,讓藝術家可以在完成創作之後,例如新的島嶼、奇觀等,可以直接將圖片匯入編輯器,確認使用者介面的呈現樣式,減少來回的溝通成本,也讓專案推進更佳流暢。

而在所有的開發功能中,工程師小夫私心最喜歡是哪一個呢?小夫笑著分享:「我和庫盟一樣,最喜歡的是『計畫透視』這個頁面,透明版塊彈跳出來的動畫很療癒,也因為拖延事件會連接起來,可以很清楚看到哪些事件拖延多久,是兼具實用性與療癒性的功能之一,有時候還會看著這個畫面放空休息。」

一起從「心」打造你的專屬計畫吧

|帶你從心覺察專屬計畫《記事探險》

你也想要有屬於自己的專屬計畫,把生活過得像是一場探險嗎?
開發團隊在產品中也藏著許多富有玩心的小彩蛋,比如說,在勾勾狸的眼中藏著象徵「完成」的勾勾符號、或者當你完成當天的待辦事項,畫面上會解鎖一個彩虹特效,和你一起慶祝努力的一天。趕快下載《記事探險》來場島嶼探索,徹底告別拖延症吧!

延伸閱讀傳送門

連載文章預告

  • 探索:讓好奇心改變生活旅程 !《Walkr》全新小行星系統預告|Fourdesire 2021 年生活遊樂場 #4
  • 理財:城市開發大紀事!《記帳城市》年度亮點回顧|Fourdesire 2021 年生活遊樂場 #5

了解更多 Fourdesire 玩心設計: