uiux 是什麼？UI UX 設計差別、流程與自學指南

uiux 是什麼？UI 與 UX 的定義與分工

uiux 顧名思義，就是把 UI（使用者介面，User Interface）與 UX（使用者經驗，User Experience）兩個字放在一起。在台灣的求職網站與課程平台，「ui ux 設計師」常被視為同一個職稱，但在專業分工上，這兩件事的重點其實很不一樣。

UI（使用者介面）：管外觀與操作

UI 處理的是「使用者看得到、碰得到的部分」。包含配色、字體、按鈕樣式、圖示（Icon）、版面排版、間距與動態效果。它要解決的問題是：這個畫面好不好看、好不好懂、好不好按。

用一個常見的比喻：UI 就像一個人的外表與穿著。同一個人換不同衣服，給人的第一印象就完全不同。UI 做得好，使用者第一眼就覺得「這個網站很專業」。

UX（使用者經驗）：管感受與流程

UX 處理的是「使用者從頭到尾的體驗」。包含使用者研究、行為分析、資訊架構、操作流程（Page Flow）與可用性測試。它要解決的問題是：使用者能不能順利完成他想做的事、過程中會不會卡住或生氣。

同樣用比喻：UX 就像一個人的大腦與思維邏輯。外表再好看，如果講話沒邏輯、做事幫倒忙，相處起來還是很痛苦。UX 做得差，使用者往往說不出哪裡怪，只會默默關掉頁面。

UI 與 UX 的差別對照表

下表把兩者的關注點、產出物與判斷標準整理在一起，方便你快速分辨：

值得注意的是，UX 的範圍其實比 UI 更廣。UX 涵蓋了使用者「接觸產品之前、使用當下、使用之後」的完整感受，連客服速度、載入時間、退換貨流程都算在內。UI 則是 UX 的一部分，屬於使用者「看得到」的那個環節。

uiux 設計和網頁設計、產品設計差在哪？

很多人搜尋「uiux 是什麼」時，其實是想弄清楚它跟其他設計工作的關係。以下用幾個最常被混淆的名詞來區分。

uiux 設計 vs 網頁設計

網頁設計是比較大的範疇，除了介面與體驗，還牽涉網站架構、程式切版、SEO、主機與維運。你可以把它想成「蓋一棟房子」；uiux 設計則是其中負責「室內動線規劃與裝潢」的部分。一位網頁設計師通常需要懂一點 uiux，但 uiux 設計師未必需要會寫程式。

uiux 設計 vs 產品設計

產品設計（Product Design）的範圍又更廣，除了介面與體驗，還包含商業策略、市場定位與功能取捨。可以理解成：uiux 專注在「人跟產品怎麼互動」，產品設計則要回答「這個產品該不該做、要為誰做」。

uiux 設計 vs 平面設計

平面設計處理的是靜態成品，例如海報、名片、包裝，重點在視覺溝通。uiux 設計則處理「會動、會被點擊、會變化」的介面，所以必須考慮狀態（懸停、載入、錯誤）與流程，難度在於它是有交互的。

想更完整了解網頁設計本身的範疇與流程，可以延伸閱讀我們的網頁設計完整指南；若你對「設計師這條職涯」有興趣，也可以看網頁設計師養成指南。

uiux 設計的 6 大階段流程

uiux 設計不是打開軟體就開始畫，而是有一套依序推進的流程。不同公司會微調步驟名稱，但核心大致相同。以下六個階段，是我們在實務專案中最常採用的順序。

1. 需求了解（釐清問題） 先搞清楚「這個專案要解決誰的什麼問題」。包含確認專案目標、目標受眾、核心任務與成功指標。這個階段最忌諱跳過，因為方向錯了，後面做得再漂亮都是白費。
2. 設計思考與分析（UX） 透過使用者訪談、競品分析與數據觀察，建立使用者輪廓與旅程圖（User Journey Map），找出使用者在哪一步卡住、情緒在哪裡下滑。
3. 功能地圖與線框圖 Wireframe（UX） 把需求轉成頁面結構。功能地圖決定「有哪些頁面、頁面之間怎麼走」；線框圖則用灰階方塊排出每個區塊的位置與順序，此時先不談顏色與美感。
4. 視覺稿 Mockup（UI） 套入品牌色、字體、圖片與圖示，做出完整的外觀設計。這個階段會建立元件規範（按鈕、表單、卡片），確保同一套介面在不同頁面長得一致。
5. 可互動原型 Prototype（UI／UX） 把靜態畫面串成「可以點、可以跳轉」的模擬介面。原型讓團隊與客戶在還沒寫程式之前，就能實際走一遍流程、發現問題，比看圖說故事有效得多。
6. 可用性測試與優化（迭代） 找真實使用者來操作，觀察他們在哪裡遲疑、誤解或放棄，再回頭修正設計。uiux 是循環而不是直線，測試後通常會回到前面的階段再調整一輪。

流程中各階段對應的產出物

這裡要提醒一個實務上的重點：這六個階段不是「做完才換下一關」。真實專案裡常常邊做視覺邊回頭改流程，原型測試又會推翻前面的假設。流程的價值在於提醒團隊「每個階段該問的問題都問過了嗎」，而不是當成死板的水管。

uiux 設計常用工具比較

工具是 uiux 設計裡最容易補上、卻也最容易被過度強調的一環。先選一個能順暢完成「線框 → 視覺 → 原型 → 交付」流程的主力工具，再依需要搭配其他軟體即可。

Figma 之所以成為近年的主流，關鍵在於它是網頁版、支援多人同時編輯，設計師與工程師能看著同一份檔案溝通。它的「元件（Component）」與「自動版面（Auto Layout）」功能，也讓一套介面要擴充成幾十頁時不至於失控。

如果你想把設計做到網頁上線，還需要理解版面與響應式的實作邏輯，這部分可以參考我們的網站版面設計教學與RWD 響應式網頁設計完整攻略。

ui ux 設計師在做什麼？工作內容與必備技能

「ui ux 設計師」是求職網站上搜尋量最高的相關字詞之一。這代表很多人不只想知道 uiux 是什麼，更想知道這個職位每天到底在做什麼、需要具備哪些能力。

ui ux 設計師的日常工作內容

必備的硬技能與軟技能

硬技能指的是可以直接檢驗的能力，例如熟悉 Figma 等設計工具、懂基本的 HTML 與 CSS、理解響應式設計原理、看得懂數據（Google Analytics 等）。技術背景不一定要很深，但看得懂工程師在說什麼、知道設計的限制在哪裡，溝通會順很多。

軟技能往往被低估，卻是決定設計師能走多遠的關鍵。包含換位思考的同理心、把設計理由說清楚的表達能力、面對批評的開放心態，以及在資源有限時做出取捨的判斷力。

UI 與 UX 要分開聘還是合在一起？

這取決於團隊規模。五人以下的新創，通常一位設計師同時包辦 UI 與 UX；中大型公司則常拆成 UX 研究員、互動設計師（Interaction Designer）與視覺設計師（Visual Designer）。對求職者來說，先弄清楚自己擅長的是「分析與流程」還是「視覺與細節」，會更容易找到適合的位置。

uiux 設計的核心原則與可用性法則

uiux 設計不是靠個人品味，而是有一批被反覆驗證的原則可以依循。其中最常被引用的是 Nielsen Norman Group（NN/g）提出的十大可用性啟發原則，這是 UX 領域的經典參考。

對 uiux 最實用的幾條可用性原則

• 系統狀態可視性：使用者操作後要立刻得到回饋。按了送出要有載入動畫，成功要跳提示，不能讓使用者不知道現在發生什麼事。
• 與真實世界相符：用使用者熟悉的語言，不要用內部術語。例如寫「你的訂單」而不是「交易實體紀錄」。
• 使用者掌控與自由：提供復原與返回的路。填錯資料可以改、走錯頁面可以退，別讓人卡死。
• 一致性與標準：同樣的功能用同樣的呈現方式。全站按鈕長一樣、術語用法一致，使用者才不用重新學習。
• 錯誤預防：比起事後報錯，不如一開始就避免使用者出錯。例如日期用日曆選、格式即時檢查。
• 辨識而非回憶：把選項直接秀出來，不要逼使用者記住上一頁的內容。多一點提示，少一點記憶負擔。

這些原則之所以好用，是因為它們解決的都是「人性的限制」，例如注意力有限、記憶力有限、容易犯錯。設計若能順著人性走，使用起來自然就順。

幾個常被引用的體驗法則

除了 NN/g 的原則，還有幾個以人名命名的法則常被 uiux 設計引用：菲茨定律（Fitts's Law）指出目標越大、距離越近，點擊越快，這解釋了為什麼重要按鈕要做大；希克定律（Hick's Law）指出選項越多決策越慢，這是為什麼選單不該一次塞二十個選項；米勒定律（Miller's Law）提到人一次大約只能處理七個左右的資訊項目，這也是表單與選單要分組的原因。

關於字級、對比與可讀性等視覺細節，Nielsen Norman Group 與 W3C 的無障礙指引都有明確建議。實作網頁時，這些原則會落實在字級不小於 16px、內文行高足夠、按鈕觸控區域夠大等具體規範上，相關做法可參考手機網站設計建置指南。

uiux 設計如何影響 SEO 與轉換率？

很多人以為 uiux 只跟「好不好看」有關，其實它跟搜尋排名與營收直接相關。原因很簡單：Google 的目標是把「使用者覺得有用的頁面」排在前面，而 uiux 做的正是讓頁面更好用。

UX 指標就是 Google 在看的訊號

當 UX 做得好，使用者停留時間更長、跳出率更低、完成目標的比例更高。這些行為訊號會間接影響 Google 對頁面品質的判斷。反過來說，一個動線混亂、找不到資訊的頁面，即使關鍵字做得到位，也很難留住使用者。

UI 與前端實作影響 Core Web Vitals

Google 已把 Core Web Vitals 納入排名評估，而這三個指標都和 UI 與前端實作脫不了關係。根據 web.dev 的定義，LCP（最大內容繪製）建議低於 2.5 秒、CLS（累積版面位移）建議低於 0.1。圖片尺寸沒壓好、字體載入太慢、元素載入後才跳位，這些都是 uiux 與前端要一起處理的問題。

可用性直接連動轉換率

表單是 uiux 影響轉換率最明顯的地方。根據 Baymard Institute 的結帳流程研究，約有 17% 的使用者會因為流程過於複雜而放棄。設計師能做的，是把非必要欄位砍掉、把錯誤提示講清楚、把步驟簡化——這些都是純粹的 UX 工作，卻直接反映在轉換數字上。

若想進一步了解體驗設計之外，整體網站如何做好搜尋優化，可以看我們的 SEO 相關教學；而針對不同企業型態的設計重點，可延伸閱讀網頁設計作品案例，直接看不同產業的實際做法。

uiux 自學與轉職路徑

「uiux 自學」與「轉職 ui ux」是近幾年很熱門的搜尋。好消息是，uiux 不像某些技術工作有嚴格的科系門檻，靠自學加上作品集確實有機會轉職；壞消息是，網路上資源太多，很容易東看一點西看一點，最後什麼都沒完成。

給自學者的四步學習地圖

1. 先建立觀念，不急著學軟體 先搞懂使用者研究、資訊架構與可用性原則是什麼。觀念清楚了，工具只是把它們畫出來的手段。太多人一開始就鑽研 Figma 快捷鍵，結果畫面很漂亮卻沒有解決任何問題。
2. 用主力工具反覆臨摹與重製 挑幾個你覺得好用的 App 或網站，試著一比一重做它的介面，再練習自己改良。這個過程會逼你注意間距、對齊與層次，是進步最快的練習方式。
3. 完成 2 到 3 個完整專案 從「發現問題 → 研究 → 設計 → 測試」走完完整流程，題目可以是自己或朋友的真實需求。有完整脈絡的專案，遠比十張孤立的漂亮畫面有說服力。
4. 用作品集說故事 作品集的每一頁都要能回答：這是誰的問題、你怎麼發現的、你做了什麼、結果如何。把思考過程寫出來，比只放成品圖更能展現你的價值。

轉職時最常被問的三件事

• 你有沒有解決問題的實際案例？面試官想看的是你的思考脈絡，不是軟體熟練度。
• 你懂不懂工程限制？不需要會寫程式，但要知道設計能不能被實作、成本高不高。
• 你能不能好好溝通？uiux 設計有大量時間在跨部門協調，能說清楚設計理由的人，通常走得更遠。

若你正打算把設計當成職涯，建議同時了解整體的網頁設計產業與接案生態，相關內容可參考網頁設計師養成指南。

月光創意的 uiux 實務案例

以下分享月光創意在實際專案中如何運用 uiux 流程。案例皆經過去識別化處理，成果描述以「我們做了什麼、觀察到什麼變化」為主，不誇大不實。

案例一：醫療健檢機構的預約動線優化

案例二：活動頁的互動流程設計

想看更多不同產業的實際成品，歡迎前往月光創意網頁設計作品瀏覽。

常見問題 FAQ