UI/UX是什麼？UI/UX差在哪？UI/UX網頁設計流程5步驟分享

UI/UX設計是什麼？UI/UX比較表分享！

「UI/UX」想必如今大家一定不陌生，現在電商平台盛行，最常見的 UI/UX 是運用在架設網站或是設計新的 APP 時，會需要 UI、UX 技能的協助。

網路上除了時常討論 UI/UX 是什麼之外，更多的是比較兩者之間的差異，雖然 UI 和 UX 確實是不同面向的專業領域，但他們之間卻是唇齒相依、密不可分的關係，究竟 UI 設計是什麼？UX 設計又是什麼呢？

（一）UI 是什麼？

UI 全名為 User Interface，而 UI 中文則翻成使用者介面。

所謂的介面可以解讀為「媒介」，換句話說，UI 是著重在設計與使用者互動時接觸的媒介，是與使用者最具連接性的視覺設計。

因此 UI 設計的重點在於產品介面如何呈現才能讓使用者操作直覺且流暢。

以電梯為例，使用電梯最直接會與使用者接觸的就是電梯樓層與開關門按鈕，如果按鈕圖案設計得不夠直覺，使用者將不知道究竟哪一個按鍵是開門或關門，也就表示這個使用者介面的視覺設計不佳。

由此例可以得知，雖然整部電梯能夠很好地運作，但與使用者接觸的媒介如果呈現不佳，仍無法使商品發揮效用，因此 UI 設計在視覺上的呈現，像是字體大小、字型、按鈕、整體配色等都不容小覷。

（二）UX 是什麼？

UX 全名為 User Experience，而 UX 中文則翻成使用者體驗。

UX 設計是早於 1990 年代就推出的概念，而所謂的使用者體驗設計不單單限於產品本身的使用，還包含企業的整體服務、商品包裝等，皆必須站在使用者的角度出發，並利用設計思考的概念讓整個使用者體驗的流程是符合邏輯的。

因此 UX 更偏向後端的產品設計，且更著重在產品本身使用起來的感覺與流程如何。

而在 UX 設計流程必須研究使用者的習慣與需求，並仔細觀察使用者行為，在得到觀察與分析的結果後，除了應用在商品本身的使用體驗外，整個消費者旅程、行銷漏斗裡的各項服務也都應該注重 UX 設計。

（三）UI/UX 差異為何？UI/UX 比較表分享

UI 和 UX 之所以常常讓人分不清楚其差異，是因為兩者確實有些部分是相互重疊，像是在互動設計上，UI/UX 就必須相互合作與討論，才能設計出兼具好的使用者體驗與視覺介面的商品。

而在實際應用上，通常會先執行 UX 設計，才輪到 UI 設計整個視覺介面，而中間的串連就需要 UI、UX 設計師去討論與協商。

以下利用表格的方式比較 UI/UX 的差異：

UI/UX 設計流程有哪些？介紹 UI/UX 流程 5 步驟

如果你是 UI/UX 入門不久的設計師或是在考慮是否從事 UI/UX 設計職業，想必會想大概了解究竟 UX 設計流程或是 UI 流程是如何進行，以下簡單將 UI/UX 流程分成 5 步驟做介紹。

STEP1. 了解需求

第一步是 UX 發揮的領域，主要以使用者為中心去了解他們的需求與痛點，換言之，就是以設計思考的方法去了解使用者最真實的想法，過程中除了可以透過訪談、觀察的方式認識使用者，還可以藉由 IA（Information Architecture）資訊架構整理基礎的網站規劃，其主要分成以下 3 個面向：

1. 使用者（User）：受眾、需求、痛點、行為等。
2. 情境（Context）：產品環境背景如何？
3. 內容（Content）：內容形式、呈現的資訊型態等。

當使用者資料收集完畢後，可以再藉由 Persona 人物誌繪製出更明確的受眾樣貌，有利於將大量的使用者資訊統整，並用於後續的流程中。

STEP2. 畫出功能地圖（Functional Map）

所謂的功能地圖是將產品需要的功能進行分類，並劃出各個功能的主次順序，以利後續 UX 設計師在產品開發時，可以一目瞭然功能設計的架構。

此外，清楚畫出功能地圖也有利於 UI 設計師檢視完整的服務與產品功能設計，進而在後續的視覺設計與互動設計可以有更明確的設計藍圖。

STEP3. 製作邏輯流程

邏輯流程目的：不同情境下產品會出現的狀態與需要的功能確認。

而邏輯流程可以再依據不同的用途分成 Flow Chart 和 UI Flow：

• Flow Chart：主要針對 UX 設計產品操作進行流程圖的繪製，藉由不同的圖形標籤表示不同的流程內容。
• UI Flow：依據使用者體驗為中心產生的 Flow Chart 設計出對應的產品操作介面圖，利用視覺雛形使得後續產品溝通能更加直觀。

STEP4. 線框稿（Wireframe）

線框稿 Wireframe 是利用呈現主要的內容與基本排版，進行架構的確認，像是是否為使用者需要的配置等，都是必須考量的重點。

然而需注意繪製線框稿時，無需在顏色、字型等細節上做過多的琢磨，UI/UX 團隊僅需著重在整個產品的架構、功能與流程即可。

STEP5. 設計原型並進行測試（Mockup & Prototype）

在製作出原型 Prototype 前，會先請 UI 設計師設計 Mockup 視覺設計稿，也就是基於上個步驟的 Wireframe 加入更詳細的視覺設計，以增加質感、美感與使用介面的直覺性為目標。

接著，最後就是原型 Prototype 的製作，所謂的原型是指產品初期的樣子，基本上已經可以進行簡單操作與測試，並做最後的優化，確定沒有問題後，就可以將產品上架了。

若是產品通過了市場的小規模初步驗證、要進行設計上的優化時，企業通常會開始進行 CIS 的設計與規範制定。若是公司已有設計好的 CIS 規範，則可於此階段提出給 UI 設計師將元素套用至產品中、優化整體的設計調性。

UI/UX 設計師｜如何成為 UI/UX 設計師？UI/UX 設計師薪水如何？

了解 UI/UX 的基本執行流程和常用軟體後，如果你想成為 UI 設計師或是 UX 設計師，需要具備的軟硬實力有哪些呢？

以 UI 設計師的軟實力來說，「美感」無疑是首要必須具備的能力，同時也需要設計上的創造力；至於 UX 設計師在前期的使用者分析上必須要發揮洞察力，而在後期的產品設計上則需要創意力。

如果以整個 UI/UX 來說，兩者都需要有顆樂於學習的心和一定的溝通能力，因為科技不斷地進步，設計師必須隨時注意產業的變動，並學習新的工具與技能；此外，因 UI 和 UX 在開發產品時，必須相互討論與協作，因此溝通能力也是必備的軟實力之一。

至於大家最在意的薪資水平，普遍來說，新鮮人的月薪通常落在 3~4 萬元，會依據不同產業略微不同，像是科技業或是知名大企業薪資就會較高；而通常超過 5 年的資深 UI/UX 設計師月薪可以超過 5 萬元。

以下利用表格整理 UI/UX 設計師應具備的軟硬實力與人格特質：

UI/UX 軟體介紹｜業界常使用的軟體有哪些？

在 UI/UX 的世界裡，擁有實用的 UI、UX 設計軟體可以幫助 UI/UX 設計師事半功倍，以下將介紹目前業界常見的 3 大 UI/UX 軟體。

（一）Figma

Figma 是受各界設計師愛戴的線上設計工具，主要於網頁進行，透過 macOS 或 Windows 的桌面應用程式可啟用離線編輯功能，檔案待連上網路後就會上傳雲端，因此其方便、簡單操作又能共同編輯的特性，是讓「Figma UI UX」的應用總是一起討論的原因。

以 Figma 網頁設計來說，簡單且直覺的拖曳編輯器加上快速的框線建立，能夠協助 UI/UX 設計師即時地進行原型設計，甚至還有模擬介面操作的功能，與許多的支援模組外掛，不管是視覺上的 UI 設計師還是功能上的 UX 設計師都能輕鬆使用 Figma 設計基本的產品草稿。

（延伸閱讀：想快速產出站內行銷用圖？Canva 大量模板供你選擇！）

（二）Adobe XD

Adobe XD 的全名為 Adobe Experience Design，是同時具備 UI/UX 所需功能的向量繪圖軟體，因此「Adobe XD 網頁設計」總會讓人聯想在一起。

而如果你是時常使用 Adobe 系列軟體的設計師，像是 Photoshop、Illustrator 等，那你在使用 Adobe XD 勢必會得心應手；在產品介面設計工具應用上，可將 Figma 的設計草稿轉放進 Adobe XD 進行更近一步的工程設計，上面有許多工程開發時需要用上的 spec 細節，是 UI/UX 設計師必備工具之一。

（三）Sketch

主要針對 UI 設計的 Sketch，以簡單的功能介面在 UI/UX 工具裡佔有一席之地，其屬於向量繪圖軟體，無需擔心改尺寸的問題；除此之外，使它歷久不衰的原因還包含 Sketch 的價格平易近人，且網上的教學資源豐富，對於剛踏入 UI/UX 界的人來說，十分友善。

以上 3 種都是相當好用的 MarTech 設計工具！其中只有 Adobe XD 的入門門檻稍微高一些，其他 2 種設計工具對行銷人來說都是相當好上手的！有興趣、有需求的你都可以嘗試看看喔！

UI/UX 書籍與 UI/UX 線上課程推薦

UI/UX 領域的知識又廣又深，且會隨著科技的進步日新月異，想要踏入 UI/UX 領域的你除了需要具備上述的軟硬實力和人格特質，也要擁有願意不斷接收新知的心，因此透過 UI/UX 設計書或是線上課程學習，都是精進自己的好方法。

以下將分享 2 本UI/UX書推薦和 UI/UX 線上課程平台推薦。

（一）打造最強網頁 UI/UX 設計腦

《打造最強網頁 UI/UX 設計腦：設計師都該懂的絕佳設計・溝通法則》適合 UI/UX 入門不久的新手，也是網上非常熱門的 UI/UX 自學書，它將告訴你「溝通」在 UI/UX 世界裡的重要性，並教你基本的設計法則。

（二）WEB 設計職人必修：UX Design 初學者學習手冊

《WEB 設計職人必修：UX Design 初學者學習手冊》也是一本在網路上許多人推薦的初學 UX 設計書，裡面主要會提到 UX 的基本觀念與流程，除此之外，也會教學簡單導入 UX 的方法。

（三）UI/UX 線上課程平台：Hahow、YOTTA

如果想要透過線上課程進修，除了在 Hahow UX 和 UI 課程都很豐富之外，友讀 YOTTA 上也有很多 UI/UX 課程可以購入，以下各推薦一門熱門課程給大家參考：

• YOTTA：Adobe Xd 設計實務｜成為 UI 設計師的 8 項核心技能
• Hahow：從入門到業界實戰 - UI / UX 前端網頁設計

以上就是 UI/UX 設計的介紹，感謝閱讀！如果您希望定期收到 Welly 為您整理的行銷新知或定期彙整的知識懶人包，都可以填寫下方申請表訂閱 Welly 的電子報噢！▼