使用者介面設計
一句話定義
使用者介面設計是把產品功能、內容與狀態轉成使用者可看、可理解、可操作的介面層；它處理視覺呈現、元件、互動回饋與狀態一致性，是 使用者體驗設計 被使用者實際接觸到的最後一哩。
核心要點
UI 不是 UX，但 UI 會形成 UX
2026-05-07-SocialMORE-UIUX設計入門-Part01 用新手語境把 UI / UX 分開：
| 面向 | UI | UX | |---|---|---| | 聚焦 | 介面整體視覺呈現與互動性 | 以使用者為中心安排流程與內容 | | 典型工作 | 字體、顏色、字型、標誌、頁面一致性、元件狀態 | 研究使用者習慣、找痛點、定義流程、測試體驗 | | 風險 | 只做漂亮但不解決問題 | 只做流程但沒有清楚可操作的表面 |
因此 UI 不是 UX 的同義詞，而是 UX 的可感知載體。使用者最後接收到的「系統印象」常常不是設計師的研究文件，而是介面上的文字、排版、按鈕、狀態、回饋與錯誤處理。
UI 是資訊、視覺與操作的交界
一個 UI 決策通常同時牽涉三層：
| 層 | 問題 | 對應頁 |
|---|---|---|
| 資訊 | 使用者知道自己在哪、下一步是什麼嗎？ | UX文案 / 資訊層級 / 介面狀態設計 |
| 視覺 | 字、色、留白、圖示與元件是否可被掃視？ | 排版 / 易讀性 / 無障礙設計 |
| 操作 | 目標是否好點、回饋是否清楚、流程是否少摩擦？ | 費茲法則 / 希克法則 / 微互動 |
圖示是可掃視語意，不是裝飾
2026-08-17-Cursor圖示系統 補上一個 UI 細節判斷：圖示的任務不是讓畫面更有變化，而是把產品概念壓縮成使用者能快速掃視、辨識與操作的語意線索。
當產品概念很通用，外部 icon library 可能足夠；但當產品開始有自己的語彙，例如 Cursor 的 AI agents、parallel threads、thinking effort、compute、Bugbot 等，圖示就會變成產品概念模型的一部分。若圖示不一致、過度裝飾、尺寸縮小後糊掉，使用者讀到的 系統印象 就會漂移。
因此 UI 中的圖示至少要同時檢查：
- 是否和文字、tooltip、狀態文案一起傳達同一概念？
- 是否在實際使用尺寸下仍可辨識，而不是只在 Figma 放大檢視時漂亮？
- 同一物件或 modifier 是否在不同畫面保持一致？
- 重要語意是否有文字或 accessibility label 承接，避免只有視覺通道？
像廣告的 UI 會被看見但不被接收
2026-05-08-HChing-廣告視盲 補上一個介面判斷：UI 元素不是越大、越亮、越像促銷素材就越有效。若位置像廣告、視覺像廣告或行為像廣告，使用者可能在眼睛掃過後把它歸類為噪音，形成 廣告視盲。
這對 CTA、電子報訂閱、推薦模組、重要通知與新功能入口都成立。介面要讓使用者看見，也要讓使用者把它理解為「與當前任務相關的可用功能」。否則視覺強化只會提高物理可見度，不一定提高理解與行動。
基礎單位：跨裝置不直接依賴 pixel
socialMORE 特別把 UI 單位拉出來說明：不同設備有不同螢幕尺寸與像素密度，若直接用 pixel 作為佈局單位，容易在不同裝置上出現比例失調。
pt：iOS 常用的佈局尺寸單位。dp：Android 常用的佈局尺寸單位。ppi：顯示設備每英寸像素數；ppi 愈高，圖像愈精細。
這裡的重點不是背單位名，而是 UI 應先用邏輯尺寸與系統規範建立一致比例，再讓設備處理實際像素密度。
基礎流程：研究不是 UX 專屬，UI 也需要回到資料
Part 1 將 UX 設計流程整理為：
- 搜集資料
- 分析
- 設計
- 測試
- 改良
對 UI 來說，這條流程也成立。介面設計不是把畫面畫漂亮，而是把研究、競品、使用者痛點與產品目標，轉成線框圖、視覺稿、互動原型與可測試的介面狀態。
UI 品質常藏在狀態與回饋裡
完成狀態的畫面只是一部分。真正影響使用者體驗的，往往是：
這些細節會決定使用者是否感到安心、是否知道下一步、是否相信系統還活著。
與其他概念的關係
- 使用者體驗設計 — UI 是 UX 的可見 / 可操作表層；UX 處理整體體驗，UI 處理使用者接觸到的介面。
- 設計系統 — UI 要能規模化，就需要把色彩、字型、元件、狀態與規則抽成可重用系統。
- 圖示系統 — UI 圖示的產品語彙、視覺一致性、小尺寸可讀性與工程引用治理。
- Figma — 本 vault 目前第一個 UI 設計主力工具 entity；承接線框、視覺稿、prototype、community 與插件生態。
- 微互動 — 介面上最小的任務回饋單位；讓使用者知道自己做了什麼、系統正在做什麼。
- 介面狀態設計 — 空白、載入、錯誤、無結果與提示狀態是 UI 品質最容易被忽略的部分。
- 無障礙設計 — UI 不應只服務「看得清、點得準、理解快」的使用者；對比度、觸控區、alt text 與多通道提示是底線。
- 排版 / 易讀性 — UI 中的文字是否能被看懂，取決於字型、行高、留白、層級與節奏。
- 心智模型 — UI 是設計者概念模型被使用者讀到的界面；介面線索會形塑使用者心智模型。
- 廣告視盲 — UI 若使用典型廣告版位、視覺或行為，可能被使用者自動忽略；重要資訊不應只靠放大與亮色處理。
相關來源
- 2026-08-17-Cursor圖示系統 — 補入圖示作為 UI 語彙、產品概念承載與小尺寸可讀性的設計系統案例。
- 2026-05-08-HChing-廣告視盲 — 補入廣告視盲在 UI / CTA / 訂閱模組中的注意力反模式：像廣告的元素可能被看見但不被接收。
- 2026-05-07-SocialMORE-UIUX設計入門-Part01 — UI / UX 分界、UI 基礎單位與 UX 流程的入門圖解。
- 2026-05-07-SocialMORE-UIUX設計入門-Part02 — 把 UI 設計落到 Figma、prototype、插件、案例庫與資源搜尋流程。