SuperAPI AI 工具集

icon-system

设计与创作

查看项目

更新于 10-16 07:46

技能介绍

用途

Icon System 是一个专注于设计和维护完整图标系统的技能。它的目标是创建图标系统规范,确保视觉一致性,并支持可扩展的管理。当需要标准化图标体系时可以使用该技能。

主要能力

该技能围绕图标系统的几个核心方面展开:

基础规范(Foundations)

  • 网格:基础尺寸(24x24px)、关键线(keylines)、描边宽度、圆角半径。
  • 尺寸:XS(12-16px)、S(20px)、M(24px)、L(32px)、XL(48px+)。
  • 风格:描边(stroke)、填充(filled)、双色调(duotone),以及各自适用的场景。

命名(Naming)

命名格式为:icon-[category]-[name]-[variant]。 分类包括:action、navigation、content、communication、social、status、file、device。

交付(Delivery)

交付形式包括:SVG 源文件、雪碧图(sprite sheets)、组件封装(component wrappers)、Figma 库。

无障碍(Accessibility)

  • 每个图标都需要标签(label)或 aria-hidden。
  • 关键操作需与文本配对。
  • 保证足够的对比度。
  • 最小触摸目标为 44x44px。

最佳实践(Best Practices)

  • 审查并移除未使用的图标。
  • 建立贡献工作流。
  • 与设计系统一同进行版本管理。
  • 在每一个支持的尺寸下进行测试。

使用方式

该技能以规范制定为导向,输出图标系统的各项规格说明。具体操作步骤和安装命令在提供的资料中暂未提供。

适用场景

适用于需要统一图标体系的场景,例如构建设计系统、标准化产品图标、管理图标库等。

限制

资料中未提供关于收费、价格、平台支持、具体效果或详细使用步骤的信息,这些内容暂未提供。