活用Flex彈性訊息，讓你的LINE聊天機器人更親民、更出色！ 2021/10/23 @ MOPCON 2021 UnConference

1. 活⽤Flex彈性訊息，讓你的LINE聊
天機器⼈更親⺠、更出⾊！
奇步應⽤ 陳佳新
jarsing@chibuapp.com
2021-10-23

2. ⾃詡為聊天機器⼈傳教⼠
2

3. 中部⼈的聊天機器⼈⼩⼩聚
臉書搜尋「Chatbot DevelopersTaiwan」社團
3
臉書社團
活動議程LINE Bot

4. 臉書Chatbot DevelopersTaiwan社團
4

5. 中部⼈的聊天機器⼈⼩⼩聚
活動議程LINE Bot
5

6. 疫情期間，改⽤線上直播
6

7. 2019創業歸故⾥競賽冠軍
⽤LINE聊天機器⼈做的智慧觀光服務
7

8. 2020成為LINE官⽅認證技術專家
俗稱的聊天機器⼈專家，LINE API Expert，簡稱LAE
8

9. 9
歡迎與我聯絡
陳佳新
https://facebook.com/jarsing
奇步應⽤
https://facebook.com/chibuapp

10. 幾個Flex彈性訊息案例分享
10

11. 11
互動問答
完美取代template
的buttons訊息格
式，可以改字體⼤
⼩、粗體、加顏⾊

12. 12
收集徽章
跟集點卡⼀樣，⼀
眼看出數量，收集
到才亮起來

13. 13
按鈕範本 ➡ ⼤版⾯衛教資訊

14. 14
不同場景⽤不同變⾊對話泡泡
⽩底

15. 15
不同場景⽤不同變⾊對話泡泡
紅底
綠底

16. 16
你⼀定要認識Flex Message Simulator
https://developers.line.biz/flex-simulator/

17. Live Demo：Flex排版⼩技巧
1. 垂直佈局
（Vertical Layout）
2. ⽔平佈局
（Horizontal Layout）
3. 邊界，外邊距
（Margin）
4. 補⽩，內邊距
（Padding）
5. ⼤⼩
（Size）
6. 顏⾊/底⾊
（color/background）
17

18. Q & A
18

19. ⾃備問與答，避免尬聊 😅
1. 要讓聊天機器⼈的介⾯更親⺠、更出⾊，除了Flex訊息之外，
還有什麼技巧？
• 善⽤LIFF，把資訊排版在RWD響應式網⾴上
2. ⽤Flex Message Simulator編排後的訊息只能預覽，能否快速在
LINE裡⾯真實看到？
• Simulator右上⾓有⼀顆Send Message按鈕，可以傳送Flex訊息給
⾃⼰，你將發現Flex訊息在桌機版和⼿機版的LINE都能顯⽰
19