編輯導(dǎo)語：在前面一篇文章中，帶著大家一起學(xué)習(xí)了B端“文本”類組件UI設(shè)計(jì)規(guī)范，其中包括標(biāo)題/標(biāo)簽、內(nèi)容描述、備注、組合文本等組件；并從“文本”組件的需求場(chǎng)景、內(nèi)容布局以及交互方式等方面對(duì)以上組件進(jìn)行了詳盡的規(guī)范描述《B端UI界面交互基礎(chǔ)組件-文本》，今天我們介紹B端“按鈕”組件的相關(guān)交互規(guī)范。

一、常規(guī)按鈕

1. 需求場(chǎng)景

提供用戶通過鼠標(biāo)點(diǎn)擊觸發(fā)事件操作。

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

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

純圖標(biāo)按鈕，通過鼠標(biāo)hover上按鈕后展示提示信息。

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

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

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

3）根據(jù)需要利用Tips提供操作輔助信息，如：

• 純圖標(biāo)按鈕如無特殊原因，必須提供Tips提示。
• 【建議】因長(zhǎng)度原因出現(xiàn)省略文本的按鈕，提供Tips提示。

4）按鈕具體在界面中的使用無強(qiáng)制布局定義，建議同一界面、同一內(nèi)容分區(qū)、同一應(yīng)用邏輯盡量保持一致。

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

無按鈕文本，寬度保持一致。

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

3. 交互行為

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

如下圖所示：

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

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

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

5）在操作等待過程中，如操作執(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)該與“常規(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í)，需要提供輔助選擇功能按鈕。

3. 交互行為

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

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

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)支持按照按鈕按序切換狀態(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)不同的操作。
• 在使用過程中需要對(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)行行為反饋。

不同響應(yīng)區(qū)域基礎(chǔ)交互規(guī)則以常規(guī)按鈕為準(zhǔn)。

關(guān)于B端基礎(chǔ)交互組件“按鈕”的相關(guān)分享就到此，后面我們介紹“下拉菜單”的相關(guān)交互規(guī)范。

作者：云桌面產(chǎn)品，公眾號(hào)：云桌面產(chǎn)品，歡迎關(guān)注

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

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