瞻新資訊|網站設計、APP開發、UI/UX設計、LINE Bot開發

顧問指著筆電螢幕上手機聊天室畫面下方的圖文選單按鈕格子向客戶說明,畫面上方讀者提問氣泡寫著圖文選單除了放一張圖還能做到什麼,四周有手機選單、按鈕方格、切換箭頭、勾選四個白色描邊小圖示

LINE 圖文選單是什麼?尺寸、版型與進階應用指南

作者|瞻新資訊 陳俊鳴顧問(資深SEO顧問・搜尋流量與銷售漏斗規劃)

打開一個LINE官方帳號的聊天室,畫面下方常常會有一排圖文按鈕,點下去可以連到菜單、預約頁面或常見問題——這個功能叫做圖文選單,是經營LINE官方帳號很基本、卻也最容易被隨便做的一個環節。

這篇文章把圖文選單的尺寸、版型這些基礎知識講清楚,也補上中文網路上比較少提到的兩個進階應用:多層次切換與分眾顯示。

LINE圖文選單是什麼?為什麼值得花心思設計

圖文選單(Rich Menu)是LINE官方帳號聊天室下方可以彈出與收合的圖片選單,使用者不管是因為推播訊息、還是自己點開聊天室,都會看到這個選單。常見的應用包括導購連結、預約系統、優惠券、集點卡,或是直接回覆常見問題。

它值得花心思設計的原因很直接:這個選單幾乎是使用者每次打開聊天室都會看到的畫面,等於是官方帳號的「常駐入口」。設計得好,能直接把使用者導向你最想讓他做的事(預約、購買、查詢),設計得亂,使用者可能點兩下找不到想要的東西就關掉了。

左側畫手機畫面下方一大塊6宮格選單代表大型最多6格,右側畫手機畫面下方一小條精簡選單代表小型精簡不佔版面

尺寸與版型怎麼選

圖文選單分成兩種基本版型,尺寸規格是固定的:

版型尺寸適合情境
大型(全尺寸)2500×1686像素(或等比縮小1200×810、800×540)按鈕數量較多(最多6格),適合功能豐富的官方帳號
小型(半尺寸)2500×843像素(或等比縮小1200×405、800×270)精簡選單,不佔用太多聊天室畫面

實務上大型選單較常見,因為可以放比較多功能入口;小型選單適合帳號經營目的單純、不想讓選單佔用太多聊天室空間的情境。版型底下還可以依需求選擇幾格版位(例如6格、4格、3格、2格、1格),格數越多能放的功能越多,但每一格能呈現的資訊也越少,要拿捏平衡。

左側畫六個擠在一起文字很小很密集的按鈕格子代表塞滿六格文字擠又難按,右側畫三個大而清楚留白充足的按鈕格子代表精簡三格清楚好點擊

常見誤解:按鈕跟文字是不是塞越多越好

不少人設計圖文選單時,會想著「難得有這個版面,多放一點功能」,把選單塞得密密麻麻。這其實是常見的誤解。

圖文選單是在手機的小螢幕上呈現的,格數越多,每一格能給的視覺空間就越小,按鈕上的文字容易變得又小又擠,使用者要瞇著眼睛看才看得清楚,甚至因為按鈕太小而誤觸旁邊的選項。與其塞滿六個看不清楚的小按鈕,不如挑選使用者最需要的三到四個核心功能,做得清楚好按,轉換效果通常更好。

左側畫手機顯示主選單三個大分類按鈕,右側畫手機顯示切換後的子選單多個細項按鈕

進階應用一:多層次選單,像切分頁一樣切換

圖文選單不是只能有一種固定畫面。LINE Messaging API提供了「選單別名」(rich menu alias)的機制,讓多個圖文選單之間可以互相切換,效果就像切換分頁一樣——使用者點擊選單裡的某個按鈕,整組選單就換成另一組選項。

實際要做出這個效果,大致的技術步驟是:先透過API幫每一個圖文選單建立一個別名(alias ID最多32個字元,只能用英數字、連字號與底線),接著把想要用來「換頁」的按鈕,動作類型設定為「選單切換動作」(richmenuswitch action),並指定要切換到哪一個別名。使用者點下這個按鈕,畫面就會從目前的選單切換到指定的另一組選單。

實際應用情境像是:預設選單放「產品介紹」「預約諮詢」「聯絡我們」三個大分類,使用者點了「產品介紹」之後,選單整個切換成該分類底下更細的選項(例如各產品系列),點選單裡的「返回」按鈕又能切回原本的主選單。這種做法能在有限的版面裡塞進更完整的資訊架構,而不用把所有功能硬擠在同一層。

左側畫既有會員角色搭配手機顯示點數與專屬優惠選單,右側畫新使用者角色搭配手機顯示品牌介紹與首購優惠選單

進階應用二:不同的人,看到不同的選單

另一個中文網路較少提到的功能是逐用戶設定圖文選單(per-user rich menu):透過Messaging API,可以針對「特定使用者」個別指定要顯示哪一組圖文選單,而不是所有人看到的都一樣。

這個功能背後有一條官方明訂的規則:逐用戶設定的圖文選單,顯示優先權高於帳號預設的圖文選單。也就是說,如果同時有帳號預設選單、又幫某個使用者個別設定了選單,這位使用者看到的會是專屬給他的那一組,不是預設的。

這讓「分眾」變得可行——例如針對已經是會員的使用者,顯示會員專屬的選單(點數查詢、專屬優惠);針對還沒消費過的新用戶,顯示以認識品牌、首購優惠為主的選單。同一個官方帳號,不同的人打開聊天室看到的入口可以不一樣,更貼近各自的需求。

左側畫按鈕格子搭配上升長條圖代表熱門按鈕點擊率高,右側畫按鈕格子搭配平坦下降長條圖代表冷門按鈕需要調整

怎麼知道選單設計得好不好

圖文選單設計完不是放著就結束,LINE官方帳號後台會提供選單各按鈕的點擊數據,可以觀察哪些按鈕真的被點、哪些幾乎沒人點。如果某個按鈕放在很顯眼的位置卻乏人問津,可能代表使用者對這個功能沒興趣,或是文案/圖示不夠清楚,值得調整後再觀察一段時間的變化。

開始設計前,先想清楚這幾件事

動手設計之前,先想清楚幾個問題:這個選單最主要希望使用者做什麼(這決定哪個按鈕該放在最顯眼的位置)、需不需要多層次切換(功能多到一層放不下才需要)、要不要針對不同族群做分眾。想清楚這些,比先做出一張好看的圖再回頭想「按鈕要連去哪裡」更有效率。

圖文選單雖然只是LINE官方帳號的一個小功能,但設計得好壞會直接影響使用者互動與轉換,牽涉到多層次切換或分眾這類進階應用時,也需要串接Messaging API來實作。瞻新資訊在協助客戶做LINE Bot開發時,會依經營目標規劃合適的選單架構,有需要的話歡迎聊聊你的官方帳號現況。

FAQ

LINE圖文選單是什麼?

圖文選單是LINE官方帳號聊天室下方可彈出收合的圖片選單,使用者打開聊天室就會看到,常用來放導購連結、預約系統、常見問題等入口,是官方帳號的常駐導覽功能。

圖文選單尺寸怎麼抓?

分大型與小型兩種版型。大型標準尺寸是2500×1686像素(可等比縮小),最多可設定6個按鈕;小型標準尺寸是2500×843像素,適合精簡選單。

圖文選單可以換頁/切換嗎?

可以。透過LINE Messaging API幫每個圖文選單建立別名(alias),再把按鈕動作設定為選單切換動作並指定目標別名,使用者點擊後就會切換到對應的選單,效果像切換分頁。

不同會員可以看到不同的圖文選單嗎?

可以,這是「逐用戶圖文選單」功能,透過API針對特定使用者個別指定要顯示的選單,而且這個設定的顯示優先權高於帳號預設選單,常用來做會員分眾。

圖文選單要花錢嗎?

圖文選單本身是LINE官方帳號的免費功能,不額外收費。如果需要委外設計或串接進階功能(多層次切換、分眾邏輯),才會產生設計或開發的費用。

圖文選單怎麼知道有沒有效?

LINE官方帳號後台會提供選單各按鈕的點擊數據,可以觀察哪些按鈕被點擊、哪些乏人問津,作為調整選單設計與文案的依據。

陳俊鳴顧問的大頭照,戴細框眼鏡、穿深色西裝外套搭條紋襯衫,面向鏡頭微笑

關於作者|陳俊鳴顧問

資深SEO顧問,操盤搜尋引擎優化與網路行銷實戰逾15年,曾獲頒亞洲十大卓越名師金像獎。長期擔任多家企業的常年行銷顧問,瞻新資訊是其中之一。專長是把網站的自然搜尋流量做起來,再用銷售漏斗與商業模式,把流量變成實際的詢問與訂單。曾是馬來西亞象棋、圍棋國手,拿過亞洲盃第二名。