用實際的工作流程告訴你，UX設計師到底在設計什麼？

本篇文章會以產品經理、UX設計師、UI設計師共同合作的前提做討論。

至於這些角色分別在軟體的設計上擔任什麼角色，將來會再撰文說明。

首頁Blog用實際的工作流程告訴你，UX設計師到底在設計什麼？December3,2020UXDesign儘管UX設計師這個職位已經存在很久了，但很多人還是不了解這個職業在做什麼。

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

例如出現頻率很高的這張番茄醬圖就大錯特錯的傳達了UI與UX相互對立的概念。

真實的情況是我們各司其職，一起把產品做得更好。

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

那麼，我們就開始吧。

註：本篇文章會以產品經理、UX設計師、UI設計師共同合作的前提做討論。

至於這些角色分別在軟體的設計上擔任什麼角色，將來會再撰文說明。

1.了解需求UX設計師的工作通常都是由與產品經理發起的。

產品經理會先與需求方溝通後生成產品描述，並與我們進行初步討論。

在這個階段，我們需要暸解以下四點：客戶：也就是需求方，可能是老闆、其他部門或甲方用戶：產品的終端使用者目標：本次需求的問題。

例如加入XX功能、提升XX%的購買量都是可能的目標限制：時間、成本、或設計限制在本次的案例中，我們假設需求極為單純：在清晰需求的基本資料之後，我們就可以進入下一個步驟了。

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

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

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

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

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

在這個階段中，我們也會進行不同方案的探索。

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

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

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

CardSorting非常簡單。

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

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

註1：此處為了便於解說，我們的流程十分簡單。

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

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

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

註3：CardSorting時，我常會用到的工具是Whimsical，更多資訊請見下3.設計產品原型在結束用戶流與信息架構設計之後，我們就可以開始著手設計產品原型了。

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

UX設計師通常會以簡易的線稿呈現，但不同的設計師有不同的作法。

我自己便會將設計出更逼真的產品原型，如此可以更容易想像產品完成後的樣子。

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

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

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

優先級的決定方式有很多。

如果是現存的頁面，我們會透過資料分析去解讀用戶的行為，了解各元素的對用戶的價值高低。

我們也可以諮詢需求方，請益他們的經驗什麼，或瞭解他們希望用戶優先看到哪些元素。

最後，我們也可以去觀摩我們的競爭者是如何設計的。

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

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

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

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

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

這樣一方面可以減少UI設計師的工作量，一方面也可以讓介面變得更加的一致。

4.撰寫交互文檔完成產品原型的設計之後我們會與產品經理、UI設計師進行討論，確認產品原型設計過關之後，UI設計師就會開始進行介面的最終設計。

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

一份交互文檔應該包含頁面流、重要的標注、跳轉邏輯等等。

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

撰寫交互文檔除了讓工程師們可以更易於理解我們的設計，也可以讓我們有機會重新審視自己的設計。

交互文檔的的形式如下。

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

然後就可以把設計交到工程師那邊了！太好了！🎉總結以上就是我們在進行UX設計時會經歷的工作流程與使用的技巧。

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

我們需要定期或不定期的進行用戶行為的數據分析，幫助我們了解用戶，也幫助我們審視自己的作品是否有確實達到當初設定的目標。

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

我們也需要花時間去制定與更新公司內部的設計規範，以確保每個UX設計師所產出的設計都能夠達到相同的品質水準。

關於UX設計師的各種方方面面，將來我都會再繼續撰文說明，如果有任何問題都歡迎留言給我，我都十分樂意解答。

‍其他文章產品指標手把手教學—用GoogleHEART有效地衡量產品UX表現December17,2021為什麼你應該（幾乎總是）把網站Logo放在左上角？December17,2021