UIUX – 進階 UI 樣式專有名詞

點我前往 Figma

一、導覽與結構類

• Pagination（分頁器）：「上一頁 1 2 3 … 10 下一頁」，切換大量資料的頁碼。
• Stepper（步驟條）：顯示多步驟流程目前在第幾步，例如「填寫資料 → 付款 → 完成」。
• Command Palette（指令面板）：按 ⌘K 叫出的搜尋框，可以直接打字跳頁或執行指令，Vercel、Notion、Linear 都有。
• Mega Menu（巨型選單）：展開後是一大塊分欄選單。你的 UX 法則篇提過，層級超過 3 層時可以用它。
• Segmented Control（分段控制）：幾個並排、只能選一個的按鈕，例如「日／週／月」，比 Tab 更像一個切換器。

二、彈出與覆蓋類

• Drawer / Sheet（抽屜）：從畫面側邊或底部滑出的面板。手機上的 Bottom Sheet 很常見。
• Popover（彈出框）：點擊後出現在元素旁邊的小面板，可以放按鈕或表單。Tooltip 只放文字，而且通常是滑過就出現。
• Context Menu（右鍵選單）：在項目上按右鍵或長按時出現的操作清單。
• Banner（橫幅公告）：固定在頁面頂端的系統通知，例如「系統將於今晚維護」。跟 Toast 不同，它不會自己消失。

三、內容展示類

• Data Table（資料表格）：可以排序、篩選、勾選的表格，你的資料密集型介面那篇有寫到。
• Empty State（空狀態）：沒有資料時的插圖、說明和下一步按鈕。你的 UI 策略篇有提到，但專有名詞篇沒有獨立列出來。
• Timeline（時間軸）：依時間排列的事件，例如物流進度、操作紀錄。
• Tree View（樹狀結構）：可以層層展開的階層清單，例如檔案總管。
• Stat / KPI Card（數據卡）：一個大數字加上漲跌幅，常見於後台儀表板。
• Divider（分隔線）：區隔內容的細線，很基礎，但設計系統通常會把它獨立定義。

四、操作與輸入類

• Select（下拉選擇器）：跟 Combobox 不同，Select 不能打字，只能從選項裡挑。
• Date Picker（日期選擇器）：用日曆點選日期或日期範圍。
• Slider（滑桿）：拖動來選數值或範圍，例如價格區間。
• File Upload / Dropzone（檔案上傳區）：可以拖曳檔案上傳的區塊，通常會搭配上傳進度。
• Search Field（搜尋框）：帶放大鏡圖示和清除按鈕的輸入框，可以再搭配搜尋建議。
• OTP Input（驗證碼輸入框）：一格一格輸入的 6 位數驗證碼。
• Textarea（多行輸入框）、Number Stepper（數量加減器）：例如購物車裡的「− 1 +」。
• Rating（評分）：星等評分。

五、狀態與標示類

• Tag Input（標籤輸入框）：一邊打字一邊把輸入的內容變成 Chip。
• Status Dot（狀態點）：例如「線上」「部署中」的小圓點，常常會搭配動畫。
• Kbd（鍵盤按鍵標示）：把快捷鍵畫成按鍵的樣子，例如 ⌘ K。
• Inline Alert / Callout（行內提示）：放在內容中間的提示區塊，你的元件課程第四章做的 Alert 就是這種。