打造 Apple App Store 得獎程式:我們的設計師是這樣設計的!

要創造一個好的產品,直覺又流暢的使用者體驗和介面(UX / UI)跟無瑕且可維護的程式碼缺一不可。為了擁有良好的使用者體驗,我們必須把技術考量融入設計之中。而要展示出色的 UI,開發團隊就需要在前端的 coding 下苦功。

我們的開發項目涵蓋各個領域與範疇,從面向企業的物流管理、到面向消費者的物聯網(IoT)應用(例如供小孩使用的填色 app Coco Color),讓我們累積了不少實戰經驗,更成功打造出 Apple App Store 2013 年最佳音樂類別應用程式 Jamn 和 2017 年最佳開發者程式 Village.co。「台上一分鐘,台下十年功」,下面會簡單歸納一下我們在開始開發之前的內部設計流程,幫助大家了解我們創造得獎作品的一些設計心得。

事前準備:

我們會收集與分析潛在客戶的使用者故事 (user stories) 來完成初步的設計工作(從線框稿到可操作的原型),方便開發團隊後續的處理。User stories 可能因客戶需求而有所不同,但共同點是它們都會提出產品的概述,還有一連串使用者想要完成的項目(例如「使用手機號碼建立帳號」)。

從這些 user stories 中了解到客戶想要完成的藍圖,我們就會著手設計產品功能並快速進入製作線框稿 (wireframe) > 視覺稿 (mockup) > Atomic 原型 (prototype) 的流程。

我們的工作流程

design timeline
Oursky 的設計時程範本(點擊觀看)

我們的標準設計流程一般會在 2 – 4 星期內完成。與客戶確認合作意願後,我們會指派一位客戶經理 (PM) 負責由設計環節開始跟進該專案,直至開發結束。

以範本為例,我們一般專案的時程比較接近範本中最底兩項(註:已隱藏項目名稱和個別設計師時間表等敏感資料)。網站地圖 (sitemap) / 使用者流程 (userflow) 通常需時一至兩天,而 wireframe、 mockup 和 prototype 大概會耗時一個星期。如果像 1 / 3 / 4 號專案那樣需要進行 UX 研究,就可能花費更多時間。

使用者流程 / 網站地圖

一開始,我們的 UX / UI 設計流程會從 Brainstorming 一個雛形開始,在內部討論有了一個架構之後,我們會創造一個 user flow。來確保所有團隊成員都對網站或app的頁面主要元素有共同的理解。

工作重點:

  • 組合產品的功能規格
  • 將 app / 網頁的主要 user stories 變成流程概念

推薦工具: Adobe Illustrator (29.99 美元/月) / Sketch (99 美元) / Google Draw (免費)

基本的 Wireframe

Sample for app wireframe
App wireframe 範例

Wireframe 的作用是以視覺形式呈現前端功能和敘述 user flow。設計師會先繪出草圖,再修正成為比較完整的 wireframe。

建議以簡約用色開始設計。這樣有助於設計和瀏覽時專注在最重要的元素上,讓每個人(包括客戶)可以專心討論後續的開發與功能發展方面的問題。

工作重點:

  • 草擬 sitemap / user flow 的區塊和組成元素
  • 確定每一個 UI 頁面的展示都是清楚一致的
  • 設計 navigation
  • 確定目標用戶覺得 UX 容易使用而且簡單明白

推薦工具:Sketch (99 美元)

風格與美學

以 Wireframe 完成溝通後,便開始著手風格與美學設計。我們會跟客戶討論情緒板(mood-board) 還有他們希望透過哪些配色來傳達訊息(例如融合品牌識別),以確定顏色組合緊密地配合 UI 元素和品牌形象。

工作重點:

  • 處理 mood-board、顏色組合、字體、UI 元素
  • 按照之前跟客戶討論的結果,設計符合需求的圖示、圖像和其他元件

推薦工具:Adobe Illustrator (29.99 美元/月) / 手稿 / Sketch (99 美元)

UI 元素及不同狀態

想取得設計靈感,市場上已存在大量免費的 UI 元件包可以使用。不過如果你想別樹一幟,還是要透過產品來展現獨特的個人風格。我們同時還會利用插件 Muz.li 來一邊參考其他設計作品集和內容,一邊收集靈感。

工作重點:

  • 設計 UI 元件的不同狀態,例如:空白頁面、錯誤狀態、載入狀態
  • 設計 app 內的排版、過渡效果等等
  • 針對較複雜的設計,可以利用動畫 demo 示範指定元素在轉換狀態時的變化

推薦工具:Sketch (99 美元), Invision (15 美元起/月)

視覺稿

UI mockup for app design
為一個 iOS 專案製作的 UI mockup

當大部份顏色組合定案以後,接著我們會開始進行 mockup。

不過在取得客戶或 PM 的初步意見之前,建議不要一口氣完成所有 mockup。最好循序漸進地先完成主要的頁面,待收到反饋後才繼續餘下的設計(例如空白的狀態)。既可以縮短反饋的時間,同時幫助客戶省下反覆修改主設計的不必要支出。

我們的 mockup 都是 Sketch 設計檔,方便進一步輸出給 Oursky 團隊或第三方進行後續的開發。

工作重點:

  • 設計插圖、圖示、圖像和 UI 元件
  • 從線框規劃到設計完稿,我們都會根據客戶已確認的設計風格、方向、UI 元素及各種狀態進行設計

推薦工具:Sketch (99 美元), Adobe Photoshop (29.99 美元/月), Adobe Illustrator (29.99 美元/月)

原型

Prototype 對後續的開發有顯著的幫助,最理想是能夠像一個真實的 app 那樣,讓測試者可以模擬點擊和觀看瀏覽時的各種動態效果。有了完整的 navigation 和動畫效果作為參考,開發工程師就可以更深入了解產品的細節,並在開發的第一個階段就把這些細節加入考量。

企業家可以利用 prototype 向投資者展示產品 demo、進行易用性測試還有收集目標用戶的反饋來執行校對。Prototype 的完成度越高,潛在用戶在進行各種點擊測試時就越能提供更具體的意見(比方說他們欣賞哪些細節或者想添加其他功能)。另一方面,用戶意見和 prototype 對投資者來說是很重要的參考資料,讓投資者能夠更全面的評估你的提案。

推薦工具:Atomic (19.99 美元/月), InVision (15 美元起/月), Framer.js (15 美元/月)

預備開發

Oursky side project sans sugar
我們其中一個 side project 「Sans Sugar」的部份截圖。設計規格和風格指南是最後的交付成果。

我們公司同時提供專案顧問諮詢、設計和開發等服務,但有時候客戶可能只需要設計服務。以設計而言,我們的目標是為客戶提供 mockup(可輸出的 Sketch 檔案),輔以適合客戶參考使用的 prototype、user flow 或風格指南。不管後續負責開發的是客戶的內部員工、第三方開發團隊還是我們 Oursky 的工程師,這些檔案都是重要的參考資料。

當然,也有很多客戶要求我們接續下一步的開發。客戶越早確認有繼續開發的興趣,我們就能越早引薦開發工程師,針對特定功能提供技術層面的建議。我們會按照客戶心目中的預算進行設計和開發,並且向客戶解說各個功能短期和長期開發所需的時間。

工作重點:

  • 討論產品流程和 UI 狀態
  • 解決任何未完成項目,例如按照客戶要求合併功能或增加額外的功能

Oursky 致力幫助品牌與企業家實現他們的點子。如果你正在尋找合作夥伴一起建立下一個自家數碼產品,來跟我們聊聊吧!


原文:A Guide To Our Design Process
作者:Frank Lam
翻譯者:Queenie So

Leave a Reply