[節錄] 駭客松經驗談：一天內完成 app 設計

本文作者為 heyzap.com 的 UI 暨 UX 設計師 Meng To ，原文 From Design To iOS7 Prototype 。

上禮拜我和一群工程師參加了在香港舉辦的 AngelHack ，那是個滿奇妙的經驗。經過了一連串的討論，我們決定要開發個簡易、社區型的聊天 app ，Ripple。

 

待解決的問題

那天我們坐在一起，彼此分享我們的工作流程和想法，其中碰到一個相當艱難的考驗。我從共事過的對象只有少數人是工程師，而在那裡沒有簡單的管道，沒辦法馬上開一個群組聊天室，我們必須仰賴聊天工具： Facebook、 Skype 或 WhatsApp ，最終我們選了 Facebook 。所以我們先要找尋彼此的 Facebook ，接下來還要開群組聊天，但還是得努力，因為我們需要頻繁的交換意見。經過了五分鐘的開啟網頁，又五分鐘的登入手續，我們終於設定完成。這一來一往就多花 了 9 分鐘又 55 秒。

另外我們原本也想用 Skype ，但在香港沒人用它；而雖然 WhatsApp 在香港非常受歡迎，但需要分享電話號碼或 E-mail ，打 E-mail 地址很麻煩，而人們又對跟剛認識的人交換電話有所顧忌。以上的這幾個工具都有同樣的問題：對新手來說，註冊手續太繁複了。如果你之前沒有接觸這類產品的 話，你很難會有加入聊天的衝動。

所以我們的 app 註冊手續很簡單，提供簡易的聊天體驗。我們的目標是在使用者下載完 app 完的五秒內，就可以馬上和身邊的人開始聊天。

 

針對 iOS 7 的設計

這是我第一次為 iOS7 設計，但我快速選了一種風格，因為它著重裸色、漂亮的 icon 和字體。我為 Ripple 做的第一件事就是挑藍色為主色，然後我想再加一些深淺度和顏色組合，我只是下載了幾個桌布，再把它們弄糊，看看它們和藍色配部配。

字體方面，我選了 Museo Sans。

而 icon 我猜 PixelLove 滿符合 iOS7 的設計語言。

iOS7 的設計語言

我用了 Sketch 將近一年，我很高興的說，它減少了我大約一半的設計時間，讓我能花更多時間在動畫和功能上。在程式設計的部分（我等等會分享到），我增加了更多時間。

為了設計 iOS 介面和 icon ，我大多使用 Artboards ，而 The Sketch Mirror 這功能讓我在 iPhone 上能快速查看我的設計。

使用 Sketch 中的 Artboards ，以相對應的尺寸和位置輸出

 

註冊頁

我想要開發一套簡短的註冊流程，為了簡單起見，唯一需要的資訊是使用者名稱，但是單有名字不會創造出有趣的聊天經驗。這時候，我的靈感動到了 iOS7 的攝影機功能。我發現當你按下攝影，再切換到左下角的「照片」時，攝影頁面會瞬間變模糊。這與我的設計相呼應，成果就是在註冊頁上，放上一張背景照，該照 片是模糊的版本。如果你點了螢幕上的名字，聊天鍵盤和清晰的大頭照馬上就會跳出來，就是這樣。

頁面立即跳出，大頭照和模糊的背景

聊天室

一旦你打開這款 app ，迎接你的是一連串由你附近的人，所開設的聊天室列表。如此一來，你不用擔心別人會隨便把你加進去。

這就像 Airdrop 一樣，但是是一對多的連接形式。附註一下，我們也討論了使用 Airdrop 的技術快速邀請他人。

聊天頁面

聊天室本身，我則是受到了 iMessage 的啟發，它的視差效果和對話框都非常有趣。我把這個概念也用到了「分享照片」功能，一下就讓聊天室變得更有趣了。此外，我還在旁邊列出了使用者的 Facebook 或 Twitter 。

聊天室的使用者列表會顯示在訊息上方，所以你在聊天的時候還是可以查看聊天室中有誰。

一旦開始了第一次對話，你就可以輕鬆分享聯絡資料。

在這頁面中，使用者可以快速編輯自我介紹、 Twitter 、 Facebook 和 Whatsapp 。

 

用 Flinto 設計原型

我一定至少跟 10 個在駭客松的人提過 Flinto ，他們全都為之驚艷，使用的開發結果會真的像是個原創 app 。我設計了新頁面，我很快的將他們上傳到 Flinto ，然後與其他人交流。對於要在他們手機上測試流暢度的工程師，這的確是個很大的幫助。使用 Flinto 要將原型轉變成一個真的 app 比較容易，要跟其他人比較設計也很簡單。

使用 Flinto 五分鐘後製作的產品原型

iOS7 app

我很幸運找到了一個喜歡挑戰極限的 iOS 工程師，我很喜歡說：「我們可以做這個嗎？我們可以做那個嗎？」然後我喜歡聽到「可以、可以，當然可以。」這總是個好現象。

接著我驚訝的聽到他在工作流程中使用 Storyboard ，許多我接觸過的 iOS 工程師都一點也不想使用 Storyboard。團隊中有一個使用 Storyboard 的工程師，等同開啟了設計師和開發者間的合作，因為 Storyboard 很簡單，設計師也可以使用。這相當於設計師在使用 HTML 和 CSS，而不是開發者。

Xcode 5 中的 Storyboard ，夠簡單了。

在最後驗收成果時，我們設法展示最具挑戰性的：註冊頁和聊天室。我們使用了 Cocoapods 中的各種 library，來現場示範迷濛的圖片和視差效果。至於後台設置，我們則用了 Parse 。不幸的是，由於時間不夠，我們沒有辦法將真實數據應用到 demo app 上，無法這樣呈現給裁判。

 

鎩羽而歸

最後我們沒將 AppHack 的第一名獎座抱回家，但我們有被選為 26 隊中的前 9 名，想想看我們從來沒和對方一起工作過，加上我們又只有 5 小時可以整合彼此的概念，我們做的還算不錯。我覺得每個點子都滿笨的，因為之前都有人做過了，這是執行不力的問題。

許多人都對我們的註冊頁感到很有趣，而易於使用的設計也獲得不少好評，這對我們的團隊來說是個榮耀。有些觀眾還問我們什麼時候會正式發表這款 app ，這就是我要的反應，因為我設計給人用的產品。

我們會持續簡化，並跟對的人一起合作，一個簡易的 app 無法在一天完成是沒有道理的。

Source:  INSIDE TW

http://blog.mengto.com/solving-the-back-button/