指標與觸控
點擊
Click
觸發/狀態
onClick意思
一種指標動作，其中使用者按下並釋放滑鼠按鈕，以在元素上執行操作。
預期行為
對於開啟選單、提交按鈕、選擇項目或使用連結進行導航等動作，請使用 click。
請求範例
當點擊菜單按鈕時，打開菜單面板。
程式設計
頁面行為用的 UI 互動術語
用來描述按鈕、選單、表單、搜尋、鍵盤操作與回饋狀態的可搜尋參考。
47 個項目
指標與觸控
點擊
Tap
觸發/狀態
touch / pointer意思
一種觸摸屏動作，用戶觸摸並釋放元素。
預期行為
點擊通常在手機和平板電腦上執行與點擊相同的基本操作。
注意
僅限懸停的行為在觸摸設備上不可靠。
請求範例
在行動裝置上，透過點擊而非懸停來開啟類別選單。
指標與觸控
懸停
Hover
觸發/狀態
:hover意思
滑鼠指標懸停在元素上的狀態。
預期行為
懸停可以通過顏色、下劃線、背景或陰影變化來預覽可交互性。
注意
不要讓重要的操作僅僅依賴於懸停。
請求範例
當滑鼠懸停在選單項目上時，變更背景樣式。
指標與觸控
長按
Long press
觸發/狀態
touch hold意思
一種觸摸動作，用戶在元素上按住手指一段時間。
預期行為
長按通常用於執行次要操作，但它不如可見的按鈕那樣容易發現。
注意
避免僅使用長按作為訪問重要功能的唯一方式。
請求範例
不要將重要的操作隱藏在長按操作後面。
指標與觸控
拖曳
Drag
觸發/狀態
pointerdown + pointermove意思
一種指標動作，其中使用者按住並移動元素或選擇。
預期行為
拖曳操作需要清晰的控制點、邊界以及在需要精確度時的備用控制。
請求範例
如果面板可以拖動，則添加一個可見的手柄。
指標與觸控
滑動
Swipe
觸發/狀態
touch move意思
一種觸摸手勢，用戶快速地在屏幕上移動手指。
預期行為
滑動可以移動輪播或面板，但可見的控制元素仍然應該存在。
請求範例
允許在示例之間滑動，但保持箭頭按鈕可見。
鍵盤
鍵盤事件
Keyboard event
觸發/狀態
keydown / keyup意思
一個由按下或釋放鍵盤按鈕引起的交互。
預期行為
鍵盤事件用於 Escape 鍵關閉、Enter 鍵提交、箭頭鍵導航和快捷鍵。
請求範例
當按下 Escape 鍵時，關閉下拉式選單。
鍵盤
退出鍵
Escape key
觸發/狀態
Escape意思
一個常用的鍵盤按鍵，用於取消、關閉或退出一個臨時 UI。
預期行為
下拉選單、選單、對話框和彈出視窗通常應在按下 Escape 鍵時關閉。
請求範例
使語言下拉式選單和網站選單在按下 Escape 鍵時關閉。
鍵盤
Enter 鍵
Enter key
觸發/狀態
Enter意思
一個常用的鍵盤按鍵，用於激活焦點控件或提交表單。
預期行為
焦點按鈕應該通過 Enter 鍵激活。 搜尋表單可能通過 Enter 鍵提交。
請求範例
當搜索欄處於焦點時，按 Enter 鍵執行搜索。
鍵盤
Tab 鍵
Tab key
觸發/狀態
Tab意思
一個鍵盤按鍵，用於在交互式控件之間移動焦點。
預期行為
Tab 順序應遵循可見的閱讀和互動順序。
請求範例
保持標題控制項的自然排序順序。
UI 狀態
焦點
Focus
觸發/狀態
:focus / :focus-visible意思
元素已準備好進行鍵盤輸入或啟用的狀態。
預期行為
焦點控制應具有可見的輪廓或焦點樣式。
請求範例
使焦點搜尋輸入框清晰可見。
UI 狀態
模糊
Blur
觸發/狀態
blur / focusout意思
當元素失去焦點時的狀態變化。
預期行為
模糊可以驗證輸入或關閉輕量級 UI，但它不應該讓使用者感到驚訝。
請求範例
不要清除搜尋文字，當輸入失去焦點時。
UI 狀態
啟用狀態
Active state
觸發/狀態
:active意思
在按下控制時的一種短暫狀態。
預期行為
啟用狀態可以通過稍微改變背景、邊框或位置來顯示按下效果。
請求範例
為圖標按鈕添加一個微妙的按下狀態。
UI 狀態
已選擇的狀態
Selected state
觸發/狀態
selected / aria-current意思
當前列表中選擇的項目的狀態，例如在列表、菜單、標籤組或篩選組中。
預期行為
已選擇的項目應與未選擇的項目在視覺上有所不同。
請求範例
使活躍的類別按鈕與非活躍的按鈕在視覺上明顯不同。
UI 狀態
禁用狀態
Disabled state
觸發/狀態
disabled / aria-disabled意思
一種控制可見但不可使用的狀態。
預期行為
禁用的控件應該看起來不活躍，但仍然易於理解。
請求範例
在輸入有效之前，禁用提交按鈕。
UI 狀態
已檢查的狀態
Checked state
觸發/狀態
checked意思
複選框、單選按鈕或開關控件的開啟或選中狀態。
預期行為
已檢查的狀態應該清晰可見，並且由控制語義來宣告。
請求範例
對於選取的選項，顯示清晰的已選取狀態。
開啟與關閉
切換 (Toggle)
Toggle
觸發/狀態
toggle state意思
一個在兩種狀態之間切換的操作，例如打開和關閉或開和關。
預期行為
復選框應該顯示其當前狀態，並以可預測的方式更新該狀態。
請求範例
使用一個按鈕來切換每個選單類別的開啟和關閉狀態。
開啟與關閉
開啟 / 關閉
Open / close
觸發/狀態
open / closed意思
一個可見性狀態，其中面板、菜單或部分是顯示或隱藏的。
預期行為
開啟和關閉狀態應該由按鈕、外部點擊、Escape 鍵或選擇來一致地控制。
請求範例
當語言下拉式選單打開時，關閉站點選單。
開啟與關閉
下拉選單
Dropdown
觸發/狀態
button -> panel意思
一個從按鈕或字段出現的浮動列表。
預期行為
下拉選單通常在選擇、點擊外部區域或按下 Escape 鍵後關閉。
請求範例
選擇語言後，關閉下拉選單。
開啟與關閉
手風琴
Accordion
觸發/狀態
section toggle意思
一種 UI 模式，其中區段標題會打開或關閉其內容。
預期行為
手風琴應清楚地指示哪些部分是打開的。
請求範例
預設情況下，保持所有手風琴類別關閉。
開啟與關閉
彈出式視窗
Modal
觸發/狀態
open dialog意思
一個焦點覆蓋，出現在頁面上方，通常會遮擋後背景。
預期行為
彈出式視窗需要關閉控制、Escape 鍵行為、焦點處理，以及明確的目的。
請求範例
為彈出窗口添加一個關閉按鈕以及按下 Esc 鍵關閉的功能。
開啟與關閉
外部點擊
Outside click
觸發/狀態
document pointerdown意思
在臨時面板（例如下拉菜單、菜單或彈出窗口）之外的點擊或點擊。
預期行為
臨時面板通常在使用者點擊其外部時會關閉。
注意
屬於同一標題組的控制項，除非邏輯如此設計，否則不應被視為超出範圍。
請求範例
當使用者點擊選單面板之外時，關閉選單。
開啟與關閉
焦點陷阱
Focus trap
觸發/狀態
modal open意思
一種行為，在模態或對話框打開時，將鍵盤焦點保留在內部。
預期行為
焦點陷阱可防止鍵盤使用者意外地移出活動的模態。
請求範例
在視窗關閉之前，將焦點限制在視窗內部。
導覽
連結導航
Link navigation
觸發/狀態
link click意思
通過鏈接移至另一個頁面、路徑或部分內容。
預期行為
鏈接應使用正確的目的地，並且在導航後關閉臨時菜單。
請求範例
當點擊選單連結時，關閉選單。
導覽
路由變更
Route change
觸發/狀態
router navigation意思
從一個應用程式路由或 URL 路徑到另一個的更改。
預期行為
路由變更應更新頁面內容、元數據和活動導航狀態。
請求範例
在路由變更後，更新活動導航狀態。
導覽
滾動
Scroll
觸發/狀態
wheel / touch scroll意思
在內容中移動可見的視窗，內容可能超過螢幕範圍。
預期行為
滾動可以發生在頁面上，也可以發生在具有自身溢出的面板內部。
請求範例
使較長的下拉式選單在面板內滾動，而不是超出螢幕。
導覽
錨點滾動
Anchor scroll
觸發/狀態
href=#id意思
一種鏈接行為，將滾動條滾動到同一頁面上具有匹配 id 的元素。
預期行為
錨點連結對於跳轉到工具、參考資料或部分內容非常有用。
請求範例
使「瀏覽」工具按鈕滾動到工具部分。
輸入與表單
類型
Type
觸發/狀態
input event意思
在輸入框或文本區域中輸入文本或值。
預期行為
類型可以立即更新狀態、驗證輸入或等待提交。
請求範例
在使用者輸入時，更新搜尋結果。
輸入與表單
提交
Submit
觸發/狀態
submit event意思
傳送或應用表單輸入。
預期行為
提交時應驗證必填欄位，在需要時防止意外重新載入，並提供反饋。
請求範例
阻止表單在提交時重新加載頁面。
輸入與表單
重置
Reset
觸發/狀態
reset action意思
將控制或值恢復到其預設狀態。
預期行為
重置應該是可預測的，並且避免在沒有警告的情況下擦除重要的工作。
請求範例
添加一個重置按鈕，該按鈕可以清除搜索並返回到所有類別。
輸入與表單
驗證
Validation
觸發/狀態
input / submit意思
檢查使用者輸入是否完整且有效。
預期行為
驗證應該解釋錯誤的原因以及如何修正。
請求範例
如果輸入值無效，則顯示一個驗證訊息。
搜尋與篩選
搜尋
Search
觸發/狀態
query change意思
根據使用者輸入的文字查找匹配的項目。
預期行為
搜尋應檢查有用的欄位，例如名稱、別名、描述和範例。
請求範例
使搜尋功能匹配韓語單字、英文術語、別名和請求範例。
搜尋與篩選
篩選
Filter
觸發/狀態
filter state意思
將列表縮小到符合所選條件的項目。
預期行為
篩選器應顯示哪些條件已啟用，以及在適用時剩餘多少項目。
請求範例
在 UI 交互項卡上方添加類別過濾器。
搜尋與篩選
排序
Sort
觸發/狀態
sort option意思
根據名稱、日期、優先順序或類別等規則，變更項目的順序。
預期行為
排序不應刪除項目；它僅更改其順序。
請求範例
在過濾後，按字母順序排列匹配的術語。
搜尋與篩選
防抖 (Debounce)
Debounce
觸發/狀態
delayed input意思
在使用者停止輸入後，暫停一段時間，然後再執行耗時的操作。
預期行為
防抖可以防止搜尋、驗證或API呼叫在每次按鍵時都執行。
請求範例
如果搜尋輸入變得緩慢，請使用防抖。
搜尋與篩選
清除
Clear
觸發/狀態
clear action意思
移除輸入的值、選取的篩選器或暫時的狀態。
預期行為
清除操作應僅影響預期的欄位或狀態。
請求範例
在搜索字段中添加一個清晰的按鈕。
回饋
載入中
Loading
觸發/狀態
pending state意思
在數據、頁面內容或操作仍在準備中的臨時狀態。
預期行為
載入提示告知使用者應用程式正在運作，並在需要時防止重複操作。
請求範例
在準備轉換結果時，顯示載入狀態。
回饋
旋轉指示器
Spinner
觸發/狀態
loading visual意思
一個指示正在加載或處理的視覺指示器。
預期行為
旋轉指示器最適合短暫的等待；較長的等待可能需要更清晰的進度或文本。
請求範例
在提交時，顯示一個小的旋轉指示器。
回饋
提示 (Toast)
Toast
觸發/狀態
temporary message意思
一個短暫的臨時訊息，在執行某個動作後出現。
預期行為
提示訊息對於確認操作（例如複製、儲存或更新）非常有用。
請求範例
在複製文字到剪貼簿後，顯示一個提示。
回饋
錯誤狀態
Error state
觸發/狀態
error意思
一種告訴用戶出現錯誤的狀態。
預期行為
錯誤訊息應該具體、易讀，並解釋下一個有用的操作。
請求範例
如果輸入無法轉換，則顯示清晰的錯誤訊息。
回饋
成功狀態
Success state
觸發/狀態
success意思
一種確認動作已成功完成的狀態。
預期行為
當結果已經可見時，成功狀態可能很微妙。
請求範例
在儲存設定後，顯示一個小的成功訊息。
回饋
空狀態
Empty state
觸發/狀態
empty result意思
一種在沒有數據或沒有匹配結果時顯示的狀態。
預期行為
空狀態應解釋為什麼沒有顯示任何內容，並建議下一步操作。
請求範例
如果搜尋沒有返回任何匹配的結果，則顯示「無結果」訊息。
回饋
複製到剪貼簿
Copy to clipboard
觸發/狀態
navigator.clipboard意思
一個將文本放入用戶剪貼板的操作。
預期行為
複製操作應提供回饋，以便使用者知道文字是否已複製。
請求範例
點擊屬性標籤時，複製 CSS 屬性。
動效與時間
轉換
Transition
觸發/狀態
CSS transition意思
兩個視覺狀態之間的平滑變化，例如顏色、不透明度或位置。
預期行為
轉場可以使 UI 感覺更精緻，但對於工具來說，應該保持快速。
請求範例
為菜單項目的懸停顏色添加一個短暫的過渡效果。
動效與時間
動畫
Animation
觸發/狀態
CSS animation意思
一個可以單次或重複執行的視覺運動序列。
預期行為
動畫應該支援任務，而不是分散注意力或干擾閱讀或重複的工作。
請求範例
當下拉式選單開啟時，使用一個微妙的滑動動畫。
動效與時間
延遲
Delay
觸發/狀態
setTimeout / delay意思
在某事發生或消失之前的一段時間。
預期行為
延遲可以使回饋更易於閱讀，但過長的延遲會使 UI 感覺很慢。
請求範例
保持複製的提示框顯示約一秒鐘。
動效與時間
節流 (Throttle)
Throttle
觸發/狀態
limited repeated events意思
限制重複事件處理器可以執行的次數。
預期行為
節流功能對於觸發次數很多的滾動或調整大小處理器非常有用。
請求範例
如果頁面出現卡頓，請對滾動處理器進行節流。