UX 設計是什麼? 用實際的工作流程告訴你 [ 2021 更新版 ]
從了解項目、設計流程到最後交付設計，UX 設計需要經歷哪些流程？
UX 設計 (UX Design) 是近年來很熱門的一個職位。但儘管這個職位已經存在很久了，還是很多人不了解 UX 設計是什麼、UX 的設計流程與設計方法。
我嘗試在Google 搜尋「UX設計師是什麼」，所得到的答案幾乎都很抽象，甚至有的答案與我的工作經驗相差甚遠。
例如出現頻率很高的這張番茄醬圖就大錯特錯。它傳達了 UI 與 UX相互對立的概念，但真實的情況是我們各司其職，一起把產品做得更好。
因此，我希望可以透過一個假設性的案例，向讀者說明UX設計師的真實的工作內容，以及我們為軟體設計提供了什麼價值。
本篇文章會以產品經理、UX設計師、UI設計師三個角色合作作為案例，因為這樣的分工方式在業界中常見，也更利於說明 UX 設計師的工作內容。
如果你不了解上述的三個職位的分工，可以先這樣理解：
- 產品經理負責產品團隊的商業目標與溝通
- UX 設計師調查用戶的使用行為，並且規劃出介面流程與資訊
- UI 設計師負責視覺的部分 — 用色、字體、插圖、不同螢幕大小的適配
接下來，讓我們開始說明 UX 設計的工作流程吧！
1. 了解需求
UX設計師的工作通常都是由與產品經理發起的。
產品經理會依據產品方向、用戶反饋或是其他來源去規劃產品需求，再與團隊進行初步討論。在這個時候「需求」通常是比較模糊的，可能無法滿足 UX 設計師所需。
因此在這個階段，UX 設計師需要與產品經理密切地溝通（必要時與產品需求的提出方一起）以暸解以下四點：
- 客戶：也就是需求方，可能是老闆、其他部門或甲方。了解「客戶是誰」能夠簡化後續的溝通門檻，讓設計專案進行得更順暢。
- 用戶： 產品的終端使用者
- 目標：產品需求所要解決的問題或驗證的假設 。例如「加入 XX 功能會不會讓銷量變高」、「我們要接入Apple Pay！」都是可能的目標。
- 限制：專案時間、技術限制或是設計限制。
在本次的案例中，我們假設需求極為單純：
在清晰需求的基本資料之後，我們就可以進入下一個步驟了。
我習慣在這個階段起草一份設計文件，用來記錄專案中用到的資料。這份設計文件也會包含後續的用戶流程、信息架構與設計嘗試。我為此撰寫了一篇文章，可以參考以下這個連結。
2. 設計用戶流程與信息架構
第二步是設計用戶流程與信息架構。用戶流程是用戶為了達到目標（在這個案例裡是買到Pizza）所需要進行的各個步驟；信息架構則是在整個產品中，信息的分類與歸屬方式。
在這個階段裡，UX 設計師會進行各種調查與研究 — 調查相關文獻、競爭者分析、用戶訪談、行為分析等等。調查與研究可能在設計之前，也有可能穿插在設計的過稱之中。
以本次的需求為例，使用者最少必須經歷選擇披薩、查看披薩詳細資訊、確認選購、填寫運送資訊、完成付款幾個步驟。
接下來我們將可能的頁面以及各個頁面上所需要的元素列出來。這時候，UX設計師需要與產品經理保持頻繁的溝通，以確保所有客戶要求展示的訊息都在介面上體現。
所有訊息都確認之後，我們就對產品的雛形有了初步的想像如以下。
在這個階段中，我們也會進行不同方案的探索。例如將元素移動到不同頁面、增加或刪除流程等等，去想出一個最適合的解決方案。
Card Sorting
為了以最簡單、符合邏輯、並且符合用戶心理模型的方式呈現頁面上的訊息，我們會對頁面上的訊息進行分組歸類。這個時候我們會運用到一個叫做Card Sorting 的技巧。
Card Sorting 非常簡單。我們會把每個頁面上的元素一字排開，然後把相似的元素群集在一起並打上標籤。以下以商品詳情頁的元素為例，左右分別為Card Sorting 前與後的差異。
註1：此處為了便於解說，我們的流程十分簡單。在實際的工作中，用戶流程可能受到技術限制、業務限制，也可能因為需求的本質而變得十分複雜
註2：如果資源足夠，Card Sorting的動作會交由目標使用者來做。畢竟使用者的想法才是真的能夠帶來影響的。除此之外，Card Sorting也可以分為開放式與封閉式的，將來會再撰文說明。
註3：Card Sorting時，我常會用到的工具是Whimsical，更多資訊請見下
3. 設計產品原型
在結束用戶流與信息架構設計之後，我們就可以開始著手設計產品原型了。
產品原型是像是一個產品的藍圖，粗略的勾勒出頁面上的有哪些元素以及每個元素如何分佈。
產品原型通常會以簡易的線稿呈現，避免過多地去設計視覺上的細節。首先，這樣做可以節省繪製的時間，讓設計師可以盡量多地產出設計點子。再者，簡易的線稿也可以讓設計師與團隊中的其他成員將重點放在流程、元素與排列上，而非視覺細節。
但在這點上不同的設計師有不同的作法。我自己就習慣設計出更逼真的產品原型，因為這樣可以讓我更容易想像產品完成後的樣子。
以商品詳情頁為例，可能的設計如下所示。
在設計產品原型時，我們會注意三個重點：
按元素優先級進行設計
這是對介面設計造成最大影響的因素。優先級較高的元素需要賦予更高的視覺重量、放在更加醒目或是更易於操作的地方。
而影響優先級高低的主要是元素對用戶以及對於專案目標的價值。在以上例子中優先級最高的元素就是「確認購買按鈕」，因為這個元素是用戶在這個頁面上最重要的操作。
我們會透過資料分析去解讀用戶的行為，了解各元素的對用戶的價值高低；我們也會諮詢其他專家（如需求方、其他設計師），請益他們的過往經驗；我們也可以去觀摩我們的競爭者是如何設計的。
貼合信息架構
相同層級的資訊應以以進行類似的佈局、使用相同的介面組件。
在信息之間有隸屬關係的時候，我們也會藉由使用不同層級的組件來創造視覺的階層。這樣做的目的是為了以最簡單、符合邏輯、並且符合用戶心理模型的方式呈現頁面上的訊息。
關於如何利用視覺層級去表達元素之間的隸屬關係，可以參考這篇文章。
使用既有組件
組件是介面上的最小單位，小至按鈕大至整個商品區塊都可以視為介面組件。在設計的時候，除非必要，否則我們會盡量避免創造新的組件。這樣一方面可以減少UI設計師的工作量，一方面也可以降低用戶的學習成本，讓產品更加易用。
4. 撰寫交互文檔
完成產品原型的設計之後我們會與產品經理、UI設計師進行討論，確認產品原型設計過關之後，UI設計師就會開始依據線稿圖畫出最後的介面設計圖，同時考量所有的視覺元素。
於此同時，我們 UX設計師會開始撰寫交互文檔。
交互文檔的主要讀者是工程師，方便他們理解我們所設計的用戶流程、界面跳轉等等。因此一份交互文檔應該包含頁面流、跳轉邏輯、元素解釋等等。
撰寫交互文檔除了讓工程師們更易於理解我們的設計，也可以讓我們有機會審視自己的設計是否有邏輯上的缺漏。
交互文檔的的形式如下。在比較複雜的需求中，會加上更多的邏輯判斷，也有可能附上更細的各個組件的說明圖等等。
然後就可以把設計交到工程師那邊了！ 太好了！🎉
總結
以上就是我們在進行UX設計時會經歷的工作流程與使用的技巧。
但設計產品原型並不是ＵＸ設計師工作的全部內容。
我們需要定期或不定期地觀察用戶行為的改變。這可以幫助我們了解用戶與市場，也幫助我們審視自己的作品是否有確實達到當初設定的目標。
我們需要參與非常多的會議，與產品經理、需求方、工程師等等進行項目前中後的各種溝通。
我們也需要花時間去制定與更新公司內部的設計規範，以確保每個設計師的設計都能夠達到相同的品質、與各方都能流暢地合作。
全文完。如果有任何問題都歡迎留言給我，我都十分樂意解答。
鄭斐凡 Ian Zheng | UX & Product Design
謝謝你閱讀到這裡。如果喜歡我的文章，請拍手、追蹤或是訂閱我的Medium。也別忘了在 Youtube 或 Instagram 上追蹤我，我會定期以簡單的方式分享 UX設計與產品管理的相關工具與技巧。
