本文章感謝 Oursky 提供本 PM Blog 專欄共同公佈。
原文： A Guide To Our Design Process
作者： Frank Lam @ Oursky
翻譯者：Queenie So
要創造一個好的產品，直覺又流暢的使用者體驗和介面（UX / UI）跟無瑕且可維護的程式碼缺一不可。為了擁有良好的使用者體驗，我們必須把技術考量融入設計之中。而要展示出色的 UI，開發團隊就需要在前端的 coding 下苦功。
。「台上一分鐘，台下十年功」，下面會簡單歸納一下我們在開始開發之前的內部設計流程，幫助大家了解我們創造得獎作品的一些設計心得。
事前準備
我們會收集與分析潛在客戶的
（例如「使用手機號碼建立帳號」）。
從這些 user stories 中了解到客戶想要完成的藍圖，我們就會著手設計產品功能並快速進入製作線框稿 (wireframe) > 視覺稿 (mockup) >
原型 (prototype) 的流程。
我們的工作流程
我們的標準設計流程一般會在 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
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 美元/月) / “sketches on paper” / Sketch (99 美元)
UI 元素及不同狀態
想取得設計靈感，市場上已存在大量
來一邊參考其他設計作品集和內容，一邊收集靈感。
- 設計 UI 元件的不同狀態，例如：空白頁面、錯誤狀態、載入狀態
- 設計 app 內的排版、過渡效果等等
- 針對較複雜的設計，可以利用動畫 demo 示範指定元素在轉換狀態時的變化
推薦工具：Sketch (99 美元), Invision (15 美元起/月)
視覺稿
為一個 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 對投資者來說是很重要的參考資料，讓投資者能夠更全面的評估你的提案。
預備開發
我們其中一個 side project 「Sans Sugar」的部份截圖。設計規格和風格指南是最後的交付成果。
我們公司同時提供專案顧問諮詢、設計和開發等服務，但有時候客戶可能只需要設計服務。以設計而言，我們的目標是為客戶提供 mockup（可輸出的 Sketch 檔案），輔以適合客戶參考使用的 prototype、user flow 或風格指南。不管後續負責開發的是客戶的內部員工、第三方開發團隊還是我們 Oursky 的工程師，這些檔案都是重要的參考資料。
當然，也有很多客戶要求我們接續下一步的開發。客戶越早確認有繼續開發的興趣，我們就能越早引薦開發工程師，針對特定功能提供技術層面的建議。我們會按照客戶心目中的預算進行設計和開發，並且向客戶解說各個功能短期和長期開發所需的時間。
- 討論產品流程和 UI 狀態
- 解決任何未完成項目，例如按照客戶要求合併功能或增加額外的功能
