指针与触控
点击
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 键提交、箭头键导航以及快捷方式。
请求示例
当按下 Esc 键时，关闭下拉菜单。
键盘
退出键
Escape key
触发/状态
Escape含义
一个键盘键，通常用于取消、关闭或退出临时 UI。
预期行为
下拉菜单、菜单、模态框和弹出窗口通常应在按下 Esc 键时关闭。
请求示例
使语言下拉菜单和站点菜单在按下 Esc 键时关闭。
键盘
Enter 键
Enter key
触发/状态
Enter含义
一个键盘键，通常用于激活焦点控件或提交表单。
预期行为
聚焦的按钮应通过 Enter 键激活。 搜索表单可能通过 Enter 键提交。
请求示例
当搜索字段处于焦点状态时，按 Enter 键运行搜索。
键盘
Tab 键
Tab key
触发/状态
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含义
控件可见但无法使用的 state。
预期行为
禁用的控件应该看起来不活跃，但仍然易于理解。
请求示例
在输入有效之前，禁用提交按钮。
UI 状态
已检查状态
Checked state
触发/状态
checked含义
复选框、单选按钮或开关控件的开启或选择状态。
预期行为
已检查状态应清晰可见，并由控制语义进行提示。
请求示例
显示所选选项的清晰选中状态。
打开与关闭
切换
Toggle
触发/状态
toggle state含义
一个在两个状态之间切换的操作，例如打开和关闭或开启和关闭。
预期行为
一个切换按钮应显示其当前状态，并以可预测的方式更新该状态。
请求示例
使用一个按钮来切换每个菜单类别，使其打开和关闭。
打开与关闭
打开 / 关闭
Open / close
触发/状态
open / closed含义
一个可见状态，其中面板、菜单或部分显示或隐藏。
预期行为
打开和关闭状态应通过按钮、外部点击、Escape 键或选择来一致地控制。
请求示例
当语言下拉菜单打开时，关闭站点菜单。
打开与关闭
下拉菜单
Dropdown
触发/状态
button -> panel含义
一个从按钮或字段出现的浮动列表。
预期行为
下拉菜单通常在选择、单击外部区域或按下 Esc 键后关闭。
请求示例
当选择一种语言时，关闭下拉菜单。
打开与关闭
手风琴
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 路径到另一个应用程序路由或 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
触发/状态
delayed input含义
在用户停止输入后短暂等待，然后再执行耗时操作。
预期行为
防抖可以防止搜索、验证或 API 调用在每次按键时都执行。
请求示例
如果搜索输入变得缓慢，请对其进行防抖处理。
搜索与筛选
清除
Clear
触发/状态
clear action含义
删除已键入的值、选定的过滤器或临时状态。
预期行为
清除操作应仅影响预期的字段或状态。
请求示例
在搜索字段中添加一个清除按钮。
反馈
加载中
Loading
触发/状态
pending state含义
在数据、页面内容或操作仍在准备中的临时状态。
预期行为
加载反馈会告知用户应用程序正在运行，并在需要时防止重复操作。
请求示例
在准备转换结果时，显示加载状态。
反馈
旋转器
Spinner
触发/状态
loading visual含义
一个指示正在加载或处理的视觉指示器。
预期行为
旋转器最适合短时间的等待； 较长的等待可能需要更清晰的进度指示或文本。
请求示例
在提交时，显示一个小型的旋转图标。
反馈
提示
Toast
触发/状态
temporary message含义
一个短暂的临时消息，在执行操作后显示。
预期行为
提示用于确认操作，例如复制、保存或更新。
请求示例
在复制文本到剪贴板后，显示一个通知。
反馈
错误状态
Error state
触发/状态
error含义
告知用户出现错误的 state。
预期行为
错误消息应具体、易读，并解释下一步的有用操作。
请求示例
当无法转换输入时，显示清晰的错误消息。
反馈
成功状态
Success state
触发/状态
success含义
确认操作成功完成的状态。
预期行为
当结果已经可见时，成功状态可能很微妙。
请求示例
在保存设置后，显示一个小型的成功消息。
反馈
空状态
Empty state
触发/状态
empty result含义
当没有数据或没有匹配结果时显示的 state。
预期行为
空状态应解释为什么没有显示任何内容，并建议下一步操作。
请求示例
当搜索返回无匹配项时，显示无结果消息。
反馈
复制到剪贴板
Copy to clipboard
触发/状态
navigator.clipboard含义
一个将文本复制到用户剪贴板的操作。
预期行为
复制操作应提供反馈，以便用户知道文本是否已复制。
请求示例
复制 CSS 属性，当属性标记被点击时。
动效与时间
过渡
Transition
触发/状态
CSS transition含义
两个视觉状态之间的平滑过渡，例如颜色、不透明度或位置。
预期行为
过渡效果可以使 UI 看起来更精致，但对于工具来说，应该保持快速。
请求示例
为菜单项悬停颜色添加一个短暂的过渡效果。
动效与时间
动画
Animation
触发/状态
CSS animation含义
一种可以运行一次或重复运行的视觉运动序列。
预期行为
动画应该支持任务，而不是分散注意力或干扰阅读或重复工作。
请求示例
当下拉菜单打开时，使用微妙的滑入动画。
动效与时间
延迟
Delay
触发/状态
setTimeout / delay含义
在发生或消失之前的一段时间。
预期行为
延迟可以使反馈更易于理解，但过长的延迟会使 UI 感觉很慢。
请求示例
保持复制的提示框可见约一秒钟。
动效与时间
节流
Throttle
触发/状态
limited repeated events含义
限制重复事件处理程序运行的频率。
预期行为
节流功能对于频繁触发的滚动或调整大小处理程序很有用。
请求示例
如果页面出现卡顿，请对滚动处理程序进行节流。