鑽石舞台

世界各地的貢獻者們正在將 freeCodeCamp 的技術教育資源翻譯成不同語言，幫助人們免費學習編程，歡迎你加入這一教育公益活動：freeCodeCamp 世界翻譯月丨每個人都可以用母語免費學編程

你可曾注意到用戶界面設計（UI）和用戶體驗設計（UX）的區別？

不少人都有這種疑問。

當下設計潮流和設計工具日新月異、推陳出新。前端設計越來越受到重視，前端開發者也開始涉足 UI/UX 設計。UI 設計和 UX 設計常常被他們混為一談。兩者有本質上的區別，初學者應該充分了解兩者區別。

鑑於此，我和來自 Creative Tim 的團隊夥伴做了很多研究，為大家提供了這份綜合指南，展示了這兩個大領域的核心內容與區別：

UI 關注軟件圖形界面，包括按鈕、布局、動畫、轉場、微交互等。簡而言之，UI 關於界面外觀。

UI 設計包括以下界面:

UX 設計關注用戶與系統全生態的交互。符合邏輯的導航和自然絲滑的體驗都屬於 UX 範疇。簡而言之，UX 設計使用戶擁有積極的體驗。

UX 設計流程主要包含以下步驟：

優秀的 UX 設計，需要達到以下標準：

優秀的 UX 設計師需要時刻注意人類與生俱來的認知偏差。這些偏差會影響用戶的使用體驗。許多營銷策略就是利用了這些認知偏差：

UI 設計和 UX 設計這兩個詞常常被混淆使用。

儘管終端產品同時獲益於這兩種設計方法，但它們兩者的設計過程卻大相徑庭。

UX 設計關注用戶解決問題的全旅程，而 UI 設計則注重產品的外觀。

以下是 UX 和 UI 設計的主要區別：

這是同款產品 UX 線框圖（左）和 UI 設計圖（右）：

想成為UI 設計師需具備以下技能：

想成為優秀的UX 設計師需具備以下技能：

同時承擔 UI/UX 的角色有點像同時戴着兩頂不同的帽子 。

儘管許多組織都將 UI/UX 當作相同工種，但其實兩者需要不同的技能。兩者的關注點、思維方式和產品原型設計方法都大相徑庭。

將兩個角色混淆就要求設計師不斷地在概念和視覺之間不斷切換。這不僅十分困難，還消耗了向兩方面各自投入的時間精力。

儘管 UI/UX 設計師技能要求不同，但他們需要通力合作，為用戶提供最佳體驗。

UI 設計需要具有美感，但如果沒有一個好的 UX 設計，它的導航可能笨拙混亂。另一方面，一個產品的用戶體驗就算完美無缺，但如果沒有一個好看的用戶界面，就吸引不了用戶。

任何前端開發和設計過程都應該從了解用戶需求開始。UX 和 UI 設計師應該與開發者、產品經理和老闆一道，共同確定最終產品的功能、外觀和效果。

UX 設計師通常參與產品設計的早期階段，因為他們需要設計活動，幫助用戶解決問題。這些活動包括用戶分析和項目管理等。

之後，UI 設計師根據 UX 設計師提供的草圖進行美學和交互設計。

可以這樣說，UI 設計師和 UX 設計師攜手並進，共同創造產品。即使有人身兼兩職，也必須遵循不同的設計準則。

UI 設計師在全世界的平均收入為 5 萬元，美國的平均工資為 9.1 萬，德國為 5.7 萬，法國為 4.7 萬，英國為 6.7 萬。

UX 設計師的收入略高，全球平均為 5.2 萬。美國的UX設計師平均收入為 10.2 萬，德國為 5.3 萬，法國為 4.9 萬，英國為 6.8 萬。(來源：Glassdoor)

註：上面列出的所有工資都是該地區的平均水平，並且以美元為單位。

要想成為一名 UI/UX 專家，首先要對 UI/UX 設計非常感興趣。確認了自己的興趣，就應該找到相應資源，並參加設計課程，為就業市場做好準備。

有一些在線課程可以幫助你入門 UI 設計， 如 UI 設計課程和學習 UI 設計。

對於 UX 設計，可以選擇網上自學，報名網絡課程。你可以參考這裡介紹的學習 UI/UX 的最佳在線課程，裡面介紹了哪些網站提供免費課程，以及課程評價。

還有許多大學公開的 UX 設計付費課程，或者來自在線大學的課程。同樣可以參考這裡介紹的學習 UI/UX 的最佳在線課程，裡面介紹了哪些網站提供免費課程，以及課程評價。

假設你已經具備了成為 UI/UX 設計師所需的一些技能。在這種情況下，你也可以看看諸如 UX 設計行為模式、常用用戶體驗方法、世界上最好的設計師的啟發式圖形設計、以及設計師應該閱讀的學術研究論文等文章。

9. 你應該專攻哪一個領域？UI 還是 UX 設計？

專攻 UI 還是 UX 設計既取決於個人偏好，也要看自身特定技能組合。

然而，有大量的公司招聘身兼兩職的 UI/UX 設計師。

雖然這兩者的角色和職責各不相同，但 UI/UX 設計仍是一片藍海，因此最好對兩者都有足夠的了解。

雖然兩者很難平衡，但身兼兩職當然報酬也更高，也利於提升自己在公司的重要性。

儘管如此，在兩個角色之間來回切換十分困難，最好還是專攻一個領域。

比如，你有藝術細胞，了解色彩組合搭配，知道如何提升產品視覺美感，那你更適合 UI 設計。

而如果你善於管理用戶和相關利益方，具備出色的分析能力，並且了解如何改善用戶體驗，那麼 UX 設計會更適合你。

UI 和 UX 設計都需要理解用戶。

只要同用戶有同理心，前端開發和設計並非十分複雜--有很多現成的組件、工具和套件可以使設計更高效。

Creative Tim 為你提供了大量的免費、優質、可編輯的 UI 工具，如模板、儀錶板和設計體系。

如果想用手繪組件的方式繪製插圖，請關注 Creative Tim 的產品：IRA Design。

原文鏈接：https://www.freecodecamp.org/news/ui-ux-design-guide/

作者：Alexandru Paduraru

譯者：Yaxing Li