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

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

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

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

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

一、常規(guī)按鈕

1. 需求場景

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

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

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

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

純文本按鈕：純文本按鈕文字居中對齊。

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

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

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

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

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

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

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

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

3. 交互行為

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

如下圖所示：

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

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

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

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

二、開關(guān)按鈕

1. 需求場景

某功能特性需要進行操作控制，并進行狀態(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)進行切換。

3. 交互行為

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

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

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

1. 需求場景

  • 某功能特性需要進行操作控制，并進行狀態(tài)示意。
  • 有多種狀態(tài)或類型切換。
  • 需要節(jié)約顯示區(qū)域。

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

  • 按鈕征途布局與常規(guī)按鈕保持一致。
  • 按鈕示意初始狀態(tài)為當(dāng)前按鈕所控制行為的當(dāng)前狀態(tài)。
  • 兩種狀態(tài)以上時，需要提供輔助選擇功能按鈕。

3. 交互行為

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

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

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

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

四、組合按鈕

1. 需求場景

  • 用于功能觸發(fā)，按鈕區(qū)域根據(jù)不同的操作區(qū)域響應(yīng)不同的操作。
  • 在使用過程中需要對按鈕主體進行關(guān)聯(lián)操作。

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

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

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

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

3. 交互行為

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

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

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

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

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

熱門課程推薦

熱門資訊

請綁定手機號

獲取驗證碼
x

同學(xué)您好！

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