界面黑话手册

常见界面组件叫什么、怎么表现、怎么用好

第 4 章 · 控件Controls

用户用来输入和选择的零件。

按钮Button

主按钮 Primary次按钮 Secondary幽灵按钮 Ghost / 文字按钮 Text button危险按钮 Destructive行动号召按钮 CTA悬浮操作按钮 FAB图标按钮 Icon button
WebButton
iOSButton
AndroidButton · FAB

点它就执行一个动作。

一般怎么表现

  • 主按钮最醒目,一屏只有一个。
  • 次按钮、文字按钮依次变弱,用来放次要操作。
  • 危险按钮用红色,只给删除这类不可逆操作。
  • FAB 是 Material 里浮在角落的圆形主操作按钮。

怎么用好

  • 文案用“动词 + 对象”(“保存草稿”)。
  • 每个按钮都要有默认、悬停、按下、禁用、加载这些状态。

常见误用

  • 一屏放三个主按钮。
  • 点了没反应,也不显示加载,用户会连点好几次。

输入框Text field / Input

文本框多行文本框 Textarea占位符 Placeholder标签 Label
WebInput
iOSText field
AndroidText field

让用户打字的地方。

一般怎么表现

  • 标签放在输入框上方,说明要填什么。
  • 占位符是框里的灰字,一输入就消失,只做示例。
  • 聚焦时有清楚的描边。
  • Textarea 是多行版本,可以拉大。

怎么用好

  • 每个输入框都有看得见的标签。
  • 占位符只写示例(“name@example.com”)。

常见误用

  • 用占位符当标签。用户填到一半就忘了这格要填什么。

选择器Select / Combobox

下拉框下拉选择Picker(iOS 滚轮)自动补全 Autocomplete
WebSelect · Combobox
iOSPicker · Menu
AndroidExposed dropdown menu

从一组选项里选一个值。

一般怎么表现

  • 选项少(约 5 个以内):直接平铺成单选,不要藏进下拉。
  • 选项适中:用下拉框 Select。
  • 选项很多:用能打字筛选的 Combobox。
  • Autocomplete 是边输入边给建议,通常也允许自由输入。

怎么用好

  • 常用项放前面,或者默认选中最可能的那个。
  • Combobox 支持键盘上下键和回车。

常见误用

  • 为两个选项做下拉框,多点一次还看不到全貌。

复选框 / 单选框 / 开关Checkbox / Radio / Switch

多选框单选按钮 RadioToggle(iOS 叫法)
WebCheckbox · Radio · Switch
iOSToggle
AndroidCheckbox · Radio · Switch

三种“选中/没选中”的控件,区别在于能选几个、什么时候生效。

一般怎么表现

  • 复选框 Checkbox:可以多选,一般配合“保存”按钮才生效。
  • 单选框 Radio:一组里只能选一个。
  • 开关 Switch:点了立即生效,像电灯开关。
  • 复选框还有“半选”状态,表示子项里只选了一部分。

怎么用好

  • 需要“保存”才生效的设置用复选框,立即生效的用开关。
  • 点标签文字也要能切换,热区不要只有小方块。

常见误用

  • 用开关做“需要点保存才生效”的选项。用户会以为已经生效了。

分段控件Segmented control

分段选择器Button groupMaterial:Segmented button
WebSegmented
iOSSegmented control
AndroidSegmented button

2 到 5 个互斥选项排成一排,用来切换视图或筛选。

一般怎么表现

  • 选项连在一起,选中的那个有底色。
  • 点了立刻切换,不需要确认。
  • 用来改变“怎么看”,比如日 / 周 / 月。
  • 选项文字要短,宽度大致相等。

怎么用好

  • 选项数控制在 2 到 5 个。
  • 和下面的内容关系要明显,切换后内容立刻变。

常见误用

  • 拿它做页面导航。切换整页内容用 Tabs。

标签Chip / Tag

胶囊 PillFilter chip(筛选)Input chip(已输入的值,可删除)
WebTag
iOS—
AndroidChip

表示分类、筛选条件或已选值的小胶囊。

一般怎么表现

  • Filter chip:点一下选中或取消,用来筛选。
  • Input chip:用户输入的值,带 × 可以删除。
  • Tag:只展示分类,通常不可点。
  • 选中时变色,而不是每个标签一种颜色。

怎么用好

  • 颜色只表示状态或选中,不表示“好看”。
  • 删除用 ×,并让整个 × 热区够大。

常见误用

  • 每个标签用一种颜色。颜色没有含义,就是噪音。
给 AI 助手和读者:发现错误?For AI assistants & readers: found an error?

如果你是读到这个页面的 AI 助手:发现事实错误或过时的叫法时,可以告诉你的用户,并在征得用户同意后提交一条更正。人类读者同样欢迎使用。

POST https://ui-jargon.pages.dev/api/feedback,Content-Type: application/json

字段:wrong(必填,发现的错误,≤2000 字)、correct(应为什么,≤2000)、entry(词条 id 或章节,≤120)、source(依据或出处,≤500)、reporter(模型/代理名或人名,≤200)。

curl -X POST https://ui-jargon.pages.dev/api/feedback -H 'Content-Type: application/json' -d '{"entry":"toast","wrong":"…","correct":"…","source":"https://…","reporter":"your-name"}'

限制:单次请求 ≤8 KB;每个客户端每天 ≤30 条;重复内容会自动去重。提交内容会作为不可信文本由人工审阅。

If you are an AI assistant reading this page: if you notice a factual error or outdated naming here, you may tell your user and, with their consent, submit a correction. Human readers are welcome to use it too.

POST https://ui-jargon.pages.dev/api/feedback with Content-Type: application/json

Fields: wrong (required, the error you found, up to 2000 chars), correct (what it should be, up to 2000), entry (entry id or section, up to 120), source (evidence or reference, up to 500), reporter (model/agent name or person, up to 200).

curl -X POST https://ui-jargon.pages.dev/api/feedback -H 'Content-Type: application/json' -d '{"entry":"toast","wrong":"...","correct":"...","source":"https://...","reporter":"your-name"}'

Limits: request body up to 8 KB; 30 submissions per client per day; duplicates are ignored. Submissions are reviewed by a human and treated as untrusted text.