UI 设计与演示文稿渐变背景
渐变背景能显著提升应用 UI、设计原型图和演示文稿幻灯片的视觉质感。GradLab 可生成可调输出尺寸的网格渐变，可直接拖入 Figma、Sketch、PowerPoint、Keynote 或任何 Web 应用。
在 Figma 中使用渐变
作为画框背景
- 在 GradLab 中将画布设置为目标画框尺寸（如桌面端 1440 × 900，移动端 375 × 812）
- 点击下载当前帧导出 PNG
- 在 Figma 中将 PNG 拖到画布上，设置为Fill（填充）
作为可复用样式
导出 1× PNG 导入 Figma 资产，用作多个画框的填充。对于动态原型，导出 HTML 文件，在原型中通过嵌入式 iframe 组件链接到它。
颜色匹配
在 GradLab 中使用上传图片 / 参数码功能，上传现有 UI 的截图来提取颜色，生成与当前色彩体系协调的渐变。
演示文稿幻灯片
Keynote 和 PowerPoint
- 按幻灯片尺寸导出 PNG：
- 标准：1024 × 768
- 宽屏：1920 × 1080
- 在演示文稿软件中将导出的 PNG 设置为幻灯片背景图片
动效演示可将渐变导出为 MP4 并作为视频幻灯片背景插入：
- Keynote： 插入 → 选取 → 选择 MP4，设置为循环播放
- PowerPoint： 插入 → 视频 → 设置为内容后方格式，开启循环播放
Google Slides
导出 PNG，通过幻灯片 → 更改背景 → 选择图片上传。
应用 UI 背景
GradLab 非常适合生成以下应用背景：
- 引导页面 — 插图和文案背后的柔和动态渐变
- 空状态 — 无内容时渐变填充屏幕
- 卡片和弹窗背景 — 细微的渐变为表面组件增添深度
- 加载屏幕 — 动态渐变在内容加载时提供视觉活动感
对于应用内集成，导出 HTML 文件并通过 <iframe> 嵌入。完整集成指南见嵌入网站。
半调与颗粒的设计用途
半调和胶片颗粒层添加类似印刷的纹理，在设计语境中尤为有效。低对比度的细腻半调圆点读起来像纸张或丝网印刷纹理——在品牌视觉和编辑设计中很常见。
保持渐变克制
作为内容支撑背景（而非主角）时，建议保持以下参数较低：
- Speed 低于 20 — 缓慢、几乎察觉不到的运动
- Film Grain 设置 10–15 — 有质感但不分散注意力
- Zoom 较高（50–70）— 更大的色块产生更柔和、图案感更弱的背景
相关内容
INFO
画布 W/H 是布局尺寸，输出像素还会乘以 Math.max(2, devicePixelRatio) 和导出倍率。请以导出区域显示的像素尺寸为准。