「我的夢想不是完成更多，而是擁有更少的待辦事項。」 ── Francine Jay, 作家
《記事探險》是一款讓你紀錄待辦事項的生產力 App，可以透過三步驟展開生活探險：
- 記錄當天要完成的事項
- 完成事項，發展獨一無二的島嶼版圖
- 回顧事項的進度與歷程
《記事探險》透過建立島嶼和板塊，鼓勵大家練習管理每天的待辦事項，接著使用回顧事項的功能，去反思自己的待辦規劃，找到屬於自己的生活節奏。
本篇文章會由設計師庫盟和工程師小夫帶大家從「心」察覺，打造出屬於你的《記事探險》，以及分享產品溫馨又有趣的開發故事，希望可以陪伴使用者們一起戒斷拖延症的壞習慣。
團隊成員，設計師庫盟（左）、工程師小夫（右）
《記事探險》的第一塊板塊
專案誕生的最初，是源自於設計師庫盟的一個想法「有沒有玩法單純，不用花太多時間在 APP 上，可以專心地完成待辦事項的產品？」
在概念期，一開始是由製作人 Taco 、藝術家 Weixiu 和設計師 Ku 共同討論出產品的風格調性。當時在討論畫面風格時，藝術家在提案中選出了「杯子蛋糕」的概念，包含可愛迷你、造型多變，還有最重要的「收集感」，都與想像中產品希望帶給使用者的感受有相似之處， 團隊便開始朝著這個方向著手打造《記事探險》。
前期的設計過程
設計師庫盟特別分享：在發展產品概念時，為了了解使用者的意圖和動機，進而打造更人性化且友善的產品，他下班後就會跑去誠品書店，閱讀「哲學」或「認知心理學」的書籍，培養自己的邏輯思考和思辨能力，也透過閱讀補充更多能量，包含與哲學相關《笛卡兒的思辨健身房》、認知領域《圖解認知心理學》以及設計專業《觀看的方式》，都是很好的入門書籍推薦。
1.從設計師開始創造
最一開始，介面設計上僅有事項列表、時間軸、事項狀態等主要項目，然而，後來加入更多功能和機制後，衍生出了更多需要釐清優先順序的細節，例如等級、遊戲貨幣、日期呈現等。為了避免介面資訊呈現過於混亂，開發團隊也花了許多時間討論合適的方式。
舉例來說，在「時間軸」的設計上，團隊也嘗試做了許多版本，持續調整、修正後，才成為了大家今天看到的《記事探險》頁面，透過時間軸，可以清楚的看見每天的待辦理事項。
2.與藝術家結合的過程
在介面框架完成之後，產品設計中開始加入由藝術家創作的豐富元素，例如象徵不同完成狀態的島嶼板塊，而這個階段也是經過了多次的討論與磨合，將覺得可以修正的部分透過簡報、文件等方式記錄下來，持續溝通以確保團隊成員的資訊一致性。
在主畫面中，以三種視覺語言來呈現三種狀態，分別是「完成」、「取消」和「延期」：
- 完成：以一個底座為基礎，在板塊上方搭配不同的物件。
- 取消：以打叉元素為基礎。
- 延期：以能被延伸的元素為基礎。（像是纜車、橋樑、運輸帶等）
這三種狀態的形狀上有很大的差異，好處是「能夠讓使用者在主畫面中，快速地分辨事項的狀態」。最後以這樣的規則，套用不同的主題中去做變化，能夠讓使用者切換不同的主題時，都能夠以相同的方式來理解事項狀態。
3.把產品設計規格化
不同主題的樣式呈現，幻霧工廠（左）、落日雪嶺（右）
在產品風格和設計大致底定之後，就要進入「規格化」階段了。
透過規格化，既有的物件會有一套明確的準則規範，讓開發團隊有清楚的原則，進而持續產出、重複利用，是提高品質穩定度、降低投入時間成本的重要環節。包含顏色、介面，只要跟著詳細的規範和設定，就可以順利產出有一致性的產品風格，更容易去調整畫面上的視覺。而在《記事探險》中也有多元的主題可以使用，在製作主題樣式時，同樣使用了「規格化」的方式，創造更多不同的使用感受，增加豐富度與探索場景。
使用 AE 模擬的「事件透視」呈現方式
而在靜態介面後，也為動態效果製作了規範，用同樣的方式完成了動態設計的內容，設計師庫盟也特別分享，他最喜歡的動態細節是長壓手機螢幕，就可以跳出「事件透視」的功能，原因是這是《記事探險》中看起來最「酷」的效果：）。
揭秘工程師的開發過程
接下來，工程師小夫會揭密《記事探險》從概念發想到實際製作的心路歷程，還有藏在產品背後的開發小巧思。
1.2D 到 3D 的開發過程
工程師眼中的產品視角
在過往 Fourdesire 的產品較多以 2D 為主，《記事探險》則是第一個導入 3D 模型的產品。
之所以採用 3D 模型開發是，為了結合「專注當下」的待辦事項核心，希望在介面上特別突出「今天」和未來數日的任務，也因此延伸設定出畫面上的「最佳視角區域」，讓使用者能夠更聚焦在這個視角範圍內，結合球面元素前後滾動，來瀏覽時間間隔較遠的島嶼板塊。
島嶼板塊的模型也相當有趣，為了讓視覺俯角的畫面呈現看起來更自然，便用了傾斜的這個功能輔助，讓「最佳視角區域」呈現出來的樣式也是最佳狀態。
2.彎曲測試多種方式
多次嘗試才找到的最佳角度！
在彎曲測試時，工程師多次嘗試不同的做法：一開始採用「拋物線」的彎曲方式，但發現會讓物件變形，後來調整為球面的「圓形弧度」切入，並同步考慮前面所提及的最佳視角，經過無數次測試之後，終於成功找到了最自然的彎曲方式，也是現在介面中採用的最佳角度。
3.特效層層疊加後
右邊的鯨魚看起來更像是在海平面下生活
為了在有限的介面中增加畫面的豐富度，工程師在開發過程中也透過「渲染特效」、「空氣遠近法」等方式，嘗試強化板塊的明暗對比、距離感等，讓每一個板塊看起來更加獨立；為了呼應島嶼主題的視覺，也加入雲霧的效果，讓畫面更有真實感。
工程師小夫特別以「鯨魚」這個特殊奇觀為例：「為了讓鯨魚看起來真的像是在海底游泳，在海面上加入了一層『海平面』，更顯幾分真實。」
4.編輯器升級，分工更順暢
工程師為《記事探險》打造出的編輯器，是使用「 Unity 的 Editor GUI Layout 」製作的。
由於《記事探險》有許多的 2D、3D 美術和設計元素，為了讓開發團隊協作的過程更加順利，《記事探險》團隊也特別打造了內部開發使用的「編輯器」，讓藝術家可以在完成創作之後，例如新的島嶼、奇觀等，可以直接將圖片匯入編輯器，確認使用者介面的呈現樣式，減少來回的溝通成本，也讓專案推進更佳流暢。
而在所有的開發功能中，工程師小夫私心最喜歡是哪一個呢？小夫笑著分享：「我和庫盟一樣，最喜歡的是『計畫透視』這個頁面，透明版塊彈跳出來的動畫很療癒，也因為拖延事件會連接起來，可以很清楚看到哪些事件拖延多久，是兼具實用性與療癒性的功能之一，有時候還會看著這個畫面放空休息。」
一起從「心」打造你的專屬計畫吧
你也想要有屬於自己的專屬計畫，把生活過得像是一場探險嗎？
開發團隊在產品中也藏著許多富有玩心的小彩蛋，比如說，在勾勾狸的眼中藏著象徵「完成」的勾勾符號、或者當你完成當天的待辦事項，畫面上會解鎖一個彩虹特效，和你一起慶祝努力的一天。趕快下載《記事探險》來場島嶼探索，徹底告別拖延症吧！
延伸閱讀傳送門
- 啟航：創造你的玩心空間！用九個逗號，分享 Fourdesire 的九個故事｜Fourdesire 2021 年生活遊樂場 #1
- 陪伴：喚起想像力的健康奇航！設計師與藝術家揭秘《植物保姆》訂閱計劃｜Fourdesire 2021 年生活遊樂場 #2
連載文章預告
- 探索：讓好奇心改變生活旅程 ！《Walkr》全新小行星系統預告｜Fourdesire 2021 年生活遊樂場 #4
- 理財：城市開發大紀事！《記帳城市》年度亮點回顧｜Fourdesire 2021 年生活遊樂場 #5
了解更多 Fourdesire 玩心設計：
- Fourdesire http://fourdesire.com/
- 《記帳城市》http://fortunecityapp.com/
- 《Walkr》http://walkrgame.com/
- 《植物保姆》https://plantnanny.app
- 《記事探險》https://todoadventure.app/
