coastdigitalgroup/coastai-skills

對話式聊天 UI 系統

目的

「對話式聊天 UI 系統」提供了一套系統化的方法，用於設計與建構持續顯示於頁面上的聊天元件、即時支援對話框及自動化聊天機器人介面。聊天視窗具有高度互動性、內容密集且空間受限，因此極易出現嚴重的可及性與可用性問題。

此系統解決了非同步訊息覆蓋層在視覺與結構設計上的挑戰。它確保訊息串流具有高度可讀性，互動觸發按鈕（快速回覆、動作卡片）易於存取，輔助科技用戶能在不中斷焦點的情況下收到新訊息通知，且行動裝置覆蓋層能完美適配系統虛擬鍵盤與安全區域。

使用案例

• 即時聊天支援面板： 持續顯示的元件，允許與真人客戶支援代表直接通訊。
• 自動化 AI 聊天機器人： 應用程式內或網站上的自動化助手，引導用戶完成入門、故障排除或產品探索。
• 交易式對話表單： 以互動對話形式設計的逐步表單填寫流程。
• 浮動式客服中心元件： 固定在視口邊緣的覆疊面板，可用於搜尋支援文章，並可回退至即時聊天對話串。

何時不應使用

• 專用電子郵件／收件匣應用程式： 大規模、全螢幕的通訊儀表板（例如 Gmail、Slack、Zendesk 客服工作站），此類應用需要高密度的多窗格佈局，請改用 dashboard-layout-system。
• 全域頁面導覽： 除非作為次要輔助選項，否則請勿以聊天式網站地圖取代持續性的網站目錄；請改用 site-navigation-system。
• 複雜的階層式留言： 部落格或文章評論中帶有巢狀回覆串的留言；請改用 comment-and-discussion-system。

輸入

1. 對話情境： 繪製主要流程（使用者發起 vs. 系統觸發、機器人 vs. 人工代理交接）。
2. 視覺風格與調色盤： 背景表面、接收 vs. 發送泡泡、狀態點與焦點指示器的設計記號（源自 accessible-color-system 和 focus-indicator-design-system）。
3. 字體排版比例： 適用於緊湊佈局的流暢、高度易讀的字體排版規則（源自 fluid-typography-system）。
4. 觸發指標： 決定聊天啟動按鈕或自動歡迎訊息何時啟動的滾動與事件閾值。
5. 互動式多媒體資產： 檔案附件選項、圖片預覽範本及自訂快速回覆格式。

輸出

1. 聊天元件佈局規格： 浮動啟動按鈕與固定面板的精確像素／rem 邊界。
2. 訊息串結構剖析： 區分發送者類型的元件間距、字體粗細及顏色對應。
3. 響應式行動裝置藍圖： 將桌面浮動面板轉換為行動裝置全高抽屜的轉場規則。
4. 互動狀態矩陣： 訊息泡泡、文字區域、動作晶片與載入狀態的視覺回饋對應表。
5. 可及性地標藍圖： ARIA 角色 (role="log"、aria-live="polite"、aria-busy) 與鍵盤 Tab 路徑的對應圖。

---

工作流程

1. 定位浮動啟動按鈕 (FAB)

浮動聊天觸發按鈕是主要入口點，必須保持持續顯示，且不遮擋頁面主體的關鍵項目。

• 標準定位： 將啟動按鈕固定於視口右下角（RTL 版面則為左下角）。
• 桌面網格偏移： 啟動按鈕距離視口底部與側邊邊界各 24px。
• 行動裝置網格偏移： 距離邊界各 16px 以保留內容區域。
• 碰撞緩解： 若頁面上有「回到頂部」按鈕或持續顯示的 Cookie 橫幅，請將其垂直放置於對側，或堆疊擺放並保持至少 16px 的間距，以避免視覺重疊。

2. 建構聊天視窗容器

聊天視窗容器容納整個互動框架。它位於基本頁面之上，必須遵循標準的結構層級：

• 標頭（框架錨點）： 持續顯示的橫幅，內含聊天夥伴（代理人／機器人）的頭像／身分識別、營運狀態（線上指示器、服務時間）以及快速控制項（最小化 _、全螢幕／展開、關閉 X）。
• 訊息記錄區（對話串視口）： 顯示對話的可滾動主體。必須支援無限垂直滾動，且在滾動過程中滾動條始終可見。
• 快速回覆區（橋樑）： 位於輸入列上方的一個水平／自動換行互動晶片區塊，提供單擊提示回應。
• 輸入列（固定在底部的工具列）： 一個持續存在的表單容器，包含文字輸入區域、次要工具觸發按鈕（表情符號、迴紋針檔案附件）以及主要的「傳送」按鈕。

3. 設計訊息泡泡的結構與節奏

為確保快速掃讀性，請使用視覺與物理方向來區分不同訊息：

• 發送（使用者）訊息：
  • 對齊方式： 右對齊（RTL 則左對齊）。
  • 顏色： 品牌主要色或高對比深色背景搭配白色／淺色文字。
  • 邊框圓角： 所有角落皆為圓角，但右下角（RTL 為左下角）除外，以營造視覺上的「對話泡泡」錨點。
• 接收（代理人／機器人）訊息：
  • 對齊方式： 左對齊（RTL 則右對齊）。
  • 顏色： 中性淺灰色或次要品牌色調，搭配高對比文字。
  • 邊框圓角： 所有角落皆為圓角，但左下角（RTL 為右下角）除外。
• 連續訊息： 若同一發送者連續發送多則訊息，則將其緊密堆疊（間距 4px），並僅在最後一個泡泡或群組標頭顯示發送者姓名、頭像與時間戳記。不同發送者之間使用 16px 間距。
• 系統／動作訊息： 在對話串中置中對齊，字型小、顏色柔和，樣式為無邊框純文字，用以表示後設事件（例如「代理人已加入聊天」、「聊天記錄已寄送至電子郵件」）。

4. 建立互動式輸入區域

文字輸入區域是產生最多摩擦的地方。設計應以最大化可用性為目標：

• 自動展開輸入框： 使用 <textarea>，起始為單行（最小高度 44px），並在使用者輸入時垂直展開（最多 4-5 行後啟用內部垂直滾動），以便長訊息能完全可見。
• 輸入框邊框與懸停狀態： 為文字區域設定清晰的邊框（最小 1px，與白色聊天框的對比度至少 3:1）。懸停時必須增加邊框對比度，獲得焦點時則必須觸發高對比度的焦點環（最小 2px）。
• 傳送按鈕的提示性： 當文字區域為空時，傳送按鈕應保持視覺上的非作用狀態（停用且降低不透明度）。一旦輸入字元，按鈕便應切換至主要啟用顏色狀態，以表示輸入已就緒。

5. 建立行動裝置視口適配（抽屜式切換）

桌面聊天框是小型覆疊層（通常寬 360px 至 400px，高 500px 至 650px）。在行動裝置上，這些比例無法使用，且會與虛擬鍵盤衝突。

• 全視口佔用： 在 576px 斷點以下，將聊天容器從浮動面板轉換為全螢幕抽屜 (width: 100%; height: 100%; top: 0; left: 0; border-radius: 0;)。
• 虛擬鍵盤安全區域： 確保輸入列使用 position: sticky; bottom: 0;，並錨定於可見視口的底部，同時考慮到行動瀏覽器底部網址列與虛擬鍵盤的空間。
• 防止滾動滲漏： 當行動裝置的全螢幕聊天抽屜啟用時，使用 body { overflow: hidden; } 或標準的觸控攔截類別來鎖定背景頁面的滾動。

---

決策規則

• 觸發按鈕尺寸： 浮動啟動按鈕在桌面與行動裝置上，其視覺直徑至少需為 56px，互動觸控區域則需為 64x64px，以確保輕鬆進行拇指操作。
• 「未讀徽章」優先級： 當面板最小化時有新訊息送達，請在啟動按鈕上顯示紅色／品牌色的數字徽章。若訊息極為重要，則在啟動按鈕旁顯示一個短暫、會自動消失的文字預覽泡泡，持續 5 秒 後再收合為徽章。
• 輸入狀態指示器顯示： 當代理人／機器人正在輸入時，顯示一個包含三點跳動動畫的持續性泡泡。將此指示器定位為最下方的接收訊息，但當實際訊息區塊送達時需立即將其移除。
• 通知時機與音效提示： 僅當分頁處於背景時，才啟用細微、高音調的音效來提示新訊息。在聊天標頭中提供一個清晰、持續的切換開關，使用者可完全關閉聲音通知。
• 動態滾動錨定： 當使用者位於聊天記錄底部時，自動向下滾動對話串容器以顯示新送達的訊息。然而，如果使用者已向上滾動瀏覽歷史記錄，則鎖定滾動位置以防止突兀的跳動，並在視口底部顯示一個浮動的「新訊息 ↓」藥丸按鈕。

---

限制條件

1. 可及性 (WCAG AA 合規)

• 地標與 ARIA 角色：
  • 將主要聊天元件包裹在一個地標容器中：<section aria-label="客戶聊天"> 或 <div role="region" aria-label="支援聊天">。
  • 可滾動的訊息記錄區域必須使用 role="log" 和 aria-live="polite"。這能告知螢幕閱讀器在有新訊息附加時進行宣告，而不會中斷使用者當前的鍵盤導覽或文字輸入。
  • 輸入狀態指示器泡泡必須設定 aria-busy="true"，並包含一個隱藏的文字替代方案（例如 <span class="sr-only">支援人員正在輸入...</span>）。
• 鍵盤存取與焦點陷阱：
  • 標準的 Tab 鍵導覽必須依邏輯順序移動通過標頭控制項、可滾動的訊息串、快速回覆晶片以及輸入欄位。
  • 當行動裝置的全螢幕聊天抽屜開啟時，需將鍵盤焦點限制在抽屜內。按下 Escape 鍵必須立即最小化或關閉聊天面板，並將焦點返回至浮動啟動按鈕。
• 文字與元件對比度：
  • 訊息泡泡內（接收與發送）的所有文字，相對於其各自的泡泡背景，必須滿足至少 4.5:1 的對比度標準。
  • 互動圖示（附件夾、傳送箭頭、關閉 X）與表單邊界，相對於相鄰背景表面，必須滿足至少 3:1 的對比度標準。

2. 響應式與佈局保留

• 長寬比穩定性：
  • 訊息串必須使用彈性百分比或 flex-grow 模型來填滿容器高度，防止文字溢出或容器塌陷。
  • 在聊天泡泡內傳送的圖片或卡片必須設定固定的長寬比或最大寬度限制 (max-width: 80% 的泡泡寬度)，以防止聊天佈局被視覺上撐破。
• 佈局位移預防：
  • 在載入歷史訊息時（例如向上無限滾動），使用滾動錨定技術，防止當前滾動位置向下彈跳，確保使用者的視口完美鎖定在他們正在閱讀的訊息上。

---

常見失敗模式

• 「焦點劫持」陷阱： 在頁面載入時自動開啟聊天元件，並立即將鍵盤焦點困在聊天文字區域中。這完全封鎖了鍵盤與螢幕閱讀器使用者閱讀主要頁面內容的能力。
• 「鍵盤遮擋」： 在行動裝置上使用 absolute 座標定位輸入列，導致裝置的虛擬鍵盤在打字過程中遮蓋文字區域與傳送按鈕。
• 「無宣告的串流」： 僅在視覺上將新訊息附加到對話串中，卻未使用 role="log" 或 aria-live，導致盲人與低視力使用者完全不知道代理人員已回應。
• 「跳動滾動」錯誤： 每當有新訊息送達時，強制將滾動視口跳回絕對底部，中斷了正在閱讀對話串上方歷史說明的使用者。
• 「對比度消退」趨勢： 將接收泡泡的背景設為超淺灰色，並搭配細白色文字，違反了對比度標準，導致在正常環境光線下文字無法閱讀。

---

驗證標準

• 可及性地標檢查： 聊天元件已包裹在 <section> 或 role="region" 中，並帶有描述性的 aria-label。
• 螢幕閱讀器宣告檢查： 訊息串使用了 role="log" 搭配 aria-live="polite"，並已驗證可動態宣告傳入的文字。
• 對比度驗證： 發送與接收泡泡滿足 4.5:1 的文字與背景對比度標準，且表單邊界滿足 3:1 的標準。
• 鍵盤路徑驗證： 焦點陷阱在行動裝置視口上正常運作，且按下 Escape 鍵會關閉元件並將焦點返回至啟動按鈕。
• 行動裝置抽屜適配： 在 576px 以下的螢幕寬度，面板佔據 100% 的視口高度與寬度，且背景頁面主體無滾動滲漏。
• 最小觸控目標： 啟動按鈕、關閉按鈕、傳送控制項與快速回覆晶片的互動觸控區域至少為 44x44px。
• 訊息泡泡節奏： 來自同一發送者的連續訊息以緊密的 4px 內邊距群組在一起，而發送者切換時則使用較大的 16px 間距。
• 空白狀態防護： 當輸入文字區域僅包含空白字元時，傳送按鈕為停用狀態且視覺上降低對比度。