UIUX – UI樣式專有名詞
H.Y. Chen 一、導覽與結構類 (Navigation & Layout)
Navbar（導覽列）
位於頁面頂端或側邊，包含網站主要連結（Logo、選單、搜尋、登入）。是使用者定位與跳轉的核心。
Sidebar（側邊欄）
垂直排列於畫面左側或右側的導覽區塊，常見於後台管理系統與文件網站。
Breadcrumb（麵包屑）
顯示目前頁面在網站階層中的位置，例如「首頁 > 產品 > 手機」，方便使用者回到上層。
Hamburger Menu（漢堡選單）
由三條橫線組成的圖示（☰），點擊後展開隱藏的導覽選單，常用於行動裝置。
Tab（分頁 / 標籤頁）
將內容分組於同一區域，點擊不同標籤切換顯示對應內容，不需換頁。
Footer（頁尾）
頁面最底部區塊，通常放版權資訊、聯絡方式、次要連結。
二、彈出與覆蓋類 (Overlays & Popups)
Pop-up（彈出視窗）
泛指從畫面中「彈出」覆蓋在原內容上的視窗，可能是廣告、提示或表單。
Modal（強制互動對話框）
彈出於畫面中央並附帶遮罩背景 (Overlay)，使用者必須先處理它（確認或關閉）才能繼續操作背後內容。
Dialog（對話框）
與使用者互動的小視窗，用於確認、警告或輸入，例如「確定要刪除嗎？」。
Tooltip（提示框）
滑鼠移到元件上時出現的小型文字說明，用於補充圖示或按鈕的用途。
Dropdown（下拉選單）
點擊後向下展開的選項清單，用於選擇或顯示更多操作。
Toast / Snackbar（浮動通知）
短暫出現於畫面邊角的輕量提示訊息（如「儲存成功」），數秒後自動消失。
三、內容展示類 (Content Display)
Card（卡片）
以矩形容器包裝一組相關資訊（圖片、標題、文字、按鈕），常見於商品列表、貼文。
Carousel / Slider（輪播）
可左右滑動切換的圖片或內容區塊，常用於首頁 Banner。
Accordion（手風琴 / 摺疊面板）
可展開與收合的區塊，點擊標題顯示或隱藏內容，適合 FAQ。
Hero（主視覺區）
頁面頂部大型視覺區塊，通常包含主標題、大圖與行動呼籲按鈕 (CTA)。
Skeleton（骨架屏）
資料載入前顯示的灰色佔位框架，讓使用者感受到內容正在載入。
四、操作與輸入類 (Actions & Inputs)
Button（按鈕）
觸發動作的元件，常分為主要按鈕 (Primary)、次要按鈕 (Secondary)。
FAB（浮動操作按鈕，Floating Action Button）
漂浮於畫面右下角的圓形按鈕，代表最主要的操作（如新增）。
Checkbox / Radio（核取方塊 / 單選鈕）
Checkbox 可多選，Radio 於一組選項中僅能選一個。
Toggle / Switch（開關）
用於切換開啟或關閉狀態，如深色模式開關。
Input / Text Field（輸入框）
讓使用者輸入文字的欄位，常搭配 Placeholder（提示文字）與 Label（標籤）。
五、狀態與標示類 (Status & Indicators)
Badge（徽章）
附加於元件上的小標記，顯示數量或狀態，如未讀訊息數。
Chip / Tag（標籤片）
小型可點擊的標籤，用於篩選、分類或顯示關鍵字。
Progress Bar / Spinner（進度條 / 載入動畫）
表示進度或載入中的狀態，Spinner 為旋轉的環狀動畫。
Avatar（頭像）
代表使用者的圓形或方形圖像。
建立共同的 UI 詞彙，能大幅降低設計與開發之間的溝通成本。