教學

如何建立LINE圖文選單:完整尺寸、範本與設計指南

學習如何設計並建立有效的LINE圖文選單(Rich Menu),將互動率提升高達400%。涵蓋尺寸規格(2500x1686)、範本與逐步建立教學。

LineBot.pro Team12 分鐘閱讀
如何建立LINE圖文選單:完整尺寸、範本與設計指南

#什麼是LINE圖文選單?

LINE圖文選單(Rich Menu)是顯示在LINE聊天畫面底部的互動式選單。與標準鍵盤不同,它顯示一張自訂圖片,並分割成可點選的區塊,每個區塊都連結到特定動作,例如開啟URL、發送訊息或觸發聊天機器人流程。

LINE圖文選單範例 - 餐廳業務展示選單選項
LINE圖文選單範例 - 餐廳業務展示選單選項

圖文選單已成為使用LINE官方帳號的企業不可或缺的工具,因為它提供:

  • 對關鍵動作和CTA的持續可見性
  • 互動率提升高達400%
  • 無需輸入即可透過服務進行引導式導覽
  • 為顧客提供專業的類App體驗

#圖文選單對企業的重要性

在台灣、日本和泰國,LINE以超過2億活躍使用者主導行動通訊市場。設計良好的圖文選單可以:

  1. 透過自助服務選項減少60%的客服負擔
  2. 讓CTA隨時可見以提高轉換率
  3. 透過專業設計提升品牌形象
  4. 為您的網站、促銷活動和預約系統導流

專業提示:使用最佳化圖文選單的公司回報,與純文字帳號相比,互動率提高了3-4倍。

圖文選單互動率統計顯示400%成長
圖文選單互動率統計顯示400%成長

#尺寸規格與要求

LINE支援兩種圖文選單尺寸。以下是比較:

LINE圖文選單尺寸規格 - 完整版與精簡版
LINE圖文選單尺寸規格 - 完整版與精簡版

#完整尺寸(推薦)

  • 尺寸:2500 x 1686像素
  • 長寬比:1.48:1
  • 檔案大小上限:1MB
  • 支援格式:PNG、JPEG

#精簡尺寸

  • 尺寸:2500 x 843像素
  • 長寬比:2.97:1
  • 檔案大小上限:1MB
  • 支援格式:PNG、JPEG

#區塊設定

每個圖文選單最多可以有20個可點選區塊,但6-9個區塊通常能提供最佳使用者體驗。過多的區塊可能會讓行動裝置螢幕上的使用者感到混亂。

圖文選單區塊格線顯示6區塊版面
圖文選單區塊格線顯示6區塊版面

#設計最佳實務

#視覺層次

圖文選單設計的視覺層次圖
圖文選單設計的視覺層次圖

  • 最重要的動作放在左上角區塊(使用者從左上角開始瀏覽)
  • 對可點選區塊使用對比色
  • 包含清晰的圖示與文字標籤
  • 保持元素之間的一致間距

#行動裝置最佳化

  • 使用最小44x44像素的觸控目標
  • 確保文字在小尺寸下可讀(最小相當於14pt)
  • 多種螢幕尺寸上測試
  • 考量單手使用的拇指觸及範圍

行動UX的拇指觸及範圍圖
行動UX的拇指觸及範圍圖

#品牌一致性

  • 符合您的品牌色彩與字型
  • 使用一致的圖示風格
  • 如果空間允許,可以巧妙地加入Logo
  • 保持專業品質的圖像

#LINE的色彩心理學

  • 綠色(#06C755):信任、成長、LINE原生
  • 藍色:專業、可靠
  • 橘色/黃色:急迫感、促銷
  • 留白:清晰、高級感

#逐步建立流程

#步驟1:規劃選單結構

在設計之前,列出您希望使用者執行的所有動作:

  • 聯絡/客服
  • 查看產品/服務
  • 預約
  • 查看促銷
  • 造訪網站
  • 分享給好友

提示:最多限制6-9個動作。根據業務目標排定優先順序。

#步驟2:建立設計

使用Figma、Canva或Photoshop等設計工具:

圖文選單建立的設計工具比較
圖文選單建立的設計工具比較

  1. 建立正確尺寸的畫布(2500 x 1686px)
  2. 將區塊劃分為格線區域
  3. 為每個動作加入圖示與文字
  4. 匯出為1MB以下的PNG或JPEG

需要協助? 試試LineBot.pro的AI圖文選單產生器,立即取得專業設計。

#步驟3:上傳到LINE官方帳號管理後台

LINE官方帳號管理後台圖文選單區塊
LINE官方帳號管理後台圖文選單區塊

  1. 登入LINE官方帳號管理後台
  2. 前往圖文選單區塊
  3. 點選建立
  4. 上傳您的圖片
  5. 使用區塊編輯器定義可點選區塊

#步驟4:設定動作

為每個區塊選擇動作類型:

動作類型說明最佳使用情境
URL開啟網頁或LIFF應用網站連結、預約頁面
Message發送預先定義的訊息觸發聊天機器人流程
Postback觸發後端處理進階自動化
Text在聊天中顯示文字FAQ回覆
Rich menu switch切換到另一個選單子選單、導覽

圖文選單動作設定介面
圖文選單動作設定介面

#步驟5:設定顯示條件

  • 選擇預設或依分眾顯示
  • 視需要設定依時間排程(例如,午餐/晚餐不同選單)
  • 啟用或停用選單
  • 為多個選單設定顯示優先順序

#進階功能與技巧

#動態選單切換

為不同情境建立多個選單:

動態選單切換流程圖
動態選單切換流程圖

  • 主選單 → 產品子選單 → 類別子選單
  • 會員選單 vs. 訪客選單
  • 早餐選單 vs. 晚餐選單(適用於餐廳)
  • 購買前 → 購買後流程

#依分眾顯示的選單

根據使用者屬性顯示不同選單:

  • 新顧客 vs. 回頭客
  • VIP vs. 一般會員
  • 依地點顯示的選單
  • 特定語言的選單

依分眾鎖定選單的示意圖
依分眾鎖定選單的示意圖

進一步了解LINE行銷自動化以實作進階分眾。

#A/B測試

測試不同設計以最佳化:

  • 追蹤每個區塊的點擊率
  • 比較轉換率
  • 根據數據持續改進
  • 測試CTA文案變體

#與聊天機器人整合

將圖文選單與LINE聊天機器人結合:

  • 流暢的對話流程
  • 情境感知回應
  • 自動化顧客旅程
  • 24/7自助服務支援

圖文選單與聊天機器人整合流程
圖文選單與聊天機器人整合流程

#應避免的常見錯誤

圖文選單常見錯誤資訊圖表
圖文選單常見錯誤資訊圖表

  1. 選項太多:6-9個區塊效果最好;更多會讓使用者混亂
  2. 觸控目標太小:確保區塊在行動裝置上容易點選
  3. 對比度不佳:文字必須在背景上清晰可讀
  4. 沒有明確的CTA:每個區塊應有明確目的
  5. 靜態思維:定期用新內容更新選單
  6. 忽視分析數據:持續監控哪些區塊被點選
  7. 忘記行動優先:為拇指設計,而不是滑鼠
  8. 品牌不一致:保持視覺風格統一

#結論

設計良好的LINE圖文選單可以將您的LINE官方帳號轉變為強大的商業工具。從明確的策略開始,遵循設計最佳實務,並根據使用者數據持續最佳化。

重點整理:

  • 選擇合適的尺寸(推薦完整版2500x1686px)
  • 限制在6-9個可點選區塊
  • 優先考量行動裝置友善的觸控目標
  • 根據分析數據測試與改進

準備好建立您的圖文選單了嗎?

試用LineBot.pro的圖文選單建立工具,取得AI驅動的設計建議和簡單的拖放編輯。幾分鐘內建立專業選單。

相關資源:

關於 LineBot.pro

LineBot.pro 是專為 LINE 官方帳號打造的自動化平台,協助您建立圖文選單、聊天機器人與群發訊息。這些指南由我們的團隊根據 LINE Messaging API 的實務經驗撰寫。

聯絡我們
LineBot.pro

準備好自動化您的LINE業務了嗎?

立即使用LineBot.pro開始自動化您的LINE訊息溝通。