起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識B端UI界面交互基礎組件——按鈕
編輯導語：在前面一篇文章中，帶著大家一起學習了B端“文本”類組件UI設計規范，其中包括標題/標簽、內容描述、備注、組合文本等組件；并從“文本”組件的需求場景、內容布局以及交互方式等方面對以上組件進行了詳盡的規范描述《B端UI界面交互基礎組件-文本》，今天我們介紹B端“按鈕”組件的相關交互規范。
一、常規按鈕
1. 需求場景
提供用戶通過鼠標點擊觸發事件操作。
2. 內容與布局
1）按鈕根據設計需要，可分為純圖標按鈕、純文本按鈕、圖標+文本按鈕。
純圖標按鈕，通過鼠標hover上按鈕后展示提示信息。
純文本按鈕：純文本按鈕文字居中對齊。
圖標 +?文本按鈕：一般按鈕內容區域左側展示圖標，右側展示按鈕文本。
2）當按鈕區域寬度不夠時允許按鈕內省略部分文本內容使用”…”表示。
3）根據需要利用Tips提供操作輔助信息，如：
- 純圖標按鈕如無特殊原因，必須提供Tips提示。
- 【建議】因長度原因出現省略文本的按鈕，提供Tips提示。
4）按鈕具體在界面中的使用無強制布局定義，建議同一界面、同一內容分區、同一應用邏輯盡量保持一致。
5）同類按鈕橫向布局時，高度保持一致。
無按鈕文本，寬度保持一致。
按鈕文本內容長度建議相差不超過8個字段，且橫向布局空間充裕時，按鈕寬度保持一致。
3. 交互行為
1）可用狀態下鼠標移入按鈕相應區域時，需要變更鼠標樣式，同時按鈕對應的文字、圖形或邊框出現明顯的視覺變化，如顏色、粗細、大小。
如下圖所示：
2）在不可用狀態下，需要通過視覺變現出不可用的狀態，例如置灰，如下圖所示：
3）鼠標移入不可用狀態的按鈕時，需要用Tips簡要提示不可用的原因：
4）點擊按鈕后執行相應操作。
5）在操作等待過程中，如操作執行未返回結果前，當前按鈕不再下發新的操作指令。
二、開關按鈕
1. 需求場景
某功能特性需要進行操作控制，并進行狀態示意。
一般只有A、B兩種狀態。
需要節約顯示區域。
2. 內容與布局
開關按鈕征途布局應該與“常規按鈕”保持一致。
按鈕示意初始狀態為當前按鈕所控制行為的當前態——即如果當前按鈕控制行為“開啟”，則開關按鈕的顯示為“開啟”；一般用于兩種狀態進行切換。
3. 交互行為
按鈕基礎交互遵循常規按鈕的交互規則。
點擊按鈕執行該按鈕事件，同時切換按鈕狀態（狀態切換根據配置序列進行循環切換），完成狀態切換后，狀態圖標切換為當前狀態對應圖標。
三、多狀態切換按鈕
1. 需求場景
- 某功能特性需要進行操作控制，并進行狀態示意。
- 有多種狀態或類型切換。
- 需要節約顯示區域。
2. 內容與布局
- 按鈕征途布局與常規按鈕保持一致。
- 按鈕示意初始狀態為當前按鈕所控制行為的當前狀態。
- 兩種狀態以上時，需要提供輔助選擇功能按鈕。
3. 交互行為
1）按鈕基礎交互規則遵循常規按鈕交互規則。
2）鼠標移入響應區域提示切換為下一狀態說明。
3）點擊按鈕執行該按鈕事件，同時切換按鈕狀態（狀態切換根據配置序列進行循環切換），切換完成后，狀態圖標更改為當前狀態對應圖標。
4）多種狀態支持按照按鈕按序切換狀態，支持右圖標點擊下拉選擇對應狀態，完成狀態切換后，狀態圖標切換為當前狀態對應圖標。
四、組合按鈕
1. 需求場景
- 用于功能觸發，按鈕區域根據不同的操作區域響應不同的操作。
- 在使用過程中需要對按鈕主體進行關聯操作。
2. 內容與布局
1）按鈕根據設計需要，響應區域一般分為主響應區域與按鈕操作區域，如圖所示：
2）按鈕區域的數量允許有多個。
3）除了上述規定外，主響應區與操作區對應規范參考“常規按鈕”內容。
3. 交互行為
1）當鼠標移入主響應區域或操作按鈕區域，應分別進行行為反饋。
不同響應區域基礎交互規則以常規按鈕為準。
關于B端基礎交互組件“按鈕”的相關分享就到此，后面我們介紹“下拉菜單”的相關交互規范。
作者：云桌面產品，公眾號：云桌面產品，歡迎關注
本文由 @云桌面產品 原創發布于人人都是產品經理，未經許可，禁止轉載
題圖來自 unsplash，基于 CC0 協議
開關按鈕很多時候應該給出彈窗提示吧？
有二次確認或二次操作的需要
感謝分享
謝謝