社交设计 · 教程
Instagram Story 制作：用三帧介绍店铺新品
三张图各自好看，却都在重复同一句标题，连起来仍可能让人摸不着头脑。每一帧都应给观众一个继续看的理由，最后再指向一个确实能完成的动作。
原始请求没有输出并已停止。我们在 Ciyo 外制作三张英文 SVG 模板，渲染并导入 PNG，再手动按从左到右的 1—3 帧排序。截图是实际画布检查。文字需在外部 SVG 源文件中编辑，导入的 PNG 不会变成原生文字或 Instagram 互动控件。
先看做法：每一帧只承担一个任务
第一帧介绍产品，第二帧展示一个已确认的细节，第三帧引导下一步。三帧沿用同一套配色和插画，按预定顺序分别导出。
为准备在 Instagram 中添加的控件留白。画在图片里的链接按钮或投票框，上传后不会自动变成互动功能。目标地址还没确认时，先空着，不要编造预约链接。
1. 确认产品事实和下一步动作
先准备真实产品照片、已确认的名称、一个有用细节，以及打算引导用户去的页面。价格、库存、上新时间若缺失，应先找负责人确认。看似好看的填充文字，也可能无意中变成产品承诺。
Alder Goods 是虚构品牌，因此示例只用中性文案，不写价格或库存。笔筒是一幅插画，不能证明真实商品的材质、尺寸或表面效果。
| 帧 | 任务 | 示例文案 |
|---|---|---|
| 1 | 介绍 | 让桌面更从容 |
| 2 | 展示细节 | 让小物各有归处 |
| 3 | 引导下一步 | 认识这只笔筒 |
2. 把三帧作为一组来设计
将三张独立的 1080×1920 图片作为工作规格。这是示例的创意输入，不代表当前所有 Instagram 界面的通用安全矩形。重要内容远离边缘，上下都留出空间。
保持笔筒形状和文字层级一致，同时改变各帧的重点：简洁开场、靠近细节、安静收尾，并给真正的操作控件留出位置。
为虚构品牌 Alder Goods 制作三张独立静态竖图。第一帧：让桌面更从容。第二帧：让小物各有归处。第三帧：认识这只笔筒。使用同一只原创绿色笔筒插画、暖象牙白、森林绿与琥珀色。不编造价格、库存或产品性能。保留可编辑文字源文件和独立 PNG。上下充分留白，第三帧中下部为稍后在 Instagram 添加真实链接贴纸留出空间。不画假按钮，不发布。3. 将准确文案保留在可编辑源文件中
演示请求采用代码插画和可编辑 SVG 文字，再输出 PNG。这样可以复现排版，但不能当作栅格图像模型保持一致性的测试。
将三个源文件放在一起。产品名称变化时，逐处更新并重新导出。采用生成图片的路线时，参考图可能帮助统一风格，却不能保证每帧细节完全相同。
要复现导入，请下载下方英文 PNG 预览，在自己的 Ciyo 项目中点击画布工具栏的 Upload，再选 Upload Image 并选择文件，随后排列图片检查。文字需在 Ciyo 外的独立 SVG 源文件中修改，重新渲染 PNG 后替换；导入 PNG 不会生成原生文字图层。
4. 到目标平台添加真正的互动控件
在你自己的 Instagram 创作界面中按顺序载入三张图，再添加当前可用的原生控件。确认链接确实通向预定页面。本文没有声称连接或发布到了 Instagram 账号。
查看当前界面和账号选项，不要完全依赖另一台设备的截图。插画或控件挡住重要信息时，调整其位置。投票需要平台真实控件；画出的两个答案框只是图像。
5. 发布前，连起来看完整段 Story
不看设计简报，独立读一遍这三帧：能否理解物品是什么，中间一帧增加了什么，最后该做什么？在实际目标预览中检查文字、对比度和最终点击目标。
个人小店可先突出一个清楚的细节。团队则把三帧顺序和目标页面一起确认。需要更长说明时，链接到合适的产品页，不要把整段小字塞进第二帧。
实用问题
Ciyo 会发布这些 Story 吗？
这个流程只准备图片，没有演示 Instagram 定时发布、账号连接或实际发布。
导出的链接按钮能点击吗？
画在图片里的按钮不具备互动能力。请在 Instagram 添加真实支持的控件，再检查链接目标。
这些留白是保证安全的区域吗？
不是。它们只是设计余量。发布前要查看当前平台预览、设备显示及账号控件。
必须使用生成照片吗？
不必。真实商品可以使用已批准照片；采用插画时明确说明。本例是代码绘制的虚构作品。
规划下一组三帧内容
带上已确认的产品信息和真实目标页面。分别准备图片，再到 Instagram 完成互动设置。