LINE 圖文選單設計完整教學：版型選擇、配色技巧與實戰範例
從版型到配色，打造專業又好用的 Rich Menu
2026-03-10 · 更新於 2026-09-29 · 10 分鐘閱讀
簡單回答：LINE 圖文選單的官方尺寸是 2500×1686（大）或 2500×843（小）。把最常用的「預約」放在最顯眼的位置、每格圖示搭配文字、格數不要太多；用現成範本套用，就不必自己開 Photoshop。
本文重點：① 官方尺寸與版型怎麼選 ② 配色與按鈕設計 5 個法則 ③ 在 VibeAI 設定、預覽與發布的步驟。
當顧客加入你的 LINE 官方帳號時，第一眼看到的就是底部的圖文選單（Rich Menu）。這個小小的選單，決定了顧客對你的品牌的第一印象——它看起來專業嗎？容易操作嗎？按鈕能引導顧客完成預約嗎？
一個設計良好的 Rich Menu，可以讓顧客在 3 秒內找到想要的功能（預約、查詢、客服），大幅提升使用體驗。一個設計糟糕的 Rich Menu，則會讓顧客困惑、找不到按鈕、甚至直接取消關注。本文將從版型選擇、配色原則到按鈕設計，手把手教你打造一個專業又實用的 LINE 圖文選單。
什麼是 Rich Menu？為什麼它如此重要？
Rich Menu（圖文選單）是 LINE 官方帳號底部常駐顯示的互動式選單。它就像是你的 LINE 帳號的「首頁」，顧客不需要輸入任何文字，只要點選對應的按鈕就能觸發功能。
Rich Menu 的重要性體現在三個方面：
- 降低使用門檻：顧客不需要知道任何指令，直覺式點擊就能完成操作
- 提升功能曝光：預約、查詢、會員等功能一目瞭然，不會被訊息淹沒
- 強化品牌形象：精心設計的選單展現專業度，提升顧客信任感
為什麼值得花時間設計：圖文選單固定在聊天室底部，顧客不用打字就能點到「預約」「我的預約」；少了選單，顧客只能自己打字或往上翻訊息找入口。如果你已經設定了 LINE Bot 預約機器人，加上 Rich Menu 就是讓顧客找得到它的入口。效果請用自己的數據看：比較設計前後「LINE 來源的預約筆數」即可。
版型選擇指南：9 種佈局
Rich Menu 有兩種尺寸：Half（半尺寸，2500 x 843 px）和 Full（全尺寸，2500 x 1686 px）。Half 適合按鈕較少的情境，Full 適合功能豐富的帳號。免費可發布的是 3+4 樣板（半尺寸）；其他佈局與自訂背景需訂閱「進階自訂選單」（99 點/月）。以下是 VibeAI 選單設計頁提供的 9 種版型（2026-09-24 新增兩種「左欄」版型，給整張設計好的圖使用）：
| 版型名稱 | 佈局說明 | 按鈕數量 | 尺寸 | 適用場景 |
|---|---|---|---|---|
| 3+4 | 上排 3 格 + 下排 4 格 | 7 格 | Half | 功能齊全的標準配置（最推薦） |
| 4+4 | 上排 4 格 + 下排 4 格 | 8 格 | Half | 功能較多、又想維持半尺寸（進階） |
| 2x3 | 2 排各 3 格 | 6 格 | Half | 功能均衡的服務型帳號 |
| 2+3 | 上排 2 格 + 下排 3 格 | 5 格 | Half | 重點突出 1-2 個主功能 |
| 2x2 | 2 排各 2 格 | 4 格 | Half | 簡約型，適合功能較少的帳號 |
| 1+2 | 上排 1 大格 + 下排 2 格 | 3 格 | Half | 主打一個核心功能 |
| 3+4+4 | 三排（3+4+4） | 11 格 | Full | 大型商家、功能極多 |
| 左欄+1+2 | 左側一整欄 + 右上 1 格 + 右下 2 格 | 4 格 | Half | 左邊放 Logo 的整張設計圖 |
| 左欄+3 | 左側一整欄 + 右側三格一排 | 4 格 | Half | 左邊放 Logo、右邊三個按鈕的整張設計圖 |
推薦版型：對大多數服務業店家而言，3+4 版型（7 格）是最佳選擇。上排 3 格放主要功能（開始預約、我的預約、會員資訊），下排 4 格放輔助功能（瀏覽商品、領取票券、聯絡店家、查看活動）。7 個按鈕足以涵蓋所有常用功能，又不會太擁擠。
配色原則與 6 種主題範例
Rich Menu 的配色直接影響品牌辨識度和使用體驗。好的配色應該符合三個原則：
- 與品牌一致：使用你的品牌色系，讓顧客一看就知道是你的帳號
- 對比度足夠：文字和圖示必須清晰可見，避免淺色底配淺色字
- 不超過 3 種顏色：主色 + 輔色 + 強調色，過多顏色會顯得雜亂
VibeAI 選單設計頁內建 6 種經過專業設計的主題色系，你可以直接選用，也可以作為自訂設計的參考：
精品風（溫潤質感・進階）
奶茶暖色調，適合美甲美睫、質感髮廊、SPA 會館、精品選物。屬於「進階自訂選單」（99 點/月）的主題，訂閱後才能發布。
LINE 綠（清新自然）
主色 #06C755，適合美容、SPA、健康產業。傳達自然、清新、放鬆的感覺。與 LINE 品牌色一致，使用者最熟悉。
海洋藍（專業信賴）
主色 #2196F3，適合診所、顧問、專業服務。藍色傳達專業、信任、可靠的品牌形象。
皇家紫（優雅高級）
主色 #9C27B0，適合高端美容、精品、藝術工作室。紫色傳達優雅、神秘、高品質的感覺。
日落橘（活力熱情）
主色 #FF9800，適合健身房、餐廳、寵物店。橘色傳達活力、溫暖、親切的品牌個性。
暗黑（沉穩質感）
主色 #2C3E50，適合攝影工作室、設計事務所、高端男性服務。深色傳達沉穩、質感、專業。
想用自己的背景圖？背景圖不是第 7 種主題，而是選單設計頁另一張「背景圖片（選填）」卡片（需訂閱「進階自訂選單」）。上傳後系統會在背景圖上疊加每格的圖示與文字標籤（每格也可以設定不顯示圖示）；目前沒有「上傳一整張設計好的選單圖」的入口。
按鈕設計的 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 |
| 按鈕數量 | 3–8 格（3+4、4+4、2x3、2+3、2x2、1+2） | 11 格（3+4+4） |
| 佔螢幕比例 | 約 1/4 螢幕 | 約 1/2 螢幕 |
| 優點 | 不遮蔽聊天內容、簡潔 | 按鈕清晰、功能豐富 |
| 缺點 | 按鈕較小、功能有限 | 佔據較多螢幕空間 |
| 適用場景 | 大多數店家（8 個功能以內） | 功能極多的帳號（需要 11 格） |
自動選擇：在 VibeAI 中，系統會根據你選擇的版型自動判斷尺寸。3 行的 3+4+4 使用 Full 尺寸，其餘 2 行的版型（含 3+4、4+4、2x2、1+2）使用 Half 尺寸，你不需要手動設定。
常見設計錯誤與修正
錯誤一：文字太小看不清
Rich Menu 在手機上顯示的實際大小，遠比你在電腦上設計時看到的小。建議文字字級至少 36px 以上（基於 2500px 寬度的設計稿），並且在手機上實際預覽確認可讀性。
錯誤二：背景太花導致按鈕不明顯
有些店家把實體店的美美照片當背景——結果按鈕文字被背景吃掉了。如果使用圖片背景，務必加上半透明遮罩（overlay）讓文字清晰可見。或者直接使用純色背景，反而更專業。
錯誤三：沒有預約按鈕
聽起來很基本，但確實有店家的 Rich Menu 只放了「關於我們」「最新消息」這類資訊型按鈕，卻沒有最重要的「開始預約」。Rich Menu 的核心目的是引導顧客行動，預約按鈕必須是最顯眼的那一個。
錯誤四：按鈕點擊後沒有回饋
顧客按了按鈕卻沒有任何反應，會以為系統壞了。每個按鈕都應該設定對應的觸發動作：發送文字訊息（觸發 Bot 回應）、開啟連結、或觸發 Flex 彈窗。串接 LINE Bot 後，按鈕可以直接觸發預約流程。
錯誤五：長期不更新
設計好 Rich Menu 後就放著不管？建議至少每季更新一次，配合季節活動、新服務或促銷活動調整按鈕內容和視覺設計。定期更新也能讓老顧客感到新鮮感。
不想自己配？12 款一頁式設計範本
如果你想要「整張設計好」的選單，不想自己挑版型、配色，可以直接用選單設計頁最上方的「一頁式設計範本」區塊。它是整張構圖的設計，品牌大字會自動帶入你的店名，目前有 12 種風格：
- 編輯雜誌（美髮・美容・SPA）、手繪黑板（咖啡餐飲）、日系簡約、復古印刷（理髮・文青）
- 漸層玻璃（美甲美睫）、力量工業（健身房）、清爽醫療（診所醫美）、萌寵樂園（寵物）
- 暗夜車庫（洗車汽美）、攝影底片（攝影棚）、禪境流動（瑜珈身心靈）、筆記教室（補習家教）
使用方式與限制：
- 預覽免費：每一款都可以先看帶入自己店名的實際效果，也可以換六格的功能與文字（版面與背景設計不變）。
- 發布需訂閱「進階自訂選單」（99 點/月）。發布時會同時套用同風格的聊天主選單（Flex），整組視覺一致；原本的 Flex 主選單自訂與「每格設定」草稿會被覆蓋。
- 可以反悔：發布前系統會自動備份你目前的設計，發布後可在同一區按「還原發布前的設計」。
在 VibeAI 中設定 Rich Menu 的步驟
1
進入選單設計頁面
登入 VibeAI 店家後台，點選側邊欄「LINE 官方帳號」→「選單設計」。
2
選擇版型
從預設版型中選擇適合你的佈局（推薦 3+4）。系統會自動判斷使用 Half 或 Full 尺寸。
3
選擇主題或自訂配色
選擇內建的 6 種主題之一，或訂閱「進階自訂選單」後在「背景圖片（選填）」上傳背景圖。
4
設定每個按鈕
為每個格子設定圖示、文字標籤和觸發動作。建議的按鈕配置：開始預約、查詢預約、瀏覽商品、領取票券、我的票券、會員資訊、聯絡店家。
5
預覽並發佈
在預覽畫面確認每個按鈕的位置和外觀正確，然後點擊「發布到 LINE」。Rich Menu 會自動套用到你的 LINE 官方帳號，所有好友立即看到新選單。
每格按鈕可以觸發哪些動作？（2026 更新）
Rich Menu 好不好用，一半取決於「按下去發生什麼事」。以 VibeAI 為例，每個格子的動作下拉有 13 種：10 個系統功能，加上傳送文字、打開網址、Flex 彈窗，涵蓋幾乎所有店家情境：
| 動作類型 | 點擊後行為 | 適合情境 |
|---|---|---|
| 開始預約 | 直接進入預約流程（選服務→日期→時段） | 所有預約型店家的主按鈕 |
| 其他系統功能 | 查詢預約、瀏覽商品、我的訂單、作品展示、領取票券、我的票券、會員資訊、聯絡店家、查看活動 | 依店家有開的功能挑選放入 |
| Flex 彈窗 | 彈出自訂卡片（圖片+文字+按鈕） | 價目表、交通資訊、最新活動 |
| 打開網址 | 跳轉外部連結 | 官網、IG、Google 評論、報名表單 |
| 傳送文字 | 替顧客送出指定文字訊息 | 搭配關鍵字自動回覆、常見問題快捷鍵 |
注意：傳送文字、打開網址、Flex 彈窗這三種動作，以及 3+4 以外的版型，都需要訂閱「進階自訂選單」（99 點/月）才能發布；免費版發布的是 3+4 預設樣板。
圖示部分也有彈性：每格圖示可選小、中、大、填滿四種尺寸（「填滿」是 cover 模式，整格被圖片覆蓋，適合放商品照或形象照），也可以整格「不顯示圖示」只留文字標籤，做出乾淨的文字選單風格。背景圖與每格圖示都支援本機上傳，儲存後會保留在雲端，重新整理不會消失。
進階技巧：Flex 主選單搭配
除了 Rich Menu，VibeAI 還提供「Flex 主選單」功能。在「LINE 設定」開啟「啟用自動回覆」後（2026-08-28 之後註冊的店家預設關閉），顧客輸入任意文字時，系統會回覆一個卡片式選單，包含預約流程步驟說明和所有功能入口。Flex 主選單的好處是可以展示更豐富的資訊（例如預約流程圖解、店家形象照），也可以和LINE 行銷策略整合，自訂標題顏色、按鈕配色和卡片圖片。
建議的搭配方式：Rich Menu 放最常用的 5-7 個功能按鈕，Flex 主選單則展示完整的功能導覽和品牌形象。兩者互補，給顧客最完整的使用體驗。
小技巧：在 Rich Menu 的某一格設定「Flex 彈窗」動作（需訂閱「進階自訂選單」），把放不下的功能做成可左右滑動的卡片。這樣即使 Rich Menu 空間有限，也能透過彈窗展示更多功能。
常見問題
Q1：我不會設計，能做出好看的 Rich Menu 嗎？
可以。VibeAI 內建 6 種主題都是經過專業設計的，你只需要選擇主題、設定按鈕文字即可。系統會自動產生配色協調的圖示和排版，完全不需要任何設計技能。也可以直接套用選單設計頁最上方的 12 款一頁式設計範本（預覽免費，發布需訂閱「進階自訂選單」）。如果你想要更客製化的設計，可以訂閱「進階自訂選單」，上傳自己的背景圖片。
Q2：Rich Menu 多久更新一次比較好？
建議至少每季更新一次。常見的更新時機：推出新服務、季節活動（如中秋節優惠）、店慶、更換品牌視覺等。每次更新都是和顧客互動的好機會——可以搭配一則推播訊息告知顧客「新選單上線」。
Q3：我需要另外請設計師嗎？
大多數情況下不需要。使用 VibeAI 的內建主題就能做出專業水準的 Rich Menu。如果你的品牌有嚴格的 VI（視覺識別）規範，或想要使用實體店照片作為背景，可以請設計師製作一張背景圖，然後上傳到選單設計頁的「背景圖片（選填）」（需訂閱「進階自訂選單」），系統會在背景圖上疊加每格的圖示與標籤（可設定不顯示圖示）。不過，設定預約系統本身完全不需要設計背景。
Q4：發佈後為什麼在電腦上看不到 Rich Menu？
Rich Menu 只在手機版 LINE 顯示，電腦版 LINE 不支援。這是 LINE 平台本身的限制，不是設定錯誤。發佈後請用手機開啟與官方帳號的聊天室確認；若手機也沒看到，先檢查 Messaging API 是否串接成功（參考 LINE Messaging API 設定教學）。
Q5：改了每格文字或動作，發佈後 LINE 上卻沒變化？
兩個常見原因：① 只按了「儲存草稿」沒按「發布到 LINE」——儲存草稿不會推送，發布才會推送到 LINE 平台；② 使用預設樣板路徑時，「每格自訂」需要進階自訂選單功能才會生效，發佈時系統會明確提示。另外 LINE App 端有快取，發佈後把聊天室關掉重開即可看到新選單。