按主题找术语 · 147 份指南

界面组件

认识按钮、菜单、表单，以及界面上其他操作组件的正确名称。

01 / 术语图鉴

全部界面组件术语

打开一个术语，就能看简单解释、示例、使用时机、正式程度和代码名称。

01 · 核心
按钮 Button

按钮是一种控件，按下后会在当前页面执行一件事。
02 · 核心
标题层级 Heading Hierarchy

标题层级用不同级别的标题，说明页面各部分的关系。
03 · 核心
表单标签 Form Label

表单标签说明字段要填什么。代码会把标签关联到对应控件。
04 · 核心
表单校验 Form Validation

表单校验用规则和消息找出漏填或填错的内容。它也会避免并说明这些错误。
05 · 核心
表单字段 Form Field

一个完整的输入单元，包含可见标签、控件、可选提示、验证状态和关联的错误信息。
06 · 核心
步骤指示器 Steps

步骤指示器显示用户当前的位置。流程有固定顺序和明确终点。
07 · 深入了解
菜单按钮 Menu Button

菜单按钮会打开一组操作或选择，并告诉软件菜单是否已展开。
08 · 深入了解
菜单栏 Widget Menubar

菜单栏（Menubar）是持续显示、通常横向排列的菜单。里面的项目会打开命令或子菜单，并使用应用式键盘规则。
09 · 深入了解
菜单与菜单栏（教学组合） Menu & Menubar — Learning Bundle

这个教学组合比较两个不同术语。菜单（Menu）会列出命令；菜单栏（Menubar）是一直显示的命令菜单组。这个组合不是单一标准界面术语。
10 · 核心
操作目标尺寸 Target Size

目标尺寸是用户可以点击或触控控件的完整范围。它可以比页面上的图标更大。
11 · 核心
侧边栏导航 Sidebar Navigation

侧边栏导航是放在屏幕侧边、可以常驻或收起的命名链接区，常用来分组产品中的相关位置。
12 · 核心
侧边栏与导航轨（教学组合） Sidebar & Navigation Rail — Learning Bundle

这个教学组合比较两种不同的导航模式。Sidebar 较宽，会放文字标签或工具；Navigation Rail 较窄，通常以图标为主。这个组合不是单一标准界面术语。
13 · 深入了解
层级数据网格 Treegrid

层级数据网格是一种交互表格，其中的行可以有子行。用户能展开不同层级，单元格仍会对齐各列。
14 · 核心
常见问题 FAQ

常见问题会整理用户在做决定或求助前反复提出的问题，并用他们熟悉的词语和场景回答。
15 · 核心
成功状态 Success State

成功状态会确认操作已经完成，显示保存下来的结果，以及有用的下一步。
16 · 核心
成员管理 Member Management

成员管理是让有权管理的人邀请成员、查看状态、更改角色或移除访问权的地方。
17 · 核心
抽屉 Drawer

抽屉会从屏幕边缘滑入，同时保留一部分底层页面。
18 · 核心
错误摘要 Error Summary

错误摘要是表单上方的短列表。每一项会说明错误，也能带用户前往要修改的字段。
19 · 核心
错误状态 Error State

错误状态会在操作或页面失败时持续显示，说明具体问题，并提供安全的恢复方法。
20 · 核心
单选按钮组 Radio Group

单选按钮组会显示多个选项，但一次只能选一个。
21 · 深入了解
单一 Tab 停靠点 Roving tabindex

Roving tabindex 让一组控件只占一个 Tab 停靠点。进入后，方向键会在同组项目之间移动焦点。
22 · 核心
弹出框 Popover

弹出框是连在打开控件旁的小面板，可以放有结构的内容和操作，而且不会挡住整个页面。
23 · 核心
当前项目 Current Item (aria-current)

aria-current 会告诉辅助工具，相关项目中哪一个是当前位置。它不代表项目已被选中。
24 · 核心
导航轨 Navigation Rail

导航轨是放在屏幕边缘的简短竖向列表，列出应用的主要位置。它是常见的设计模式，不是网页标准。
25 · 核心
导航栏 Navigation Bar

导航栏会整理主要页面链接，并标出当前打开的页面。
26 · 核心
地标区域 Landmark

地标区域是页面中的主要区块。辅助技术可让用户直接跳到该区块。
27 · 深入了解
灯箱查看器 Lightbox

灯箱查看器会把图片或视频放大，并让周围页面变暗。
28 · 核心
登录表单 Sign-In Form

用来收集账号信息并登录的表单。它要支持账号找回、密码管理器、清楚的错误信息和安全传输。
29 · 深入了解
底部面板 Bottom Sheet

底部面板是适合触控的面板，会从页面底部升起，也可能停在几种不同高度。
30 · 深入了解
调整大小手柄 Resize Handle

调整大小手柄是边缘或角落上的可见操作点，拖动后能改变面板、字段、列或对象的大小。
31 · 核心
订阅管理 Subscription Management

订阅管理会显示客户当前的付费套餐，并让客户了解或更改之后的收费。
32 · 核心
定价套餐表 Pricing Table

定价套餐表会整理套餐、价格、限制、包含功能和购买条件，让用户方便比较。
33 · 核心
多步骤表单 Multi-Step Form

多步骤表单会把一个较长任务拆成有顺序的小页面，提交前再检查答案。
34 · 核心
多行文本框 Textarea

多行文本框是用来输入多行文字的方框，大小可以固定，也可以让用户调整。
35 · 核心
返回顶部 Back to Top

返回顶部是长页面的快捷方式。它会把页面和焦点带回开头附近。
36 · 深入了解
分段控件 Segmented Control

分段控件是一排相连的简短选项，用来切换模式、筛选条件或数值。
37 · 核心
分隔线 Divider

分隔线是看得见或带有语义的边界，用来分开分组、控件或不同主题区块。
38 · 核心
分隔元素 Separator

分隔元素是页面上的分隔线，也可以表示内容或控件之间的真正界线。如果用户能聚焦并移动它，它就是可调整的分割器。
39 · 核心
分类／状态标签 Tag

Tag 是简短、通常不能点击的标签，用来分类项目或显示稳定状态。它是设计模式，不是网页标准。
40 · 核心
分析仪表盘 Analytics Dashboard

分析仪表盘会组合少量相关数字和图表。它让人快速掌握一个问题。
41 · 核心
分页导航 Pagination

分页导航会把一批内容分成带页码的页面，并显示当前在哪一页。
42 · 核心
复选框 Checkbox

复选框可以勾选或取消，每个选项都能单独成立。
43 · 核心
更多操作菜单按钮 Overflow Menu Button

一个常用三个点显示的小按钮。它会打开页面放不下的次要操作。
44 · 深入了解
工具栏 Toolbar

工具栏是一组有名称、而且常用的控件。按 Tab 只会进入这组一次，再用方向键在里面移动。
45 · 核心
工具提示 Tooltip

工具提示是控件的一小段说明。当鼠标悬停或键盘焦点移到图标时，它会出现，而且本身不能操作。
46 · 核心
骨架屏 Skeleton

骨架屏是简单的占位内容，形状会接近正在加载的真实内容。
47 · 核心
汉堡菜单 Hamburger Menu

一个有三条线的菜单按钮。空间不够显示主导航时，可以用它打开导航。
48 · 核心
滑块 Slider

滑块让你沿着轨道移动滑块，以选择一个数值或一段范围。
49 · 核心
环形进度指示器 Progress Ring

用圆环显示一项可计算任务完成了多少，让人一眼看懂当前进度。
50 · 核心
徽标 Badge

徽标是附在另一个项目上的小型提示，本身不能点击。它用来显示数量、状态或简短信号，是设计模式，不是网页标准。
51 · 深入了解
活动记录 Activity Log

活动记录会按时间列出产品内的操作。每一行都会说明谁对哪个项目做了什么。
52 · 深入了解
级联选择器 Cascader

级联选择器会逐级显示选项。选好一级，才会打开下一级。
53 · 核心
加载转圈 Spinner

加载转圈是重复播放的动画；无法提供有意义的完成比例时，它会表示工作仍在进行。
54 · 核心
键盘焦点陷阱 Keyboard Trap

键盘焦点陷阱是焦点进入页面某处后，无法再用键盘离开。
55 · 深入了解
交互式数据网格 Data Grid

交互式数据网格很像应用里的电子表格，可以用来移动、选择、排序或编辑大量数据。
56 · 核心
焦点管理 Focus Management

焦点管理会在页面变化后，把键盘的操作位置移到合理的地方。临时界面关闭时，也会把焦点送回原处。
57 · 核心
焦点顺序 Focus Order

焦点顺序是键盘焦点在页面上移动的路径。它应符合阅读和操作顺序。
58 · 核心
进度条 Progressbar

进度条会显示一项耗时工作完成了多少。用户可以查看，但不能直接调整它。
59 · 核心
进度指示器 Progress Indicator

进度指示器会告诉用户工作还在进行。进度条或进度环显示已知进度；加载转圈表示不知道还要等多久。
60 · 深入了解
警告、横幅与通知（教学组合） Alert, Banner & Notification — Learning Bundle

这个教学组合比较三种反馈。警告（Alert）传达重要状态；横幅（Banner）横跨一个区域；通知（Notification）会进入之后能查看的消息流。这个组合不是单一标准状态模式。
61 · 深入了解
警告对话框 Alert Dialog

警告对话框是处理紧急选择的模态对话框，用户必须先了解后果才能继续。
62 · 核心
警示消息 Alert

警示消息是简短而重要的通知，会在不移动键盘焦点的情况下播报，也不要求用户立刻回答。
63 · 核心
卡片 Card

卡片是边界清楚的内容组，会呈现一个主题、相关信息和操作。
64 · 核心
可访问描述 Accessible Description

可访问描述会补充组件名称没有说明的信息。它可以解释格式、限制或操作结果。
65 · 核心
可访问名称 Accessible Name

可访问名称是程序为控件或图片算出的标签。屏幕阅读器会用它识别项目。
66 · 深入了解
可搜索组合框 Editable Combobox

可搜索组合框把文本字段和列表放在一起，输入时会筛选选项。
67 · 核心
空白、错误与成功状态（教学组合） Empty, Error & Success State — Learning Bundle

这个教学组合包含三种不同的应用状态。空白状态（Empty）表示目前没有内容，错误状态（Error）表示操作失败，成功状态（Success）则确认已经完成。每种状态都需要自己的消息和下一步。这个组合不是单一标准状态术语。
68 · 核心
空状态 Empty State

空状态会在列表或工作区当前没有内容时出现，说明原因并提供有用的下一步。
69 · 核心
链接 Link

链接是可以点击的文字或媒体，会带你前往另一个页面、文件或位置。
70 · 核心
量值指示器 Meter

量值指示器会显示一个已知范围内的测量值，也可以标出偏低、偏高和最佳范围。
71 · 核心
聊天界面 Chat UI

聊天界面包含消息、发送者、输入区、发送状态和附件。它也提供错误恢复方法。
72 · 核心
列表 List

列表是一组相关项目，会按有意义或容易阅读的顺序排列。
73 · 核心
轮播 Carousel

轮播是一组面板，可以用箭头、圆点或滑动手势，一次看一张或几张。
74 · 核心
媒体播放器 Media Player

媒体播放器是一组控制音频或视频的组件，包含播放、进度、音量、字幕和其他播放选项。
75 · 核心
面包屑导航 Breadcrumb

面包屑导航是一条链接路径，会显示当前页面和它的上级页面。
76 · 核心
名称值说明列表 Description List

描述列表把名称和值或说明配在一起。它适合简短的只读信息。
77 · 核心
命令菜单 Menu

命令菜单是一组操作或选项，并有专用的键盘焦点规则。它通常会从按钮或其他命令区打开。
78 · 深入了解
命令面板 Command Palette

命令面板是以键盘操作为主的搜索面板，可以打开功能、页面和最近使用的项目。
79 · 核心
模态对话框 Modal Dialog

模态对话框是一个聚焦的小窗口，在关闭或完成前，会挡住当前页面的其他操作。
80 · 核心
内容重排 Content Reflow

内容重排会把页面排进较窄的空间，不会丢失内容或功能。大多数阅读不该需要两个方向来回滚动。
81 · 核心
批量操作 Bulk Actions

批量操作让用户选中多个项目，再一次处理整组已选项目。
82 · 核心
评分控件 Rating

评分控件会把意见放到固定尺度上，例如星级、数字或有名称的等级。
83 · 深入了解
强制颜色模式 Forced Colors Mode

强制颜色模式会用用户选择的系统色板，替换许多网页配色。这能让控件和文字更容易分辨。
84 · 深入了解
切换按钮组 Toggle Group

一组有标签的开关按钮。互相独立的选项可以有一个或多个保持按下。
85 · 核心
切换开关 Switch

切换开关能打开或关闭一项设置，而且通常会立即生效。
86 · 核心
轻提示 Toast

轻提示是不会挡住页面的简短状态消息，通常会自己消失。
87 · 核心
全局搜索 Global Search

全局搜索会从一个共用搜索位置，找出应用里不同类型的项目。
88 · 核心
权限矩阵 Permission Matrix

权限矩阵会显示每个角色能在指定范围做哪些事，让访问规则更容易比较。
89 · 核心
日历视图 Calendar View

日历视图会把计划项目放在日期或时段上。用户可查看一天、一周或一个月。
90 · 核心
日期选择器 Date Picker

日期选择器是让用户输入或从日历挑选日期的控件，不包含当天的时间。
91 · 核心
日期与时间选择器 Date & Time Picker

日期和时间选择器让人选择有效的日期、时间或范围。它会显示日历或时钟。
92 · 核心
筛选器 Filter

筛选器会按选定条件，只显示符合的项目，但不会改变源数据。
93 · 深入了解
上下文菜单 Context Menu

上下文菜单会显示和当前对象或区域有关的命令，常用鼠标右键或菜单键打开。
94 · 核心
设置页 Settings Page

设置页会放置影响多个任务的应用选项。好的默认值能让多数人直接开始。
95 · 核心
社会证明 Social Proof

社会证明是可以查证的证据，显示相关个人或组织确实使用、信任产品，或从中得到好处。
96 · 核心
时间选择器 Time Picker

时间选择器是让用户输入或选择当地时间的控件，时间间隔和地区显示格式都要清楚。
97 · 核心
时间轴 Timeline

时间轴会沿着一条看得见的路径，按时间顺序排列事件、状态或重要进度。
98 · 深入了解
实时更新区域 Live Region

实时更新区域会在重要文字变化时通知辅助技术。它能播报更新，而不必移动焦点。
99 · 核心
手风琴折叠面板 Accordion

手风琴折叠面板会上下排列多个区块，每个标题都能展开或收起自己的内容。
100 · 核心
首屏主视觉区 Hero Section

首屏主视觉区是页面开头最重要的区域，会快速说明产品承诺、适合谁、有哪些证据，以及下一步要做什么。
101 · 核心
树形视图 Tree View

树形视图是带层级的列表，上级项目可以展开或收起，显示里面的子项目。
102 · 深入了解
树选择器 Tree Select

树选择器用可展开的树显示嵌套选项。它可支持单选或多选。
103 · 核心
数据表格 Table

数据表格会把相关数据排在带标题的行和列中，通常只能阅读，或只有简单操作。
104 · 核心
数据导入流程 Data Import Workflow

数据导入流程会检查上传文件、对应字段、预览更改，并报告每一条导入结果。
105 · 深入了解
数值微调输入 Spinbutton

`spinbutton` 是 ARIA 对数值范围控件的正式名称。用户通常可以直接输入数值，也可以逐步增加或减少。数字步进器只是它常见的一种外观。
106 · 深入了解
数字步进器（视觉模式） Numeric Stepper (Visual Pattern)

数字步进器会显示可输入的数字，旁边有增加和减少控件。它可以采用原生数字输入或 ARIA Spinbutton 语义，但只有加减按钮并不会自动具备这些语义。
107 · 核心
搜索框 Search Field

搜索框是专门用来找内容的文本框，会查找可能符合输入文字的结果。
108 · 核心
替代文本 Alternative Text

替代文本会在用户看不到图片时，说明图片的重要信息。内容应符合图片在该页面的用途。
109 · 核心
跳过导航链接 Skip Link

跳过导航链接让键盘用户跳过重复菜单。它会把焦点移到主要内容或重要区域。
110 · 核心
统计数值 Statistic

统计数值会突出一个数字。名称、单位、周期和背景会说明它的含义。
111 · 核心
头像 Avatar

头像是小图片、姓名首字母或符号，用来帮助辨认个人、团队、机器人或账户。
112 · 核心
图标 Icon

图标是小型符号，能帮助用户辨认操作、对象、状态或分类。
113 · 深入了解
图表 Chart

图表把数据变成图形。它可呈现比较、趋势、分布或关系。
114 · 核心
图片 Image

图片是内容中的视觉素材。它需要符合用途的尺寸、加载、裁剪和替代文本规则。
115 · 核心
网站页脚 Site Footer

网站页脚是全站共用的结尾区域，会放次级链接、法律信息、联系方式和信任信息。
116 · 核心
网站页头 Site Header

网站页头是最上方的区域，放置品牌、主导航、账户和全站工具。
117 · 深入了解
文本插入光标 Insertion Caret

文本插入光标是可编辑文字中闪烁的竖线，会显示下一个输入或粘贴的字符出现在哪里。
118 · 核心
文本选择 Text Selection

文本选择是被标记的文字范围。用户可选择后复制、替换、批注或编辑。
119 · 核心
文本字段 Text Field

文本字段是带标签的输入框，通常只有一行高，让用户输入或修改文字。
120 · 核心
文件上传 File Upload

文件上传包含从设备选择、检查和发送文件。也包括管理文件的控件与流程。
121 · 深入了解
无限滚动 Infinite Scroll

无限滚动是一种信息流模式，读者快到当前底部时，会再加载更多内容。
122 · 深入了解
下拉菜单与上下文菜单（教学组合） Dropdown & Context Menu — Learning Bundle

这个教学组合按打开方式比较菜单。下拉菜单（Dropdown）从控件打开；上下文菜单（Context Menu）属于某个对象，通常出现在鼠标指针旁。这个组合不是单一标准菜单术语。
123 · 核心
下拉命令菜单 Dropdown Menu

下拉命令菜单是从按钮打开、临时显示在按钮旁的命令列表。它通常由“菜单按钮”和“菜单”两个部分组成。
124 · 核心
下拉选择框 Select

下拉选择框是一个紧凑的控件，会打开固定列表，让用户选择一个值。
125 · 核心
行动号召 Call to Action

行动号召是清楚的邀请，会引导用户前往下一个有用的步骤。
126 · 深入了解
悬浮信息卡 Hover Card

悬浮信息卡是内容较多的预览，当鼠标悬停在引用对象上或键盘焦点移入时打开，而且不会挡住页面。
127 · 核心
选项卡 Tabs

选项卡是一排标签，会切换同一个内容区，但不会离开当前的主要任务。
128 · 深入了解
选项列表 Listbox

选项列表是自定义的选择列表。它会管理当前所在的选项，以及方向键如何在列表中移动。
129 · 核心
颜色选择器 Color Picker

颜色选择器让用户选择颜色。它可显示色域、色相条、数值或色板。
130 · 核心
已保存视图 Saved View

已保存视图会记住列表的筛选、排序和显示方式，让用户再次打开同一个实用视图。
131 · 核心
引语 Quote

引语会重现或突出某人的原话，并清楚标明这些话来自谁或哪个来源。
132 · 核心
应用内通知中心 In-App Notification Center

应用内通知中心会把有用更新放在同一处。每条通知会显示变更内容、时间和未读状态。
133 · 核心
语义化 HTML Semantic HTML

语义化 HTML 是按元素的用途选择 HTML，而不只看外观。即使没有 CSS，页面仍保有结构和原生行为。
134 · 核心
展开收起控件 Disclosure

展开收起控件是一个显示或隐藏相关区域的按钮。它也会告诉软件该区域是否已展开。
135 · 深入了解
遮罩层 Scrim

遮罩层是覆盖界面后方的半透明深色背景，用来分开两个层次，并表示底层页面暂时不能操作。
136 · 核心
只读字段 Read-only Field

只读字段仍能获得焦点，也能复制内容。用户不能修改字段值。
137 · 核心
指针与光标 Pointer & Cursor

指针或光标会显示指点设备当前在屏幕上的位置。不同形状可表示选择、输入文字、拖动或调整大小。也能表示等待或无法使用。
138 · 核心
状态消息 Status Message

状态消息会报告操作结果、进度或等待状态，但不会打开对话框或抢走焦点。
139 · 核心
字段组与组标题 Fieldset and Legend

`<fieldset>` 和 `<legend>` 是 HTML 内置元素，用来把相关的表单控件分成一组。`<legend>` 会说明这一组共同的问题。
140 · 核心
字幕与文字稿 Captions and Transcript

字幕是和语音及重要声音同步的文字。文字稿则是整段音频或视频的可阅读文字版。
141 · 深入了解
ARIA 动态内容流模式 ARIA Feed Pattern

ARIA 动态内容流是一串会持续变化、像文章一样的条目。用户浏览时，它可能加入新条目或移除旧条目。
142 · 深入了解
ARIA 交互网格 ARIA Grid

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 系统通知是浏览器或操作系统在网页以外显示的消息。用户必须先同意，通知也要遵守系统规则。