導語：在前一篇文章《B端UI界面交互基礎組件-表單》中，一起學習了B端「表單」組件UI設計規範，其中包括「基礎表單」、「全頁表單」；並從表單組件的需求場景、內容布局以及交互方式等方面對以上組件進行了詳盡的規範描述；今天我們繼續介紹了B端「會話框」組件的交互規範。
一、基礎會話框
1. 需求場景
需要在當前頁面進行信息提示。
需要在不影響當前頁面布局內容的情況下，提供用戶快速操作、配置的入口。
2. 內容布局
根據功能，會話框分為三個區域：標題欄、內容區域、操作按鈕，布局如下：
標題欄：會話框標題局左對齊，關閉按鈕居右顯示，會話圖標根據會話框內容需要顯示。
內容區域：內容根據顯示需要，向下自動擴展。
操作按鈕區域：操作說明居左顯示，操作按鈕居右顯示，推薦操作的按鈕重點標註：
註：
操作按鈕說明主要用於操作按鈕區出現多個按鈕，需要對部分特定操作進行特別說明的情況；推薦操作按鈕需要分布在一組操作按鈕的頭或尾，避免出現在中間位置；通用情況下，初始狀態下會話窗口基於頁面居中（水平、垂直）顯示。
3. 交互行為
點擊關閉按鈕、取消按鈕，將關閉會話窗口，如涉及複雜配置類窗口，為避免用戶誤操作，需要提供二次確認彈窗。
其他詳細交互行為，請查看對應會話窗口。
二、提示信息會話框
1. 需求場景
根據用戶的操作行為，進行相應信息提示。
僅做操作行為或操作結果提示、或者建議用戶執行某一特定操作。
2. 內容與布局
區域分布與通用會話框相同。
標題欄中圖標與提示標題，內容與提示信息強相關，圖標需表意直觀、標題文本需簡單概要說明當前提示信息核心內容。
圖標：
提示：信息說明提醒：用戶操作可能受阻，需用戶進行處理或者關注。成功：操作成功失敗：操作失敗標題：成功與失敗提示需使用：「操作 + 結果」方式呈現，例如：刪除成功、更新失敗、連接失敗等。內容區域高度須有最小高度限制（因內容區域內容過少，導致內容區域高度過小時，需限定內容區最小高度）。
內容區分為：提示內容（詳情）、備註信息：
常規布局：
展開詳情：詳情內容展開後，達到一定長度自動出現垂直滾動條。
提示會話框一般建議只提供一個操作按鈕，用於關閉會話框；如果因業務需要，需要通過操作按鈕進行後續業務執行時，允許出現多個操作按鈕。
推薦使用模式：
內容提示：僅提示用戶，常用於幫助說明等場景
提醒：操作前置條件不滿足，推薦用戶進行必要操作：
成功：用於提示單項操作結果：
單項操作失敗：用於提示單項操作結果：操作對象一般使用ID表達並重點標註，默認顯示24個字符（中文佔2個字符），字符超過24個字符時顯示前19個字符「…」連結後2個字符。
對象名稱未超長：
對象名稱已超長：
滑鼠移入對象使用Tips全文顯示：
註：
詳情信息一般在普通用戶（無法解決問題能力的用戶不予顯示）；詳情信息展開高度需要有最大高度限制，超過一定限度後續限制高度，並出現滾動條；批量操作有異常：用於提示批量操作結果有部分失敗或異常：
操作按鈕定義以具備簡要、明確的短語定義。
3. 交互行為
交互行為與通用會話框保持一致。
三、行為確認會話框
1. 需求場景
根據用戶的操作行為，進行相應信息提示。
根據用戶操作確認的入口，避免誤操作。
2. 內容與布局
區域分布與通用會話框相同。
行為確認會話框根據行為影響範圍進行分類。
提示類二次確認：一般性操作，誤操作無較大影響，行為可逆。
警告類：在業務上會造成一定風險，需要用戶進行信息內容閱讀確認後，再操作。
安全驗證：在業務上會造成較大危險，如有可能會導致業務癱瘓或終止，需要通過保障級別較高的操作驗證行為進行安全保障，如輸入手機驗證碼等方式。
3. 交互行為
警告類與安全類驗證，信息確認框，操作確認按鈕需前置操作如驗證碼，密碼輸入經過格式合法性校驗通過後才能啟用。
僅有兩次確認複選框：
僅有文本驗證輸入框：
操作再次確認與文本輸入框組合：
其他交互行為與通用會話框保持一致。
四、配置會話框
1. 需求場景
用戶進行日常操作時，需要進行快速配置。
配置完成後，可以繼續駐留在配置操作發起時相應界面。
配置相對較少。
2. 內容與布局
區域分布與通用會話框相同：
標題欄無會話框圖標，內容如下：
內容區布局：
配置表單內部布局參考基礎表單布局格式。
3. 交互行為
交互整體行為與基礎會話框保持一致。
配置表單與會話框操作按鈕關聯關係與常規表單操作按鈕關係一致。
配置成功，刷新源目標頁面。
五、總結
關於B端基礎交互組件「會話框」的相關分享就到這裡，下一章我們介紹「B端UI交互裡的系統性交互行為」包括「操作反饋」、「表格相關」、「分組配置」的相關交互規範。
本文由 @雲計算產品汪 原創發布於人人都是產品經理，未經許可，禁止轉載
題圖來自 unsplash，基於 CC0 協議