UI 使用者介面

使用者看到並操作的畫面元素。

先用一句話理解

英文全名：User Interface

使用者看到並操作的畫面元素。

打個比方

像櫃台、按鈕、菜單和指示牌。

什麼時候會遇到

設計任何表單、Dashboard、工具頁或 App 畫面時。

再往深一點看

UI（使用者介面）是產品和使用者之間的所有視覺與互動觸點，包括按鈕、輸入框、導覽列、彈出視窗和錯誤提示。UI 不只是靜態的版面：同一個按鈕在「預設」「懸停」「按下」「禁用」四種狀態下應該長什麼樣，都是 UI 設計要解決的問題。UI 和 UX 密切相關但不同——UI 是那個看得到的殼，UX 是使用者用完的感受；殼設計得再漂亮，如果找不到該去哪裡，UX 仍然很差。把 UI 元素抽成可重用的 component，再用 design system 統一規範，可以讓多頁面產品保持視覺一致。

舉個例子

你在 Figma 設計一張「送出申請」畫面：表單欄位、送出按鈕、上方的進度條和右下角的錯誤提示，這些都是 UI 元素。開發者拿到設計稿後，要把每個元素實作成 React component，並確保它們在手機寬度下不會重疊。

常見誤解

- 只做漂亮的靜態截圖，沒有設計載入中、送出成功與錯誤三種狀態，上線後遇到 API 慢或失敗，畫面就空白一片讓使用者不知道發生什麼事。
- 只在桌機螢幕確認過 UI，沒有測手機寬度，上線後在 375px 螢幕文字溢出、按鈕疊在一起。
- 每頁自己定義顏色、間距和按鈕大小，三個月後整個產品像不同設計師做的，日後想換品牌色要改幾十個地方。