# 为产品准备图像、动画与交互素材

原文: https://yishto.com/learn/web-interface/graphics-assets-and-motion/

作者: [Yishto](https://yishto.com/about/)

按画面和操作选择位图、SVG 或 Canvas，结合像素预算、素材来源、减少运动与加载失败设计教学卡片。

首次发布: 2026-11-10
内容更新: 2026-11-10

资料卡片上的图可以是照片、矢量图标，也可以是脚本绘制的交互示意。选错表达方式会增加下载与维护成本：一张简单箭头没有必要变成巨大位图，复杂照片也不会因为转为 SVG 文件名就变成矢量图。

教学案例是资料卡片展示，包含示意图、悬停反馈和一个可点选区域。目标是按图形用途决定资源形式，明确加载失败与减少动画时的行为。几何代码只模拟命中区域，不生成图片，也不声称真实 Canvas 已运行。

## 位图、SVG 与 Canvas 如何表达画面

位图保存像素，尺寸、编码与压缩影响清晰度和文件体积，适合照片与纹理。SVG 描述路径、形状等矢量信息，适合图标和可缩放示意；复杂路径、嵌入位图与滤镜仍会增加资源和渲染成本。文件格式本身不保证轻量。

Canvas 是通过脚本绘制的画布，绘制后像素不会自动成为可操作的 DOM 控件。数据变更时需要重绘，交互需要命中检测，语义与键盘操作还要另外提供。若只是几张能点击的资料卡片，HTML 元素通常更容易维护。

选择依据是画面变化与用户操作。需要选中文字、链接和辅助技术说明的内容应保留文档语义；需要大量自定义绘制时可以评估 Canvas，同时设计等价的可访问操作。不能用视觉截图替代这一责任。

## 清晰度、尺寸与下载预算分开考虑

CSS 尺寸决定页面里的显示空间，位图或 Canvas 的实际像素尺寸决定细节与部分内存成本。高设备像素比可能需要更大的绘制缓冲区，但不会自动改变 CSS 布局尺寸。像素数量随宽高相乘增长，不能只关注文件压缩后多小。

卡片缩略图按显示用途准备适当尺寸，可用响应式候选让浏览器选择合适资源。先提供固有宽高或比例，避免加载后突然撑开。首屏重要大图不要无条件延迟加载；位于下方的非关键图可以按实际策略延迟。

透明边距、裁剪和主体位置也属于资源质量。文件尺寸正确却主体很小，界面仍难以辨认。检查浅色与深色背景、缩小后的边缘，以及替代文本是否描述信息而非反复念“图片”。装饰资源不应抢占阅读内容。

## 动画要对应用户操作

卡片悬停反馈可以说明可操作区域，保存后短暂反馈可以确认动作。动画持续时间、距离与触发方式应按用途设置，不为每张静态卡片加入永久运动。移动设备没有相同悬停方式，要提供触摸与键盘也能获得的反馈。

变换和透明度动画常能减少布局工作，但效果还受内容、绘制和合成影响，不能承诺一定流畅。先避免每帧读写布局尺寸，再在真实设备观察。用动画掩盖慢请求也不会让请求变快，加载反馈仍要有明确状态。

尊重减少动画偏好，提供静态或弱运动版本。持续、分散注意力的运动应有暂停或替代路径。减少运动不等于删除所有状态提示，可以保留文字、颜色之外的标记和立即完成的状态更新。

## 资源生成需要保存来源与边界

使用生成工具制作教学插图时，先写清用途、构图、尺寸和可读性要求，保留提示与版本，以及采用或退回的理由。生成结果可能包含错误文字、畸形结构或与说明不符的符号，需要人工检查，不应当作事实证据。

现成素材也要检查许可、使用范围和来源。不要把别人的截图、品牌人物或故事当作自己的原创资源。公开资源清单可以记录安全的来源说明与许可状态，但不携带真实用户图像、私有提示或账号数据。

在应用中把资源 ID 与版本关联，避免更新图像后旧缓存长期显示不匹配内容。校验格式、实际尺寸和体积，再决定是否进入正式资源库。素材审核和应用访问控制是不同问题，不能因为插图公开可用就开放整个私有目录。

## 用几何模型检查点击区域

示例把卡片区域表达为左、上、右、下坐标，采用左上包含、右下不包含的半开区间。这样相邻区域可以共享边界而不让同一坐标属于两边。它只处理轴对齐矩形，省略缩放、旋转、层级和浏览器坐标转换。

```python
boxes = {"card": (10, 20, 110, 80)}
def hit(x, y):
    return [name for name, (left, top, right, bottom) in boxes.items()
            if left <= x < right and top <= y < bottom]
assert hit(10, 20) == ["card"]
assert hit(110, 20) == []
assert hit(5, 5) == []
print(hit(30, 40))
```

输出是 `['card']`。左上角能命中，右边界 x=110 被排除，外部点没有结果。测试 30,40 证明普通内部点被识别。结果并不代表真实用户已经点了卡片，也不能证明键盘和屏幕阅读器能操作它。

真正的 Canvas 点击要把指针坐标转换到绘制坐标，并考虑 CSS 尺寸、设备像素比和变换。多个图形重叠时还要定义谁优先。若直接让 HTML 按钮承担动作，就可以使用浏览器原生交互，不需要复制这套几何逻辑。

## 加载失败也应保留内容与操作

资源加载失败时保持卡片标题、描述和主要操作可见，提供稳定的占位区域。不要无限重试同一不存在资源，错误反馈要能区分临时网络问题和无效资源。占位也不应让用户误认为真实图已经显示。

交互依赖图像内容时，为失败与减少运动提供同等任务路径，例如文字列表与标准按钮。只保留一个不能操作的空画布，会让关键功能随资源失败消失。设计素材与设计状态应一起完成。

检查资源时也要记录实际格式，文件扩展名可能与内容不一致。

## 练习：交付一个可核查的资源方案

为三张教学卡片选择位图、SVG 或 HTML 图形，解释用途与取舍。记录显示尺寸、像素尺寸、来源、许可和失败替代。为一项操作定义动画与减少运动版本，写出命中坐标的边界规则。

验收要求：图片失败不阻断阅读；窄屏与高像素比显示清楚；键盘可完成同一动作；减少运动下仍能看到状态改变；离线命中检查覆盖内部、外部和共享边界。真实性能结论需要实际设备与测量记录，资源模型与代码断言不能提供未测的帧率。

## 资料来源与延伸阅读

- [Canvas tutorial](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial)
- [SVG tutorial](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial)
- [Accessible interface design](https://www.w3.org/WAI/tutorials/)

资料核验：2026-11-10。教学示例不代表线上实测。

## 相关文章

- [把需求变成能验证的原型和界面](https://yishto.com/learn/product-building/prototypes-design-systems-and-assets/)
- [项目：教学插图任务与素材库](https://yishto.com/learn/project-labs/lab-illustration-job-queue/)