友好素材在空状态中的治理

大理论

空状态、成功状态、无搜索结果和配置缺失经常借用插画、emoji 或 Lottie 来变得更温和。但素材越友好，越容易掩盖任务缺口：用户仍然需要知道发生了什么、为什么没有内容、能否恢复、下一步点击哪里。素材库和知识库要把“视觉气质”与“操作路径、授权、可访问性、性能”绑定，而不是只把插画当漂亮占位。

小知识点

1. 先判断状态类型：首次使用、无数据、无搜索结果、权限/配置缺失、错误恢复、完成庆祝。不同状态需要不同语气和行动。
2. 插画是否出现取决于空间和任务：全页 onboarding 可以用大图；表格/卡片/重复 widget 的空状态更适合小图标或纯文本。
3. 每个空状态至少包含短标题、原因/预期内容、一个主行动；必要时加一个学习链接或筛选重置入口。
4. 如果图片传达信息，写具体 alt；如果只是装饰，置空 alt 或 aria-hidden。Lottie/emoji 不能是唯一状态反馈。
5. Lottie 和循环动效必须有静态 poster、文字状态和 prefers-reduced-motion 分支；loading、success、error 不要只靠动画表达。
6. 资源授权要落到具体素材：Open Doodles/Open Peeps/Humaaans 是 CC0；unDraw 是自定义许可并限制素材包/AI 训练等用途；LottieFiles 公共动画有 Lottie Simple License；Twemoji 图形是 CC BY 4.0，需要署名。

设计判断

如果移除插画后，用户仍能理解空状态并完成下一步，那么素材是加分项；如果移除素材后只剩一句 No data 或用户不知道如何恢复，说明插画在替任务遮羞。

实现建议

为每个 friendly asset 输出 intake record：stateType、assetName、sourceHref、license、commercialUse、attribution、format、altBehavior、motionBehavior、primaryAction、secondaryAction、fallback、ragKeywords。前端实现时固定容器尺寸和图片 aspect-ratio，避免插画加载后撑开布局；SVG 可内联或自托管，Lottie 用播放器渲染并提供静态替代；重复空状态优先纯文本，避免页面堆满同一套人物插画。

反例/风险

搜索无结果只显示大插画没有重置筛选；仪表盘每个 widget 都重复同一张人物图；用 emoji 代替错误文案；热门 unDraw/Open Peeps 图直接套用导致品牌模板化；引用 Twemoji 却不署名；Lottie 成功动画没有 reduced-motion 和文字确认。

案例分析

Shopify Polaris 的 Empty state composition 明确把空屏幕转成引导商家第一步行动的机会，并在示例中同时给出图像、标题、说明、主/次行动和 alt 文本。Carbon 的 Empty states pattern 把图片列为可选，并强调小空间可只用文本、空状态应替代原有元素以避免读屏读完整空表格。Atlassian 也把 empty state 定义为没有数据时说明用户下一步能做什么。可学习点是：插画只是空状态 anatomy 的可选层，行动路径和语义说明才是核心。

来源链接

Shopify Polaris Empty state: https://shopify.dev/docs/api/app-home/patterns/compositions/empty-state Carbon Empty states: https://carbondesignsystem.com/patterns/empty-states-pattern/ Atlassian Empty state: https://atlassian.design/components/empty-state W3C Non-text Content: https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html Open Doodles About: https://www.opendoodles.com/about Open Peeps: https://www.openpeeps.com/ unDraw License: https://undraw.co/license LottieFiles License: https://lottiefiles.com/page/license Twemoji: https://github.com/twitter/twemoji