图标Icon
你可能会说
按钮上加个小图形，让人不看字也知道是干嘛的。
图标是用统一的小型视觉符号表示功能、对象或状态的界面元素·搜索、下载和关闭可用熟悉图标帮助扫读。陌生或高风险操作不能只放图标，应补上文字或文字提示 Tooltip。
也常被叫作界面图标功能图标
⌕搜索↓下载⚙设置
容易混淆？这样区分
什么时候用
- 常见工具操作：搜索、关闭、下载⌕↓×搜索 · 下载 · 关闭
- 紧凑工具栏：在有限空间组织一组操作↶↷⌗⋯
- 状态提示：配合文字帮助浏览✓文件已经同步
什么时候不用
- 陌生操作只放图标：补充文字或 文字提示 Tooltip◈图标含义不清楚
- 将不相关的危险操作混入同一个“更多”菜单⋯删除项目藏在“更多”里
- 用 Emoji 替代需要统一线条和语义的系统图标⬇📥⇩三个下载图标，风格各不相同
组成结构 · Anatomy
⌕搜索
轮廓应在小尺寸下仍清楚
陌生或重要操作应补充文字
常见变体 · Variants
独立图标Standalone
⌕
仅作装饰或状态提示时
图标按钮Icon button
执行常见操作时
图标加文字With label
↓ 下载
面向新用户、重要或不可逆操作时
典型使用场景
工具栏
⌕↓⋯
带文字按钮
↓下载报告
状态提示
✓ 已同步
延伸阅读 · 权威出处