UIUX 是什麼？UIUX 設計師的工作在做什麼？

UI/UX 設計職缺在市場上的需求持續增長，許多人對這個領域充滿興趣，而 UI 與 UX 這兩個名詞對於產品都至關重要。儘管常常會一同提起，實際執行內容卻截然不同。因此我會和大家說說，我在 UIUX 設計顧問公司中擔任 UX designer，與 UI designer 緊密合作，各自明確的工作職掌，以及 UI（使用者介面設計）與 UX（使用者體驗設計）的差異與實際工作的方式。有些公司則會將 UIUX designer 作為同一個角色，但概念還是可以一起了解！

UIUX 是什麼？使用者介面跟使用者體驗有何不同？

簡單來說：

  • UI (User Interface) 中文為「使用者介面設計」，指的是在設計數位產品中的整體視覺、設計系統一致性，以及將品牌想傳達的感受轉譯成視覺表現，重視的是設計美學。
  • UX (User Experience) 中文為「使用者體驗設計」，則是涵蓋使用者對於產品或服務的需求情境與感受，透過使用者輪廓描繪、產品目標的掌握，規劃出產品架構與所有體驗上細節，重視的是體驗過程。

使用者介面（UI，User Interface）是什麼、為什麼重要？

使用者介面（UI）就是使用者與產品互動時所看到的介面，例如我們常使用的電腦、筆電、手機 APP 等最終實際畫面，就是由 UI 所完成。

UI 設計不僅要掌握品牌所想表達的整體視覺調性，也需要建立設計系統，例如按鈕、圖標、字體、配色等視覺元素。UI 設計的重要性在於直接影響使用者的第一印象。一個好的 UI 設計應該是直觀的、美觀的、達到品牌想傳遞給使用者的意向，並且讓使用者能夠輕鬆理解並操作產品。

而在設計顧問公司，會遇到非常多從零到一（End to End）的設計專案，因此 UI 設計都會需要透過對產品設定的目標，包含從使用者研究、競品分析、品牌的優勢與精神，來做視覺化得轉意，並且做視覺提案，與客戶確認最終版本，再來進行設計系統建置與每個頁面的設計。

使用者體驗（UX，User Experience）是什麼、為什麼重要？

使用者體驗設計是以人為本的產品設計方式。 Don Norman-Nielsen Norman Group Design Consultancy 的共同創辦人，他在 90 年代末創造了「使用者體驗」這個詞彙。他說：

“User experience encompasses all aspects of the end-user’s interaction with the company, its services, and its products.”

使用者體驗涵蓋了終端使用者與公司的服務和產品的所有互動。

雖然這句有點饒口，但意思就是做出符合使用者體驗的產品或服務，所以包含所有線上與線下、實體與數位的任何產品與服務的接觸點，都能體驗順暢、輕鬆快樂的達成目的，以及感受愉悅。而我們在做的時後，更同時會考量產品策略與目標效益。

UX 還會區分為 UX 研究與 UX 設計，UX 研究會先透過質化、量化以及資料的搜集方式，了解產品的使用者輪廓、需求情境與痛點，同時透過競品分析方式，了解各產品之間的目的與優劣勢，找尋本產品優勢，如何做出市場利基點與差異化，並且掌握產品想要達成的目標。

綜合以上資訊後，再來進行 UX 設計，而在設計顧問公司中，因為從零到一個開發，所以也都會從整體產品的架構規劃（Sitemap），落實到介面中例如 Tab bar, Navigation Bar 的佈局，再來細緻到每一個頁面，再依據 User Story 的方式來設計出具有良好資訊層級的 Wireframe。

UI 和 UX 有什麼差異？

雖然UI和UX經常一起提及，但它們有明確的區別：

UI 使用者介面UX 使用者體驗
定義設計產品的視覺和互動元素規劃使用者和產品的整體互動體驗
目標設計出符合品牌調性且美觀、清晰的介面，讓使用者可以輕鬆地與產品互動針對目標使用族群，規劃出符合體驗與易用性的產品，滿足使用者的體驗需求
工作職掌視覺風格轉譯
設計系統建立
UI 介面設計
互動原型製作
UI 開發文件撰寫		使用者與競品研究
產品策略規劃
功能清單盤點
產品架構規劃
資訊架構整理
UX 介面設計
UX 開發文件撰寫

UIUX 設計流程

每間公司執行設計的流程都不盡相同，以我平時在顧問公司所執行的 UIUX 設計過程中，通常會以這個流程來執行 (以下流程以介紹設計為主，研究會再另外詳細說明)，並且依據專案的規模會有些許調整，例如有的以研究為主、有的直接進行設計與開發；有的有明確目標；有的需要提供策略上的建議；有的是需要從市場紅海找到利基點；而有的則是要找出藍海市場等等，有各式各樣的專案類型與屬性，但大致流程如下圖：

UIUX 設計流程
UIUX 設計流程

使用者研究

UX 可以透過質化與量化研究、以及次級資料的方式將使用者輪廓描繪出來，同時釐清使用情境，當前的痛點與期待。常見的研究方法像是訪談、焦點團體訪談、利害關係人訪談、問券、Google Analytics 分析、KJ 法、顧客旅程地圖等，都是可以掌握到使用者輪廓與行為的方式。

好處：不僅可以清楚知道為誰設計，同時也能讓團隊成員朝同樣目標規劃。

競品分析

UX 可以透過同業競品排行先驅者，例如可以先使用 Similar Web 方式找到競爭對手應用程式 App，並進行整體 App 的功能拆解與目的性推測，了解各個 App 的優勢、劣勢與定位之後，來為自己的產品找到市場利基點與優勢，作為後續設計的基石。

好處：找到專屬產品的關鍵利基點與優勢，避免流於與他人無差異化的設計。

品牌化

UX 與 PM 透過與利害關係人的訪談，了解產品的優勢、目標策略與品牌精神後，可以作為後續規劃設計時的方向，優勢可以很多面向，像是使用者族群年齡與其他競品不同，可以鎖定該年齡族群做設計。而品牌想傳遞的精神，可以是品牌忠旨，或是透過差異化來定義的，像是溫暖、夥伴的意象等，而目標策略則是像這品牌期待透過此產品獲得的收穫，例如會員資料搜集、或是產品獲利。

好處：了解產品目標、想傳遞的精神與優勢後，更可以快速聚焦發展方向，不會僅著重在使用者身上。

產品目標設定

UX, UI, PM 可以一同定義出產品的目標設定，我們會透過品牌價值漏斗方式，收斂為一個設計的指標。

好處：後續規劃時都能按照同樣的方向執行。

功能清單盤點（Function list）

因設計顧問公司緣故，專案多半為從零到一設計，PM 與 UX 會依據專案的不同有所分工，單都會需要釐清完整的產品功能清單，將每個會使用到的項目都確認非常清楚，包含所有的大單元裡涵蓋的項目，以及每個項目裡的欄位說明都要盤點出來。

好處：確保功能無遺漏，可以就此來往後規劃架構，同時可以與客戶確認範疇。

產品架構規劃（Sitemap）

UX 依據功能清單與前期研究的內容，規劃出具有重要性排序的產品架構後，即可開始為 App, Website 進行架構的佈局，例如 Tab Bar, Navigation Bar，並確保主次架構跟彼此頁面之間的關係。

好處：可以依據需求情境規劃好的產品架構來引導使用者直覺操作，同時幫助後續設計可以更清晰。

資訊架構整理（Info Architecture, User Flow, User Story）

UX 在規劃每一個頁面時，會盤點出該頁裡的所有資訊與欄位，並透過 User Story 的方式幫助思考該頁面的重要排序，即可為頁面進行設計，同時也會把完整流程透過 User Flow 的方式串連，幫助確認流程的正確性以及可行性。

好處：以使用情境方式設計，可以做出更客製化的產品，創造有差異性的設計，同時流程幫助開發溝通與流程確認。

UX 介面設計（Wireframe）

UX 在整理好資訊架構後，即可開始設計 Wireframe，將所有的資訊依據層級架構來規劃，Wireframe 的設計不會是簡單的手稿，而是非常精確的畫面來傳遞所有的資訊邏輯、層級，我們會透過 Wireframe 和客戶與工程師溝通在功能上是否符合期待，同時將所有狀態盤點，確保正逆向流程皆被滿足。

好處：Wireframe 好處是專注於資訊上的討論與規劃。

想了解更多 Wireframe，可以參考這篇

【Wireframe 是什麼？UIUX設計師必學 3 大關鍵流程】

【解析 6 大 Wireframe 實作技巧與軟體工具】

UX 開發文件撰寫（PRD）

UX 在完成 Wireframe 頁面後，會將 UX 的 PRD (開發文件) 寫在旁邊，或是整理到共編檔案，以利 PM, 工程師確認設計與最後開發上是一致的，不會有落差，因 Wirefame 在畫面上無法透過設計就闡述完備後的規則，需要將狀態與規則清楚備註。

好處：讓工程師可以按照設計需求開發，如未描述，可能會因為工程師與設計師想像不同而設計出不符合當初設計期待的結果。

設計風格轉意

UI 透過產品目標設定後，提取關鍵的詞彙為品牌轉譯出具象的視覺表現，包含色彩意象、字體應用、氛圍傳遞、圖片製作等，讓視覺為品牌塑造出給使用者的印象。

好處：定義好風格後，可以更具體設計方向，往後給使用者有明確的感受，不會混雜。

設計系統建立

UI 在確認好風格後，會建立設計系統、包含按鈕、字級、色彩、輸入框等等，幫助後續在設計時，可以維持在一致性的樣式。

好處：維持產品設計的一致性，同時可以有效管理所有元件。

UI 介面設計

UI 拿到 Wireframe 之後，即可進行介面的視覺設計，掌握風格，將設計系統應用到每一個頁面，讓最後讓使用者所看到的介面，夠過這個環節完成。

好處：可以清楚確認所有的設計稿，以及預期介面期待給使用者看到的感受。

原型建置（Prototype）

UI 可以透過 Prototype 的方式，讓 UI 介面變成可互動的原型。

好處：可以提供工程師開發時有另一個可參考的流程依據。

UI 開發文件撰寫

UI 會將元件的規範同樣出成文件提供給工程師做開發，以確保工程師可以按照設計師所有設計的細節來規劃。

好處：確保字級、按鈕外距內距的一致性。

UIUX 設計師需要具備哪些能力？

UI 設計師

軟實力

  • 美感力：能夠創造吸引人的視覺設計，具備良好的美感能力。
  • 溝通能力：能夠有效地與客戶、開發人員和其他設計師溝通，理解需求並表達設計理念。
  • 細節力：注重設計中的細節，確保介面設計細節被考量，同時掌握設計一致性。
  • 適應力與靈活性：能夠快速適應設計趨勢和使用者需求的變化。

硬實力

  • 設計工具：足夠掌握設計軟體的操作。
  • 視覺設計：理解色彩理論、排版、圖標設計等視覺設計原則。
  • 原型設計：能夠使用工具製作高保真原型，展示互動和動畫效果。
  • HTML/CSS 概念：大致了解 HTML 和 CSS，能夠與前端開發人員協作，確保設計的可實現性。

適合的性格

  • 視覺敏感度高：對色彩、形狀和排版非常敏銳，同時熱愛美學和視覺設計。
  • 細心和耐心：能夠專注於細節，耐心地調整設計。
  • 開放和接受反饋：能夠接受並運用建設性的反饋來改進設計。

UX 設計師

軟實力

  • 同理心：能夠站在使用者的角度思考，理解和體驗他們的需求和痛點。
  • 批判性思維：能夠分析問題，提出創新的解決方案。
  • 協作能力：能夠與不同部門的團隊成員（如開發人員、產品經理、UI 設計師）有效合作。
  • 溝通和說服能力：能夠清晰地表達設計思路，讓設計成功讓相關人員買單。

硬實力

  • 使用者研究：能夠進行使用者訪談、調查和可用性測試，收集和分析使用者數據。
  • 資訊架構：熟悉資訊架構設計，能夠組織和結構化內容。
  • Wireframe 線框稿和 PRD：能夠設計高保真 Wireframe，呈現產品完整流程與細節的 Wireframe 以及 需求開發文件。
  • 易用性測試：透過易用性測試，並根據測試結果進行改進。

適合的性格

  • 同理心強：對使用者的需求和感受高度敏感，能夠設身處地為使用者著想。
  • 好奇心重：對理解使用者行為和心理感興趣，樂於進行研究和探索。
  • 耐心和堅持：能夠在長期項目中保持耐心，持續改進設計。

UIUX 設計軟體

Figma

Figma 是一款現在普及率最高的介面設計軟體，是雲端的協作設計工具，跨平台、符合設計介面的操作、和豐富的外掛與公開資源，幫助設計師和開發團隊可以良好的協作。

Axure

Axure 是一款可以線上共編的 Wireframe 線框搞設計工具，專注於資訊架構的規劃以及流程圖的串連，在頁面的開立方式可以幫助與客戶討論架構上與體驗上的細節。

UIUX 課程推薦

書籍推薦

  • 《厚數據的創新課》 by 宋世祥：是以人類學的質性研究，更了解使用者可以探究的廣度與深度。
  • 《這就是服務設計》 by Marc Stickdorn 等：是當初我接觸服務設計的第一本書，教學了許多研究方法與應用方式。

線上課程

如果想要自學 UIUX 並且轉職想進入數位設計領域的，也可以來看看這篇《UX 轉職正夯！5 種自學方法優缺點和薪資調查大補帖》，不僅透過線上的課程資源來學習，同時找到好的 Mentor，才能讓自學路上不要遇到太多彎路唷！

延伸閱讀

相關文章