專注旅人是一款視覺導向、結合登山主題的蕃茄鐘 App，隨著你專注的時間越久，你的夥伴就離山頂更近一步，讓旅人帶你一起進入心流吧！

專注旅人 Focus Traveller 在 iOS 平台上架中。下載連結請按我

專案起源

大約2020年尾左右，適逢我在日頭遊戲的專案 Carto 告一段落，團隊成員們決定休生養息一段時間，而我因為有生活費的壓力，開始煩惱這段空窗期該怎麼度過，瞬間一股中年危機的味道撲鼻而來。如果是七、八年前的自己，應該會很瀟灑的開始準備 portfolio 投履歷，然而這幾年，彈性工時的日子過慣了，回去一般職場的意願真的不高，一來是遊戲業的主流技能需求對我來說很吃力不討好，二來是高強度的職場生活，很難抽身去照顧小孩。

這時候想到一個不願具名的友人 D，曾跟我提過要不要一起在下班時間做side project，那時因為 Carto 即將發售，忙得不可開交就暫時作罷，現在對我來是一道曙光，一通電話給他，很阿莎力的開啟接下來的合作。

與 D 碰面後，談到他想要製作一款自己都很喜歡用、視覺表現突出的產品，聊了幾個過去他很想要嘗試的概念，於是我們決定結合時下最流行的登山主題與番茄鐘，隨著你專注在做手邊的事，手機中的旅人也努力的往山頂邁進。

D的早期概念手稿

這個階段 D 傳給我一張 Beomjin Kim 的作品當範例，他希望整體美術是朝向氛圍感，看久了也不會很膩的作品。

beomjin___kim的instagram

我本身沒有在用這類的生產力工具，坦白說，我對於這類的蕃茄鐘工具能否真正約束我感到懷疑(笑)。做了一些競品調查，讓我驚訝的是這類的生產力工具居然如此之多，而且當中不乏有訂閱機制、以及付費解鎖更多工具的收費方式。只能說現代人用盡各種 app 工具讓自己遠離手機，聽起來好像哪裡怪怪的。

這個專案最讓我感到興奮的，是我們在討論之中，激盪出一個日後可能會增加的新功能，再此先賣個關子，因為還不確定是否能實現它。在那之前，我們都同意先設一個較為可行的目標，就是讓使用者能經歷爬山 → 休息 → 路徑紀錄 → 爬山 → 登頂，這樣的一個簡單循環。優先順序是把這個循環先打磨到一個可以端上檯面的程度，再來想研擬後續的計劃，畢竟我們都還沒有經驗。

2021年1月專案正式起跑，我和 D 分兩路進行，我的部分先繪製關鍵場景，初期先著重在嘗試各種可能性，從中梳理出美術表現該走的方向。D先在 figma 用一些暫時的素材串接整個 app 的流程，並且列出一些 SPEC，兩邊對 app 有什麼想法就互相討論，我們希望二月初的時候美術風格能夠定調，三月初的時候能把整個功能都串接完畢。

視覺風格

因為 D 和我的喜好蠻接近的，所以視覺方面基本上就是放手給我執行，一開始以他的概念手稿為起點，繪製了一些草圖：

早期風格測試(1)

早期風格測試(2)

個人覺得第二張圖的風格有點太粉嫩，所以繼續做別的嘗試。

把最初的斜坡草稿拿來重新思考

一開始的斜坡場景是我比較喜歡的一張，我試著把地面簡化一下，讓他以後有無限延伸的可能（考量到場景動態），後面加上一些樹，增加場景的裝飾性。

測試各種色彩氣氛

個人覺得色彩氣氛至關重要，這邊有點拿不定主意，做了很多版本拿去問朋友，大家意見都不太一樣，就先擱置著。

加了巨樹，感覺更有氣勢和層次感

過了幾天覺得上個版本有點弱，決定加一點巨樹來瞧瞧，結果瞬間變得酷炫許多，不僅增加了場景層次和趣味，巨樹的表面也是一個可以呈現光影的工具。

我和友人D都喜歡這個版本

我們挑出了色彩表現比較大膽的一張，覺得可以以此為基礎再發展看看，但經過了一兩天沈澱後，我認為這個路線太像奇幻 indie game 了，我擔心如果做得像遊戲，就會被迫擺到遊戲的維度上做比較，這樣反而顯示了我們互動效果上的貧乏。

以木內達（Tatsuro Kiuchi）為關鍵字的建議搜尋

這時候我上 pinterest 尋找靈感，看到了我很喜歡的藝術家 — 木內達朗（Tatsuro Kiuchi），和其它相關的建議搜尋，覺得這也許是個可行的方向。總體來說寧靜又簡約，寥寥幾個平面的色塊就營造出優秀的空間感。細微的質感充滿視覺趣味。類似版畫的油墨擦痕，也抵銷了數位繪圖的生硬感。

我把木內達朗的其中一幅作品拿到 photoshop 中來簡化一下：

木內達朗原作

photoshop →filter →filter gallery →Cutout 效果，右邊數值稍微調整一下

分離出簡單的色塊

歸納出作品的色票

仔細分析之後，歸納出幾點結論：

我腦中對這個場景映射的畫面是「愜意的夏日午後」，就像國小的暑假，每天聽著蟬鳴，不用煩惱今日是禮拜幾，打著紅白機，忘了時間的流動。藍色系的場景會是個不錯的方向，讓人感覺沈靜、專注，聯想到好天氣。
地板用接近白色的米白，和藍色是對比，也像畫布一樣，角色可以畫得很鮮明，走在上面不必怕被搶掉視覺焦點。
形狀盡量簡單俐落，在「扁平感」與「空間感」中抓出一個灰色地帶，剩下的交給觀者去腦補。

這時我以參考圖的色票為基礎，調出自己需要的場景顏色，並且開始實驗筆刷效果，去對應不同的物件（樹、草、石頭紋路…等等）。

場景元件用到的筆刷

最後慢慢繪製出接近完成品的樣子：

80%完成品

場景動態製作

整體來說較費工的部分是要在 AE 做出一個能夠無限 loop 的場景，我是用比較土炮的方式直接去key，如圖片所示，前景的樹叢是一個層級，建立成一個 comp，裡面包含 A+B+C 圖層，這時我會再複製一份成 A1+B2+C2，橫移到畫面外，然後讓六個圖層整體往左移動，直到 A1+B2+C2 和 A+B+C 在 timeline=0 的位置重合，這樣可以完成該層級的 loop。

以樹叢為例，綠色部分是上述的 (A+B+C)，橘色是 (A1+B1+C1)

樹叢圖例

場景製作在AE的環境

場景圖層數量

爬山的場景最後多達22層個圖層，不過需要處理 loop 的只有其中10個(褐色圖層的部分)，所以我們只要取它們時間長度的最小公倍數，得出總長度是25分鐘，聽起來蠻嚇人的，還好最後匯出的檔案大小是在可以接受的範圍內，進場景前其實會有一點 lag，所以我們在進場景前加了一個請使用者深呼吸的轉場效果，除了增加儀式感，也爭取更多的讀取時間。