Fun Toolkit未知进度 · 一种转圈，三个尺寸
16px / 按钮
24px / 局部
32px / 工作区
正在生成… 状态示例
0.8s 匀速旋转，主蓝色。状态文字独立保留；减少动画时仍可理解。
FEEDBACK & MOTION · v1.0
还没开始，也有好状态。
从一张空画布，到结果出现。让插图、占位和每一次过渡，保持同一种节奏。
持续动效离屏或后台暂停；手机关闭视差，系统减少动态效果时使用静态反馈。
新增规范与交互示例；三个正式工具按后续需求接入。演示不调用生成服务、不提交需求、不记录生产或下载次数。基础 PDF 保留 v1.2，当前在线目录 v1.4。
01 / EMPTY & FALLBACK
一套插图，六种场景。
蓝灰线条、浅蓝底形与少量黄色点缀；文案和动作留在图片外。
01 / 首次上传
选择图片，开始创作
说明支持格式与限制，给出一个明确入口。
主动作 · 上传图片下载 SVG · 首次上传↗02 / 等待输出
这里会显示生成结果
说明下一步，输出未就绪时保持下载禁用。
等待有效结果下载 SVG · 等待输出↗03 / 没有匹配结果
没有找到相关内容
保留关键词，提供清除筛选或修改条件。
次动作 · 清除筛选下载 SVG · 没有匹配结果↗04 / 暂无记录
还没有生成记录
只有确认数量为零，才显示这个状态。
主动作 · 去使用工具下载 SVG · 暂无记录↗05 / 读取失败
图片暂时无法读取
保留原素材与参数，解释原因并提供恢复。
主动作 · 替换文件下载 SVG · 读取失败↗06 / 暂不可用
暂时无法连接
说明影响范围，本地可用功能仍然保留。
次动作 · 重试连接下载 SVG · 暂不可用↗展示架使用原图尺寸，正式接入常规120×90、手机96×72；动作提示用于说明层级。读取失败和离线属于错误 / 可用性反馈，不能用“暂无内容”掩盖。实际页面已有同义标题时，装饰图使用空 alt。
02 / LOADING
等多久未知，就不编进度。
未知进度统一转圈；有真实完成量才显示进度条。
确定进度 · 原生进度条
此处是静态规格示例。正式接入按实际完成数更新，不用计时器倒推百分比，也不逐帧播报。
aria-busy 立即标记；可将视觉加载指示延后 150ms，避免快速任务闪烁。
03 / PLACEHOLDERS
位置先留好，内容再出现。
占位保留最终尺寸。未知图片用轮廓，正在加载才用骨架。
图片占位与读取
示例失败态，保留原位置尚未选择图片；这是默认占位。
头像与内容骨架
骨架是布局提示，不是错误图或永久空态。1.6s 轻脉冲，不使用高亮反复扫光。
下载图片占位 SVG ↗04 / ENTER & EXIT
轻轻出现，干净离开。
180ms 淡入并上移 6px；120ms 淡出。关键内容不等动画结束才可用。
结果区域已就绪
演示替换为空态、结果卡或局部提示。
只动画 opacity / transform，不改占位高度。需要隐藏交互内容时，先将焦点移回有效触发器。快速切换时旧退场不能隐藏新内容。
05 / OPTIONAL PARALLAX
一点层次，留给装饰。
可选的轻视差只用于介绍页与插图；不用于工作画布、表单、导航和导出内容。
指针视差 · 最大 6px
精确鼠标下移动指针查看。离开复位；触屏、≤540px、减少动画或暂停时保持静态。
滚动视差 · 最大 12px
缓慢滚动页面查看。只改变装饰层的位置，单次合并刷新；离屏 / 后台暂停，无持续空转。
01 / EMPTY & FALLBACK
先说明原因，再给下一步
空态说明为什么没有内容。读取失败和暂不可用属于反馈缺省态，不能用“暂无内容”掩盖错误；有有效结果时，局部更新优先保留。
| 场景 / 图形 | 标题与说明模板 | 操作层级 |
|---|---|---|
首次上传empty-upload.svg | 上传素材，开始制作 支持 [格式]，单个文件不超过 [限制]。 | 工作区一个主按钮“上传[素材]”；拖放是补充。限制需真实校验。 |
等待生成empty-output.svg | 结果将在这里显示 调整完成后，点击“生成 [格式]”。 | 复用已有生成动作，结果卡不重复放主按钮。自动工具写“上传后自动生成”。 |
无匹配empty-search.svg | 没有找到匹配内容 试试其他关键词，或清除筛选。 | 有筛选条件才显示次按钮“清除筛选”；保留已输入条件。 |
暂无记录empty-data.svg | 还没有[记录名称] 完成首次[操作]后，会在这里显示。 | 有创建流程才给主按钮“开始[操作]”；只读统计无需硬加按钮。 |
读取失败empty-error.svg | 文件暂时无法读取 请确认文件完整，并选择支持的 [格式]。 | 能重试才给次按钮“重试”；替换用绿色。保留上一份有效素材。 |
暂不可用empty-offline.svg | [功能]暂时无法连接 网络恢复后可以重试；当前设置已保留。 | 依赖网络时才给“重新连接”。本地可用的工具继续使用。 |
原因与保留承诺必须真实；未确认原因时写“暂时无法读取，请重试或替换文件”。上表后两项是错误 / 可用性反馈，不能计为空内容或成功结果。
| 插图与排版 | 统一规则 |
|---|---|
| 图形体系 | 原始 SVG 画布 160×120；蓝色线性轮廓、浅蓝面、少量品牌黄。不在图内嵌文字，保持线宽、圆角和视觉重量一致。 |
| 显示尺寸 | 常规 120×90 px；≤540 px 手机 96×72 px；窄结果卡可用 80×60 px。固定 4:3，显式预留宽高。 |
| 排版节奏 | 插图到标题 12 px；说明间隔 6 px；操作距说明 16 px。标题 16/24、说明 12/18 px，建议不超过 32ch。 |
| 容器与动作 | 沿用已有预览 / 结果区，不增加多层卡。字段错误用 16–20 px 图标与文字；每区一个突出动作，手机命中区至少 44×44 px。 |
| 替代文本 | 旁边已有同义文案时 alt=""；独立信息图才用简短描述。装饰碎片 aria-hidden="true"。 |
02 / LOADING & PROGRESS
不知道进度，就不编百分比
读取、生成、打包用真实阶段名。视觉反馈统一，任务状态由业务驱动。
| 形式 | 何时用 | 参数 / 行为 |
|---|---|---|
| 按钮 Spinner | 单一动作，进度未知。 | 16×16 px、2 px 线宽、800 ms 线性旋转；配“正在生成…”，保宽、防重。 |
| 区域 Spinner | 局部读取、解码、请求中。 | 常规 24×24 px，大预览区 32×32 px；16 / 24 用 2 px 线宽，32 用 2.5 px。只占相关区域。 |
| 确定进度 | 可以获取实际完成量。 | 原生 progress 或有名称的 progressbar；显示真实值 / “已完成 2 / 5”，未知时不推算倒计时。 |
| 不确定进度 | 总量 / 耗时未知。 | Spinner + 阶段文字；自定义 progressbar 省略 aria-valuenow。不按时间自动涨到 90%。 |
| Skeleton | 等待结构已知的远程图文 / 列表。 | 1600 ms 低对比浅蓝脉冲；结构对应内容。不叠加大 Spinner；局部更新优先保留旧内容。 |
立即响应，视觉加载可延迟 150 ms
点击后立即改变业务状态、设置 busy 并防重。Spinner / Skeleton 可在等待超过 150 ms 后挂载；提前完成就直接显示结果。延迟由业务控制，基础样式不创建计时器，也不强制最短等待。
真实进度、错误、取消和完成不额外延迟。只在已实现时显示取消；离屏 / 后台暂停视觉循环，实际任务是否暂停由业务决定，不悄悄取消。
03 / PLACEHOLDERS
预留位置，不假装结果
未上传、等待加载、图片损坏和透明背景各有含义，不能用同一张灰图糊过去。
| 类型 | 视觉与尺寸 | 结束条件 |
|---|---|---|
| 文本 Skeleton | 普通条 12 px、标题条 16 px；行容器 18 / 24 px、行间 8 px。固定宽度组合，如 72% / 100% / 52%，不随机。 | 成功替换成内容；无内容切空态；失败显示真实错误。 |
| 图片 Placeholder | placeholder-image.svg 为 160×120，头像另用 120×120 方形图。预留目标比例与圆角；浅色底、居中轮廓图形，声明尺寸或 aspect-ratio。 | 实际 load / 解码成功后换真图；不作为可下载结果。 |
| 图片损坏 | 原位显示静态图标 + “图片暂时无法显示”，保留真实文件信息。 | 仅实际失败后出现；有能力才给重试；不继续脉冲或无限重试。 |
| 透明棋盘 | 表达真实图片的透明区域。 | 属于预览背景，不是占位，不进入透明文件导出。 |
Skeleton 形状隐藏于辅助技术，由区域名称与一条状态文字说明。用户尚未上传素材时用空态，不用 Skeleton 假装后台生成。
04 / ENTER & EXIT
轻轻出现，干净退场
普通内容用短位移；弹窗保留已有轻弹性与玻璃背景。业务反馈不等待动画。
| 场景 | 统一参数 | 边界 |
|---|---|---|
| 出现 | 180 ms；opacity 0→1、Y 6→0 px；cubic-bezier(.16,1,.3,1)。 | 标题辅助、说明、卡片、新结果；只动 opacity / transform。 |
| 退场 | 120 ms；opacity 1→0、Y 0→3 px。 | 结束后隐藏 / 移除；先安置焦点并停止交互，透明按钮不可点、不可 Tab。 |
| 错峰 | 相邻 ≤40 ms，最多前三项；延迟总预算 ≤120 ms。 | 同屏少量卡片 / 装饰；长列表不逐项排队。 |
| 即时反馈 | 状态、错误、进度和可用性立即更新。 | 不等动画后才显示错误、接收点击或提供真实下载。 |
| 快速反复切换 | 新的出现取消旧退场与完成回调。 | 旧回调不能隐藏新内容，任务状态仍以业务为准。 |
弹窗继续使用已有 260 ms 轻弹性、7 px 玻璃背景。内容不因反复滚入视口而每次重播；无脚本 / 减动仍可阅读，不把整页正文初始设透明等待 JS。
05 / DECORATIVE PARALLAX
一点层次，不改变操作
用于页头、品牌插画和空态的独立装饰层。工具素材和操作坐标保持稳定。
| 类型 | 位移上限 | 停止与降级 |
|---|---|---|
| Pointer | X / Y 各 ≤6 px；仅 hover:hover + pointer:fine。 | 离开回原位；触屏、粗指针、≤540 px、减动静态。 |
| Scroll | Y ≤12 px；深度 0–1，整体幅度受上限约束。 | 离屏 / 后台停止；可见后按当前位置恢复。 |
| 执行 | 动画帧合并输入，只对装饰层 transform。 | 不逐事件读写布局；无任务不空转；销毁时释放监听与观察。 |
不会动的部分，同样属于规范
不对工具 Canvas、裁切框、图像坐标、输入框、按钮文字、时间轴或导出层做视差。装饰层 pointer-events:none、aria-hidden="true"，不承担唯一信息，不改素材像素或命中坐标。
06 / ACCESSIBILITY & FALLBACKS
少动，也要说清楚发生了什么
- 减少动画：出入场立即完成，视差归零，旋转与脉冲停用，Skeleton 静态；保留阶段文字与真实进度。
- 离屏 / 后台暂停视觉循环。业务状态和结果照常更新；动画暂停不等于取消生成。
- 任务区有名称，真实处理期间 aria-busy=true；用一条不受 busy 延迟的 role=status / aria-live=polite 消息，按阶段更新，不逐帧播报。
- 只在必须立即处理的阻断错误使用 role=alert；同一消息不在多个 live region 重复，整张卡片不作播报区。
- 进度有名称与真实值；图形、颜色和旋转不能代替文字。相邻文案完整时空态图 alt 为空。
- 状态切换不抢焦点；关闭 / 删除含焦点区域前移至存续入口，退出区及时不可交互。弹窗沿用原有焦点圈定与返回。
- 标题、说明、恢复动作、进度及 ARIA 一起中英切换。320 px、长英文、200% 缩放与键盘操作仍可用。
07 / IMPLEMENTATION & ACCEPTANCE
复制规则，也检查真实行为
下列参数属于新增组件与可复用示例标准。现有三个工具保留实际业务流程，不代表已经统一接入全部能力；基础 PDF 仍为 v1.2。
给开发 / Agent 的短需求
按 Fun Toolkit 反馈规范实现 [模块]：从六类选择真实状态并使用配套 SVG，常规 120×90 / 手机 96×72；每区一个突出动作。未知进度用 16 / 24 / 32 px、800 ms Spinner，有真实完成量才显示进度。业务立即 busy 防重，视觉加载可延迟 150 ms，不延迟完成与错误。Skeleton 固定结构、1600 ms 轻脉冲，图片区分待载入 / 损坏 / 透明棋盘。入场 180 ms / 6 px，退场 120 ms / 3 px；错峰 ≤40 ms、最多三项、总延迟 ≤120 ms。装饰视差 Pointer ≤6 px、Scroll ≤12 px；离屏 / 后台停，手机 / 减动静态。Canvas、裁切坐标与导出层不变换。补齐中英、状态播报与焦点；未接能力明确标为示例。
验收清单
- 无内容、加载、失败区分清楚；原因、恢复动作与保存承诺都真实。
- 图形等比、无图中文字，布局稳定；失败保留上一份有效素材。
- 快任务不闪占位，慢任务持续有文字；无假进度、假取消、假下载。
- 图片成功 / 损坏 / 缺失可验证；透明棋盘不进入导出。
- 快速入退场不留透明点击区，不延迟业务反馈；长列表不排队。
- 移动、粗指针和减动无视差；离屏 / 后台停视觉循环；销毁释放资源。
- 320 / 390 / 768 / 1440 px、长英文、200% 缩放、键盘均可用；完成后 busy 复位。
- 真实生成前后尺寸、像素、透明度不受装饰影响；规范演示不写生产统计。
给下一个工具，同样的反馈。
复制后补上工具自己的状态来源与业务限制。