动效

用量重置动态视频设计

一支六秒的方形 OpenDesign 动态视频,将径向刻度环与两条带标签的进度条结合,最终定格为绿色完成状态。

OpenDesign动态设计与制作
官方
用量重置动态视频设计6s · 动效
绿色的 Usage reset complete 显示在徽标上方,两条进度条均为 100%。
动态视频中的一帧

适用的设计场景

  • 产品状态动画展示流程从进行中到完成的短小方形片段。
  • 进度与确认视觉需要清晰呈现之前、之后以及最终定格状态的场景。
  • 方形社交动态视频紧凑的 1:1 作品,即使画面不断变化也保持可读。

动态视频亮点

  • 径向环加两条进度条圆形刻度营造氛围,进度条则承载可读的百分比。
  • 五种徽标处理,同一版式徽标依次切换为绘画、素描、半色调、蒸汽波和涂鸦风格,而标签位置不变。
  • 约三秒时完成标题、刻度环、对勾和彩纸同时变化,随后片段定格。

方形画面是如何组织的

Usage reset 视频采用居中的三层构图:顶部是粗体标题,中间是圆角方形的 OpenDesign 徽标,下方区域放置两条水平进度条。所有元素都在宽裕的边距内居中或贴边对齐,非常适合 1080x1080 的画面。

自上而下解读画面
区域可见内容设计效果
标题Usage reset,之后变为带绿色强调的 Usage reset complete.同一位置既传达任务又传达结果,因此变化一眼就能看懂。
中央位于细小刻度环内的徽标刻度环为视线提供了围绕稳定徽标形状的圆形运动路径。
下方区域标注为 5-hour window 和 7-day window 的进度条左对齐的简洁标签与右对齐的百分比,在任何徽标风格下都保持清晰可读。

从部分进度到定格完成

前期画面显示不同的百分比。第一帧中两条进度条分别为 12% 和 9%;在波普艺术画面中分别为 56% 和 55%。到最终状态时两者均为 100%。数值不一致使两条进度条在汇合之前保持各自可辨。

开场状态:中性背景,橙色刻度开始推进,进度条为 12% 和 9%。
开场状态:中性背景,橙色刻度开始推进,进度条为 12% 和 9%。
  1. 从中性状态开始

    浅色背景、深色徽标和橙色点缀,配合最低的百分比,确立了基线状态。

  2. 循环切换风格

    徽标依次变为蓝黄绘画、单色素描、半色调漫画波普艺术、蒸汽波霓虹和涂鸦配色,同时刻度环持续推进。

  3. 收束并定格

    大约三秒时,标题变为完成状态,刻度环和进度条变绿,对勾出现,彩纸短暂迸发,其余时间画面保持静止。

改变风格而不移动版式

波普艺术画面是最热烈的时刻:蓝色半色调徽标、黄色轮廓、红色手形和 WHAAM! 爆炸图形,置于奶油色背景上,配有红色刻度和进度条。然而标题、刻度环直径和进度条位置都与开场画面一致。

半色调波普艺术处理,红色刻度与进度条为 56% 和 55%。
半色调波普艺术处理,红色刻度与进度条为 56% 和 55%。

颜色跟随状态

橙色和红色点缀属于进行中的画面;绿色专用于完成状态,因此仅凭颜色也能传达结果。

取舍:视觉冲击与可读性

中央的画面可以很繁复,因为数字位于独立且整洁的区域。在更安静的版本中,首先应削减与刻度环边缘重叠的爆炸图形。

径向刻度与线性进度条

刻度环和进度条承担不同的作用。刻度环负责营造氛围:许多细小的刻度(部分较长)在徽标周围依次亮起,为片段带来动感,但没有数字。进度条则精确:每条都有名称和百分比。

两者并用,既让动画充满活力,又让观众能一眼比较两个数值。代价是刻度环可能被误认为第三项指标,因此保持其无标签、纯装饰的状态很重要。

完成确认与安静的结尾

最终画面以多种重复的方式确认成功:标题的绿色强调、完全变绿的刻度环、两条进度条上的 100% 与对勾,以及粉色、青色、黄色、橙色和紫色的彩纸。彩纸只是短暂迸发而非持续效果,因此最后几秒十分平静。

视频配有配乐;此处不再断言其他音频细节。

完成状态:绿色刻度环,两条进度条均为 100% 并带有对勾,徽标周围有彩纸。
完成状态:绿色刻度环,两条进度条均为 100% 并带有对勾,徽标周围有彩纸。

本示例的范围

这是 OpenDesign 制作的示意性渲染动画。其中的时间窗口和百分比均为创意内容,并非真实可用的配额重置,也不代表实际的重置政策或当前限额。改编时应保留这一区分,尤其是在将标签替换为真实数字时。

如何在 OpenDesign 中创建用量重置动态视频设计

  1. 下载并安装 OpenDesign

    下载桌面客户端并完成安装与初始配置,然后为您的设计创建一个项目。

    下载 OpenDesign
  2. 设定方形画面与安全边距

    定义一个 1080x1080、时长 6 秒的画面:顶部为标题,中央为徽标与刻度环区域,下方为两条进度条所在的区域。左右保留较宽的边距,确保标签和百分比不会贴近边缘。

  3. 撰写序列提示词

    这是一条建议的复刻提示词,并非找回的原始提示词。

    建议提示词

    创建一支 6 秒、1080x1080 的动态视频,标题为 Usage reset。将一个圆角方形徽标置于由细小刻度线组成的径向环中央。在其下方添加两条水平进度条,分别标注为 5-hour window 和 7-day window,百分比右对齐。起始时两条进度条取不同的较低数值,让刻度环逐步推进,同时让徽标依次切换为绘画、单色素描、半色调波普艺术、蒸汽波和涂鸦风格,而标题、刻度环和进度条的位置保持不变。大约在 3 秒时,将标题改为 Usage reset complete.,并加以绿色强调,把刻度环和进度条变为绿色,显示 100% 并带有对勾,加入短暂的彩纸迸发效果,然后画面保持静止。所有内容仅作示意,不要表现为真实的配额行为。配上柔和的配乐。

  4. 检查可读性并减少闪烁

    检查标签在每种风格下是否都清晰可读,并确认最终定格的时间足够长,便于阅读。若想要更柔和的版本,可放慢风格切换、缩小爆炸图形、缩短彩纸效果,并避免快速的整帧颜色切换。

  5. 导出并获取分享链接

    导出完成的设计稿,然后在 OpenDesign 中使用「Share」功能获取分享链接。在单独的浏览器窗口中打开链接,确认目标版本及其资源均可正常访问后,再将链接发送给他人。