UX 設計是什麼? 用實際的工作流程告訴你 [ 2021 更新版 ]

從了解項目、設計流程到最後交付設計,UX 設計需要經歷哪些流程?

UX 設計 (UX Design) 是近年來很熱門的一個職位。但儘管這個職位已經存在很久了,還是很多人不了解 UX 設計是什麼、UX 的設計流程與設計方法。

我嘗試在Google 搜尋「UX設計師是什麼」,所得到的答案幾乎都很抽象,甚至有的答案與我的工作經驗相差甚遠。

例如出現頻率很高的這張番茄醬圖就大錯特錯。它傳達了 UI 與 UX相互對立的概念,但真實的情況是我們各司其職,一起把產品做得更好。

大錯特錯的UX & UI 比較圖

因此,我希望可以透過一個假設性的案例,向讀者說明UX設計師的真實的工作內容,以及我們為軟體設計提供了什麼價值。

本篇文章會以產品經理、UX設計師、UI設計師三個角色合作作為案例,因為這樣的分工方式在業界中常見,也更利於說明 UX 設計師的工作內容。

如果你不了解上述的三個職位的分工,可以先這樣理解:

  • 產品經理負責產品團隊的商業目標與溝通
  • UX 設計師調查用戶的使用行為,並且規劃出介面流程與資訊
  • UI 設計師負責視覺的部分 — 用色、字體、插圖、不同螢幕大小的適配

接下來,讓我們開始說明 UX 設計的工作流程吧!

1. 了解需求

UX設計師的工作通常都是由與產品經理發起的。

產品經理會依據產品方向、用戶反饋或是其他來源去規劃產品需求,再與團隊進行初步討論。在這個時候「需求」通常是比較模糊的,可能無法滿足 UX 設計師所需。

因此在這個階段,UX 設計師需要與產品經理密切地溝通(必要時與產品需求的提出方一起)以暸解以下四點:

  1. 客戶:也就是需求方,可能是老闆、其他部門或甲方。了解「客戶是誰」能夠簡化後續的溝通門檻,讓設計專案進行得更順暢。
  2. 用戶: 產品的終端使用者
  3. 目標:產品需求所要解決的問題或驗證的假設 。例如「加入 XX 功能會不會讓銷量變高」、「我們要接入Apple Pay!」都是可能的目標。
  4. 限制:專案時間、技術限制或是設計限制。

在本次的案例中,我們假設需求極為單純:

案例:老喬的披薩

在清晰需求的基本資料之後,我們就可以進入下一個步驟了。

我習慣在這個階段起草一份設計文件,用來記錄專案中用到的資料。這份設計文件也會包含後續的用戶流程、信息架構與設計嘗試。我為此撰寫了一篇文章,可以參考以下這個連結。

2. 設計用戶流程與信息架構

第二步是設計用戶流程與信息架構。用戶流程是用戶為了達到目標(在這個案例裡是買到Pizza)所需要進行的各個步驟;信息架構則是在整個產品中,信息的分類與歸屬方式。

在這個階段裡,UX 設計師會進行各種調查與研究 — 調查相關文獻、競爭者分析、用戶訪談、行為分析等等。調查與研究可能在設計之前,也有可能穿插在設計的過稱之中。

以本次的需求為例,使用者最少必須經歷選擇披薩、查看披薩詳細資訊、確認選購、填寫運送資訊、完成付款幾個步驟。

接下來我們將可能的頁面以及各個頁面上所需要的元素列出來。這時候,UX設計師需要與產品經理保持頻繁的溝通,以確保所有客戶要求展示的訊息都在介面上體現。

所有訊息都確認之後,我們就對產品的雛形有了初步的想像如以下。

基礎的用戶流程與必要元素

在這個階段中,我們也會進行不同方案的探索。例如將元素移動到不同頁面、增加或刪除流程等等,去想出一個最適合的解決方案。

Card Sorting

為了以最簡單、符合邏輯、並且符合用戶心理模型的方式呈現頁面上的訊息,我們會對頁面上的訊息進行分組歸類。這個時候我們會運用到一個叫做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設計時會經歷的工作流程與使用的技巧。

但設計產品原型並不是UX設計師工作的全部內容。

我們需要定期或不定期地觀察用戶行為的改變。這可以幫助我們了解用戶與市場,也幫助我們審視自己的作品是否有確實達到當初設定的目標。

我們需要參與非常多的會議,與產品經理、需求方、工程師等等進行項目前中後的各種溝通

我們也需要花時間去制定與更新公司內部的設計規範,以確保每個設計師的設計都能夠達到相同的品質、與各方都能流暢地合作。

全文完。如果有任何問題都歡迎留言給我,我都十分樂意解答。

鄭斐凡 Ian Zheng | UX & Product Design

謝謝你閱讀到這裡。如果喜歡我的文章,請拍手、追蹤或是訂閱我的Medium。也別忘了在 Instagram 上追蹤我,我會定期以簡單的方式分享 UX設計與產品管理的相關工具與技巧。

UX Designer @ EyeBuyDirect, SH China. Follow me on Instagram 👉 https://www.instagram.com/feifan.design/

UX Designer @ EyeBuyDirect, SH China. Follow me on Instagram 👉 https://www.instagram.com/feifan.design/