LINE Flex Message 卡片製作完整教學：打造吸睛的互動訊息
LINE 是台灣最普及的通訊軟體，擁有超過 2,100 萬用戶。對於企業和品牌來說，LINE 官方帳號已經成為與客戶溝通的重要管道。而 Flex Message 是 LINE 提供的進階訊息格式，可以讓你製作出精美的卡片式訊息，大幅提升訊息的吸引力和互動率。
什麼是 Flex Message？
Flex Message 是 LINE 官方帳號可以發送的一種進階訊息格式。與一般的文字訊息不同，Flex Message 可以包含圖片、按鈕、多欄排版等豐富的視覺元素，讓訊息看起來就像一張精心設計的卡片。
Flex Message vs 一般訊息
| 特點 | 一般訊息 | Flex Message |
|---|---|---|
| 視覺呈現 | 純文字或單張圖片 | 豐富的卡片式排版 |
| 互動元素 | 無 | 可添加按鈕、連結 |
| 排版自由度 | 低 | 高，支援多欄、多層結構 |
| 點擊率 | 一般 | 較高 |
| 製作難度 | 簡單 | 需要 JSON 格式 |
Flex Message 的優勢
更高的點擊率：精美的視覺設計可以吸引用戶注意，提高訊息的點擊率。
更豐富的資訊呈現：可以在一則訊息中呈現更多資訊，如產品圖片、價格、購買按鈕等。
更好的品牌形象：專業的卡片設計可以提升品牌形象。
更強的互動性：可以添加多個按鈕，引導用戶進行不同的操作。
奧特 LINE Flex 製作器介紹
雖然 Flex Message 功能強大，但它需要使用 JSON 格式來定義訊息結構，這對於不熟悉程式的人來說是一大門檻。奧特線上工具的 LINE Flex 製作器提供了視覺化的編輯介面，讓你不需要寫任何程式碼，就能製作出專業的 Flex Message。
主要功能
| 功能 | 說明 |
|---|---|
| 視覺化編輯器 | 拖拉式操作，所見即所得 |
| 即時預覽 | 即時查看訊息在 LINE 中的呈現效果 |
| 範本庫 | 提供多種預設範本，快速開始 |
| JSON 匯出 | 一鍵匯出 JSON 格式，直接使用 |
| 屬性編輯 | 詳細的屬性設定，自訂每個細節 |
快速開始：使用範本
如果你是第一次使用，建議從範本開始。我們提供了多種常見場景的範本：
可用範本
| 範本類型 | 適用場景 | 包含元素 |
|---|---|---|
| 電商產品卡 | 產品推廣、促銷活動 | 產品圖片、名稱、價格、購買按鈕 |
| 餐廳菜單 | 餐飲業、外送服務 | 餐點圖片、名稱、價格、訂餐按鈕 |
| 活動邀請 | 活動宣傳、講座報名 | 活動圖片、時間地點、報名按鈕 |
| 電子名片 | 個人品牌、業務推廣 | 頭像、姓名、職稱、聯絡方式 |
| 優惠券 | 促銷活動、會員優惠 | 優惠內容、使用期限、領取按鈕 |
使用範本的步驟
- 前往 LINE Flex 製作器 [blocked]
- 在範本區域選擇一個適合的範本
- 點擊範本，系統會載入範本內容
- 在編輯器中修改文字、圖片、連結等內容
- 即時預覽修改效果
- 完成後匯出 JSON
從零開始：自訂設計
如果範本無法滿足你的需求，也可以從零開始自訂設計。
Flex Message 結構
Flex Message 採用階層式的結構，由外到內分為：
| 層級 | 說明 |
|---|---|
| Container | 最外層容器，定義訊息類型（Bubble 或 Carousel） |
| Bubble | 單一卡片，包含 Header、Hero、Body、Footer |
| Box | 排版容器，可以水平或垂直排列子元素 |
| Component | 基本元素，如文字、圖片、按鈕等 |
基本元件介紹
文字 (Text)：顯示文字內容，可設定字體大小、顏色、粗細等。
圖片 (Image)：顯示圖片，可設定尺寸、圓角、點擊動作等。
按鈕 (Button)：可點擊的按鈕，可設定樣式和點擊動作。
分隔線 (Separator)：水平分隔線，用於區隔內容。
填充 (Filler)：彈性空間，用於調整排版。
設計步驟
- 規劃結構：先在紙上或腦中規劃卡片的結構和內容
- 建立容器：從 Container 開始，選擇 Bubble（單卡）或 Carousel（多卡輪播）
- 添加區塊：根據需要添加 Header、Hero、Body、Footer
- 放入元件：在各區塊中放入文字、圖片、按鈕等元件
- 調整樣式：設定顏色、間距、對齊方式等
- 測試預覽：在預覽區查看效果，調整到滿意為止
實戰範例：製作產品推廣卡
讓我們透過一個實際範例，學習如何製作一張產品推廣卡。
目標效果
我們要製作一張包含以下元素的產品卡：
- 產品圖片
- 產品名稱
- 原價和特價
- 「立即購買」按鈕
- 「了解更多」按鈕
步驟一：建立基本結構
- 開啟 LINE Flex 製作器
- 選擇「Bubble」類型
- 添加 Hero 區塊（用於放置產品圖片）
- 添加 Body 區塊（用於放置產品資訊）
- 添加 Footer 區塊（用於放置按鈕）
步驟二：設定 Hero 區塊
- 在 Hero 區塊中添加 Image 元件
- 設定圖片 URL（你的產品圖片網址）
- 設定圖片尺寸為 full
- 設定圖片高度為 200px
- 設定圖片顯示模式為 cover
步驟三：設定 Body 區塊
- 在 Body 區塊中添加 Box（垂直排列）
- 在 Box 中添加 Text 元件（產品名稱）
- 設定文字內容
- 設定字體大小為 xl
- 設定字體粗細為 bold
- 添加另一個 Box（水平排列）用於價格
- 在價格 Box 中添加兩個 Text 元件
- 原價：設定刪除線樣式
- 特價：設定紅色、粗體
步驟四：設定 Footer 區塊
- 在 Footer 區塊中添加 Box（垂直排列）
- 添加 Button 元件（立即購買）
- 設定按鈕樣式為 primary
- 設定點擊動作為 uri（連結到購買頁面）
- 添加 Button 元件（了解更多）
- 設定按鈕樣式為 secondary
- 設定點擊動作為 uri（連結到產品頁面）
步驟五：匯出使用
- 點擊「匯出 JSON」按鈕
- 複製產生的 JSON 程式碼
- 在 LINE 官方帳號後台或 API 中使用
進階技巧
使用 Carousel 製作多卡輪播
如果你有多個產品或內容要展示，可以使用 Carousel 類型，讓用戶可以左右滑動查看。
- 選擇 Container 類型為 Carousel
- 添加多個 Bubble
- 每個 Bubble 可以有不同的內容
- 最多可以添加 12 個 Bubble
設定點擊動作
Flex Message 支援多種點擊動作：
| 動作類型 | 說明 | 使用場景 |
|---|---|---|
| uri | 開啟網頁連結 | 導向產品頁面、活動頁面 |
| message | 發送訊息 | 觸發聊天機器人回應 |
| postback | 發送 postback | 進階互動，需要後端處理 |
| datetimepicker | 選擇日期時間 | 預約、訂位功能 |
響應式設計
Flex Message 會自動適應不同的螢幕寬度，但你可以透過以下設定優化顯示效果：
使用百分比寬度：設定元件寬度時使用百分比而非固定像素。
設定最大寬度：為圖片設定 maxWidth 避免過大。
使用 flex 屬性：利用 flex 屬性控制元件的相對大小。
常見問題
Q：JSON 匯出後要如何使用？
A：你可以透過以下方式使用匯出的 JSON：
- LINE 官方帳號後台：在「訊息」功能中選擇「Flex Message」，貼上 JSON
- LINE Messaging API：在程式碼中使用 Push Message 或 Reply Message API 發送
- n8n 自動化：在 n8n 工作流程中使用 LINE 節點發送
Q：圖片要放在哪裡？
A：Flex Message 中的圖片需要使用公開的網址（URL）。你可以：
- 上傳到你的網站伺服器
- 使用圖床服務（如 Imgur、Cloudinary）
- 使用 LINE 官方帳號的素材庫
Q：為什麼預覽和實際發送的效果不同？
A：可能的原因包括：
- 圖片網址無法存取
- JSON 格式有誤
- LINE App 版本差異
建議在正式發送前，先發送測試訊息到自己的 LINE 帳號確認效果。
Q：可以儲存我的設計嗎？
A：登入會員後，你可以將設計儲存到帳號中，方便日後修改或重複使用。前往 會員後台 - Flex 設計 [blocked] 管理你的設計。
搭配 n8n 自動化發送
如果你想要自動化發送 Flex Message，可以搭配 n8n 自動化工具使用。我們有提供相關的 n8n 模板：
- LINE 官方帳號 AI 智能客服系統 [blocked]
這個模板可以讓你的 LINE 官方帳號自動回覆 Flex Message，提升客戶體驗。
相關工具推薦
| 工具 | 用途 | 連結 |
|---|---|---|
| 圖片壓縮 | 壓縮圖片減少載入時間 | 前往使用 [blocked] |
| 短網址產生器 | 縮短按鈕連結 | 前往使用 [blocked] |
| QR Code 製作器 | 產生 LINE 官方帳號 QR Code | 前往使用 [blocked] |
| UTM 追蹤產生器 | 追蹤按鈕點擊來源 | 前往使用 [blocked] |
結語
Flex Message 是提升 LINE 行銷效果的利器，而奧特線上工具的 LINE Flex 製作器讓你不需要學習程式，就能製作出專業的 Flex Message。無論你是要推廣產品、宣傳活動還是提供客戶服務，都能透過精美的 Flex Message 提升互動率。
現在就前往 LINE Flex 製作器 [blocked] 開始製作你的第一張 Flex Message 吧！
延伸閱讀：
- n8n 實戰教學：打造 LINE 官方帳號 AI 智能客服系統 [blocked]
- QR Code 行銷應用實戰指南 [blocked]
- 多功能展示頁完整操作教學 [blocked]
