4. 🖼️ 图标与图形 Icons ★★★☆☆

🌏 Web 网页规范

  • 图标格式: SVG 矢量标签 / Icon Font / WebP 栅格
  • 交互状态: 鼠标 Hover 变色 / 悬浮微动效
  • 最小热区: 无物理限制，推荐 24x24px 以上
  • 交付方式: SVG 标签注入 / SVG Sprite 缓存

📱 App 移动端规范

  • 图标格式: Vector Drawable / SF Symbols 原生符号
  • 交互状态: 点按点击态 (Pressed Scale) / 系统弹射动效
  • 最小热区: 严限 44x44pt (iOS) / 48x48dp (Android)
  • 交付方式: 单个 SVG 导入 / PDF 矢量切图 / XML 图形

Web 矢量 SVG 图标、雪碧图与数据可视化

Web SVGs, Sprite Sheets & Chart Visualization

Web 页面基于 SVG 标签 绘制高清矢量图形，或通过 SVG Sprite 减少 HTTP 并发网络请求；结合路径动画渲染交互式数据图表。

App 平台专属矢量资产与 App Store 规范

App Native Assets, SF Symbols & Splash Icons

App 端集成平台专属的高性能矢量库（iOS SF Symbols / Android Vector Drawables），输出需包含多倍率 App Icon 及首屏矢量图片资产。

LIVE PLAYGROUND: 动态 SVG 迷你曲线图 (Sparkline) 生成器 输入数值序列，SVG 将实时重新测算并平滑生成线条
https://web.meta-ui.edu/icons-svg
09:41
📶 🔋

状态图标 (Status Icons)

✓ 成功 Success
! 警告 Warning
✗ 错误 Error
i 信息 Info

常用 UI 图标 (CSS Pure Shapes)

菜单
关闭
箭头
搜索
设置
用户
展开
新增

图标尺寸对比 (Icon Size Scale)

16px
24px
32px
48px

SVG 矢量图标与悬停动效 (Hover Animation)

爱心
星标
评论
完成
刷新

图标颜色与状态变体 (Color States)

● Active
● Error
● Warning
● Disabled

描边粗细对比 (Stroke Width)

细描边偏轻盈现代，粗描边偏稳重醒目。系统图标推荐 1.5~2px 描边，小尺寸图标 (16px) 建议 2px 以上保证清晰度。

1px 细
1.5px
2px 标准
2.5px 粗
3px 厚重

图标 + 文字组合 (Icon + Text Combo)

纯图标省空间但需用户记忆，纯文字明确但占位，图标+文字组合最易识别。重要操作推荐组合形式，次要操作可纯图标。

↑ 依次：图标+文字 / 图标+文字 / 纯图标(带title) / 纯图标 / 纯文字

图标无障碍 (Accessibility)

装饰性图标用 aria-hidden="true" 隐藏；功能性图标必须配 aria-label 文字描述，让屏幕阅读器可识别。

装饰图标 aria-hidden
功能按钮 aria-label="收藏文章"

填充 vs 描边图标 (Filled vs Outlined)

填充图标视觉权重高，常用于激活态/选中态；描边图标轻盈，常用于默认态。Material Design 与 iOS 系统均采用此规律。

描边默认
填充激活
描边默认
填充激活

多类型图标示例 (Icon Style Categories)

线性图标-新增
填充图标-删除
双色图标-警告
首页文字组合
16px
24px
32px
📋 大模型统一 Prompt (LLM Prompt)