2.1.1-建立個性化的圖文選單
6
好的圖文選單設計,除了可以引導好友認識服務,讓好友不迷航,還能增加商家與好友互動的機會、增進互動情感!如果你也想提供更好的服務體驗,你絕對不能錯過本篇的圖文選單教學唷!

回想一下,在與家人或朋友出遊之前,是不是都會先查看地圖或相關文章,看看有哪些景點值得遊覽。同樣地,在餐廳點餐前,我們都也會先翻閱商家的 Menu,看看這家餐廳提供哪些選擇。

LINE 官方帳號提供可以高度客製的圖文選單(Rich Menu),這就像是景點地圖或餐廳的 Menu,也是商家最好的服務小幫手。除此之外,由於使用者會自由選擇感興趣的功能,因此商家還可以透過選單的點擊推測使用者們的喜好,進而提供更個人化的服務體驗哦!



圖文選單好好用!

1.  幫助好友快速鎖定重要訊息
節省好友閱讀時間,幫助好友快速看到與理解商家想傳達的資訊非常重要(千萬不要期待或勉強好友有「耐心」且慢慢了解商家)!

想經營社群的你,都應該聰明地將建立品牌形象與傳達明確地資訊訂為優先的目標。將好友常用功能及感興趣的資訊設計在圖文選單中,讓好友能夠在每次與官方帳號互動時,就能夠快速的選定重要訊息,讓資訊的獲得、活動參與等,都更加便利快速。才可以提升好友對你的官方帳號的訊息傳遞效率,進而提升好友對之官方帳號的好感度與黏著度。

除了提供導覽介面供好友點擊之外,圖文選單亦可搭配自動回應訊息的「關鍵字」功能,透過類似於搜尋的對話功能,讓好友隨時可以透過關鍵字目錄來找發問問題及找到類似產品介紹、店家資訊、常見客服問題等。


2. 提供最佳的訊息公告與廣告版位
由於圖文選單會固定顯示於商家官方帳號的底部,因此在圖文選單上面放上商家最新想推廣的訊息公告與活動廣告,可以輕而易舉地吸引好友目光。
 

若有舉辦優惠、集點、問券調查的活動,也可設置在圖文選單中,讓參與上面這些營運活動的好友們,能夠隨時的進入官方帳號,且快速的查看優惠訊息及進點記錄,非常的便捷。
 

3. 創造多元化導流
圖文選單除了可有優美的圖文視覺效果與功能與客服導覽,還能在選單上方提供官網、商城、 Facebook 或是 Instagram 等連結,讓好友可以在不同的平臺分別找到自己想要的資訊,也藉此幫你的網站或是社群平台增加粉絲。

圖文選單怎麼設計?
要怎麼開始設計圖文選單呢?你除了可以參考本章最下方的教學指引之外,也可以多多參考別的方官帳號的設計,也許可以帶給你一些創意上的啟發。

當然,選單設計其實並不用從零開始!在「LINE 官方資源下載區-應用模板」的網站上,已經幫大家準備好了很多精美與應景的圖文選單模板範例設計原始檔( Photoshop 檔案格式),讓你可以輕鬆快速地建立商家專屬的圖文選單。

除此之外,設計師在設計選單時,還可以參考下列細節

1. 設計不拘泥於現有模板格式
LINE 官方帳號提供 12 種圖文選單的版型,但在設計上其實可以跳脫框架思考,並不一定都是只能透過方方正正的格子來建立按鈕區塊。你除了可以將好友常用的按鈕或將商家想傳達的資訊設計成較大的版位之外,不規則形狀的按鈕也很能夠吸引使用者的注意力。

2. 加入輔助圖標「暗示」,引導好友點選連結
若有特別希望好友查看的內容,可以使用手指頭、箭頭、對話框或其他引人注目的指標圖示,來激發好友的好奇心與點擊。

3. 按鍵位置與功能的設計
在選擇圖文選單的每一個區塊要放什麼資訊或提供功能按鈕時,要特別注意下面幾件事:

(1) 主題的相似性
每格的標題文字以及你想放的內容不要重覆與相似,要讓好友很直覺的就知道點選哪個選單會出現哪個服務與功能,以免造成好友混淆。

(2) 內容簡單明瞭
圖文選單上面雖然沒有文字限制,但要在設計時建議以簡單明瞭的圖示為主,文字太多將會破壞版面的協調,並且會模糊焦點及破壞視覺美感。

(3) 適度的設計邊線
圖文選單的區塊雖小,但你可以透過介面邊線的設計,透過空白或是線條,創造將互動按鈕分成不同的區塊,例如「個人化功能」、「客服功能」、「最新消息與活動等」讓使用者與圖文選單互動時,更有效率。

(4) 聚焦於重點活動
你也可以擅用視覺介面顏色或是區塊,能創造出視覺效果上不規則、特別、不協調性的形狀,像是可以使用透明背景或與聊天室背景相同顏色(若好友有套用主題則無效)可以更凸顯重點資訊,讓好友更容易看見你想要突出的重點位置,來創造重點活動被看見的機會。 

小提醒:下一次推播將會有宣傳常使用到的「圖文訊息」介紹,圖文訊息」設計觀念也與此篇的圖文選單的設計觀念是可相通的唷!當你閱讀到善用圖文、進階影片訊息等方式,創造吸引好友的溝通情境」時,別忘了回頭來看我!

學習案例
2.1.1建立個性化圖文選單讓好友輕鬆使用商家服務1

案例參考說明:圖文選單的設計可以配合商家需求靈活應用,也可以很有商家個性。

  • 【車麻吉】以選單最左側專門用來宣傳升級的優惠,並將具有商家特色的 LOGO 置於宣傳圖中,以表格商家個性的訊息。其中,保留了四格的功能選單引導好友依需求操作,兼具了圖文選單的趣味性與功能性。正方形比例的訊息圖片,也成功創造訊息滿版、卻不會被裝置螢幕高度截斷的視覺效果。

  • 【國泰世華】 顯眼的智能客服突破常見的六格選單的區域框架,功能完整也方便操作。

  • 【Richart】由於處於特定活動期間,設計師有巧思地以將圖文選單分為兩大格,圖文選單結合上方的訊息圖,說明了完整的活動故事與內容。

【步驟教學】設定商家專屬圖文選單

電腦版:進入 LINE Official Account Manager 的電腦版後台

點選左上方的主頁

點選圖文選單 建立

顯示內容設定

  • 標題:方便管理用,此標題不會對好友顯示(最多可輸入 30 字)
  • 狀態:設定要開啟還是關閉圖文選單
  • 使用期間:可一次建立多組圖文選單,但一次只能顯示一組,如果設定時間重複則無法使用
  • 選單列顯示文字:設定聊天室最下方(開啟圖文選單的按鈕)上的文字
  • 顯示方式:可設定當好友一進入聊天室時就自動開啟(顯示)/關閉圖文選單

小提醒:由於圖文選單最多會佔據行動裝置螢幕約的空間,而裝置本身的高度有限,因此建議,當商家的官方帳號預設為自動展開的圖文選單時,群發訊息的內容不宜過多,或如果想將圖片加入群發訊息之中,則以 1:1 正方形的比例為佳。

圖文選單設定

  • 先選擇圖文選單的模板(有 12 種可選,如圖 4-1
  • 圖片上傳模式 1:可以選擇預先依照選擇的模板(圖 4-1)設計「符合尺寸」的圖片上傳(有 6 種可選,如圖 4-2
  • 小提醒:不管是圖文選單或圖文訊息都要製作出符合系統要求的圖片大小,如果圖片尺寸不正確,就無法使用這兩項功能哦!
  • 圖片上傳模式 2:可以直接依照選擇的模板(圖 4-1)設計「符合尺寸」的圖片上傳(有 6 種可選,如圖 4-2

設定在圖文選單模板中的對應動作(有 5 種可選)

設計規範有版型可以下載

儲存完成圖文選單建立
2.1.1建立個性化圖文選單讓好友輕鬆使用商家服務2

2.1.1建立個性化圖文選單讓好友輕鬆使用商家服務3
2.1.1建立個性化圖文選單讓好友輕鬆使用商家服務4

手機版:注意,圖文選單目前只能在電腦上設定,尚未開放手機版設定的功能。

圖文選單的規格

說明

  • 圖片尺寸(有 6 種可選擇):

大尺寸規格(在聊天室上顯示長寬比雖然完全相同,以大尺寸製作/上傳的圖片,在高解析度的設備上也能清晰地顯示,但圖片容量變大,讀取需要花一些時間)

  2500 X 1686

  1200 X 810(建議使用此尺寸,可廣泛用於一般智慧型手機)

  800 X 540

小尺寸規格(在聊天室中顯示框尺寸是固定的,設定較小尺寸的圖片,在高解析度的設備上,看起來可能會比較粗糙)

  2500 X 843

  1200 X 405

  800 X 270

  • 檔案格式:JPGJPEGPNG
  • 檔案容量:1 MB 以下
  • 5 種可選擇:優惠券、網址、文字、集點卡、不設定
  • 選擇優惠券、網址時,必須輸入動作標籤
  • 動作標籤文字最多可輸入 20 字的設定說明與概要
  • 不可將所有項目設定為「無動作」
  • 避免引起好友需要連續輸入內容
  • 反映圖文選單可能需要一些時間