ui-illustrations

ui-illustrations — 产品 UI 的插画与图像

概述

为 Web 应用 UI 挑选、整合并交付插画。重点是信息密集型产品工具：这类工具如今在本可借助图像传递温度感与清晰度的地方，只展示了枯燥的文字，例如空状态、引导流程和错误页面；同时又要避免沦为装饰。本技能涵盖插画的放置原则（哪些地方适合用图像，哪些地方会显得杂乱）、免费素材库的选择及其许可陷阱、将素材 SVG 重新着色为设计令牌以便同一素材适配两种主题、在 React 中正确集成 SVG、以无障碍方式制作动画图像，以及打造优质空状态的技巧。本技能负责挑选并集成现有插画，不教授如何绘制原创作品。

何时启用

• ✅ 屏幕上显示着简单的“暂无项目”（或者更糟，什么都没有），需要设计真正的空状态。
• ✅ 添加引导流程／首次使用、错误页面（404/500/权限错误）或成功时刻的图像。
• ✅ 选择插画来源、确认是否需要署名，或让所选素材与应用配色和深色模式相匹配。
• ✅ 在 React 代码库中嵌入 SVG 或 Lottie 文件，并为其配置无障碍支持。

请勿在以下情况启用：

• 需要的是图标——图标系统（lucide、Heroicons）属于独立的素材类别，有各自的约定。
• 需要的是 UI 元素／交互动画（过渡、微交互）——这类需求由动画实现技能负责；本技能负责图像，包括动画图像文件。
• 需要绘制原创插画或创作完整的插画设计语言——这属于设计师／供应商的工作；本技能负责挑选和集成。
• 营销网站的主视觉／摄影艺术指导。

工作流

第 1 步：放置——这里真的需要图像吗？

放置位置	使用图像？	原因
空状态（首次使用、列表已清空、无结果）	是——最典型的使用场景	将死胡同转化为方向指引和后续操作
引导流程／首次使用时刻	可以，适度使用	建立一次整体基调；不必每次访问都显示
错误页面（404、500、权限错误）	是	缓和失败体验，维持信任
成功／完成时刻	可选，小幅点缀	带来奖励感，同时不造成延迟
持续展示数据的界面（表格、流程中的仪表盘）	否	用户正在阅读数据；插画会造成干扰
加载／进度提示	否（通常如此）	这类场景应使用骨架屏／加载动画，属于感知性能范畴，而非图像；由动画技能负责
身份验证页面（登录分栏面板）	可以	这是成熟的设计模式——表单旁搭配符合品牌基调的图像没有问题；但仍应保持单一风格，并克制使用
在表单／设置旁添加装饰	否	没有传达信息的图像会显得杂乱（上文的登录分栏面板是例外，不代表可以随意使用）

比例原则：运维／管理工具应保持克制——只在上述位置使用少量风格一致的插画；面向消费者的产品则可以用得更多。如果插画没有传达相邻文字尚未表达的信息，就删掉它。

步骤 2：来源——决策路径

1. 默认选择：unDraw。 数百种概念风格统一，可在网站上自定义主色，许可证宽松：允许商业使用和修改，无需署名。主要限制是不得将素材作为素材包或竞品合集再分发，也不得用于 AI 模型训练。
2. 动画：LottieFiles 免费版（Lottie Simple License）——允许商业使用和修改，无需署名（鼓励注明出处）；修改后的作品须以相同许可证分享；不得将文件编入竞品合集。用于动画或更丰富的 SVG 场景时，可选 Storyset（Freepik）——免费版要求明确署名（“Designed by Freepik”并附链接，且须便于查找）；付费的 Freepik 公司订阅可免除此要求（条款中所列的订阅等级已有变动——采用时请核对实时条款）；不得转售或再分发，也不得用于商标或徽标。
3. 采用时记录许可证。 条款会变动（上表是带日期的快照，日期为 2026-07-11）；采用素材时，请重新核对来源的实时许可证页面，并在素材旁记录来源 URL、许可证和日期（可使用 assets/illustrations/LICENSES.md）。署名义务是发布要求，不是脚注。
4. AI 生成的插图也是一种选择；但其风格在多次生成间容易漂移，且许可存在歧义，因此应审慎选用，而不是作为默认方案。

步骤 3：保持风格统一

风格统一胜过数量：同一系列的 5 张插图看起来经过精心设计；混杂的 50 张则像剪贴画。产品中的每张插图都应保持几何与有机、扁平与立体、线条处理、细节程度，以及（角色插画的）比例和多样性一致。实际操作中：在步骤 2 中选定一个图库或系列，并始终使用它；缺少某个概念时，选择风格最接近的同系列隐喻，而不是引入风格不符的素材。

步骤 4：匹配品牌——按令牌重新着色

• 快速方案：下载前，使用 unDraw 网站上的颜色选择器将强调色设为主色。
• 持久方案：将 SVG 内联，并用语义令牌替换硬编码填充色——fill="#6c63ff" → fill: var(--primary)（使用 style 属性或 CSS）——这样同一素材就能适配主题切换，包括深色模式。肤色和纯中性色保持字面值；强调色、服装、物体和背景形状则使用令牌。
• 详见 references/svg-integration-and-theming.md（包括三种深色模式策略——未经调整的大多数浅色主题插画在深色背景上都会显示不佳）。

步骤 5：正确集成

• 需要通过 CSS/React 进行令牌重新着色或无障碍控制时，使用内联组件（Vite：通过 SVGR 插件使用 import Art from "./empty.svg?react"）。
• 对于较大的静态插画，使用 <img src>（import artUrl from "./empty.svg?url"）：可缓存、可延迟加载（loading="lazy"），但无法通过 CSS 访问内部内容。
• 始终避免布局偏移：SVG 保留其 viewBox，并为容器设置明确尺寸或 aspect-ratio。
• 控制包体：内联 SVG 会打包进 JS；首屏上方的小型空状态插画可内联，其余使用 img 并延迟加载。
• 完整决策表和 Lottie 嵌入方式：references/svg-integration-and-theming.md。

步骤 6：无障碍默认做法

• 空状态或装饰性插画：使用 aria-hidden="true"（内联）或 alt=""（img）——由相邻的标题或文本传达信息。若图片本身承载信息，则提供真实的 alt 文本。
• 动画图像必须遵循 prefers-reduced-motion（显示第一帧静态画面）；如果自动播放的动画总时长超过 5 秒（无论是否循环），则需要提供暂停控件（WCAG 2.2.2）。
• 契约详情以及空状态的结构和变体：references/empty-states-and-a11y.md。

规则

硬性规则（绝不违反）：

• 交付资源前先检查许可证；在资源旁记录来源、许可证和日期。按要求醒目地提供署名（Storyset 免费版），否则不要交付该资源。
• 持久数据界面上不得使用图片——仅空状态、引导页、错误和成功时刻可以使用，除非所有者明确另有指示。
• 每个产品只使用一个风格系列。
• 装饰性图片对辅助技术隐藏（aria-hidden/空 alt）；信息性图片必须提供真实的替代文本。
• 动画图片须遵循减少动态效果设置——在 prefers-reduced-motion 下提供静态回退；自动播放的动态效果总时长超过 5 秒时，须提供暂停控件。
• 不得将来源资源重新分发为合集——所有列出的来源都禁止这样做；只能在自己的产品中使用。

偏好（可覆盖）：

• 默认使用 unDraw 作为来源；仅在动画确有价值时使用 Storyset/Lottie。
• 插画应起辅助作用，切勿喧宾夺主：桌面端空状态插画高度控制在约 160–240 px，移动端更小。
• 插画允许时，优先使用令牌化重着色，而非为每种主题单独准备资源。

注意事项

• Storyset 的署名是实实在在的义务——这里的“免费”意味着必须署名；把署名藏在无人找得到的页脚里不符合条款。unDraw 和 Lottie-Simple-License 资源无需署名。
• **浅色主题插画在深色模式下会悄然出问题：**烘焙在图中的白色形状会发亮，深色描边会消失。务必在两种主题下检查每幅插画；通过令牌化填充或按主题准备不同资源来修复——未经处理的来源 SVG 几乎从来都不适用于深色主题。
• **SVG 自带的 <title> 会泄露信息：**许多下载的 SVG 都带有 <title>（如 "undraw_empty_4zx0"）——如果忘记设置 aria-hidden，辅助技术会读出它；此外，浏览器还会无论如何都将其显示为悬停提示。内联时应移除它（或改为有意义的内容），并设置 aria-hidden。
• **尺寸缺失会导致 CLS：**未预留空间的 SVG 加载时会造成布局跳动（尤其是 img 配合延迟加载时）。请预留空间。
• **全部内联会让打包体积膨胀：**内联到共享代码块中的 40 kB 插画会随每个路由一起交付。只有需要通过 CSS 控制的内容才内联；其他资源使用 ?url。
• **currentColor 并非调色板：**它能为单色字形重新着色，却不能处理多色插画——后者需要针对每种填充颜色明确替换令牌。
• **Lottie 的相同方式共享条款：**修改过的 Lottie-Simple-License 动画仍须按相同许可证重新分发——在应用内使用没问题，但发布资源包就有风险。

反模式

• **“到处都加插画——这样看起来更友好。”**先遵循放置原则；没有传达信息的图片只会造成杂乱，数据界面必须保持整洁。
• **“这是免费的，直接用就行。”**免费版的差异恰恰在于关键义务（署名）；请检查并记录许可证。
• **“从每个库里挑最好的插画混用。”**风格系列的一致性比单个资源的质量更重要。
• **“先交付，深色模式以后再处理插画。”**所谓以后，就是收到视觉问题报告的时候；集成时就检查两种主题。
• **“这只是装饰，不用管无障碍属性。”**装饰性是需要实现的无障碍决策（aria-hidden/alt=""），不是可以跳过的事项。

输出

React 代码库中使用插画的 UI 界面：采用项目资源规范管理已记录许可证的来源资源；空状态、引导页和错误页面使用风格一致、经令牌重着色、适配主题且无障碍的图片；动画图片受减少动态效果设置约束。使用者包括代码库审查者和设计系统文档；后者记录产品所选的风格系列和放置规则。

相关内容

• 动效实现技能（Motion for React）负责 UI 元素/交互动画，以及本技能的动画图像规则所引用的减少动态效果约定；图像文件（包括 Lottie）由本技能负责。
• 图标系统规范（lucide 等）负责图标——这是一个独立的资源类别。
• 设计系统技能/文档记录了本产品锁定的系列、令牌和放置位置；本技能则提供可移植的应用方法。
• 组件样式技能（Radix/Tailwind）负责图像所在的组件。

渐进式披露

• references/sourcing-and-licensing.md — 在选择来源、检查条款或处理归属/生成艺术相关问题时加载。
• references/svg-integration-and-theming.md — 在嵌入 SVG（内联、使用 img 或 Lottie）、重新着色以匹配令牌或修复深色模式时加载。
• references/empty-states-and-a11y.md — 在构建空状态/引导流程/错误页面或设置图像无障碍功能时加载。
• references/sources.md — 研究溯源；仅在审核声明时加载。

正文预算

• description ≤ 1,024 个字符（agentskills.io 限制）。
• 正文 ≤ 约 500 行 / 5,000 个令牌，作为软性目标；超出内容放在 references/ 中。