激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

B端UI界面交互基礎組件:會話框

發(fā)布時間：2024-01-18 14:13:32 瀏覽量：135次

導語：在前一篇文章《B端UI界面交互基礎組件-表單》中，一起學習了B端“表單”組件UI設計規(guī)范，其中包括“基礎表單”、“全頁表單”；并從表單組件的需求場景、內(nèi)容布局以及交互方式等方面對以上組件進行了詳盡的規(guī)范描述；今天我們繼續(xù)介紹了B端“會話框”組件的交互規(guī)范。

一、基礎會話框

1. 需求場景

需要在當前頁面進行信息提示。

需要在不影響當前頁面布局內(nèi)容的情況下，提供用戶快速操作、配置的入口。

2. 內(nèi)容布局

根據(jù)功能，會話框分為三個區(qū)域：標題欄、內(nèi)容區(qū)域、操作按鈕，布局如下：

標題欄：會話框標題局左對齊，關閉按鈕居右顯示，會話圖標根據(jù)會話框內(nèi)容需要顯示。

內(nèi)容區(qū)域：內(nèi)容根據(jù)顯示需要，向下自動擴展。

操作按鈕區(qū)域：操作說明居左顯示，操作按鈕居右顯示，推薦操作的按鈕重點標注：

注：

  • 操作按鈕說明主要用于操作按鈕區(qū)出現(xiàn)多個按鈕，需要對部分特定操作進行特別說明的情況；
  • 推薦操作按鈕需要分布在一組操作按鈕的頭或尾，避免出現(xiàn)在中間位置；

通用情況下，初始狀態(tài)下會話窗口基于頁面居中（水平、垂直）顯示。

3. 交互行為

點擊關閉按鈕、取消按鈕，將關閉會話窗口，如涉及復雜配置類窗口，為避免用戶誤操作，需要提供二次確認彈窗。

其他詳細交互行為，請查看對應會話窗口。

二、提示信息會話框

1. 需求場景

根據(jù)用戶的操作行為，進行相應信息提示。

僅做操作行為或操作結果提示、或者建議用戶執(zhí)行某一特定操作。

2. 內(nèi)容與布局

區(qū)域分布與通用會話框相同。

標題欄中圖標與提示標題，內(nèi)容與提示信息強相關，圖標需表意直觀、標題文本需簡單概要說明當前提示信息核心內(nèi)容。

圖標：

  • 提示：信息說明
  • 提醒：用戶操作可能受阻，需用戶進行處理或者關注。
  • 成功：操作成功
  • 失?。翰僮魇?/li>
  • 標題：成功與失敗提示需使用：“操作 + 結果”方式呈現(xiàn)，例如：刪除成功、更新失敗、連接失敗等。

內(nèi)容區(qū)域高度須有最小高度限制（因內(nèi)容區(qū)域內(nèi)容過少，導致內(nèi)容區(qū)域高度過小時，需限定內(nèi)容區(qū)最小高度）。

內(nèi)容區(qū)分為：提示內(nèi)容（詳情）、備注信息：

常規(guī)布局：

展開詳情：詳情內(nèi)容展開后，達到一定長度自動出現(xiàn)垂直滾動條。

提示會話框一般建議只提供一個操作按鈕，用于關閉會話框；如果因業(yè)務需要，需要通過操作按鈕進行后續(xù)業(yè)務執(zhí)行時，允許出現(xiàn)多個操作按鈕。

推薦使用模式：

內(nèi)容提示：僅提示用戶，常用于幫助說明等場景

提醒：操作前置條件不滿足，推薦用戶進行必要操作：

成功：用于提示單項操作結果：

單項操作失?。河糜谔崾締雾棽僮鹘Y果：操作對象一般使用ID表達并重點標注，默認顯示24個字符（中文占2個字符），字符超過24個字符時顯示前19個字符“…”鏈接后2個字符。

對象名稱未超長：

對象名稱已超長：

鼠標移入對象使用Tips全文顯示：

注：

  • 詳情信息一般在普通用戶（無法解決問題能力的用戶不予顯示）；
  • 詳情信息展開高度需要有最大高度限制，超過一定限度后續(xù)限制高度，并出現(xiàn)滾動條；

批量操作有異常：用于提示批量操作結果有部分失敗或異常：

操作按鈕定義以具備簡要、明確的短語定義。

3. 交互行為

交互行為與通用會話框保持一致。

三、行為確認會話框

1. 需求場景

根據(jù)用戶的操作行為，進行相應信息提示。

根據(jù)用戶操作確認的入口，避免誤操作。

2. 內(nèi)容與布局

區(qū)域分布與通用會話框相同。

行為確認會話框根據(jù)行為影響范圍進行分類。

提示類二次確認：一般性操作，誤操作無較大影響，行為可逆。

警告類：在業(yè)務上會造成一定風險，需要用戶進行信息內(nèi)容閱讀確認后，再操作。

安全驗證：在業(yè)務上會造成較大危險，如有可能會導致業(yè)務癱瘓或終止，需要通過保障級別較高的操作驗證行為進行安全保障，如輸入手機驗證碼等方式。

3. 交互行為

警告類與安全類驗證，信息確認框，操作確認按鈕需前置操作如驗證碼，密碼輸入經(jīng)過格式合法性校驗通過后才能啟用。

僅有兩次確認復選框：

僅有文本驗證輸入框：

操作再次確認與文本輸入框組合：

其他交互行為與通用會話框保持一致。

四、配置會話框

1. 需求場景

用戶進行日常操作時，需要進行快速配置。

配置完成后，可以繼續(xù)駐留在配置操作發(fā)起時相應界面。

配置相對較少。

2. 內(nèi)容與布局

區(qū)域分布與通用會話框相同：

標題欄無會話框圖標，內(nèi)容如下：

內(nèi)容區(qū)布局：

配置表單內(nèi)部布局參考基礎表單布局格式。

3. 交互行為

交互整體行為與基礎會話框保持一致。

配置表單與會話框操作按鈕關聯(lián)關系與常規(guī)表單操作按鈕關系一致。

配置成功，刷新源目標頁面。

五、總結

關于B端基礎交互組件“會話框”的相關分享就到這里，下一章我們介紹“B端UI交互里的系統(tǒng)性交互行為”包括“操作反饋”、“表格相關”、“分組配置”的相關交互規(guī)范。

本文由 @云計算產(chǎn)品汪 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉載

題圖來自 unsplash，基于 CC0 協(xié)議

熱門課程推薦

熱門資訊

請綁定手機號

獲取驗證碼
x

同學您好！

您已成功報名0元試學活動，老師會在第一時間與您取得聯(lián)系，請保持電話暢通！
確定