别再通过关键词来挑选仪表盘图标了
大多数仪表盘问题并非源于糟糕的图标。
而是源于将好的图标用在了错误的意思上。
如果你搜索 “users” 并挑选了一个简洁的 SVG,之后可能会遇到麻烦。你需要为客户、团队成员、账户所有者和管理员分别使用不同的图标。很快,一个 “user” 图标就必须承载过多的含义。这会让你的 SaaS 仪表盘显得杂乱无章。
停止通过关键词选择图标。开始根据角色来选择。
关键词告诉你图标与什么相关;而角色告诉你图标的作用是什么。
将你的图标分为以下五类:
- 导航图标 (Navigation icons):这些代表目的地,如仪表盘 (Dashboard)、账单 (Billing) 或设置 (Settings)。它们应当简洁且稳定。
- 状态图标 (Status icons):这些用于回答“这是激活状态吗?”或“这是失败了吗?”之类的问题。使用勾选、警告或锁等直观符号。
- 操作图标 (Action icons):这些代表编辑、删除或导出等操作。如果操作比较复杂,请避免在没有标签的情况下使用这些图标。
- 对象图标 (Object icons):这些用于识别实体,如项目、发票或文件夹。
- 空状态图标 (Empty state icons):当数据缺失时显示。这类图标可以更具个性化。
不要只寻找最漂亮的 SVG。要寻找一套视觉词汇。
在确定使用某个图标之前,请进行以下三项测试:
- 尺寸测试 (The Size Test):在密集表格中,图标在 16px 时是否依然有效?许多图标在 32px 时看起来很棒,但缩小后就会失效。
- 上下文测试 (The Context Test):将图标与其标签及相邻图标放在一起。它是否会与旁边的图标混淆?
- 含义测试 (The Meaning Test):图标是辅助标签的,还是必须依靠标签来解释图标?
如果你无法为某个功能找到独特的图标,那么你的功能名称可能过于模糊。图标是用来强化含义的,而不是用来修复含糊不清的语言。
与其搜索 “user icon”,不如搜索 “internal collaborator icon” 或 “customer account icon”。搜索的精准度决定了 UI 的精准度。
Source: https://dev.to/svgicons/stop-picking-dashboard-icons-by-keyword-ij2