图标
Icon
初级通用图标（Icon）是用简化图形表示操作、对象或状态的界面元素，常出现在按钮、菜单和提示旁。它帮助用户在有限空间里定位信息；例如用放大镜提示搜索，但含义不够明确时还需要文字。
你可能会说：「我想让工具栏里的搜索、下载这些功能更容易扫到，能不能给它们配上小图形？」
动手看看知识库文档的快捷操作
团队知识库 / 产品设计
组件使用规范查找规范中的内容，或把这份文档的链接发给同事。
快捷操作
图标按钮样式
切换按钮样式，再把鼠标移到右侧操作区，或用 Tab 聚焦按钮。图标能帮人快速定位操作，但图形本身不一定能把意思讲完整。
仅图标最省空间，适合操作密集、用户熟悉的工具栏。放大镜通常容易认出；复制图标却未必能说明复制的是文字还是链接。
要点图标怎样在界面里发挥作用？
- 1
先确定图形要表达什么
你可以用图标提示一个操作，比如放大镜表示搜索；也可以提示对象或状态，比如文件类型和警告。先说清它代表什么，再选图形，才方便判断用户会不会看错。
- 2
图标不等于可点击区域
工具栏里的搜索图标通常放在按钮内，真正接收点击和键盘操作的是按钮。这样做的好处是，图形负责提示含义，按钮负责交互；我们也能分别检查图形是否清楚、控件是否好用。
- 3
没有文字时补上可理解的名称
如果只显示一个图标，用户可能猜不出它的含义，读屏软件也不能只靠图形识别操作。比如图标按钮的功能是下载报表，就给按钮提供“下载报表”这个可访问名称；纯装饰图标则不用重复朗读。
容易混淆的地方
图标是界面中的简化视觉提示，不等于标志或图片。标志主要用来识别品牌，即使它也画得很简洁，目的仍是让人认出是谁；图片可以呈现商品外观、人物或场景，不一定能缩成一个符号。你让 AI 给商品卡片配图时，需要的是图片，不是图标。
什么时候用
适合用
- 后台工具栏有搜索、筛选、下载等操作时，用图标帮助用户快速扫到目标，含义不够直观的操作再配文字。
- 文件列表要区分文件类型时，用图标辅助文件名，让用户不打开文件也能初步辨认。
- 表单校验后要提示错误位置时，在对应字段旁用图标辅助文字说明状态。
不适合用
- 商品详情页要让顾客看清衣服的颜色和版型时，用商品图片；简化图标无法交代这些细节。
- 页面顶部要展示品牌身份时，用标志；通用图标很难让用户知道产品是谁家的。
- 报表要呈现一周内数值怎样变化时，用图表；单个图标表达不了变化趋势。
练一练选一个答案，看看解释
你在做一个后台工具栏，空间只够放一个搜索图形，但用户也会用键盘和读屏软件操作。你会怎么让 AI Agent 实现？
让 AI 帮你做复制给 AI Agent 直接用
请为后台工具栏的搜索、筛选和下载按钮配置图标。图标用于提示操作，不要代替按钮本身；如果界面只显示图标，请给每个按钮提供准确的可访问名称，并检查键盘操作。保持同一工具栏内图标的尺寸和视觉风格一致。