跟設計師討論網站時，常會聽到「這裡的 UX 不太好」「UI 再調整一下」。兩個詞只差一個字母，很多人以為是同一件事，或是覺得那是設計師的專業，自己不用懂。
其實 UI 和 UX 都跟生意直接相關：網站好不好看是 UI，客人找不找得到價格、願不願意填表單，比較接近 UX。這篇用白話說明兩者是什麼、差在哪，以及身為業主，看網站設計時可以怎麼判斷。
UI 和 UX 是什麼？用一間餐廳來比喻
想像你去一間餐廳吃飯：
- UI 是你看得到、摸得到的東西：菜單的排版和字體、桌椅、燈光、餐具。
- UX 是你整段用餐的感受：好不好訂位、進門有沒有人招呼、菜單看不看得懂、等多久上菜、結帳順不順。
菜單設計得再漂亮，如果點餐要等二十分鐘、結帳只收現金，你對這間餐廳的印象還是不好。反過來，流程很順，但菜單字太小、燈光太暗，也會讓體驗打折。
網站也是一樣。UI 決定客人看到的樣子，UX 決定客人用起來的感覺。UI 是 UX 的一部分，但 UX 的範圍大得多，還包括內容、流程、速度、手機上好不好操作。
UI 和 UX 差在哪？
| UI 使用者介面 | UX 使用者體驗 | |
|---|---|---|
| 關心的問題 | 看起來清不清楚、好不好看、符不符合品牌 | 客人能不能順利完成他想做的事 |
| 處理的東西 | 版面、顏色、字型、圖示、按鈕、間距 | 頁面架構、內容順序、操作流程、速度、表單 |
| 常用的產出 | 設計規範、設計稿 | 網站地圖、使用流程、線框圖、測試結果 |
| 做壞了會怎樣 | 看起來雜亂、不專業、跟品牌不搭 | 客人找不到資訊、卡在某一步、直接離開 |
做網站的順序通常是先處理 UX，再處理 UI：先決定網站有哪些頁面、每一頁要放什麼、客人要怎麼走到預約或購買，再來決定它長什麼樣子。UX 規劃階段常用的工具是線框圖，可以參考〈Wireframe 線框圖是什麼？〉。
好的 UX 長什麼樣？用一個網站走一遍
假設一間烘焙店的網站，主要目標是讓客人預訂生日蛋糕。客人可能是在 IG 看到蛋糕照片，用手機點進網站。
UX 不好的版本：首頁是一大張輪播圖，要往下滑很久才看到「蛋糕」；點進去只有照片，沒有尺寸和價格；想預訂要找「聯絡我們」，再加 LINE 私訊詢問；問完才知道要提前五天訂，客人的生日是後天。
UX 好的版本：首頁第一屏就寫「生日蛋糕線上預訂，需提前 5 天」，旁邊一個「看蛋糕款式」按鈕；款式頁每款都有尺寸、價格、口味；預訂表單只問日期、款式、取貨方式和聯絡電話；送出後馬上告訴客人接下來會怎麼聯絡他。
兩個網站可能用一樣的顏色和照片，UI 差不多，但第二個版本的客人少走很多冤枉路。好的 UX 通常有這幾個特徵：
- 客人想找的資訊找得到：價格、規則、聯絡方式不用猜
- 步驟越少越好：能在網站上完成的，就不要讓客人跳到別的地方再問一次
- 在對的時間給對的資訊：例如預訂規則放在選款式的地方，而不是藏在常見問題最底下
- 手機上一樣順：按鈕夠大、表單好填、不用一直放大縮小
好的 UI 要注意的 5 件事
- 一致：同樣功能的按鈕長得一樣，同一層級的標題用同樣的字級。客人看過一次，就知道其他地方怎麼用。
- 有主次：每一屏只有一個最重要的行動按鈕，用顏色或大小讓它跳出來，其他連結退一步。
- 看得清楚：文字和背景的對比要夠，字級在手機上不要太小，淺灰字放在白底上很容易看不清楚。
- 看得出能點：按鈕要像按鈕，連結要跟一般文字有區別，不要讓客人猜哪裡可以點。
- 符合品牌：顏色、字型、照片風格要跟品牌個性一致，高價品牌和親民品牌的 UI 不會長得一樣。
這些原則在手機上更重要。手機版要特別注意什麼，可以參考〈RWD 響應式網站是什麼？〉。
UI 和 UX 跟生意有什麼關係？
UI 和 UX 聽起來像設計的事，但影響的是詢問和訂單。
以電商結帳為例，依 Baymard Institute 的購物車放棄率統計（2025 年 9 月更新），整理 50 份研究後，平均購物車放棄率約 70%。在排除「只是逛逛」的客人後，放棄結帳的原因裡，「網站要求建立帳號」佔 18%、「結帳流程太長或太複雜」佔 17%、「網站出錯或當機」佔 17%。這些都是 UX 可以改善的地方。
搜尋排名也有關係。依 Google 搜尋中心對網頁體驗的說明（2026 年 9 月更新），Google 的排名系統會參考 Core Web Vitals 這類網頁體驗指標，也建議網站檢查手機上好不好用、廣告會不會干擾主要內容。不過 Google 也說明，內容本身還是最重要，體驗好不保證排名一定好。
網站有人來、卻沒有詢問，常常就是 UX 出了問題，常見原因整理在〈網站有流量卻沒詢問？〉。
做網站時，業主怎麼看 UI 和 UX？
你不需要會畫設計稿，也能判斷網站的 UI 和 UX 好不好。看設計稿或測試版網站時，可以這樣做：
看 UX：用客人的身分走一次
- 用手機打開網站，假裝自己是第一次來的客人，5 秒內看得懂這個網站在賣什麼嗎？
- 試著找價格、營業時間、聯絡方式，各要點幾次？
- 實際完成一次最重要的動作，例如送出詢問表單、加入購物車到結帳，中間有沒有卡住或猶豫的地方？
- 請一位不熟悉你生意的朋友做同樣的事，看他在哪裡停下來
看 UI：對照品牌和一致性
- 第一眼的感覺，跟你想給客人的印象一樣嗎？
- 同樣的按鈕、標題，在每一頁長得一樣嗎？
- 最想讓客人點的按鈕，是不是畫面上最顯眼的？
意見回饋時，盡量說「客人會在這裡找不到價格」，而不是「我不喜歡這個顏色」。前者是 UX 問題，有明確的方向可以改；後者也可以提，但最好說出原因，例如「這個顏色跟我們的產品包裝差很多」。
在 basedot 的流程裡，會先規劃網站地圖和首頁區塊順序，再定設計規範（品牌色、字型、按鈕樣式），讓全站視覺一致；上線前也會請你實際試用一次網站，列出要修改的地方。完整步驟可以看〈basedot 網站建置流程公開〉。
UI 和 UX 常見問題
UI 設計師和 UX 設計師是不同的人嗎？
大公司常會分開，UX 負責研究和流程，UI 負責視覺和介面。中小企業的網站專案，通常由同一位設計師或同一個團隊一起處理，重點是兩件事都有人負責。
網站好看，UX 就一定好嗎？
不一定。很多網站畫面精緻，但價格藏得很深、表單欄位太多，客人一樣會離開。好看是 UI，好用是 UX，兩個要分開檢查。
用 AI 做網站，UI 和 UX 還需要人顧嗎？
需要。AI 可以很快產生版面和配色，但「客人最想先知道什麼」「哪個步驟可以省掉」這類判斷，要了解生意和客人的人來做。AI 能做到哪裡、哪裡還需要人，可以參考〈AI 做網站可以取代網頁設計師嗎？〉。
小網站也需要考慮 UX 嗎？
需要。就算是一頁式網站，也有「客人看完要做什麼」的流程。頁面越少，每個區塊的順序和按鈕位置就越關鍵。
結論：UI 管看起來怎樣，UX 管用起來怎樣
UI 是網站的外觀和介面，UX 是客人從進站到完成目標的整段體驗。做網站時先想清楚 UX：客人要找什麼、要走哪幾步；再用 UI 把它呈現得清楚、一致、符合品牌。
身為業主，最簡單的檢查方式就是用手機、用客人的身分把網站走一遍。哪裡猶豫了、哪裡找不到，那裡就是要調整的地方。
有架設網站的需求，歡迎跟 basedot 網頁設計聯繫。
