「PM World - 全球聲音」打造 Apple App Store 得獎程式:我們的設計師是這樣設計的!

本文章感謝 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 狀態
  • 解決任何未完成項目,例如按照客戶要求合併功能或增加額外的功能