LINE 圖文選單設計完整教學：版型選擇、配色技巧與實戰範例
從版型到配色，打造專業又好用的 Rich Menu
2026-03-10 · 10 分鐘閱讀
當顧客加入你的 LINE 官方帳號時，第一眼看到的就是底部的圖文選單（Rich Menu）。這個小小的選單，決定了顧客對你的品牌的第一印象——它看起來專業嗎？容易操作嗎？按鈕能引導顧客完成預約嗎？
一個設計良好的 Rich Menu，可以讓顧客在 3 秒內找到想要的功能（預約、查詢、客服），大幅提升使用體驗。一個設計糟糕的 Rich Menu，則會讓顧客困惑、找不到按鈕、甚至直接取消關注。本文將從版型選擇、配色原則到按鈕設計，手把手教你打造一個專業又實用的 LINE 圖文選單。
什麼是 Rich Menu？為什麼它如此重要？
Rich Menu（圖文選單）是 LINE 官方帳號底部常駐顯示的互動式選單。它就像是你的 LINE 帳號的「首頁」，顧客不需要輸入任何文字，只要點選對應的按鈕就能觸發功能。
Rich Menu 的重要性體現在三個方面：
- 降低使用門檻：顧客不需要知道任何指令，直覺式點擊就能完成操作
- 提升功能曝光：預約、查詢、會員等功能一目瞭然，不會被訊息淹沒
- 強化品牌形象：精心設計的選單展現專業度，提升顧客信任感
數據說話：有設計 Rich Menu 的 LINE 帳號，顧客互動率平均提升 3-5 倍，預約轉換率提升 40-60%。如果你已經設定了 LINE Bot 預約機器人，加上 Rich Menu 可以讓效果倍增。
版型選擇指南：6 種常用佈局
Rich Menu 有兩種尺寸：Half（半尺寸，2500 x 843 px）和 Full（全尺寸，2500 x 1686 px）。Half 適合按鈕較少的情境，Full 適合功能豐富的帳號。以下是 6 種常見的版型選擇：
| 版型名稱 | 佈局說明 | 按鈕數量 | 尺寸 | 適用場景 |
|---|---|---|---|---|
| 3+4 | 上排 3 格 + 下排 4 格 | 7 格 | Full | 功能齊全的標準配置（最推薦） |
| 2x3 | 2 排各 3 格 | 6 格 | Full | 功能均衡的服務型帳號 |
| 2+3 | 上排 2 格 + 下排 3 格 | 5 格 | Full | 重點突出 1-2 個主功能 |
| 2x2 | 2 排各 2 格 | 4 格 | Half | 簡約型，適合功能較少的帳號 |
| 1+2 | 上排 1 大格 + 下排 2 格 | 3 格 | Half | 主打一個核心功能 |
| 3+4+4 | 三排（3+4+4） | 11 格 | Full | 大型商家、功能極多 |
推薦版型：對大多數服務業店家而言，3+4 版型（7 格）是最佳選擇。上排 3 格放主要功能（開始預約、我的預約、會員資訊），下排 4 格放輔助功能（瀏覽商品、領取票券、聯繫客服、門市資訊）。7 個按鈕足以涵蓋所有常用功能，又不會太擁擠。
配色原則與 6 種主題範例
Rich Menu 的配色直接影響品牌辨識度和使用體驗。好的配色應該符合三個原則：
- 與品牌一致：使用你的品牌色系，讓顧客一看就知道是你的帳號
- 對比度足夠：文字和圖示必須清晰可見，避免淺色底配淺色字
- 不超過 3 種顏色：主色 + 輔色 + 強調色，過多顏色會顯得雜亂
VibeAI 內建 6 種經過專業設計的主題色系，你可以直接選用，也可以作為自訂設計的參考：
GREEN 主題（清新自然）
主色 #06C755，適合美容、SPA、健康產業。傳達自然、清新、放鬆的感覺。與 LINE 品牌色一致，使用者最熟悉。
BLUE 主題（專業信賴）
主色 #2196F3，適合診所、顧問、專業服務。藍色傳達專業、信任、可靠的品牌形象。
PURPLE 主題（優雅高級）
主色 #9C27B0，適合高端美容、精品、藝術工作室。紫色傳達優雅、神秘、高品質的感覺。
ORANGE 主題（活力熱情）
主色 #FF9800，適合健身房、餐廳、寵物店。橘色傳達活力、溫暖、親切的品牌個性。
DARK 主題（沉穩質感）
主色 #37474F，適合攝影工作室、設計事務所、高端男性服務。深色傳達沉穩、質感、專業。
CUSTOM 自訂主題
自行上傳背景圖片，完全自訂配色。適合有品牌設計師的店家，可以打造與官網、實體店一致的視覺風格。需訂閱 CUSTOM_RICH_MENU 功能。
按鈕設計的 5 個黃金法則
法則一：圖示 + 文字雙重引導
每個按鈕都應該同時包含圖示和文字標籤。圖示讓使用者一眼辨識功能（例如日曆圖示 = 預約），文字則消除歧義（「開始預約」比單獨一個日曆圖示更明確）。VibeAI 的進階模式支援圓形圖示 + 下方文字標籤的設計，美觀又實用。
法則二：最重要的按鈕放左上角
使用者的視覺動線是從左上到右下（Z 字型掃描）。把最核心的功能（通常是「開始預約」）放在最顯眼的位置——3+4 版型的上排第一格、2+3 版型的上排左邊。
法則三：用顏色區分功能層級
主要功能（預約、查詢）可以用鮮明的強調色，輔助功能（設定、客服）用較低調的色調。但注意不要每個按鈕都用不同的顏色——那會讓選單看起來像馬戲團。建議最多使用 2-3 種色調。
法則四：按鈕文字要行動導向
好的按鈕文字應該告訴使用者「按下去會發生什麼」，而不只是描述功能。比較以下兩種寫法：
- 一般：「預約」→ 更好：「開始預約」
- 一般：「商品」→ 更好：「瀏覽商品」
- 一般：「票券」→ 更好：「領取票券」
- 一般：「會員」→ 更好：「會員資訊」
法則五：控制按鈕數量，少即是多
按鈕太多會讓使用者選擇困難（心理學上的「選擇悖論」）。對大多數服務業帳號來說，5-7 個按鈕就足夠了。如果你有超過 7 個功能要放，考慮將次要功能整合到 Flex 主選單中，而非全部塞在 Rich Menu 裡。
Half vs Full 尺寸選擇
| 規格 | Half（半尺寸） | Full（全尺寸） |
|---|---|---|
| 尺寸（px） | 2500 x 843 | 2500 x 1686 |
| 按鈕數量 | 2-4 格 | 5-11 格 |
| 佔螢幕比例 | 約 1/4 螢幕 | 約 1/2 螢幕 |
| 優點 | 不遮蔽聊天內容、簡潔 | 按鈕清晰、功能豐富 |
| 缺點 | 按鈕較小、功能有限 | 佔據較多螢幕空間 |
| 適用場景 | 功能簡單的帳號（1-4 個功能） | 功能豐富的帳號（5 個功能以上） |
自動選擇：在 VibeAI 中，系統會根據你選擇的版型自動判斷尺寸。2 行以內的版型（如 2x2、1+2）使用 Half 尺寸，3 行以上的版型（如 3+4、3+4+4）自動使用 Full 尺寸，你不需要手動設定。
常見設計錯誤與修正
錯誤一：文字太小看不清
Rich Menu 在手機上顯示的實際大小，遠比你在電腦上設計時看到的小。建議文字字級至少 36px 以上（基於 2500px 寬度的設計稿），並且在手機上實際預覽確認可讀性。
錯誤二：背景太花導致按鈕不明顯
有些店家把實體店的美美照片當背景——結果按鈕文字被背景吃掉了。如果使用圖片背景，務必加上半透明遮罩（overlay）讓文字清晰可見。或者直接使用純色背景，反而更專業。
錯誤三：沒有預約按鈕
聽起來很基本，但確實有店家的 Rich Menu 只放了「關於我們」「最新消息」這類資訊型按鈕，卻沒有最重要的「開始預約」。Rich Menu 的核心目的是引導顧客行動，預約按鈕必須是最顯眼的那一個。
錯誤四：按鈕點擊後沒有回饋
顧客按了按鈕卻沒有任何反應，會以為系統壞了。每個按鈕都應該設定對應的觸發動作：發送文字訊息（觸發 Bot 回應）、開啟連結、或觸發 Flex 彈窗。串接 LINE Bot 後，按鈕可以直接觸發預約流程。
錯誤五：長期不更新
設計好 Rich Menu 後就放著不管？建議至少每季更新一次，配合季節活動、新服務或促銷活動調整按鈕內容和視覺設計。定期更新也能讓老顧客感到新鮮感。
在 VibeAI 中設定 Rich Menu 的步驟
1
進入選單設計頁面
登入 VibeAI 店家後台，點選側邊欄「LINE 設定」→「選單設計」，或直接進入「選單設計」頁面。
2
選擇版型
從預設版型中選擇適合你的佈局（推薦 3+4）。系統會自動判斷使用 Half 或 Full 尺寸。
3
選擇主題或自訂配色
選擇內建的 6 種主題之一，或訂閱 CUSTOM_RICH_MENU 功能後上傳自訂背景圖片。
4
設定每個按鈕
為每個格子設定圖示、文字標籤和觸發動作。建議的按鈕配置：開始預約、我的預約、瀏覽商品、領取票券、我的票券、會員資訊、聯繫客服。
5
預覽並發佈
在預覽畫面確認每個按鈕的位置和外觀正確，然後點擊「發佈」。Rich Menu 會自動套用到你的 LINE 官方帳號，所有好友立即看到新選單。
進階技巧：Flex 主選單搭配
除了 Rich Menu，VibeAI 還提供「Flex 主選單」功能。當顧客輸入任意文字時，系統會回覆一個精美的卡片式選單，包含預約流程步驟說明和所有功能入口。Flex 主選單的好處是可以展示更豐富的資訊（例如預約流程圖解、店家形象照），也可以和LINE 行銷策略整合，自訂標題顏色、按鈕配色和卡片圖片。
建議的搭配方式：Rich Menu 放最常用的 5-7 個功能按鈕，Flex 主選單則展示完整的功能導覽和品牌形象。兩者互補，給顧客最完整的使用體驗。
小技巧：在 Rich Menu 中加入一個「更多功能」按鈕，點擊後觸發 Flex 主選單。這樣即使 Rich Menu 空間有限，也能透過 Flex 選單展示所有功能。
常見問題
Q1：我不會設計，能做出好看的 Rich Menu 嗎？
可以。VibeAI 內建 6 種主題都是經過專業設計的，你只需要選擇主題、設定按鈕文字即可。系統會自動產生配色協調的圖示和排版，完全不需要任何設計技能。如果你想要更客製化的設計，可以訂閱 CUSTOM_RICH_MENU 功能，上傳自己的背景圖片。
Q2：Rich Menu 多久更新一次比較好？
建議至少每季更新一次。常見的更新時機：推出新服務、季節活動（如中秋節優惠）、店慶、更換品牌視覺等。每次更新都是和顧客互動的好機會——可以搭配一則推播訊息告知顧客「新選單上線」。
Q3：我需要另外請設計師嗎？
大多數情況下不需要。使用 VibeAI 的內建主題就能做出專業水準的 Rich Menu。如果你的品牌有嚴格的 VI（視覺識別）規範，或想要使用實體店照片作為背景，可以請設計師製作一張背景圖，然後上傳到 VibeAI 的自訂模式中。不過，設定預約系統本身完全不需要設計背景。