2023年B端UI界面交互基礎(chǔ)組件-按鈕

B端UI界面交互基礎(chǔ)組件——按鈕一、常規(guī)按鈕

1.需求場(chǎng)景

供應(yīng)用戶通過(guò)鼠標(biāo)點(diǎn)擊觸發(fā)大事操作。

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

1）按鈕依據(jù)設(shè)計(jì)需要，可分為純圖標(biāo)按鈕、純文本按鈕、圖標(biāo)+文本按鈕。

純圖標(biāo)按鈕，通過(guò)鼠標(biāo)hover上按鈕后展現(xiàn)提示信息。

純文本按鈕：純文本按鈕文字居中對(duì)齊。

圖標(biāo)+

文本按鈕：一般按鈕內(nèi)容區(qū)域左側(cè)展現(xiàn)圖標(biāo)，右側(cè)展現(xiàn)按鈕文本。

2）當(dāng)按鈕區(qū)域?qū)挾炔粔驎r(shí)允許按鈕內(nèi)省略部分文本內(nèi)容使用表示。

3）依據(jù)需要利用Tips供應(yīng)操作幫助信息，如：

純圖標(biāo)按鈕如無(wú)特別緣由，必需供應(yīng)Tips提示。【建議】因長(zhǎng)度緣由消失省略文本的按鈕，供應(yīng)Tips提示。4）按鈕詳細(xì)在界面中的使用無(wú)強(qiáng)制布局定義，建議同一界面、同一內(nèi)容分區(qū)、同一應(yīng)用規(guī)律盡量保持全都。

5）同類按鈕橫向布局時(shí)，高度保持全都。

無(wú)按鈕文本，寬度保持全都。

按鈕文本內(nèi)容長(zhǎng)度建議相差不超過(guò)8個(gè)字段，且橫向布局空間充裕時(shí)，按鈕寬度保持全都。

3.交互行為

1）可用狀態(tài)下鼠標(biāo)移入按鈕相應(yīng)區(qū)域時(shí)，需要變更鼠標(biāo)樣式，同時(shí)按鈕對(duì)應(yīng)的文字、圖形或邊框消失明顯的視覺(jué)變化，如顏色、粗細(xì)、大小。

如下圖所示：

2）在不行用狀態(tài)下，需要通過(guò)視覺(jué)變現(xiàn)出不行用的狀態(tài)，例如置灰，如下圖所示：

3）鼠標(biāo)移入不行用狀態(tài)的按鈕時(shí)，需要用Tips簡(jiǎn)要提示不行用的緣由：

4）點(diǎn)擊按鈕后執(zhí)行相應(yīng)操作。

5）在操作等待過(guò)程中，如操作執(zhí)行未返回結(jié)果前，當(dāng)前按鈕不再下發(fā)新的操作指令。

二、開關(guān)按鈕

1.需求場(chǎng)景

某功能特性需要進(jìn)行操作掌握，并進(jìn)行狀態(tài)示意。

一般只有A、B兩種狀態(tài)。

需要節(jié)省顯示區(qū)域。

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

開關(guān)按鈕征途布局應(yīng)當(dāng)與“常規(guī)按鈕”保持全都。

按鈕示意初始狀態(tài)為當(dāng)前按鈕所掌握行為的當(dāng)前態(tài)——即假如當(dāng)前按鈕掌握行為“開啟”，則開關(guān)按鈕的顯示為“開啟”；一般用于兩種狀態(tài)進(jìn)行切換。

3.交互行為

按鈕基礎(chǔ)交互遵循常規(guī)按鈕的交互規(guī)章。

點(diǎn)擊按鈕執(zhí)行該按鈕大事，同時(shí)切換按鈕狀態(tài)（狀態(tài)切換依據(jù)配置序列進(jìn)行循環(huán)切換），完成狀態(tài)切換后，狀態(tài)圖標(biāo)切換為當(dāng)前狀態(tài)對(duì)應(yīng)圖標(biāo)。

三、多狀態(tài)切換按鈕

1.需求場(chǎng)景

某功能特性需要進(jìn)行操作掌握，并進(jìn)行狀態(tài)示意。有多種狀態(tài)或類型切換。需要節(jié)省顯示區(qū)域。2.內(nèi)容與布局

按鈕征途布局與常規(guī)按鈕保持全都。按鈕示意初始狀態(tài)為當(dāng)前按鈕所掌握行為的當(dāng)前狀態(tài)。兩種狀態(tài)以上時(shí)，需要供應(yīng)幫助選擇功能按鈕。

3.交互行為

1）按鈕基礎(chǔ)交互規(guī)章遵循常規(guī)按鈕交互規(guī)章。

2）鼠標(biāo)移入響應(yīng)區(qū)域提示切換為下一狀態(tài)說(shuō)明。

3）點(diǎn)擊按鈕執(zhí)行該按鈕大事，同時(shí)切換按鈕狀態(tài)（狀態(tài)切換依據(jù)配置序列進(jìn)行循環(huán)切換），切換完成后，狀態(tài)圖標(biāo)更改為當(dāng)前狀態(tài)對(duì)應(yīng)圖標(biāo)。

4）多種狀態(tài)支持根據(jù)按鈕按序切換狀態(tài)，支持右圖標(biāo)點(diǎn)擊下拉選擇對(duì)應(yīng)狀態(tài)，完成狀態(tài)切換后，狀態(tài)圖標(biāo)切換為當(dāng)前狀態(tài)對(duì)應(yīng)圖標(biāo)。

四、組合按鈕

1.需求場(chǎng)景

用于功能觸發(fā)，按鈕區(qū)域依據(jù)不同的操作區(qū)域響應(yīng)不同的操作。在使用過(guò)程中需要對(duì)按鈕主體進(jìn)行關(guān)聯(lián)操作。2.內(nèi)容與布局

1）按鈕依據(jù)設(shè)計(jì)需要，響應(yīng)區(qū)域一般分為主響應(yīng)區(qū)域與按鈕操作區(qū)域，如圖所示：

2）按鈕區(qū)域的數(shù)量允許有多個(gè)。

3）除了上述規(guī)定外，主響應(yīng)區(qū)與操作區(qū)對(duì)應(yīng)規(guī)范參考“常規(guī)按鈕”內(nèi)容。

3.交互行為

1）當(dāng)鼠標(biāo)移入主響應(yīng)區(qū)域或操作按鈕區(qū)域，應(yīng)分別進(jìn)行行為反饋。