依主題找術語 · 147 份指南

介面元件

認識按鈕、選單、表單，以及畫面上其他操作元件的正確名稱。

01 / 術語圖鑑

全部介面元件術語

開啟一個術語，就能看簡單解釋、例子、使用時機、正式程度和程式名稱。

01 · 核心
下拉指令選單 Dropdown Menu

下拉指令選單是從按鈕開啟、暫時顯示在按鈕旁的指令清單。它通常由「選單按鈕」和「選單」兩個部分組成。
02 · 核心
下拉選單 Select

下拉選單是一個精簡的控制項，會打開固定清單，讓人選一個值。
03 · 深入了解
下拉選單與情境選單（教學組合） Dropdown & Context Menu — Learning Bundle

這個教學組合依開啟方式比較選單。下拉選單（Dropdown）從控制項開啟；情境選單（Context Menu）屬於某個物件，通常出現在游標旁。這個組合不是單一標準選單術語。
04 · 深入了解
工具列 Toolbar

工具列是一組有名稱、而且常用的控制項。按 Tab 只會進入這組一次，再用方向鍵在裡面移動。
05 · 核心
工具提示 Tooltip

工具提示是控制項的一小段說明。當滑鼠滑過或鍵盤焦點移到圖示時，它會出現，而且本身不能操作。
06 · 核心
已儲存檢視 Saved View

已儲存檢視會記住清單的篩選、排序和顯示方式，讓使用者再次打開同一個實用畫面。
07 · 深入了解
互動式資料網格 Data Grid

互動式資料網格很像應用程式裡的試算表，可用來移動、選取、排序或編輯大量資料。
08 · 核心
內容重排 Content Reflow

內容重排會把頁面排進較窄的空間，不會弄丟內容或功能。大多數閱讀不該需要兩個方向來回捲動。
09 · 核心
分析儀表板 Analytics Dashboard

分析儀表板會組合少量相關數字和圖表。它讓人快速掌握一個問題。
10 · 深入了解
分段控制項 Segmented Control

分段控制項是一排相連的簡短選項，用來切換模式、篩選條件或數值。
11 · 核心
分頁導覽 Pagination

分頁導覽會把一批內容分成有頁碼的頁面，並顯示目前在哪一頁。
12 · 核心
分頁標籤 Tabs

分頁標籤是一排標籤，會切換同一個內容區，但不會離開目前的主要任務。
13 · 核心
分隔元素 Separator

分隔元素是畫面上的分隔線，也可以表示內容或控制項之間的真正界線。若使用者能聚焦並移動它，它就是可調整的分割器。
14 · 核心
分隔線 Divider

分隔線是看得見或帶有語意的邊界，用來分開群組、控制項或不同主題區段。
15 · 核心
分類／狀態標籤 Tag

Tag 是簡短、通常不能點擊的標籤，用來分類項目或顯示穩定狀態。它是設計模式，不是網頁標準。
16 · 深入了解
切換按鈕群組 Toggle Group

一組有標籤的開關按鈕。彼此獨立的選項可以一個或多個保持按下。
17 · 核心
切換開關 Switch

切換開關能開啟或關閉一項設定，而且通常會立即生效。
18 · 核心
引言 Quote

引言會重現或突顯某人的原話，並清楚標示這些話來自誰或哪個來源。
19 · 核心
手風琴式摺疊區 Accordion

手風琴式摺疊區會上下排列多個區段，每個標題都能展開或收合自己的內容。
20 · 深入了解
文字插入游標 Insertion Caret

文字插入游標是可編輯文字中閃爍的直線，會顯示下一個輸入或貼上的字元出現在哪裡。
21 · 核心
文字選取 Text Selection

文字選取是被標記的文字範圍。使用者可選取後複製、替換、註記或編輯。
22 · 核心
文字欄位 Text Field

文字欄位是有標籤的輸入框，通常只有一行高，讓人輸入或修改文字。
23 · 核心
日期與時間選擇器 Date & Time Picker

日期與時間選擇器讓人選擇有效的日期、時間或範圍。它會顯示日曆或時鐘。
24 · 核心
日期選擇器 Date Picker

日期選擇器是讓使用者輸入或從日曆挑選日期的控制項，不包含當天的時間。
25 · 核心
主視覺區 Hero Section

主視覺區是頁面開頭最重要的區域，會快速說明產品承諾、適合誰、有哪些證據，以及下一步要做什麼。
26 · 核心
卡片 Card

卡片是邊界清楚的內容群組，會呈現一個主題、相關資料和操作。
27 · 核心
可存取名稱 Accessible Name

可存取名稱是程式為控制項或圖片算出的標籤。螢幕閱讀器會用它辨識項目。
28 · 核心
可存取說明 Accessible Description

可存取說明會補充元件名稱沒有說明的資訊。它可以解釋格式、限制或操作結果。
29 · 深入了解
可搜尋組合框 Editable Combobox

可搜尋組合框把文字欄位和清單放在一起，輸入時會篩選選項。
30 · 核心
目前項目 Current Item (aria-current)

aria-current 會告訴輔助工具，相關項目中哪一個是目前位置。它不代表項目已被選取。
31 · 核心
全域搜尋 Global Search

全域搜尋會從一個共用搜尋位置，找出 App 裡不同種類的項目。
32 · 核心
名稱值說明清單 Description List

說明清單把名稱和值或說明配在一起。它適合簡短的唯讀資訊。
33 · 核心
回到頁首 Back to Top

回到頁首是長頁面的捷徑。它會把畫面和焦點帶回開頭附近。
34 · 核心
地標區域 Landmark

地標區域是頁面中的主要區塊。輔助科技可讓使用者直接跳到該區塊。
35 · 核心
多行文字欄位 Textarea

多行文字欄位是用來輸入好幾行文字的方框，大小可以固定，也可以讓人調整。
36 · 核心
多步驟表單 Multi-Step Form

多步驟表單會把一個較長任務拆成有順序的小頁面，送出前再檢查答案。
37 · 核心
字幕與逐字稿 Captions and Transcript

字幕是和語音及重要聲音同步的文字。逐字稿則是整段音訊或影片的可閱讀文字版。
38 · 核心
成功狀態 Success State

成功狀態會確認操作已完成，顯示保存下來的結果，以及有用的下一步。
39 · 核心
成員管理 Member Management

成員管理是讓有權管理的人邀請成員、查看狀態、變更角色或移除存取權的地方。
40 · 核心
色彩選擇器 Color Picker

色彩選擇器讓使用者挑選顏色。它可顯示色域、色相滑桿、數值或色票。
41 · 核心
行事曆畫面 Calendar View

行事曆畫面會把排定項目放在日期或時段上。使用者可查看一天、一週或一個月。
42 · 核心
行動呼籲 Call to Action

行動呼籲是清楚的邀請，會引導人前往下一個有用的步驟。
43 · 深入了解
即時更新區域 Live Region

即時更新區域會在重要文字改變時通知輔助科技。它能朗讀更新，而不必移動焦點。
44 · 核心
批次操作 Bulk Actions

批次操作讓使用者選取多個項目，再一次處理整組已選項目。
45 · 核心
更多操作選單按鈕 Overflow Menu Button

一個常以三個點顯示的小按鈕。它會打開版面放不下的次要操作。
46 · 核心
步驟指示器 Steps

步驟指示器顯示使用者目前的位置。流程有固定順序和明確終點。
47 · 核心
角標 Badge

角標是附在另一個項目上的小型提示，本身不能點擊。它用來顯示數量、狀態或短訊號，是設計模式，不是網頁標準。
48 · 核心
定價方案表 Pricing Table

定價方案表會整理方案、價格、限制、包含功能和購買條件，讓人方便比較。
49 · 深入了解
底部工作表 Bottom Sheet

底部面板是適合觸控的面板，會從畫面底部升起，也可能停在幾種不同高度。
50 · 核心
狀態訊息 Status Message

狀態訊息會回報操作結果、進度或等待狀態，但不會打開對話框或搶走焦點。
51 · 核心
社會證明 Social Proof

社會證明是可以查證的證據，顯示相關人士或組織確實使用、信任產品，或從中得到好處。
52 · 核心
空白、錯誤與成功狀態（教學組合） Empty, Error & Success State — Learning Bundle

這個教學組合包含三種不同的應用程式狀態。空白狀態（Empty）表示目前沒有內容，錯誤狀態（Error）表示事情失敗，成功狀態（Success）則確認已完成。每種狀態都需要自己的訊息和下一步。這個組合不是單一標準狀態術語。
53 · 核心
空白狀態 Empty State

空白狀態會在清單或工作空間目前沒有內容時出現，說明原因並提供有用的下一步。
54 · 核心
表單標籤 Form Label

表單標籤說明欄位要填什麼。程式會把標籤連到對應的控制項。
55 · 核心
表單欄位 Form Field

一個完整的輸入單元，包含可見標籤、控制項、選用提示、驗證狀態和相連的錯誤訊息。
56 · 核心
表單驗證 Form Validation

表單驗證用規則和訊息找出漏填或填錯的內容。它也會避免並說明這些錯誤。
57 · 深入了解
指令面板 Command Palette

指令面板是以鍵盤操作為主的搜尋面板，可以開啟功能、頁面和最近使用的項目。
58 · 核心
指令選單 Menu

指令選單是一組操作或選項，並有專用的鍵盤焦點規則。它通常會從按鈕或其他指令區開啟。
59 · 核心
指標與游標 Pointer & Cursor

指標或游標會顯示指向裝置目前在螢幕上的位置。不同形狀可表示選取、輸入文字、拖曳或調整大小。也能表示等待或無法使用。
60 · 核心
按鈕 Button

按鈕是一種控制項，按下後會在目前畫面執行一件事。
61 · 深入了解
活動紀錄 Activity Log

活動紀錄會依時間列出產品內的動作。每一列都會說明誰對哪個項目做了什麼。
62 · 核心
訂閱管理 Subscription Management

訂閱管理會顯示客戶目前的付費方案，並讓客戶了解或變更之後的收費。
63 · 核心
展開收合控制 Disclosure

展開收合控制是一個顯示或隱藏相關區段的按鈕。它也會告訴軟體該區段是否已展開。
64 · 核心
時間軸 Timeline

時間軸會沿著一條看得見的路徑，依時間順序排列事件、狀態或重要進度。
65 · 核心
時間選擇器 Time Picker

時間選擇器是讓使用者輸入或選擇當地時間的控制項，時間間隔和地區顯示格式都要清楚。
66 · 核心
核取方塊 Checkbox

核取方塊可以勾選或取消，每個選項都能單獨成立。
67 · 核心
浮動框 Popover

浮動框是連在開啟控制項旁的小面板，可以放有結構的內容和操作，而且不會擋住整個頁面。
68 · 核心
骨架畫面 Skeleton

骨架畫面是簡單的佔位內容，形狀會接近正在載入的真正內容。
69 · 核心
側滑面板 Drawer

側滑面板會從螢幕邊緣滑入，同時保留一部分底下的畫面。
70 · 核心
側邊欄與導覽軌（教學組合） Sidebar & Navigation Rail — Learning Bundle

這個教學組合比較兩種不同的導覽模式。Sidebar 較寬，會放文字標籤或工具；Navigation Rail 較窄，通常以圖示為主。這個組合不是單一標準介面術語。
71 · 核心
側欄導覽 Sidebar Navigation

側欄導覽是放在畫面側邊、可以常駐或收合的具名連結區，常用來分組產品中的相關位置。
72 · 核心
唯讀欄位 Read-only Field

唯讀欄位仍能取得焦點，也能複製內容。使用者不能修改欄位值。
73 · 核心
常見問答 FAQ

常見問答會整理人們在做決定或求助前一再提出的問題，並用他們熟悉的詞彙和情境回答。
74 · 核心
強制回應對話框 Modal Dialog

強制回應對話框是一個聚焦的小視窗，在關閉或完成前，會擋住目前畫面的其他操作。
75 · 深入了解
強制色彩模式 Forced Colors Mode

強制色彩模式會用使用者選擇的系統色盤，取代許多網站配色。這能讓控制項和文字更容易分辨。
76 · 深入了解
情境選單 Context Menu

情境選單會顯示和目前物件或區域有關的指令，常用滑鼠右鍵或情境選單鍵開啟。
77 · 核心
清單 List

清單是一組相關項目，會依有意義或容易閱讀的順序排列。
78 · 核心
略過導覽連結 Skip Link

略過導覽連結讓鍵盤使用者跳過重複選單。它會把焦點移到主要內容或重要區域。
79 · 核心
聊天介面 Chat UI

聊天介面包含訊息、作者、輸入區、傳送狀態與附件。它也提供錯誤復原方法。
80 · 核心
設定頁 Settings Page

設定頁會放置影響多個任務的 App 選項。好的預設值能讓多數人直接開始。
81 · 核心
連結 Link

連結是可以點選的文字或媒體，會帶你前往另一個頁面、檔案或位置。
82 · 深入了解
單一 Tab 停靠點 Roving tabindex

Roving tabindex 讓一組控制項只占一個 Tab 停靠點。進入後，方向鍵會在同組項目之間移動焦點。
83 · 核心
單選按鈕群組 Radio Group

單選按鈕群組會顯示多個選項，但一次只能選一個。
84 · 核心
媒體播放器 Media Player

媒體播放器是一組控制音訊或影片的元件，包含播放、進度、音量、字幕和其他播放選項。
85 · 核心
替代文字 Alternative Text

替代文字會在使用者看不到圖片時，說明圖片的重要資訊。內容應符合圖片在該頁面的用途。
86 · 深入了解
無限捲動 Infinite Scroll

無限捲動是一種動態牆模式，讀者快到目前底部時，會再載入更多內容。
87 · 核心
焦點順序 Focus Order

焦點順序是鍵盤焦點在頁面上移動的路徑。它應符合閱讀和操作順序。
88 · 核心
焦點管理 Focus Management

焦點管理會在畫面改變後，把鍵盤的操作位置移到合理的地方。暫時畫面關閉時，也會把焦點送回原處。
89 · 核心
登入表單 Sign-In Form

用來收集帳號資料並登入的表單。它要支援帳號復原、密碼管理器、清楚的錯誤訊息和安全傳送。
90 · 核心
短暫通知 Toast

短暫通知是不會擋住頁面的簡短狀態訊息，通常會自己消失。
91 · 核心
統計數值 Statistic

統計數值會凸顯一個數字。名稱、單位、期間和背景會說明它的意思。
92 · 核心
評分控制 Rating

評分控制會把意見放到固定尺度上，例如星等、數字或有名稱的等級。
93 · 核心
進度列 Progressbar

進度列會顯示一項耗時工作完成了多少。使用者可以查看，但不能直接調整它。
94 · 核心
進度指示器 Progress Indicator

進度指示器會告訴人工作還在進行。進度條或進度環顯示已知進度；載入轉圈表示不知道還要等多久。
95 · 核心
量值指示器 Meter

量值指示器會顯示一個已知範圍內的測量值，也可以標出偏低、偏高和最佳範圍。
96 · 深入了解
階層式連動選擇器 Cascader

階層式連動選擇器會逐層顯示選項。選好一層，才會開啟下一層。
97 · 深入了解
階層式資料網格 Treegrid

階層式資料網格是一種互動表格，其中的列可以有子列。使用者能展開不同層級，儲存格仍會對齊各欄。
98 · 核心
搜尋欄位 Search Field

搜尋欄位是專門用來找內容的文字框，會尋找可能符合輸入文字的結果。
99 · 核心
滑桿 Slider

滑桿讓你沿著軌道移動滑塊，以選擇一個數值或一段範圍。
100 · 核心
資料表格 Table

資料表格會把相關資料排在有標題的列和欄中，通常只能閱讀，或只有簡單操作。
101 · 核心
資料匯入流程 Data Import Workflow

資料匯入流程會檢查上傳檔案、對應欄位、預覽變更，並回報每一筆匯入結果。
102 · 核心
載入轉圈 Spinner

載入轉圈是重複播放的動畫；無法提供有意義的完成比例時，它會表示工作仍在進行。
103 · 核心
圖片 Image

圖片是內容中的視覺素材。它需要符合用途的尺寸、載入、裁切和替代文字規則。
104 · 核心
圖示 Icon

圖示是小型符號，能幫助人辨認操作、物件、狀態或分類。
105 · 深入了解
圖表 Chart

圖表把資料變成圖像。它可呈現比較、趨勢、分布或關係。
106 · 核心
漢堡選單 Hamburger Menu

一個有三條線的選單按鈕。空間不夠顯示主要導覽時，可以用它打開導覽。
107 · 核心
網站頁尾 Site Footer

網站頁尾是全站共用的結尾區域，會放次要連結、法律資訊、聯絡方式和信任資訊。
108 · 核心
網站頁首 Site Header

網站頁首是最上方的區域，放置品牌、主要導覽、帳戶和全站工具。
109 · 核心
語意化 HTML Semantic HTML

語意化 HTML 是依元素的用途選擇 HTML，而不只看外觀。即使沒有 CSS，頁面仍保有結構和原生行為。
110 · 核心
導覽列 Navigation Bar

導覽列會整理主要頁面連結，並標出目前開啟的頁面。
111 · 核心
導覽軌 Navigation Rail

導覽軌是放在畫面邊緣的簡短直向清單，列出應用程式的主要位置。它是常見的設計模式，不是網頁標準。
112 · 深入了解
數字步進器（視覺模式） Numeric Stepper (Visual Pattern)

數字步進器會顯示可輸入的數字，旁邊有增加和減少控制。它可以採用原生數字輸入或 ARIA Spinbutton 語意，但只有加減按鈕並不會自動具備這些語意。
113 · 深入了解
數值微調輸入 Spinbutton

`spinbutton` 是 ARIA 對數值範圍控制項的正式名稱。使用者通常可以直接輸入數值，也可以逐步增加或減少。數字步進器只是它常見的一種外觀。
114 · 核心
標題層級 Heading Hierarchy

標題層級用不同層級的標題，說明頁面各區段的關係。
115 · 深入了解
調整大小控點 Resize Handle

調整大小控點是邊緣或角落上的可見操作點，拖曳後能改變面板、欄位、欄或物件的大小。
116 · 核心
輪播 Carousel

輪播是一串面板，可以用箭頭、圓點或滑動手勢，一次看一張或幾張。
117 · 深入了解
遮罩層 Scrim

遮罩層是覆蓋介面後方的半透明深色背景，用來分開兩個層次，並表示底下的頁面暫時不能操作。
118 · 核心
操作目標尺寸 Target Size

目標尺寸是使用者可點擊或觸控控制項的完整範圍。它可以比畫面上的圖示更大。
119 · 深入了解
樹狀選擇器 Tree Select

樹狀選擇器用可展開的樹顯示巢狀選項。它可支援單選或多選。
120 · 核心
樹狀檢視 Tree View

樹狀檢視是有層級的清單，上層項目可以展開或收合，顯示裡面的子項目。
121 · 深入了解
燈箱檢視 Lightbox

燈箱檢視會把圖片或影片放大，並讓周圍頁面變暗。
122 · 核心
篩選器 Filter

篩選器會依選定條件，只顯示符合的項目，但不會改變來源資料。
123 · 深入了解
選單列 Widget Menubar

選單列（Menubar）是持續顯示、通常橫向排列的選單。裡面的項目會開啟指令或子選單，並使用應用程式式鍵盤規則。
124 · 深入了解
選單按鈕 Menu Button

選單按鈕會打開一組操作或選擇，並告訴軟體選單是否已展開。
125 · 深入了解
選單與選單列（教學組合） Menu & Menubar — Learning Bundle

這個教學組合比較兩個不同術語。選單（Menu）會列出指令；選單列（Menubar）是一直顯示的指令選單群組。這個組合不是單一標準介面術語。
126 · 深入了解
選項清單 Listbox

選項清單是自訂的選擇清單。它會管理目前所在的選項，以及方向鍵如何在清單中移動。
127 · 核心
錯誤狀態 Error State

錯誤狀態會在操作或畫面失敗時持續顯示，說明具體問題，並提供安全的復原方法。
128 · 核心
錯誤摘要 Error Summary

錯誤摘要是表單上方的短清單。每一項會說明錯誤，也能帶使用者前往要修改的欄位。
129 · 核心
頭像 Avatar

頭像是小圖片、姓名縮寫或符號，用來協助辨認個人、團隊、機器人或帳戶。
130 · 核心
檔案上傳 File Upload

檔案上傳包含從裝置選取、檢查和傳送檔案。也包括管理檔案的控制項與流程。
131 · 核心
環形進度指示器 Progress Ring

用圓環顯示一項可計算任務完成多少，讓人一眼看懂目前進度。
132 · 核心
鍵盤焦點陷阱 Keyboard Trap

鍵盤焦點陷阱是焦點進入頁面某處後，無法再用鍵盤離開。
133 · 深入了解
懸停資訊卡 Hover Card

懸停資訊卡是內容較多的預覽，當滑鼠停在參照物上或鍵盤焦點移入時開啟，而且不會擋住頁面。
134 · 深入了解
警示、橫幅與通知（教學組合） Alert, Banner & Notification — Learning Bundle

這個教學組合比較三種回饋。警示（Alert）傳達重要狀態；橫幅（Banner）橫跨一個區域；通知（Notification）會進入之後能回看的訊息流。這個組合不是單一標準狀態模式。
135 · 核心
警示訊息 Alert

警示訊息是簡短而重要的通知，會在不移動鍵盤焦點下讀出，也不要求使用者立刻回答。
136 · 深入了解
警示對話框 Alert Dialog

警示對話框是處理緊急選擇的模態對話框，人們必須先了解後果才能繼續。
137 · 核心
麵包屑導覽 Breadcrumb

麵包屑導覽是一條連結路徑，會顯示目前頁面和它的上層頁面。
138 · 核心
欄位群組與群組標題 Fieldset and Legend

`<fieldset>` 和 `<legend>` 是 HTML 內建元素，用來把相關的表單控制項分成一組。`<legend>` 會說明這一組共同的問題。
139 · 核心
權限矩陣 Permission Matrix

權限矩陣會顯示每個角色能在指定範圍做哪些事，讓存取規則更容易比較。
140 · 核心
App 內通知中心 In-App Notification Center

App 內通知中心會把有用更新放在同一處。每則通知會顯示變更內容、時間和未讀狀態。
141 · 深入了解
ARIA 互動網格 ARIA Grid

ARIA 互動網格是一組可以操作的列與儲存格。方向鍵可讓焦點往上、下、左、右移動。
142 · 深入了解
ARIA 動態內容流模式 ARIA Feed Pattern

ARIA 動態內容流是一串會持續變動、像文章一樣的項目。使用者瀏覽時，它可能加入新項目或移除舊項目。
143 · 深入了解
Badge、Chip 與 Tag（教學組合） Badge, Chip & Tag — Learning Bundle

這個教學組合比較三個會因設計系統而不同的名稱。徽章（Badge）常顯示狀態或數量，標籤（Tag）用來分類，小標籤（Chip）則可以操作。這個組合不是單一標準元件術語。
144 · 核心
Banner 頁首地標 Banner Landmark

Banner 頁首地標是整個網站的主要頁首區。寬版公告橫條有時也叫 Banner，但那是另一種設計模式。
145 · 核心
Chip 互動式標籤元件 Chip

Chip 是小型互動元件，可以代表輸入內容、篩選條件、選項或可移除項目。它會做什麼必須說清楚。
146 · 核心
Kanban 工作看板 Kanban Board

Kanban 工作看板會顯示工作真正經過的步驟。卡片代表工作，在製上限可避免一次開工太多。
147 · 深入了解
Web 系統通知 Web Notification

Web 系統通知是瀏覽器或作業系統在網頁以外顯示的訊息。使用者必須先同意，通知也要遵守系統規則。