图标系统
目的
图标系统技能提供了一套用于选择、调整大小和实施图标作为功能性 UI 元素的方法论。它超越了“挑选漂亮图片”的层面，建立了一个结构化系统，确保图标被一致地使用，以降低认知负荷、强化品牌识别，并保持对所有用户的完全可访问性。一个健壮的图标系统确保图标作为清晰的路标，而非视觉干扰。
使用场景
- 为新的网站定义图标风格（线框、填充、双色）。
- 为不同上下文（按钮、导航、功能卡片）中的图标建立标准的尺寸和间距比例。
- 审计网站是否存在“图标臃肿”或不一致的视觉隐喻。
- 为开发者实现可访问的 SVG 或图标字体工作流。
- 选择与特定品牌属性（如“友好”的圆角图标 vs “技术”的锐边图标）相符的图标。
何时不使用
- 插图和主视觉图： 大型、复杂的叙事性图像，用于讲述故事而非传达单一功能概念。此时应使用通用布局或主视觉优化技能。
- 标志和品牌： 主要品牌标识通常有其自身不可协商的规则；图标支持 UI，但不能替代品牌标志。
- 纯粹装饰的背景图案： 图标被用作壁纸且不具语义含义时。
输入
- 品牌声音与风格： 品牌是极简、技术、有趣还是企业化的？
- 技术环境： 网站是否基于偏好 SVG 组件、精灵图或图标字体的框架构建？
- 使用上下文： 图标将出现在哪些位置？（例如：主导航、CTA 按钮、功能列表、仪表盘状态）。
- 现有设计令牌： 流体间距和颜色系统，以确保一致性。
输出
- 图标风格指南： 关于笔画粗细、圆角半径和填充类型的定义规则。
- 图标尺寸比例： 一组令牌（例如
icon-sm、icon-md、icon-lg）映射到特定的像素或 rem 值。 - 语义化库： 一套精选的图标，映射到特定的操作或概念（例如：“Chevron-down”用于下拉菜单）。
- 可访问性规范： 关于 ARIA 标签、
role="img"和aria-hidden属性的规则。
工作流
1. 建立视觉隐喻
选择使用普遍理解符号的图标。
- 搜索： 放大镜。
- 设置： 齿轮或滑块。
- 用户： 剪影或圆形用户。 避免使用需要用户猜测图标含义的“巧妙”隐喻。
2. 定义视觉风格
确保系统中的所有图标共享相同的 DNA：
- 笔画粗细： 使用一致的线条粗细（例如，所有 24px 图标使用 2px）。
- 角落处理： 圆角更显友好；锐角更显技术/精确。
- 细节程度： 随着图标缩小而简化图标，以保持可读性。
3. 构建尺寸与间距比例
将 fluid-spacing-system 应用于图标容器：
- 小号 (16px)： 与文本内联，面包屑导航。
- 中号 (24px)： 标准按钮，主导航。
- 大号 (48px+)： 功能卡片，主视觉突出显示。
- 光学居中： 手动调整因形状而看起来偏离中心的图标（例如，“播放”三角形）。
4. 实现颜色与状态逻辑
将图标链接到 interactive-state-system：
- 激活/悬停： 图标应与父元素一起改变颜色或权重。
- 语义化颜色： 删除/错误图标使用红色，成功图标使用绿色。
- 对比度： 图标必须满足 WCAG AA 标准（图形对象为 3:1）。
5. 技术交付与可访问性
- SVG vs. 图标字体： 优先使用 SVG，以获得更好的性能、可访问性和渲染质量。
- Aria 角色：
- 如果是装饰性的：使用
aria-hidden="true"。 - 如果是功能性的（例如，纯图标按钮）：使用
role="img"和清晰的aria-label。
- 如果是装饰性的：使用
决策规则
- “标签优先”规则： 图标几乎总是应附带文本标签。仅对普遍识别的操作（搜索、关闭、菜单）使用“独立”图标，并且必须带有可访问的标签。
- 一致性优先于多样性： 使用单一图标库（例如 Lucide、Heroicons），而不是混合多个来源的风格。
- 笔画粗细缩放： 如果图标被放大，其笔画粗细应理想地保持与其尺寸成比例，以在布局中维持视觉“重量”。
- 光学平衡： 并非所有图标都生而平等。一个正方形图标看起来比一个相同宽度的圆形图标更大。使用“边界框”方法，但手动调整视觉大小以获得平衡。
限制条件
- 可访问性： 用作链接或按钮的图标必须为屏幕阅读器提供文本替代方案。
- 触摸目标： 按钮内的图标不得将点击区域减少到 24x24px 以下（WCAG 2.2 SC 2.5.8 最小值）；对于主要的纯图标操作，首选 44x44px。
- 响应式： 在小屏幕上，如果图标拥挤文本，可能需要简化或移除，尽管它们通常有助于移动端浏览。
常见失败模式
- “神秘肉”图标： 使用用户不认识且无标签的图标。
- 不一致的权重： 在同一行中混用 1px 线框图标和 3px 粗体图标。
- 过度复杂： 使用包含过多细线、在低分辨率屏幕或小尺寸下会“模糊”或消失的图标。
- 缺少可访问性： 使用没有标题或 ARIA 标签的 SVG 图标，使屏幕阅读器用户无法感知操作。
- 光学对齐出错： “播放”按钮看起来像是要从其圆圈的左侧滑落，因为它是数学居中但非光学居中。
验证标准
- 所有图标属于单一、统一的视觉风格。
- 图标具有定义的尺寸比例（例如 16, 24, 32, 48）。
- 独立图标（如果有）具有
aria-label或等效的文本替代方案。 - 装饰性图标已标记
aria-hidden="true"。 - 图标与其背景的对比度维持在 3:1。
- 纯图标交互元素满足 WCAG 2.2 24x24px 触摸目标最小值（首选 44x44px）。
- 视觉隐喻清晰且标准（无需“猜测”）。