使用一致的视觉语言
图标名称应描述该图形；操作意义在于控制标签。
图标 设计体系
使图标在任何尺寸下都易于识别且有意义。
清单内容
检查进度
01
结构及意义
在使用环境中比较信息和演示。
02
交互性和可用性
尝试操作，更改状态并继续工作。
03
完成体验
检查设计投入使用时容易忽略的细节。
进度会自动保存在此浏览器中。
指南
检查方法
示例
应用示例
使用一致的视觉语言
根据上下文，同一张“垃圾”图像被标记为“删除草稿”或“删除成员”。
变体与使用场景
图标风格
对同一屏幕上具有相同角色的图标使用线条或块系统。
将新图标以相同大小放置在旧图标旁边;密度和空间需要均匀。
示例 邮件、视频和文档按钮使用相同的 1.6px SVG 集。
尺寸和互动区域
将笔划大小与点击区域分开;小图标仍然需要合适的触摸区域。
尝试在移动按钮中使用 16px 图标;用户不必精确地触摸笔画。
示例 18px 图标位于 44px 点击区域的中间。
根据含义命名
清楚地命名函数,避免让用户从图中猜测其含义。
屏幕阅读器需要能够读取操作名称;装饰图标不重复标签。
示例 该按钮的响铃图标名为“打开通知”,文本旁边的图标在访问树中隐藏。
通知
账户
搜索