Day 9：打造 LINE Rich Menu - 後台設計 vs API 客製化

前言

在 Day8 文章中，我們透過整合雲端服務 Cloudinary，學習如何處理使用者上傳的圖片檔案，並將其儲存至雲端。然而，LINE Bot 除了讓使用者輸入文字回覆的方式之外，更常見的是透過圖文選單(Rich Menu)來提供服務。透過圖文選單，我們可以為使用者提供更直觀的操作介面，提升使用體驗。

本文將著重於實現以下核心功能：

• 創建 LINE Rich Menu 需要的圖片
• 透過 LINE Official Account 後台創建圖文選單整合功能
• 使用 Postman 上傳客製化圖文選單整合功能

本日使用的圖文選單照片連結

• 整合服務使用的圖文選單照片
• 客製化模板使用的圖文選單照片

創建 LINE Rich Menu 需要的圖片

LINE Rich Menu 由背景圖片和點擊區域兩部分組成。背景圖片負責視覺呈現，點擊區域則定義各功能的觸發效果。

在製作背景圖片之前，我們需要先了解 LINE 官方的模板規格，選擇適合的版型進行設計。

Step 1：從 Line Official Account 找到創建圖文選單的地方

進去網站看到左側清單中Chat screen中的Rich menus，可以馬上點選Create a rich menu。

Step 2：找到圖文選單 Design guide

在創建圖文選單的網頁中，向下滑動可以找到「Design guide」按鈕，該按鈕提供了多種不同尺寸的 Line 圖文選單設計模板。

圖文選單模板可以拆分成兩種版型：

每種版型都擁有：Small、Medium、Large 三種不同解析度的版本可以選擇

• Compact：半版顯示，佔用較少螢幕空間
• Large：全版顯示，佔用較多螢幕空間

Step 3：搭配 Canva 工具製作圖文選單 - 確認版型解析度

圖片解析度必須與 Design guide 規格完全符合，否則無法正常顯示。

以製作 Large - Medium 兩格版型為例，流程大致如下：

1. 確認要的版型，在 Canva 自訂對應解析度尺寸。
2. 將版型圖片貼過去，把尺規畫上去方便查看每個功能區塊的大小
3. 透過 Canva 的元素、文字、設計出對應的風格

本次使用的是1200 x 810的解析度，使用 Canva 自定尺寸的方式創建對應解析度設計

Step 4：Canva 使用內建文字及元素製作

簡單的佈置一下，圖文選單的兩個按鈕背景圖就完成了。
(( 美感的部分就....果然是工程師ＱＱ

透過 LINE Official Account 後台整合圖文選單點擊區域功能

回到 LINE 圖文選單建立流程，完成背景圖片設計後，接下來需要配置點擊區域的互動功能。首先設定圖文選單的基本資訊，包括標題名稱及有效期間，確保圖文選單能在指定時間範圍內正常運作。當超過設定期限時，圖文選單將自動失效並從介面中移除。

LINE Rich Menu Action 類型主要包含以下六種選項：

• Link：開啟外部連結或結合 Line 平台功能實現更多互動效果，例如開啟地址位置、啟動相簿等功能，引導使用者發送位置訊息或傳送圖片訊息。想知道更多 LINE 平台功能，可參照 Line 官方說明
• Coupon：優惠卷
• Text：純文字
• Reward cards：集點卡
• No action：不做任何反應

Chat bar 設定：畫面上預設顯示的 Menu 按鈕也可以設定是否常態性開啟及自定義名稱

基於圖文選單需求(查詢天氣 & 上傳圖片)，我們需要引導使用者分別提供兩項服務所需的資訊內容，因此在此搭配 LINE 平台提供的特殊功能連結來實現對應的互動引導：

• https://line.me/R/nv/location/ ：打開用戶分享地址的畫面，引導使用者分享地址訊息觸發查詢天氣服務 API 的效果。
• https://line.me/R/nv/cameraRoll/single ： 打開相簿分享一張照片，引導使用者發送想上傳到 Cloudinary 圖床服務的照片訊息。

感覺起來越來越像外面看到的 Line 官方帳號了吧！ 😂 並沒有

你在外面可能會看到像是這種版型呀(以永豐銀行為例)

這個很明顯就不是剛剛那些常見版型，屬於高度客製化的模板，這時候就需要工程師出場了！

這部分可以透過 Line Richmenu API，達到更高程度的客製化。

官方 LINE Richmenu API 說明

客製化版型圖文選單搭配 LINE Bot Designer + Postman

LINE Bot Designer 雖然已停止持續更新開發，但在圖文選單設計方面，仍提供相對友善的 GUI 操作介面，能夠快速產生建立選單所需的 JSON 配置資料。

建立背景圖片的設計流程與前述步驟大致相同，但需要特別注意 LINE Bot Designer 僅支援 2500 x 1696 及 2500 x 843 兩種解析度規格。當使用 Canva 建立自定義尺寸設計時，建議先將畫布調整為上述其中一種標準尺寸。

本範例採用 2500 x 1696 解析度 來進行客製化版型設計教學。

Step 1：使用 Canva 建立格線輔助線並加入文字標註功能

Line 圖文選單區塊功能設置上限是 20 個區塊 。

Canva 要先打開尺規才可以設置格線

客製化模板背景圖總共要切出九個功能區塊使用

Step 2：Canva 使用形狀工具標示各區塊範圍並設定描邊樣式

形狀在 Canva 左側工具選單中可以找到。這邊描邊的目的是為了在 LINE Bot Designer 比較好對齊。

Step 3：Canva 拿掉尺規輔助線

登登登登～完成區塊標示後，移除格線輔助線即可清楚呈現九個功能區塊的圖文選單背景圖。當然，在實際專案中仍需要專業設計師進行視覺美化，搭配品牌風格設計出更符合實務需求的版面。

Step 4：將設計好的描邊圖片上傳至 LINE Bot Designer 並設定點擊區域

將完成的圖文選單圖片上傳後，可在右側圖片區域拉框建立各功能區塊，依照先前規劃的格線位置設定每個區塊的座標及尺寸範圍。點選特定區塊時，左側對應的動作設定選項會自動亮起可以進行配置。

完成所有區塊設定後，右下角會自動產生建立 LINE 圖文選單所需的 API Request 資料。

在 Action 設定方面，本範例採用「訊息動作」來回覆對應區塊的識別文字。舉例來說：當使用者點選「主區塊」時，系統會自動回覆「主區塊」文字訊息，以此類推完成各區塊的對應設定。

Step 5：使用 Postman 創建圖文選單並上傳圖文選單圖片

Line 圖文選單相關的 API 官方資訊

在開始設置自定義圖文選單之前，我們需要了解建立完整圖文選單的四個核心 API 流程：

1. 建立圖文選單骨架 ：建立圖文選單的基礎架構，請求內容使用 Step 4 LINE Bot Designer 右下角產生的 JSON 資料。成功建立後會回傳專屬的圖文選單編號。
2. 取得圖文選單列表 ：查詢目前擁有的所有圖文選單資訊。當忘記先前建立的選單編號時，可透過此 API 進行查找，後續設定選單時需要指定圖文選單編號。
3. 上傳圖文選單背景圖片 ：指定圖文選單編號，上傳先前在 Canva 設計完成的背景圖片檔案。這裡需要上傳移除描邊線條版本圖片，描邊線條僅是為了在 LINE Bot Designer 中方便進行區塊對齊設定而暫時使用。
4. 設定預設圖文選單 ：將指定的圖文選單編號設為官方帳號預設選單。此步驟需要在完成步驟 3 的背景圖片上傳後才能執行，確保圖文選單具備完整的架構與視覺內容。

LINE Official Account 後台與 LINE Rich Menu API 都具備設定預設圖文選單的功能。因此系統會依照以下優先順序進行顯示：

1. 針對特定用戶設定的個人化預設圖文選單
2. 透過 API 設定的官方帳號預設圖文選單（本次 Postman 操作屬於此類）
3. 在 LINE Official Account Manager 後台設定的圖文選單（前面章節介紹的後台設定方式）

最重要的一點：LINE Rich Menu API 建立的圖文選單與 LINE 平台建立的圖文選單彼此獨立，無法互相查看或管理！！

成果展現

手巧的背景圖設計

特別感謝一起努力研究怎麼使用 Canva 設計圖文選單的女友協助設計！！

本日結語

我們成功把前面做好的天氣查詢功能和圖片上傳功能整合進來，讓使用者可以直接點擊圖文選單就能觸發這些服務，操作體驗 UpUp！同時也介紹了客製化圖文選單的完整流程，從 Canva 設計到 API 部署，整體操作其實並不困難，大家也可以試試看。