Flex Message 2023 新的更新讓 LINE 訊息設計更加自由

Jirawatee2023-07-11

I am a technology evangelist at LINE.

利用 Flex Message 的強大功能，您可以根據自己的需求靈活設計。它可以迅速顯示結果，無論在智能手機或 PC 上的LINE應用程序，還是通過 Messaging API 或 LIFF 應用程序發送都可以支援。可以確定的是，到2023年為止，全球 LINE 開發者向用戶發送的最受歡迎的消息類型就是 Flex Message。

今年，LINE 在 Flex Message 的開發上推出了兩項新功能以更好地滿足用戶的需求。它增加了兩種新的 Bubble 尺寸選項，並使字體和圖示可以根據設定的字體大小自動調整。

在我們深入瞭解這兩項新功能之前，如果你是一位初次接觸 Flex Message 的開發者，我強烈建議你先閱讀下面的文章。

為了更多的理解，參考文章: Flex Message打破了LINE Messaging API中傳統的消息顯示規則(泰文)。

1. 新增 Bubble 尺寸

今年，LINE新增了兩種新的 Bubble 尺寸選項，分別為 hecto 和 deca。這兩種尺寸都適中，介於 kilo 和 micro 之間 Hecto 尺寸稍大於 deca，因此現在開發者可以設定所有 Bubble 的尺寸。通過名為 size 的屬性，現在有7種尺寸可供選擇（若未指定，預設大小為 meta）。

尺寸: giga, mega（默認）, kilo, hecto, deca, micro,nano

{
  "type": "flex",
  "altText": "Flex Message",
  "contents": {
    "type": "bubble",
    "size": "deca",
    "hero": {
      // ...
    }
  }
}

為了清楚地說明7種 Bubble 大小的顯示，我還準備了每種大小的文字顯示範例供大家查看。請按照下圖操作。

顯示 hecto 和 deca Bubble 大小的條件。

iOS 和 Android 上的 LINE 應用軟體必須為13.6.0或更高版本。
macOS 和 Windows 上的 LINE 應用軟體必須是7.17.0或更高版本。
如果智慧手機和PC上的LINE應用軟體版本不支持 hecto 和 deca，應用軟體將顯示 kilo。

2. 根據設置中的字體大小自動調整字體和圖標大小。

LINE 向 Flex Message 添加了scaling一個新屬性，允許按鈕、圖示和文字根據 LINE 應用程序設置中的字體大小設置自動調整。默認縮放為 false）

縮放比例：true，false（默認）

{
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      {
        "type": "text",
        "text": "hello, world",
        "margin": "10px",
        "size": "30px",
        "scaling": true
      }
    ]
  }
}

看到清晰的圖片，我製作了一個範例的 Flex Message，裡面包含了按鈕、圖示和文字。我將屬性設定為 scaling 為 true，並試著在應用程式的「設定」中更改字型大小。結果顯示...

筆記

Flex Message Simulator 目前不支持通過將屬性設置scaling為 true 來自動調整字體和圖標大小。

每年 Flex Message 中包含的功能

許多社群開發者表示，我每年發布的 Flex Message 文章都是分散的。因此，本文希望有機會將所有相關文章收集到一個地方。讓我們開始吧！

結論

Flex Message 的這兩項新功能的功勞來自於社區(泰國開發者社群) 開發者們真心誠意地向 LINE 團隊提供反饋，表達了他們的心聲。他們希望新的 Bubble 大小和自動調整字體與圖示大小能增加使用的自由度。LINE 團隊為了改善向用戶發送訊息的體驗而努力……我迫不及待地期待著看到我們更多開發者使用這些新的屬性打造出的應用。下一篇文章再見。

Blog

Flex Message 2023 新的更新讓 LINE 訊息設計更加自由

1. 新增 Bubble 尺寸

顯示 hecto 和 deca Bubble 大小的條件。

2. 根據設置中的字體大小自動調整字體和圖標大小。

筆記

每年 Flex Message 中包含的功能

結論