LINE 圖文選單設計 5 大原則 — 讓客戶一鍵找到想要的
LINE 圖文選單設計 5 大原則 — 讓客戶一鍵找到想要的
為什麼圖文選單這麼重要
LINE 官方帳號的圖文選單是客戶進入帳號後第一眼看到的「首頁」。設計好可以讓會員自助完成 60% 的任務（查訂單、預約、領券、找門市），客服壓力直接砍半。設計壞則是「客戶找不到任何東西，最後封鎖帳號」。
原則一：聚焦 3-4 個高頻動作
LINE 圖文選單支援 6 格（或 2x3、1x3 其他版型），但「能放 6 格不代表要放滿 6 格」。
我們做過 10 家客戶的點擊熱圖分析，發現 80% 的點擊集中在前 3 格。剩下的 3 格無論放什麼，點擊率都低於 5%。
建議：先列出 LINE 官方帳號使用者最高頻的 5-8 個動作，挑前 3-4 個放圖文選單，其他放在「更多」子選單或會員專區頁。
原則二：視覺層次要清楚
最常見的災難畫面：6 格全部用花俏插畫、每格顏色不一樣、文字大小相同。客戶眼睛無法聚焦，根本不知道哪個是重點。
建議做法：
- 主視覺用大色塊 + 簡單 icon，不用插畫
- 主要動作（例如「立即預約」）用品牌主色，次要動作用灰底
- 文字統一一個字體、兩個字級（標題大、副標小）
原則三：文字要在手機上可讀
LINE 圖文選單長寬比固定（2500x1686 像素或 2500x843），但實際顯示時會縮小到手機螢幕約 350 像素寬。換算下來，每格文字實際顯示大小常常只有 12-14px。
踩雷清單：
- 文字不要小於原圖 60px（手機顯示約 14px）
- 不要用細體字（手機壓縮後幾乎看不見）
- 文字與背景對比度 4.5:1 以上（深底配淺字 / 淺底配深字）
原則四：上線後要 A/B 測試
很多店家做完圖文選單就停在那裡半年不動。但會員行為會隨季節、活動、產品線變化。建議每 2-3 個月做一次 A/B 測試。
可測試的變量：
- 第一格放「預約」vs 放「優惠」
- 主視覺用照片 vs 用插畫
- 按鈕文字「立即預約」vs 「快速預約」
實作上，LINE 官方後台不支援原生 A/B test，但可以靠 CRM 系統做「圖文選單 V1 給 50% 會員、V2 給 50% 會員」分群指派，一週後看點擊率。
原則五：依會員生命週期動態切換
進階做法：不同階段的會員看到不同的圖文選單。
- 新客（30 天內）：第一格放「首購優惠券」、第二格放「品牌介紹」
- 熟客（90 天內活躍）：第一格放「預約 / 點餐」、第二格放「會員等級」
- 沉睡客（180 天未互動）：第一格放「再來一次 8 折券」
技術上靠「圖文選單按會員標籤指派」實現。LINE 官方後台支援「依使用者類型切換選單」，搭配 CRM 自動加標籤就能做到。
圖文選單的常見「系統功能」串接
宇果國際行銷的 LINE CRM 平台支援多種系統功能直連，每格按鈕可以直接接到：
- 開啟 LIFF 預約頁
- 開啟會員專區
- 開啟點數兌換
- 開啟最近訂單
- 觸發特定推播劇本
不用每個按鈕都自己寫網址 / 接 API，省下 80% 設定時間。
結語：圖文選單不是美術作品
設計師常見的誤區是把圖文選單當「品牌視覺作品」做，結果華麗但難用。請記住：圖文選單的唯一目的是「讓客戶以最短路徑完成任務」，不是給設計師交差。
如果你的圖文選單上線超過 6 個月沒動過，建議拿出後台點擊數據檢視一遍，常常會發現 3 格是浪費的。
延伸閱讀
Tags：LINE 圖文選單 / UX 設計 / LINE@ / 視覺設計
👉 加入宇果 LINE@ 諮詢：點此加入