社交設計 · 教程
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 完成互動設定。