图标按钮
Icon Button
初级通用图标按钮（Icon Button）是用图标代替可见文字来表示操作的按钮，例如编辑器工具栏里的撤销键。它能在空间有限、操作含义容易识别的地方保留功能，同时让界面不被一排文字按钮挤满。
你可能会说：「帮我把编辑器工具栏里的撤销和重做做成只显示图案、点了能操作的按钮。」
动手看看项目周报的操作栏
切换按钮形式，对比同一组操作占用的空间。也可以悬停、按住按钮，或用 Tab 键聚焦，看看它们的交互反馈。
仅图标最省地方，适合编辑、下载这类常见操作；但像「复制」这样的图标，离开场景后可能说不清复制的是什么。
要点图标按钮怎样让人看懂、用得上？
- 1
图标表示操作而非装饰
你可以把它理解成省去了可见文字的按钮：点下去会执行一个动作。比如聊天窗口里的复制图标会复制消息；如果图标只是用来说明状态，没有可点击的操作，它就不是图标按钮。
- 2
看不见文字也要有名称
只有图案时，用户可能猜不准含义，使用屏幕阅读器的人也需要知道它做什么。所以我们会给按钮一个能被辅助技术读取的名称，例如“复制消息”；悬停提示可以补充说明，但不能代替这个名称。
- 3
点击范围与状态同样重要
图案本身可以很小，但可点击区域要方便鼠标和手指操作。我们还要让用户看出它何时获得焦点、何时不可用；如果点击后会切换状态，例如静音，还得让当前状态和下一步操作说得清楚。
容易混淆的地方
它和普通文字按钮做的是同一类事，区别主要在于是否显示文字：如果操作不容易靠图案认出，写着“导出报表”的文字按钮通常更清楚。它也不同于单纯的图标，后者只传达信息，不接受操作；如果点击的目的是去另一个页面，我们通常会用链接，而不是把跳转做成按钮。
什么时候用
适合用
- 做图片编辑器的工具栏时，撤销、重做是频繁使用的操作，用图标按钮能给画布留出更多空间。
- 做文件列表时，每行都要提供“更多操作”，可以用图标按钮打开该文件对应的操作菜单。
- 做聊天界面时，消息旁的复制操作可以收进图标按钮，让多条消息排列得更紧凑。
不适合用
- 做后台的“提交年度结算”操作时，用户需要明确知道后果，直接用带文字的按钮更合适。
- 在帮助中心放一个通往设置页面的入口时，目标是导航而不是执行操作，用文字链接更合适。
- 只想在提示文字旁放一个表示安全的锁形图案时，它不需要响应点击，用普通图标即可。
练一练选一个答案，看看解释
你在做一个 AI 写作工具。每段生成结果旁边空间很窄，需要提供“复制这段内容”的操作。你会怎样设计？
让 AI 帮你做复制给 AI Agent 直接用
请把 AI 写作结果每段旁边的复制操作做成图标按钮：点击后只复制对应段落，给按钮提供可被辅助技术读取的“复制这段内容”名称，并处理键盘焦点、点击范围和复制后的反馈。不要把图标本身当成独立的点击目标。