編輯導語：在前面一篇文章中，帶着大家一起學習了B端“文本”類組件UI設計規範，其中包括標題/標籤、內容描述、備註、組合文本等組件；並從“文本”組件的需求場景、內容佈局以及交互方式等方面對以上組件進行了詳盡的規範描述《B端UI界面交互基礎組件-文本》，今天我們介紹B端“按鈕”組件的相關交互規範。
提供用户通過鼠標點擊觸發事件操作。
2. 內容與佈局1）按鈕根據設計需要，可分為純圖標按鈕、純文本按鈕、圖標+文本按鈕。
純圖標按鈕，通過鼠標hover上按鈕後展示提示信息。
純文本按鈕：純文本按鈕文字居中對齊。
圖標 + 文本按鈕：一般按鈕內容區域左側展示圖標，右側展示按鈕文本。
2）當按鈕區域寬度不夠時允許按鈕內省略部分文本內容使用”…”表示。
3）根據需要利用Tips提供操作輔助信息，如：
- 純圖標按鈕如無特殊原因，必須提供Tips提示。
- 【建議】因長度原因出現省略文本的按鈕，提供Tips提示。
4）按鈕具體在界面中的使用無強制佈局定義，建議同一界面、同一內容分區、同一應用邏輯儘量保持一致。
5）同類按鈕橫向佈局時，高度保持一致。
無按鈕文本，寬度保持一致。
按鈕文本內容長度建議相差不超過8個字段，且橫向佈局空間充裕時，按鈕寬度保持一致。
3. 交互行為1）可用狀態下鼠標移入按鈕相應區域時，需要變更鼠標樣式，同時按鈕對應的文字、圖形或邊框出現明顯的視覺變化，如顏色、粗細、大小。
如下圖所示：
2）在不可用狀態下，需要通過視覺變現出不可用的狀態，例如置灰，如下圖所示：
3）鼠標移入不可用狀態的按鈕時，需要用Tips簡要提示不可用的原因：
4）點擊按鈕後執行相應操作。
5）在操作等待過程中，如操作執行未返回結果前，當前按鈕不再下發新的操作指令。
某功能特性需要進行操作控制，並進行狀態示意。
一般只有A、B兩種狀態。
需要節約顯示區域。
2. 內容與佈局開關按鈕征途佈局應該與“常規按鈕”保持一致。
按鈕示意初始狀態為當前按鈕所控制行為的當前態——即如果當前按鈕控制行為“開啓”，則開關按鈕的顯示為“開啓”；一般用於兩種狀態進行切換。
3. 交互行為按鈕基礎交互遵循常規按鈕的交互規則。
點擊按鈕執行該按鈕事件，同時切換按鈕狀態（狀態切換根據配置序列進行循環切換），完成狀態切換後，狀態圖標切換為當前狀態對應圖標。
三、多狀態切換按鈕1. 需求場景- 某功能特性需要進行操作控制，並進行狀態示意。
- 有多種狀態或類型切換。
- 需要節約顯示區域。
- 按鈕征途佈局與常規按鈕保持一致。
- 按鈕示意初始狀態為當前按鈕所控制行為的當前狀態。
- 兩種狀態以上時，需要提供輔助選擇功能按鈕。
1）按鈕基礎交互規則遵循常規按鈕交互規則。
2）鼠標移入響應區域提示切換為下一狀態説明。
3）點擊按鈕執行該按鈕事件，同時切換按鈕狀態（狀態切換根據配置序列進行循環切換），切換完成後，狀態圖標更改為當前狀態對應圖標。
4）多種狀態支持按照按鈕按序切換狀態，支持右圖標點擊下拉選擇對應狀態，完成狀態切換後，狀態圖標切換為當前狀態對應圖標。
- 用於功能觸發，按鈕區域根據不同的操作區域響應不同的操作。
- 在使用過程中需要對按鈕主體進行關聯操作。
1）按鈕根據設計需要，響應區域一般分為主響應區域與按鈕操作區域，如圖所示：
2）按鈕區域的數量允許有多個。
3）除了上述規定外，主響應區與操作區對應規範參考“常規按鈕”內容。
3. 交互行為1）當鼠標移入主響應區域或操作按鈕區域，應分別進行行為反饋。
不同響應區域基礎交互規則以常規按鈕為準。
關於B端基礎交互組件“按鈕”的相關分享就到此，後面我們介紹“下拉菜單”的相關交互規範。
本文由 @雲計算產品汪 原創發佈於人人都是產品經理，未經許可，禁止轉載
題圖來自 unsplash，基於 CC0 協議