從文字到視覺：Chatbot 的介面設計

一．基礎介面元素：Chatbot 的對話骨架

Chatbot 的介面其實不只是一來一往的對話框，而是由多個基本的元素構成功能、賦予對話生命力的介面，不管是常見的銀行智能客服、網站小幫手的解答助理或是企業內部使用的智能助理，都需要以下將介紹的幾個要素，作為初始設計時的基礎架構元件：

✸ 雙向對話框：Chatbot 最基本的單位，透過不同的顏色或形狀來區分「機器人」與「使用者」的視覺對話，能讓用戶快速掌握發話者，以理解資訊流向。

例如，用無彩色的灰氣泡代表機器人回覆，企業識別色的氣泡代表使用者的輸入回覆，弱化系統方以確保視覺上的清晰度。

✸ 時間戳記與訊息狀態：時間戳記則能幫助使用者追溯對話的順序以及脈絡，尤其在較長的對話記錄中更加重要；訊息狀態則是為作為該對話的最終節點，讓使用者確認訊息是否有成功送達或是被已讀，進而決定下一步

例如：Line 發送後的已讀、未讀(省略設計不顯示)，以簡化區分兩者狀態

Tips ⟡ 在設計時我們也須留意，如果是一連串由機器人發出的訊息，則只會在整個對話串後顯示一個時間戳記與訊息狀態，常見將連續性動作將視為一整個對話串

✸ 正負反饋與評價： Chatbot 對話末總會伴隨的反饋按鈕，在數據統計時，這些反饋也是 Chatbot 效能最直接的分數指標，藉由使用者能針對 Chatbot 的即時反饋，後續訓練機器人的現有模型，作為下一階段優化的基礎。

UI 常見以讚與倒讚的拇指 icon（Like/Dislike）、微笑與哭臉的表情 icon、星級評分的呈現

✸ 建議選項與問題：為了引導對話、節省使用者輸入時間，許多 Chatbot 在給予回覆後，會提供幾個與當前對話相關的「快捷回覆按鈕」，不只能縮短整體對話流程，也能啟發使用者發現更多功能或資訊，提供更完整的服務。

例如：相關延伸問題、常見問題

✸ 送出按鈕與訊息輸入框：使用者發問的輸入區域是與 Chatbot 互動的核心，透過簡易友善的輸入操作讓使用者快速得到機器人精確的回覆是這個區塊的設計重點。

Tips ⟡ 更為友善的輸入框設計可在使用者輸入時動態調整高度，並在沒有文字時隱藏送出按鈕，保持介面的簡潔

✸ 附加功能： 可以是更全更完善的輔助功能或是針對該產品衍生出的客製化頁面，例如：資料來源附件、人性化的表情貼圖，稍後會在第三點做詳細介紹

UXUI 設計師初始建立良好的 Chatbot 基本的元素，不僅可確保資訊的快速且正確傳遞，也讓使用者體驗更為流暢。

二．讓 Chatbot 更生動：用設計簡化複雜資訊

純文字訊息在傳達複雜資訊時，常常會顯得單調、讓使用者閱讀時因乏味而喪失耐心，這時候我們可以利用卡片的設計解決較多項目的選單、較冗長的產品列表或是訂單摘要等，讓使用者可以左右滑動來查看更多內容，也豐富產品的功能。

✸ 選單式卡片：收納多個主題用的子選項，每張卡片上可以包含標題、簡短說明與圖片，讓使用者能快速瀏覽與提供多個明確的選項，例如：常見問題分類、不同的保險方案

✸ 輪播卡片：適合在有限的空間內展示多個宣傳活動或項目，例如：推薦商品、熱門文章

✸ 資訊折疊卡片：用於多個欄位、較長的表單型態內容，當 Chatbot 回覆時該資料無法完整呈現，就可以利用卡片顯示部分摘要內容，引導使用者點擊展開看完整資訊例如：訂單明細、航班資訊或個人資料

Tips ⟡ 多筆卡片呈現時需要留意引導的呈現，可箭頭或滑動提示來輔助使用者查看更多

善用卡片式設計加上視覺化元素，能有效率地將多筆資料歸類，在複雜的卡片中我們可以透過字體大小、粗細或顏色來區分標題、內文與操作按鈕，讓資訊層次引導操作，協助 Chatbot 的「文字資訊」生動地過渡到「視覺化設計」。

三．客製化的應用：附加功能與延伸視窗

如何將 Chatbot 從單純的對話框，擴展為一個更完整的應用程式介面，尤其是在企業內部客服場景中顯著提升工作效率，除了短時間內引導精確的指令，設計貼心易用的相關功能，更能輔助使用者精確處理複雜的任務。

✸ 語音輸入：讓對話更迅速的語音輸入功能等，讓 Chatbot 介面更實用且完整，同時提供多元族群使用。

✸ 文字尺寸調整：介面提供文字大小的調節功能，讓使用者根據偏好放大或縮小 Chatbot 的文字，提升閱讀的舒適性與易讀性。

✸ 檔案上傳與預覽：讓使用者能夠直接拖放檔案到對話框中，並在介面中顯示檔案的預覽圖與上傳進度。

例如：上傳個人資訊、填寫報修單等複雜的欄位資訊

✸ 延伸視窗：當單純的對話框無法滿足任務需求時，可以讓視窗更有彈性，藉由新增點擊按鈕在介面右側或新視窗，開啟完整延伸功能，期望讓使用者在不中斷對話的情況下，同時操作其他工作。

例如：上刷表單填寫資料、側開視窗進行試算

Chatbot 介面設計除了提供便利的使用者體驗與互動，也是「對話思維」與「視覺設計」的融合，設計師從 Chatbot 的基礎介面元素出發，如何透過清晰的對話元件與狀態提示來建立順暢的溝通基礎、運用卡片的收納設計，將複雜的資訊化繁為簡，讓使用者能直觀地瀏覽與選擇，大幅提升資訊傳遞的效率，最後們將 Chatbot 的應用場景從單純的對話框，擴展至附加功能與側開視窗，在不中斷對話的情況下，讓使用者可以同步執行更複雜的任務。

以上關於 Chatbot 設計的分享，希望能協助設計師在初期著手時更有邏輯地建立介面系統，從文字到視覺賦予 Chatbot 更生動的力量與便利性。

圖片出處：https://www.pinterest.com/pin/474777985739125519/、各官網的智能客服介面