Capso – 解開各個地點的秘密
Capso 可以將美好的片刻錄製下來做為你的寶藏，並在裡面存放秘密埋藏於某地，讓人們去探索。你也可以循著他人分享的影片與藏寶圖，展開一場解開各地點秘密的旅程，並認識埋藏地點秘密的新朋友。
Capso 由 5 位成員，分別是 4 位各具專長的工程師以及 1 位設計師共同開發基於地點故事的 App，它有一種很有趣的玩法，你可以將一個秘密當作寶藏埋藏在某個地點，並且錄製一段影片吸引人來尋寶，這個 App 雛形於台灣黑客松 (Hackathon Taiwan) 的期間製作出來。而在 Hackathon 過後的三個月， Capso Team 持續開發並加了更多功能上架至 App Store 提供給大家免費下載。
這篇文章由團隊成員 Jeremy Lin (前端設計專長) 及 Vic Li (設計專長) 提供經驗分享，暢談如何在短短不到兩天的 Hackathon 活動中快速制訂配色與造型設計，進而交給工程師開發出可以運作的 Prototype 。
前置作業
其實我們在 Hackathon 前兩天，已經發想好 App 的概念。並於正式開始的兩天內著手 Visual 與 UI flow 的設計，當然，還有程式的開發。在有限時間的情況下，並無法讓我們有進行深入research 的機會，因此我們更著重在理性制訂 flow 後的快速開發流程。也就是在我們過往的經驗與學習中，抓出最直覺的反應來設計這支 App，這樣的情況下給與直接創作的機會，更像是設計師直接對使用者說話，對於設計師而言，直觀的表達變成了很美麗又浪漫的一件事。
幸好團隊成員各有專長，職能劃分明顯，很短的時間我們就能知道彼此該分工的工作。第一步快速制訂 UI flow ，以爭取時間給後端與 App 工程師釐清彼此在迅速開發下所需的功能有哪些，並讓後續的 GUI 設計與 API 的開發可以同步進行，因此在評估時間與開發的可能性也是這份 UI flow 的一大重點。所幸，Capso team 中有 Jeremy 這樣具有設計與工程雙重經驗的角色，在這個部分快速清楚狀況，在 30分鐘內就定好這次能符合前、後端以及設計師所需的 flow。
考量到開發只有兩天的時間，因此我們決定儘量去使用 iOS Guideline 提到的那些基本 UI 元件，而配色與風格的傳達就變成了很重要的環節。幸運的是，有過開發經驗的設計師 Vic 知道怎樣才能做出在限制情況下依舊亮眼的設計。
概念與命名
在進行 Capso 的 App 設計時，我們希望能有良好的概念方向做發想，在演化成產品時，不但能在設計語言上相互呼應、堅實其發展方向，使用者亦能妥善的學習及認知。
這個 App 的名稱來自於 Capsule (膠囊) 的變化形，有別於一般人常聽到的 Time Capsule (時光膠囊)，它除了紀錄時間之外，還紀錄了當下空間的樣態，較貼近的說法是 Space Capsule 更為貼切。它不僅僅是對於時間 ( 我們熟知的 Time Capsule )，還包含正處著地點、空間 ( Space ) 的紀錄。相較之下，我們是做了一個存放「當下歷史」的動作，而使用者需要循著「線索」，也就是地圖尋找到這個「寶藏」，當抵達藏寶地點時，即可開啟裡面的秘密。
因此，屏棄 Time， 留下 Capsule 的概念就在我們 5 人的腦海中浮現，而為了讓他更好記名字更優雅，我們取了類似發音的 Capso。
設計元素
有了上述後，對於這個 App 想像就容易許多了：
1. 像是尋找寶藏的遊戲的概念轉化成「地圖」的設計元素。
2. 每個錄製的影片存放於故事發生的地點 ( Location ) 的概念轉化成「地點」與「描述」的設計元素。
因此在視覺運用上，「地圖」與「地點」變成了很重要的呈現，而「描述」的部分則會體現於操作 App 的內容及細節。在取用不同種類的地圖元素，我們偏好航海時期，掌握方位概念的地圖，作為初步設計的方向。配色上，則一反古地圖的黃褐色的印象，取用更現代感的色調搭配，讓整體的思維與感覺更為 Urban，表達於城市中探索、紀錄的行為。
將以上歸納的元素延伸到標誌，一張收折後攤開的紙張、藏寶位置的標記以及路線指示的虛線，成了 App icon 相當重要設計的元素。
由於時間的限制，因此許多細節沒有特別去吹毛求疵。後來在 App Store 上架準備的期間，我們將顏色與標誌再做過修正，力求一套更有準則可遵守的設計規範，設計規範的制訂後，對於宣傳至實體與網路皆能產生相同的一致性，在產品還是新面孔的狀態下，給予視覺上的印象並協調產品走向，力求品牌的傳達。
遇到的難題
由於大家都是第一次合作，一開始花了很多時間討論功能，後來我們發現不允許花太多時間在討論上，因此有「暢通的執行」變成很重要的部份。
為了爭取時間，在決定好 UI flow 後，程式碼的撰寫和 UI 的繪製立刻並行。由於 UI 的繪製相對程式碼的開發上快很多，考量到我們有 2 位後端工程師、1.5 個 iOS 工程師與 1.5 個設計師，因此我們將 UI 切成兩部分 ，而 Jeremy 完成部分 UI 後便立刻去支援主要 iOS 的開發者 Roy 的工作 ，由 Vic 完成大部分的 UI 以及視覺風格上的統一。
在進行過程中。設計師每完成一段 Story UI 就立即會傳給 iOS 開發，而不會等到所有的 UI 完成； Roy 會和後端的 Chao 與 Ray 溝通 API 的規格，整個環節中一旦誰有問題就立即提出，快速討論解決方案並立即修正。所以當 Hackathon 活動倒數結束時，我們已經完成主要功能，並買了網域，甚至完成了官網。現在，你已經可以在 App Store 玩到這支有趣的 App。
歡迎對 Capso 有興趣的人下載來玩玩看，也歡迎對開發或設計方面有興趣的朋友和我們一起交流。
官方網站 : capso.cc
Email: hello@capso.cc
免費下載： App Store
本篇文章由 Capso team 的設計師 Vic Li 及 Jeremy Lin 提供於設計大舌頭，若欲轉載請著名出處。
本文章所屬設計大舌頭與作者所有，未經授權，不得轉載！如需轉載，煩請通知。
