HiHuo11 · 图片、图标与素材系统
适用：照片、截图、插画、Logo、图标、背景、视频封面与动画资源。先定义素材的作用，再决定是否需要生成或购买。
AST-01 · 素材必须承担明确角色
| 类型 | 使用目的 | 选择与处理 |
|---|---|---|
| 产品与人物照片 | 识别、信任、比较 | 真实语境、主体完整、避免误导 |
| 操作截图 | 说明具体位置与结果 | 可读尺寸、遮盖敏感值、注明版本语境 |
| 概念插画 | 解释关系或建立语气 | 统一线条、色板、视角与复杂度 |
| 状态插画 | 帮助理解首次使用或异常 | 不喧宾夺主，搭配真实下一步 |
| 功能图标 | 快速识别动作或对象 | 统一网格与笔画，陌生含义配文字 |
| Logo 与商标 | 识别品牌 | 使用被允许的版本，检查明暗背景 |
| 数据图形 | 表达事实与关系 | 数据来源、单位、图例和文字替代 |
| 装饰纹理与背景 | 建立氛围 | 不降低文字对比，不增加无意义加载 |
图片不应只为填满空白。一个清楚的状态图标经常比大型无关插画更有帮助。
AST-02 · 为每张图规定比例与裁切策略
头像、列表缩略图、详情原图是不同用途。记录目标比例、主体位置、是否允许裁切、移动端是否换图。cover 适合填充但会裁切；contain 保全内容但可能留白。
提供宽高或 aspect-ratio 预留位置，加载失败仍保持布局。首屏关键图片不要机械添加懒加载；屏外图片可按实际加载策略延迟。
分辨率切换使用 srcset/sizes，需要换构图时使用 picture。具体机制见 MDN 响应式图片。格式选择取决于内容与目标环境：矢量图标可用 SVG，照片可按兼容性提供现代压缩格式和回退。
AST-03 · 按用途写替代文本
信息图描述重要内容；纯装饰图使用空 alt；功能性图像描述动作；复杂图表另有完整说明或数据表。相同图在不同语境可能需要不同替代文本。见 WAI Images Tutorial。
有可见“搜索”文字的按钮，其内部放大镜 SVG 可用 aria-hidden="true"；仅图标按钮应有“搜索”等可访问名称，而不是“放大镜图标”。避免文字和 SVG title 重复播报。
<button type="button" aria-label="搜索">
<svg width="24" height="24" viewBox="0 0 24 24"
aria-hidden="true" focusable="false">
<use href="/ui-ux/icons.svg#search"></use>
</svg>
</button>
此路径在本网站有效，迁移项目时一起复制资源。示例图标继承 currentColor，适配明暗主题；小型图标保持相同画布和笔画，不混搭多套语言。
AST-04 · 先约束素材，再生成或选库
用途：首次使用的项目列表空态。
画面：三个文件夹与一张空白纸，表达“开始整理”，不出现文字。
构图：横向，主体集中，下方留少量空间；缩小后轮廓仍清晰。
风格：平面矢量、统一细描边，与现有图标的线条一致。
色彩：使用当前项目语义色的柔和版本，不能传达失败或警告。
输出：独立 SVG 或合适的位图尺寸；说明来源与使用权限。
验证：浅色、深色、手机尺寸、无图时的标题和操作。
生成图仍需检查伪文字、解剖或结构错误、品牌混淆与不必要的偏见。已有 SVG 图标系统适合直接扩展矢量，不必生成位图后再矢量化。
AST-05 · 来源、授权和失败策略进入清单
素材清单至少记录 ID、角色、文件、来源、许可、修改情况、作者标注、替代文本策略和失败回退。来自网络或生成工具不自动意味着可任意商用，按实际素材许可处理。
本系列附有手工绘制的空态插画与 SVG 图标，来源见 assets.json，授权见 MIT 许可。
检查
断开图片请求、切换主题、缩到手机宽度、使用长替代文本，布局仍应稳定。检查图片是否解释内容，图标是否表达同一种含义，关键界面是否在图像缺失时仍可操作。