怎样统一图标、图片与插画？

统一素材的表达方式，并让看不到图片的人也能获得必要信息。

图标、图片和插画是辅助理解的视觉内容。它们应该说明操作、展示信息或帮助理解，必要的信息不能只藏在图里。

先记住这几件事

• 图标 是表示对象或操作的小图形；不熟悉的含义应配文字，不让用户猜。
• 同一类图标的线条、尺寸和对齐方式要协调。相同操作使用相同表达。
• 图片比例 是宽与高的关系。裁切时检查人物、文字或产品重点有没有被切掉。
• 替代文本 是图片无法被看到时提供的信息说明。装饰图片通常使用空替代文本；操作图片要说明功能。

素材协调见 Spectrum 图标使用指南 ；替代文本的分类见 W3C 图片说明决策树 。

使用素材的流程

素材调整的示意

下面是假设的产品网页。

用一个例子走一遍

团队给成员列表增加删除操作。先选择统一图标，再让按钮有“删除成员”的名称。用户看得见文字时能理解，使用屏幕阅读器——把界面信息读出来的辅助工具——时也知道按钮用途。最后在窄屏检查操作区域没有挤成难以点击的小点。

边界与常见误解

一个图标不是天然的通用语言。替代文本也不是把文件名抄一遍，而是说明当前用途。图片无法替代正式标题、价格和关键操作文字；复杂图表还可能需要更完整的文字说明。