如何在 Hackathon 中快速設計出 Capso App

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 提供於設計大舌頭,若欲轉載請著名出處。

Show your support

Clapping shows how much you appreciated Capso’s story.