開發 CAMC 與 AI 溝通時卻發現，我想呈現某個效果，會花很多時間形容，當效果呈現之後，AI會告訴你其實這是 Breadcrumb 的設計，過程中的溝通的確不理想，所以整理一些網頁設計上就有的名詞，名詞正確之後就會有概定的設計模式，在網頁開發與設計溝通中更順手！
1. 導覽與結構 (Navigation & Layout)
| 英文名稱 (English) | 中文名稱 (Chinese) | 說明 (Description) |
|---|---|---|
| Breadcrumb | 麵包屑 / 路徑導覽 | 顯示使用者目前在網站層級中的位置 (如：首頁 > 分類 > 商品)。 Indicates the current page's location within a hierarchy (e.g., Home > Category > Product). |
| Pagination | 分頁 | 將大量資料分成多頁顯示的控制器 (如：< 1 2 3 >)。 A controller used to split large amounts of content into multiple pages (e.g. < 1 2 3 >). |
| Navbar / Header | 導覽列 / 頁首 | 網站最上方的選單區域，通常包含 Logo 與主要連結。 The top section of a website, usually containing a logo and primary navigation links. |
| Sidebar / Drawer | 側邊欄 / 抽屜 | 網站側邊的選單，Drawer 通常指可滑出/收合的側邊欄。 A side menu used for navigation; a drawer typically slides in/out. |
| Footer | 頁尾 | 網站最下方的區域，包含版權宣告、聯絡資訊等。 The bottom section of a website, usually containing copyright and contact info. |
| Tabs | 分頁籤 | 在同一區塊切換不同內容的標籤頁。 Allows switching between different views within the same context. |
| Steps / Stepper | 步驟條 | 顯示任務進度 (如：購物車結帳流程 Step 1, 2, 3)。 Displays progress through a sequence of logical and numbered steps. |
| Dropdown / Menu | 下拉選單 | 點擊後展開更多選項的選單。 A menu that expands to show more options when clicked. |
| Accordion / Collapse | 手風琴 / 折疊面板 | 點擊標題展開或收合詳細內容的元件。 A component that allows users to toggle the visibility of content sections. |
| Hamburger Menu | 漢堡選單 | 三條線圖示 (≡) 的選單按鈕，常見於行動版網頁。 An icon (≡) used to toggle a menu, common in mobile views. |
2. 資料輸入 (Data Entry / Form)
| 英文名稱 (English) | 中文名稱 (Chinese) | 說明 (Description) |
|---|---|---|
| Input / TextField | 輸入框 | 單行文字輸入欄位。 A field for single-line text input. |
| Textarea | 多行輸入框 | 可輸入多行文字的區域 (如：留言板)。 A field for multi-line text input (e.g., comment box). |
| Select / Combobox | 下拉選擇框 | 從清單中選擇一個項目的輸入元件。 A component for selecting a value from a dropdown list. |
| Checkbox | 核取方塊 / 複選框 | 方形框，可多選 (☑)。 A square box for selecting multiple options (☑). |
| Radio Button | 按鈕開關 / 單選框 | 圓形框，一組中只能選一個 (◉)。 A circular button for selecting a single option from a group (◉). |
| Switch / Toggle | 開關 | 類似實體開關的切換元件 (ON/OFF)。 A component used to toggle between two states (ON/OFF). |
| Slider | 滑桿 | 拉動滑塊選擇數值的元件。 Allows selecting a value from a range by dragging a handle. |
| Date Picker | 日期選擇器 | 彈出月曆供選擇日期的元件。 A component that opens a calendar for date selection. |
| Time Picker | 時間選擇器 | 選擇時間的元件。 A component for selecting a specific time. |
| File Upload | 檔案上傳 | 選擇或拖檔案上傳的區域。 An area for selecting or dragging files to upload. |
| Button | 按鈕 | 觸發動作的點擊元件 (Primary 主要, Secondary 次要)。 A clickable element that triggers an action (Primary, Secondary). |
3. 資料展示 (Data Display)
| 英文名稱 (English) | 中文名稱 (Chinese) | 說明 (Description) |
|---|---|---|
| Table | 表格 | 顯示行列資料的結構。 Displays data in rows and columns. |
| List | 列表 | 垂直排列的資料項目。 Displays a collection of items in a vertical layout. |
| Card | 卡片 | 封裝圖片、標題、摘要的矩形容器 (常用於商品或文章展示)。 A container grouping related information (image, title, summary). |
| Carousel / Slider | 輪播 / 幻燈片 | 自動或手動切換圖片/內容的展示區。 A slideshow used to cycle through elements like images. |
| Avatar | 頭像 | 使用者的大頭貼圖片或縮寫。 A graphical representation of a user (image or initials). |
| Badge | 徽章 / 標記 | 顯示數字或狀態的小圖示 (如：購物車旁的紅色數字)。 A small indicator for status or numeric count (e.g., cart items). |
| Tag / Chip | 標籤 | 顯示分類或關鍵字的膠囊狀元件。 A pill-shaped component used for categories or keywords. |
| Tooltip | 提示框 | 滑鼠懸停時出現的輔助說明文字。 A text label that appears on hover to provide hints. |
| Popover | 彈出框 | 點擊或懸停後出現的較大提示內容，可包含操作。 A popup box triggered by click/hover, often richer than a tooltip. |
| Tree | 樹狀結構 | 顯示階層資料 (如：資料夾結構)。 Displays hierarchical data structure (e.g., file system). |
| Empty State | 空狀態 | 無資料時顯示的圖示與引導文字。 An illustration and message shown when there is no data. |
4. 回饋與互動 (Feedback)
| 英文名稱 (English) | 中文名稱 (Chinese) | 說明 (Description) |
|---|---|---|
| Modal / Dialog | 模態框 / 對話框 | 覆蓋在頁面上的視窗，需處理後才能回到原頁面。 A window overlay requiring user interaction before returning. |
| Alert / Message | 警告 / 訊息條 | 頁面內容中的醒目提示 (成功、錯誤、警告)。 A prominent message block for alerts (Success, Error, Warning). |
| Toast / Notification | 吐司 / 通知 | 浮動顯示的短暫訊息，幾秒後自動消失。 A brief, floating message that auto-dismisses after a few seconds. |
| Progress Bar | 進度條 | 顯示操作百分比的長條圖。 A horizontal bar indicating the completion percentage of a task. |
| Spinner / Loader | 載入指示器 | 顯示載入中的旋轉圈圈或動畫。 A spinning icon indicating that content is loading. |
| Skeleton | 骨架屏 | 載入內容前顯示的灰色佔位區塊，提升視覺體驗。 A placebo UI shown while content is loading to improve perceived speed. |
| Popconfirm | 氣泡確認框 | 點擊操作旁出現的小型確認對話框 (如：確定刪除？)。 A small confirmation dialog appearing near the action button. |
5. 其他常見術語 (Design Terminology)
| 英文名稱 (English) | 中文名稱 (Chinese) | 說明 (Description) |
|---|---|---|
| Hero Section | 首頁主視覺區 | 首頁最上方的滿版大圖或關鍵訊息區。 The large, prominent visual area at the top of a webpage. |
| Call to Action (CTA) | 行動呼籲 | 引導使用者點擊的主要按鈕 (如：「立即註冊」、「免費試用」)。 A primary button prompting the user to take a specific action. |
| Responsive | 響應式 / 自適應 | 網頁能隨螢幕寬度自動調整排版。 Design that adapts layout to different screen sizes. |
| Sticky / Fixed | 釘選 / 固定 | 捲動時固定在畫面某處不隨之移動。 Elements that stay fixed in position while scrolling. |
| Hover | 懸停 | 滑鼠游標移到元素上的狀態。 The state when a mouse cursor is positioned over an element. |
| Active / Focus | 啟動 / 聚焦 | 元素被點擊或選取時的狀態。 The state when an element is clicked or selected. |
| Disabled | 禁用 | 元素不可點擊或編輯的狀態 (通常為灰色)。 The state where an element is unresponsive to interaction. |
| Wireframe | 線框圖 | 網頁的低保真草圖，規劃版面結構。 A low-fidelity sketch outlining the page structure. |
| Mockup | 視覺稿 | 高保真的視覺設計圖。 A high-fidelity visual design representation. |
| Prototype | 原型 | 可互動的模擬操作樣本。 An interactive model simulating user interaction. |