国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

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

一、基礎(chǔ)會(huì)話框

1. 需求場(chǎng)景

需要在當(dāng)前頁(yè)面進(jìn)行信息提示。

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

2. 內(nèi)容布局

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

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

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

操作按鈕區(qū)域：操作說(shuō)明居左顯示，操作按鈕居右顯示，推薦操作的按鈕重點(diǎn)標(biāo)注：

注：

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

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

3. 交互行為

點(diǎn)擊關(guān)閉按鈕、取消按鈕，將關(guān)閉會(huì)話窗口，如涉及復(fù)雜配置類(lèi)窗口，為避免用戶誤操作，需要提供二次確認(rèn)彈窗。

其他詳細(xì)交互行為，請(qǐng)查看對(duì)應(yīng)會(huì)話窗口。

二、提示信息會(huì)話框

1. 需求場(chǎng)景

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

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

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

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

標(biāo)題欄中圖標(biāo)與提示標(biāo)題，內(nèi)容與提示信息強(qiáng)相關(guān)，圖標(biāo)需表意直觀、標(biāo)題文本需簡(jiǎn)單概要說(shuō)明當(dāng)前提示信息核心內(nèi)容。

圖標(biāo)：

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

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

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

常規(guī)布局：

展開(kāi)詳情：詳情內(nèi)容展開(kāi)后，達(dá)到一定長(zhǎng)度自動(dòng)出現(xiàn)垂直滾動(dòng)條。

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

推薦使用模式：

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

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

成功：用于提示單項(xiàng)操作結(jié)果：

單項(xiàng)操作失敗：用于提示單項(xiàng)操作結(jié)果：操作對(duì)象一般使用ID表達(dá)并重點(diǎn)標(biāo)注，默認(rèn)顯示24個(gè)字符（中文占2個(gè)字符），字符超過(guò)24個(gè)字符時(shí)顯示前19個(gè)字符“…”鏈接后2個(gè)字符。

對(duì)象名稱(chēng)未超長(zhǎng)：

對(duì)象名稱(chēng)已超長(zhǎng)：

鼠標(biāo)移入對(duì)象使用Tips全文顯示：

注：

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

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

操作按鈕定義以具備簡(jiǎn)要、明確的短語(yǔ)定義。

3. 交互行為

交互行為與通用會(huì)話框保持一致。

三、行為確認(rèn)會(huì)話框

1. 需求場(chǎng)景

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

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

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

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

行為確認(rèn)會(huì)話框根據(jù)行為影響范圍進(jìn)行分類(lèi)。

提示類(lèi)二次確認(rèn)：一般性操作，誤操作無(wú)較大影響，行為可逆。

警告類(lèi)：在業(yè)務(wù)上會(huì)造成一定風(fēng)險(xiǎn)，需要用戶進(jìn)行信息內(nèi)容閱讀確認(rèn)后，再操作。

安全驗(yàn)證：在業(yè)務(wù)上會(huì)造成較大危險(xiǎn)，如有可能會(huì)導(dǎo)致業(yè)務(wù)癱瘓或終止，需要通過(guò)保障級(jí)別較高的操作驗(yàn)證行為進(jìn)行安全保障，如輸入手機(jī)驗(yàn)證碼等方式。

3. 交互行為

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

僅有兩次確認(rèn)復(fù)選框：

僅有文本驗(yàn)證輸入框：

操作再次確認(rèn)與文本輸入框組合：

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

四、配置會(huì)話框

1. 需求場(chǎng)景

用戶進(jìn)行日常操作時(shí)，需要進(jìn)行快速配置。

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

配置相對(duì)較少。

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

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

標(biāo)題欄無(wú)會(huì)話框圖標(biāo)，內(nèi)容如下：

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

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

3. 交互行為

交互整體行為與基礎(chǔ)會(huì)話框保持一致。

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

配置成功，刷新源目標(biāo)頁(yè)面。

五、總結(jié)

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

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

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