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

產品經理負責產品團隊的商業目標與溝通 · UX 設計師調查用戶的使用行為，並且規劃出介面流程與資訊 · UI 設計師負責視覺的部分— 用色、字體、插圖、不同螢幕 ... GetunlimitedaccessOpeninappHomeNotificationsListsStoriesWriteUX設計是什麼?用實際的工作流程告訴你[2021更新版]從了解項目、設計流程到最後交付設計，UX設計需要經歷哪些流程？UX設計(UXDesign)是近年來很熱門的一個職位。

但儘管這個職位已經存在很久了，還是很多人不了解UX設計是什麼、UX的設計流程與設計方法。

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

例如出現頻率很高的這張番茄醬圖就大錯特錯。

它傳達了UI與UX相互對立的概念，但真實的情況是我們各司其職，一起把產品做得更好。

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

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

如果你不了解上述的三個職位的分工，可以先這樣理解：產品經理負責產品團隊的商業目標與溝通UX設計師調查用戶的使用行為，並且規劃出介面流程與資訊UI設計師負責視覺的部分—用色、字體、插圖、不同螢幕大小的適配接下來，讓我們開始說明UX設計的工作流程吧！1.了解需求UX設計師的工作通常都是由與產品經理發起的。

產品經理會依據產品方向、用戶反饋或是其他來源去規劃產品需求，再與團隊進行初步討論。

在這個時候「需求」通常是比較模糊的，可能無法滿足UX設計師所需。

因此在這個階段，UX設計師需要與產品經理密切地溝通（必要時與產品需求的提出方一起）以暸解以下四點：客戶：也就是需求方，可能是老闆、其他部門或甲方。

了解「客戶是誰」能夠簡化後續的溝通門檻，讓設計專案進行得更順暢。

用戶：產品的終端使用者目標：產品需求所要解決的問題或驗證的假設。

例如「加入XX功能會不會讓銷量變高」、「我們要接入ApplePay！」都是可能的目標。

限制：專案時間、技術限制或是設計限制。

在本次的案例中，我們假設需求極為單純：案例：老喬的披薩在清晰需求的基本資料之後，我們就可以進入下一個步驟了。

我習慣在這個階段起草一份設計文件，用來記錄專案中用到的資料。

這份設計文件也會包含後續的用戶流程、信息架構與設計嘗試。

我為此撰寫了一篇文章，可以參考以下這個連結。

「所以我說那個文件呢？」—設計項目文件該怎麼寫？（內有範本）為何UX設計要書寫設計項目文件以及如何書寫。

medium.com2.設計用戶流程與信息架構第二步是設計用戶流程與信息架構。

用戶流程是用戶為了達到目標（在這個案例裡是買到Pizza）所需要進行的各個步驟；信息架構則是在整個產品中，信息的分類與歸屬方式。

在這個階段裡，UX設計師會進行各種調查與研究—調查相關文獻、競爭者分析、用戶訪談、行為分析等等。

調查與研究可能在設計之前，也有可能穿插在設計的過稱之中。

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

接下來我們將可能的頁面以及各個頁面上所需要的元素列出來。

這時候，UX設計師需要與產品經理保持頻繁的溝通，以確保所有客戶要求展示的訊息都在介面上體現。

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

基礎的用戶流程與必要元素在這個階段中，我們也會進行不同方案的探索。

例如將元素移動到不同頁面、增加或刪除流程等等，去想出一個最適合的解決方案。

CardSorting為了以最簡單、符合邏輯、並且符合用戶心理模型的方式呈現頁面上的訊息，我們會對頁面上的訊息進行分組歸類。

這個時候我們會運用到一個叫做CardSorting的技巧。

CardSorting非常簡單。

我們會把每個頁面上的元素一字排開，然後把相似的元素群集在一起並打上標籤。

以下以商品詳情頁的元素為例，左右分別為CardSorting前與後的差異。

商品詳情頁CardSorting註1：此處為了便於解說，我們的流程十分簡單。

在實際的工作中，用戶流程可能受到技術限制、業務限制，也可能因為需求的本質而變得十分複雜註2：如果資源足夠，CardSorting的動作會交由目標使用者來做。

畢竟使用者的想法才是真的能夠帶來影響的。

除此之外，CardSorting也可以分為開放式與封閉式的，將來會再撰文說明。

註3：CardSorting時，我常會用到的工具是Whimsical，更多資訊請見下心智圖、流程圖、便利貼Allinone的超好用工具—Whimsical在專案發想、資料搜集或進行設計時，我們常會用到多種不同的視覺輔助工具來釐清思緒，舉凡心智圖、表格、便利貼、流程圖等等。

medium.com3.設計產品原型在結束用戶流與信息架構設計之後，我們就可以開始著手設計產品原型了。

產品原型是像是一個產品的藍圖，粗略的勾勒出頁面上的有哪些元素以及每個元素如何分佈。

產品原型通常會以簡易的線稿呈現，避免過多地去設計視覺上的細節。

首先，這樣做可以節省繪製的時間，讓設計師可以盡量多地產出設計點子。

再者，簡易的線稿也可以讓設計師與團隊中的其他成員將重點放在流程、元素與排列上，而非視覺細節。

但在這點上不同的設計師有不同的作法。

我自己就習慣設計出更逼真的產品原型，因為這樣可以讓我更容易想像產品完成後的樣子。

以商品詳情頁為例，可能的設計如下所示。

一種可能的設計在設計產品原型時，我們會注意三個重點：按元素優先級進行設計這是對介面設計造成最大影響的因素。

優先級較高的元素需要賦予更高的視覺重量、放在更加醒目或是更易於操作的地方。

而影響優先級高低的主要是元素對用戶以及對於專案目標的價值。

在以上例子中優先級最高的元素就是「確認購買按鈕」，因為這個元素是用戶在這個頁面上最重要的操作。

我們會透過資料分析去解讀用戶的行為，了解各元素的對用戶的價值高低；我們也會諮詢其他專家（如需求方、其他設計師），請益他們的過往經驗；我們也可以去觀摩我們的競爭者是如何設計的。

關於如何尋求設計建議，可以參考我的這篇文章。

貼合信息架構相同層級的資訊應以以進行類似的佈局、使用相同的介面組件。

在信息之間有隸屬關係的時候，我們也會藉由使用不同層級的組件來創造視覺的階層。

這樣做的目的是為了以最簡單、符合邏輯、並且符合用戶心理模型的方式呈現頁面上的訊息。

關於如何利用視覺層級去表達元素之間的隸屬關係，可以參考這篇文章。

KeyPrinciplesofVisualHierarchyinUXDesignTheorderandemphasisofelementsinaninterfaceimpactUX.Herearethekeyvisualhierarchyprinciples.medium.com使用既有組件組件是介面上的最小單位，小至按鈕大至整個商品區塊都可以視為介面組件。

在設計的時候，除非必要，否則我們會盡量避免創造新的組件。

這樣一方面可以減少UI設計師的工作量，一方面也可以降低用戶的學習成本，讓產品更加易用。

4.撰寫交互文檔完成產品原型的設計之後我們會與產品經理、UI設計師進行討論，確認產品原型設計過關之後，UI設計師就會開始依據線稿圖畫出最後的介面設計圖，同時考量所有的視覺元素。

於此同時，我們UX設計師會開始撰寫交互文檔。

交互文檔的主要讀者是工程師，方便他們理解我們所設計的用戶流程、界面跳轉等等。

因此一份交互文檔應該包含頁面流、跳轉邏輯、元素解釋等等。

撰寫交互文檔除了讓工程師們更易於理解我們的設計，也可以讓我們有機會審視自己的設計是否有邏輯上的缺漏。

交互文檔的的形式如下。

在比較複雜的需求中，會加上更多的邏輯判斷，也有可能附上更細的各個組件的說明圖等等。

一份交互文檔應該包含頁面流、重要的標注、跳轉邏輯等等然後就可以把設計交到工程師那邊了！太好了！🎉總結以上就是我們在進行UX設計時會經歷的工作流程與使用的技巧。

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

我們需要定期或不定期地觀察用戶行為的改變。

這可以幫助我們了解用戶與市場，也幫助我們審視自己的作品是否有確實達到當初設定的目標。

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

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

全文完。

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

鄭斐凡IanZheng|UX&ProductDesign謝謝你閱讀到這裡。

如果喜歡我的文章，請拍手、追蹤或是訂閱我的Medium。

也別忘了在Instagram上追蹤我，我會定期以簡單的方式分享UX設計與產品管理的相關工具與技巧。

👇我的其他文章NPS(淨推薦值)的計算方式與如何使用介紹NPS是什麼、計算方法以及如何解讀。

medium.com為什麼我建議UX/產品設計師學習寫程式？我一直想要寫這篇文章。

medium.com6個關於設計溝通的訣竅，讓你避免無意義的爭吵身為設計師或與設計師討論設計專案時，可以應用的溝通技巧medium.com如何建立設計系統，然後失敗。

這是一篇關於設計系統的失敗經驗的分享。

內容裡並沒有扭轉局面然後最後成功的情節，如果喜歡喜劇結尾的讀者可能要失望了。

iancheng0323.medium.com--Morefrom鄭斐凡IanZheng|UX&ProductDesignFollowUXDesigner@EyeBuyDirect,SHChina.FollowmeonInstagram👉https://www.instagram.com/feifan.design/Lovepodcastsoraudiobooks?Learnonthegowithournewapp.TryKnowableAboutHelpTermsPrivacyGettheMediumappGetstarted鄭斐凡IanZheng|UX&ProductDesign442FollowersUXDesigner@EyeBuyDirect,SHChina.FollowmeonInstagram👉https://www.instagram.com/feifan.design/FollowMorefromMediumKalyGeeinBootcampStanleyCupPlayoffsBracketChallengeuserexperiencechallengesMartaSantoOjo:HowtomakeacontactlensappforGenZusableandattractive?AmyKimMyFirstStepTowardUXDesignKhaledAmeenHowdesignthinkingAirbnbabillion-dollarcompanyHelpStatusWritersBlogCareersPrivacyTermsAboutKnowable