动效

产品宣传动效设计

一支 15 秒的宣传片，从半色调吉祥物和产品卡片，推进到分阶段展示的结账流程，最终将信息收束为 Pennyflow 字标。

OpenDesign代码改编与制作

官方

产品宣传动效设计15s · 动效

下载 OpenDesign 加入 Discord

Pennyflow 结账看板，包含课程价格、支付字段、可选产品和吉祥物面板。

动效设计中的一帧

适用场景

产品发布短片用于介绍优惠、演示流程并以品牌收尾的短篇宣传片。
动态识别系统基于重复使用的字体、角色、色彩和转场规则构建的品牌动效。
代码驱动视频研究由时间驱动的画面构成，拖动时间轴后必须还原出完全相同的帧。

动效设计亮点

15 秒内的六个章节开场钩子、优惠、店铺、结账、信息和品牌收尾，各自拥有明确的节拍。
半色调角色反应抖动处理的吉祥物会点头、眨眼、跳跃，并追随她周围出现的物体。
文案变成字标最后的“flow.”从信息文案中移出，组成 Pennyflow 字标的尾部。

产品宣传动效设计预览

显示预览分享

15 秒故事的结构

这支短片将一段销售叙事压缩为六个章节：以一个直接的提问开场，展示三种可售卖的形式，搭建一个移动端店铺，扩展到结账运作，最后以创作者与平台对比的信息收尾。这种推进之所以清晰易读，是因为每个章节改变的是主导构图，而不是仅仅在同一版式中替换文字。

产品宣传节拍图
时间	章节	可见变化	实际取舍
0:00–0:02.45	开场钩子	吉祥物伴随“psst…”登场，随后出现“Got something to sell?”和一条蓝色下划线。	停顿营造出期待感，但留给更长开场提问的时间很少。
0:02.45–0:04.45	任何产品	课程、电子书和应用卡片依次弹出到蓝色背景上。	依次出场让每个类别都清晰可读；再增加卡片会削弱节奏。
0:04.45–0:06.95	店铺	快速甩切到白色后，出现一个手机店铺，并逐渐填入地址、状态、头像和产品。	快速的搭建过程传达了设置流程，而无需解释每个字段。
0:06.95–0:11.20	已处理	画面从快捷支付拉远，展示包含定价、追加销售、增值税、收款和完成标记的结账看板。	多项操作可容纳在同一场景中，不过它们更像示意性的快照，而不是一次完整的交易。
0:11.20–0:15.00	Flow 与结尾	黑色信息场景之后，经由抖动擦除转场，出现完整的 Pennyflow 字标。	最后几秒给字标留出了更多阅读时间，代价是可用于展示产品细节的时间减少。

角色、字体与动效共享同一节拍

吉祥物并不是一个静态的讲解者。她在产品卡片旁升起，用视线追随新出现的物体，并通过跳跃、点头、眨眼和挤压变形为出场加上标点。这些反应为观众提供了第二重时间提示，但也会与细小的界面细节争夺注意力。把角色固定在画面一侧，可以让产品卡片和结账文案不受这种干扰。

大约三秒时，第一张产品卡片出现在蓝色“anything”章节中的半色调吉祥物旁。

大尺度显示下的半色调

角色和产品物体以降低的分辨率用灰度绘制，每个图层经过一次有序抖动处理转换而成。这种粗粒度纹理在宽画面中依然容易辨认，而细小的界面标签则保持干净的排版质感。

字体切换语气

Inter 承担标题和界面文字，Instrument Serif Italic 用来强调“create”之类的词，JetBrains Mono 标注章节和时间码，Fraunces 塑造结尾字标。这种对比增添了表现力，但额外样式过多会让这段短片显得零散。

作为导航辅助的 HUD

章节标签位于左上角，Pennyflow 和 60 fps 时间码位于右上角。在结尾画面中移除这个 HUD，可以让最终的品牌组合呈现为终点，而不是又一帧制作画面。

作为动效重头戏的结账流程

结账章节从贴近快捷支付控件的位置开始，随后展开为更大的看板。在 view-2 中，$149 的 Design Course、Apple Pay 按钮、银行卡字段、小计、总计、追加销售项和吉祥物直播面板同时出现。随后的节拍再加入数值和完成标记。镜头移动把单个操作扩展为更宏观的服务故事，而无需呈现真实的端到端结账过程。

结账看板在一个编排好的画面中，将支付、吉祥物直播面板和可选优惠结合在一起。

结账画面所传达的内容
元素	动效作用	改编说明
$149 课程	让所选产品与总计在视觉上保持一致。	应同时替换产品、价格和计费周期，以免数值互相矛盾。
Apple Pay 与银行卡字段	先提供即时支付途径，再给出手动输入的替代方式。	除非重建的项目另行进行了结账功能的工程开发与测试，否则应将两者视为影片道具。
练习册与辅导追加销售	无需离开看板即可加入可选产品。	限制优惠数量，使标签和价格在动态中仍然清晰可读。
已付款标记与“Handled.”印章	把若干运营细节转化为一个果断的完成节拍。	仅在所展示的虚构故事中使用完成表述，不要将其作为真实集成的证据。

结尾台词变成品牌

在黑色背景上，“You create.”将斜体单词与大号无衬线短语并置，吉祥物位于另一侧，如 view-3 所示。下一行以“We handle the”开头，让“flow.”不再只是文案：它移动到中央，构成字标的尾部，并接收其余字母。这种复用让转场显得连贯，不过如果没有哪个词能同时用于句子和标志，替换品牌名称可能需要另一种衔接方式。

黑色的“You create.”场景缩减了配色，为文案到字标的转变做好准备。

在标志之前先做减法
从细节丰富的结账看板过渡到只有一行文字和一个角色的黑色背景。视觉负担的减轻，为最后的转变腾出了空间。
带着一个词向前
从信息文案中选出一个能够实际成为品牌组合一部分的词。让它的位置和样式保持足够长的时间，以便观众追踪其移动。
以角色点缀收尾
字母落定后，吉祥物从字标后探出头来，跳一下并眨眼。这增加了最后一个节拍，又不会重新展开产品说明。

来源与范围

这是 OpenDesign 官方对 @achxvi 发布的第三方动效参考所做的代码重制。该作品以虚构的 Pennyflow 品牌和原创背景配乐改编而成；署名并不意味着获得被参考创作者的认可。它是一支渲染出的宣传短片，不是可运行的店铺、支付流程或联网的商业产品。相关视频工作流程与尚未合并的 PR8619 有关，因此不应被描述为当前稳定版 OpenDesign 中已可使用的功能。

如何在 OpenDesign 中制作产品宣传动效设计

下载并安装 OpenDesign
下载桌面客户端并完成安装与初始配置，然后为您的设计创建一个项目。
下载 OpenDesign
确定章节与精确时间
将 15 秒的短片规划为六个按时间划分的场景：开场钩子、产品阵容、店铺搭建、结账看板、信息传达和字标收尾。每个场景只承担一项主要的传达任务。把价格、标签和各章节时长集中放在一处配置中，这样在做品牌改编时，无需在动画代码里到处查找，就能完成审阅。

建议提示词

为一个虚构品牌创作一支 15 秒、铺满画面的产品宣传短片。使用六个画面：0–2.45 秒为由吉祥物引出的提问，2.45–4.45 秒为三张产品卡片，4.45–6.95 秒为逐步搭建的手机店铺，6.95–11.2 秒为分阶段展示的结账看板，11.2–13.3 秒为创作者信息，13.3–15 秒为字标收尾。展示名为 Course、Ebook 和 App 的示例产品，其中课程售价 $149，另有一份 $19 的可选练习册。让指针点击“Get it now”的动画，然后展示支付和履约详情。使用蓝、白、黑配色，并搭配单色半色调吉祥物。结账部分仅作为渲染出的动态图形呈现，不要暗示真实的支付、账户或店铺功能。确保向后拖动时间轴后，每一帧都保持确定一致。如果已安装的 OpenDesign 版本不支持视频导出，请保留按时间编排的画面构成，并使用受支持的本地工作流程截取帧画面。
围绕产品出场设计角色反应
让吉祥物远离当前显示的标签，再把眨眼、视线变化、点头和短暂跳跃与每次出场相配合。测试去掉角色后卡片是否仍然清晰易读；如果不行，就简化动作或延长停留时间。替换文案后重新调整时间，可能还需要调整嘴部的视觉动作，这些动作并不是语音同步。
测试时间拖动、可读性与最终衔接
检查约三秒、八秒和十二秒附近的代表性帧，然后向后拖动，确认相同时间点能得到完全一致的画面。播放前先加载内置字体，并让控件位于截取画面之外。核对合计金额是否一致，小号标签能否在半色调对比下保持清晰，以及最后的信息能否自然变形为替换字标，而不出现无从解释的跳变。
导出并获取分享链接
导出完成的设计稿，然后在 OpenDesign 中使用「Share」功能获取分享链接。在单独的浏览器窗口中打开链接，确认目标版本及其资源均可正常访问后，再将链接发送给他人。