亚洲AV免费看深爱成人|日韩av另类一级特黄片在线|中国免费一级黄片|国产av一二三区|亚洲有码AV在线|久久亚洲国产日韩欧美|成人免费AV网站|婷婷一区综合一区|亚洲AV无码导航|高级欧美成人网站

高校合作1：010-59833514 ?咨詢(xún)電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

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

發(fā)布時(shí)間：2024-01-18 20:48:10 瀏覽量：261次

編輯導(dǎo)語(yǔ)：在前面一篇文章中，帶著大家一起學(xué)習(xí)了B端“文本”類(lèi)組件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)景

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

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

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

純圖標(biāo)按鈕，通過(guò)鼠標(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)按鈕如無(wú)特殊原因，必須提供Tips提示。
  • 【建議】因長(zhǎng)度原因出現(xiàn)省略文本的按鈕，提供Tips提示。

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

5）同類(lèi)按鈕橫向布局時(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)的文字、圖形或邊框出現(xiàn)明顯的視覺(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ā)新的操作指令。

二、開(kāi)關(guān)按鈕

1. 需求場(chǎng)景

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

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

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

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

開(kāi)關(guān)按鈕征途布局應(yīng)該與“常規(guī)按鈕”保持一致。

按鈕示意初始狀態(tài)為當(dāng)前按鈕所控制行為的當(dāng)前態(tài)——即如果當(dāng)前按鈕控制行為“開(kāi)啟”，則開(kāi)關(guān)按鈕的顯示為“開(kāi)啟”；一般用于兩種狀態(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)或類(lè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)說(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)支持按照按鈕按序切換狀態(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)行行為反饋。

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

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

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

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

熱門(mén)課程推薦

熱門(mén)資訊

請(qǐng)綁定手機(jī)號(hào)

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報(bào)名0元試學(xué)活動(dòng)，老師會(huì)在第一時(shí)間與您取得聯(lián)系，請(qǐng)保持電話暢通！
確定