如何选择合适的图标
图标可以让界面更易于浏览。当人们已经理解这个符号,或图标与清晰的文本标签一起出现时,图标的效果最好。
当含义复杂、抽象或容易被误解时,请使用文本而不是图标。
匹配界面风格
在同一个界面中,为图标使用相同的视觉语言。混合使用不同风格,可能会让相关控件看起来互不相关。
为相关控件使用同一种图标风格
不要在同一个界面中混用互不相关的图标风格
为常见操作使用熟悉的图标
对于人们已经从其他界面中熟悉的常见操作和目标位置,图标很有用。
为常见操作使用广为人知的图标
不要仅为没有通用符号的抽象概念使用图标
使用图标作为视觉锚点
图标可以帮助人们浏览列表、菜单、卡片和重复控件。图标应当辅助文本,而不是与文本争夺注意力。
使用图标,让相关选项更易于浏览
如果图标只会造成视觉杂乱,不要为每一行都添加图标
在紧凑型界面中使用图标
在移动端导航、工具栏、表格和紧凑控件等空间狭小的场景中,图标会很有帮助。当图标不够直观时,请保留标签。
空间允许时,在所有布局变体中保留标签
仅当可见标签无法容纳时,才使用仅含图标的控件
在这些情况下,请确保用户可以通过悬停、聚焦或点击访问标签
即使空间有限,在紧凑布局中也要在图标旁保留文本标签
当没有标签时含义不清晰,不要在紧凑布局中移除标签
仅当图标代表广为人知的操作时,才使用仅含图标的控件
仅当用户可以通过悬停、聚焦或点击访问标签时,才使用仅含图标的控件
选择最清晰的符号
如果存在熟悉的符号,请使用它。新颖的符号会让人们停下来理解界面。
trash用于删除图像
为常见操作使用熟悉的符号
image-off用于删除图像
不要让人们为了常见操作学习新的符号
匹配上下文,而不是每个细节
选择能让操作在当前上下文中最清晰的图标。只有当额外细节能帮助人们理解操作时,更具体的图标才更好。
当周围的界面已经提供对象上下文时,请使用清晰的操作图标
当上下文已经清楚表明对象时,不要添加对象细节
保持图标含义一致
相同含义使用相同的图标,不同含义使用不同的图标。
为不同的用途或含义使用不同的图标
不要为多个不同的用途或含义使用同一个图标
为相同的用途或功能使用同一个图标
不要为相同的用途或功能使用不同的图标
不要为重复的状态装饰添加图标
当颜色、字重、文本或布局已经传达状态时,避免为每个重复的状态标记添加图标。重复的状态图标可能会把有用的列表结构变成视觉噪音。
使用能清楚表达状态的最轻量提示
当重复的状态图标只是在重复列表已有的信息时,不要添加它们
不要替换内置控件提示
不要为已经展示操作方式的控件添加图标。当原生控件的行为和外观保持熟悉时,人们更容易识别它们。
当控件已经传达其行为时,使用内置的视觉提示
不要用主题相似的交互式图标替换原生控件