在 B 端界面中，按鈕是每張頁面都會出現(xiàn)的最基礎的元素，用戶的任務流程皆從按鈕開始，按鈕設計有理有據(jù)，可以為界面及產品專業(yè)度加分不少。如果一個產品的界面，是如下圖那樣(按鈕的設計規(guī)則無規(guī)律可循，隨意為之)，不僅產品用戶體驗會直線下降，產品所在企業(yè)及產品本身的口碑也會受到質疑。同時，按鈕作為產品設計規(guī)范中的一個部分，如果不加以約束，每種場景都會出現(xiàn)過多的組合方式，導致界面體驗無章可循。

[[407690]]

因此，整理按鈕的里里外外相當重要，從細微之處提升產品的體驗。

下面筆者會像剝洋蔥一樣，層層遞進給大家講解 B 端的按鈕。

按鈕的作用

在了解一個按鈕是怎么回事前，我們需要先明白按鈕在 B 端界面上的作用。

第一：觸發(fā)某一類功能

用戶通過操作按鈕，可以觸發(fā)功能從而完成任務。

第二：引導下一步操作

通過在適當?shù)奈恢梅胖冒粹o，引導用戶操作。

第三：聚合信息

當需要展示的內容過多時，可以通過按鈕觸發(fā)跳轉詳情，無需在當前頁展示全部內容。

第四：形成用戶心智

當按鈕的位置、形式、文案都相對固定，且觸發(fā)的功能一致，用戶會對該按鈕形成習慣，會形成用戶對產品的依賴。

按鈕的要素分解

別看一個小小的按鈕，它可是隱藏著巨大細節(jié)的。越深入了解它，你會對它越來越刮目相看。

1. 按鈕類型

在 B 端場景中，按鈕主要分為 5 種，包括主按鈕、默認按鈕、虛線按鈕、文本按鈕、鏈接按鈕。通過對按鈕添加屬性后，又可以有危險按鈕、幽靈按鈕、禁用按鈕、加載中按鈕等。注意，不建議在一個按鈕組中混合多種按鈕使用，這會導致界面混亂，而每個按鈕都是有其自身的使用場景。

2. 按鈕形態(tài)

根據(jù)按鈕類型，及按鈕不同場景的使用需要，可以將按鈕分成圖標按鈕、圖標+文字按鈕、組合按鈕、下拉按鈕、Block 按鈕。

3. 按鈕狀態(tài)

每類按鈕都有一套基礎的狀態(tài)，包括 Normal 態(tài)(默認態(tài))、Hover 態(tài)(懸浮態(tài))、Pressed 態(tài)(點擊態(tài))、Disable 態(tài)(禁用態(tài))。按鈕的不同狀態(tài)告知了用戶當前可以執(zhí)行的下一步操作。

Normal(默認態(tài))：該狀態(tài)就是按鈕正常顯示在頁面的狀態(tài)。

Hover 態(tài)(懸浮態(tài))：當鼠標指針停留在按鈕上時，按鈕展示出的反饋。

Pressed 態(tài)(點擊態(tài))：當鼠標指針按壓按鈕時，按鈕的效果反饋。

Disable 態(tài)(禁用態(tài))：當頁面按鈕不可用時，可能是信息未填寫完成，可能是操作未達到某種條件要求，按鈕會展示不可用狀態(tài)。對于禁用按鈕，可以讓鼠標浮上去后展示解禁提示，這樣會對用戶更友好。

4. 使用場景

筆者發(fā)現(xiàn)，很多同學在按鈕的調用中，基本不太知道該如何去選擇適合的按鈕，而每類按鈕都有其具體的使用場景，并不是上帝隨意創(chuàng)造的物體，而是設計界專門為提升產品用戶體驗而創(chuàng)造的物體。

主按鈕：主按鈕為召喚按鈕，在界面上較為醒目，召喚用戶去操作，通常一個操作區(qū)只有一個主按鈕。

默認按鈕：按鈕組中沒有主次之分的按鈕，通常按鈕組中次按鈕數(shù)量沒有限制。

虛線按鈕：虛線按鈕通常用于當前頁內容的添加操作。

文本按鈕：在一些無需主次按鈕的場景中，可以使用文本按鈕，例如表格行操作項。

鏈接按鈕：顧名思義，用于外鏈到外部頁面的按鈕。

危險按鈕：一般在需要二次確認的地方，需要使用危險按鈕，如刪除、修改權限等場景。

幽靈按鈕：按鈕用在需要放置在不同底色或背景復雜的場景中。

禁用按鈕：當前操作不可用，需要禁用按鈕。

加載中按鈕：在提交內容后，無法及時反饋，還需加載過程的，需要用到加載中按鈕。

圖標按鈕：有些按鈕用純圖標不僅節(jié)省界面空間，還直觀，例如打印、修改文字顏色、內容布局等。

圖標+文字按鈕：圖標按鈕會讓頁面更有活力，更清晰表意，特別是如上傳文件、下載文件類按鈕，按鈕加上圖標比單純文字更直觀。

組合按鈕：有多個按鈕性質相似時，適合使用組合按鈕，如視圖切換按鈕。

下拉按鈕：當按鈕數(shù)量過多，適合將一些低頻按鈕收納起來。

Block 按鈕：這類按鈕在一些頁面需要強指引的時候出現(xiàn)，且操作較為全局性，比如登錄、注冊、付款、表單提交等。這類按鈕在使用中要注意數(shù)量控制在 2 個以內，通常為一個主要按鈕，一個次要按鈕，不要出現(xiàn)太多，太多了顯現(xiàn)不出該按鈕的特點了。

5. 視覺樣式

一個小小的按鈕，包含了非常豐富的視覺樣式，在設計階段，需要對樣式進行細致的拆解和定義。按鈕的視覺樣式包括尺寸、顏色、文本、按鈕、間距、形狀、風格，具體如下。

尺寸：在 B 端產品中，按鈕通常有 3 種尺寸，分為大中小。大按鈕主要使用在全局性操作的界面上;中按鈕通常為標準按鈕，其基本隨時隨地出現(xiàn);小按鈕主要使用在下拉面板或一些需要使用到小按鈕的地方。備注：計算標準按鈕高度的方法(僅供參考)，文字字號 2.4 倍或 2.5 倍，計算出來的值取最靠近 4 的倍數(shù)的數(shù)字。例如 12 號字體在 2.4 倍數(shù)值為 28.8，距離 4 的倍數(shù)最近的為 28，因此標準按鈕高度為 28px;14 號字體在 2.5 倍數(shù)值為 35，距離 4 的倍數(shù)最近的為 36，因此標準按鈕高度為 36px。

文本：按鈕如何傳達意思給用戶，文本起到了非常重要的作用，用戶見文字了解用意，引導用戶進行操作。放置在按鈕中的文本需要注意三個問題：第一，文本顏色要清晰;第二，文本大小要合適;第三，文本寓意要明了。

圖標：在設計打印、導入、導出、下載等按鈕時，我們會發(fā)現(xiàn)圖標按鈕會比文字按鈕更合適。圖標按鈕在設計上需要注意與文本一致。

顏色：按鈕的顏色主要由容器背景色和邊框色(注意：是內描邊)、字體顏色和圖標顏色組成。不同的按鈕色，代表了不同的按鈕類型，例如賦予主色的按鈕是主按鈕。對于一些特殊風格的按鈕來說，還有陰影的顏色，陰影顏色可以用按鈕色值的透明度 50%左右來設計。

間距：按鈕內圖標與文字的間距、文字與按鈕邊框的間距等，是形成按鈕呼吸感的重要因素。在按鈕規(guī)則的設計上，建議簡單與美觀。簡單是指規(guī)則簡單易拓展，美觀是指按鈕依據(jù)規(guī)則設計出來后，在視覺上要合理。

形狀：形狀是由按鈕的圓角形成的。圓角為 0px，按鈕形狀挺拔，給人嚴謹、尖銳的感覺;圓角為 4px，按鈕形狀稍顯柔和，給人專業(yè)不失柔和的感覺;圓角為半圓形(圓角的半徑=高度的 50%)，按鈕形狀非常柔和，給人親和感。

風格：B 端按鈕的風格主要為輕擬物、凸起按鈕、漸變按鈕和扁平化，而扁平化已經越來越成為趨勢，扁平化按鈕的優(yōu)勢在于：

• 第一：使得界面信息展現(xiàn)更清晰，用戶將更聚焦于內容及任務操作。
• 第二：在開發(fā)上更方便，扁平化拋棄了很多不必要的設計。
• 第三：減少了陰影等細節(jié)，提升了產品性能。

6. 交互方式

除了視覺樣式，按鈕還帶有交互方式。按鈕只有帶上了交互，才真正開始為用戶服務，它是用戶輸入信息的口子，是系統(tǒng)接收信息的口子，更是人機友好交互的口子。

按鈕的交互分為六種：

第一：點擊按鈕后出彈窗，例如新增、刪除。

第二：點擊按鈕后關閉、退出當前操作，例如保存對表單的操作。

第三：點擊按鈕后在當前頁反饋信息，例如當前頁新增表單項。

第四：點擊按鈕后出現(xiàn)下拉等浮層反饋，例如下拉菜單、表格“更多項”操作、工具欄“更多項”操作。

第五：點擊按鈕后跳轉頁面，例如步驟類操作中的下一步、頁面類新增表單。

 

第六：鼠標懸浮在按鈕觸發(fā)面板類反饋，例如用戶設置、換膚。

7. 展示數(shù)量

按鈕的數(shù)量展示是指在一個按鈕區(qū)中，按鈕數(shù)量的多少。筆者見過 B 端產品三種按鈕數(shù)量放置的方式，以下只有第三種是推薦的。

• 第一種，能提供給用戶的按鈕都展示出來，唯恐用戶找不到。
• 第二種，適當做了按鈕的收斂，但不清楚所以然，就是把一些按鈕象征性的放到了“更多”中。
• 第三種，對業(yè)務的目標和用戶的界面操作場景非常熟悉，有條有理的將按鈕合理展示，既保證用戶能順利操作，又保證產品界面整理有序。

總體來說，建議一個按鈕區(qū)的按鈕數(shù)量盡量控制在 5 個以內，多余 5 個置入“更多”中。

8. 歸類聚合

歸類聚合是指具有相同含義的按鈕需要歸類展示，例如新增、刪除、修改、查看通常在一起;啟動和停止、導入和導出、下載和上傳都會在一起，不宜距離太遠。

9. 按鈕位置

按鈕的位置是指按鈕或按鈕組位于內容塊的哪個部位，在一定程度上，我們也可以將頁面視為內容塊，即內容塊是包含內容的區(qū)塊。如果需要結構性的將一個內容塊進行有序化切分，通常由 Header、Body、Footer 三部分組成。

• Header：放置在 Header 的按鈕，通常是一些全局性質的操作，例如編輯全部數(shù)據(jù)、切換視圖展示、批量刪除等。但是這些按鈕應該放左側、中間、還是右側呢?
• Body：放置在 Body 的按鈕，通常是對跟隨的內容直接操作，例如編輯單條表單項、編輯某部分表單區(qū)塊等。但是這些按鈕應該放在哪里呢?
• Footer：放置在 Footer 的按鈕，通常是全局完成類的操作，例如取消、確定、保存等。但是這些按鈕應該放在哪里呢?
• Header、Body、Footer 按鈕位置根據(jù)“F”和“Z”型的視覺瀏覽規(guī)律給出如下使用建議。圖中藍色為主按鈕，白色為次按鈕。

10. 按鈕順序

按鈕順序是指按鈕組中，不同按鈕的順序應該如何放置，這里的順序包含兩層：第一是主按鈕與次按鈕的順序;第二是同類按鈕之間的順序，例如次按鈕和次按鈕的順序。同個產品中，按鈕順序保持一致，不僅利于提升用戶的操作效率，同時會減少用戶的操作出錯概率。

由“2.9 按鈕位置”我們可以發(fā)現(xiàn)，當按鈕組位于 Header 和 Footer 區(qū)時，主按鈕和次按鈕順序為主按鈕靠右原則設計，符合“Z”型閱讀模式+費茨定律。當按鈕組位于 Body 區(qū)時，若要同時出現(xiàn)主次按鈕，主按鈕在次按鈕左邊原則，符合用戶“F”型瀏覽模式。

除了以上基礎的設計建議外，還有以下三個設計原則需要遵守：

方向性原則

返回、前進、上一步、下一步、撤銷、重做等按鈕都是具有方向性的，假如按鈕的放置位置是符合其方向性的，用戶的認知成本就會很低。

相關按鈕臨近原則

讓相關的操作按鈕更相近，這樣不僅在視覺上增強用戶對他們的相關性認知，而且距離越近越容易操作。例如保存、保存并返回首頁;發(fā)布、定時發(fā)布。

符合對話習慣

用戶在操作界面按鈕的時候，實際上是和界面在進行對話，因此，按鈕設計符合用戶自然的對話會比較合適。例如你想把自己喜歡喝的飲料分享給朋友，你會問“想喝嗎”，如果他不想喝，你會再問“很好喝，可以加點糖”，如果他搖頭，你會說“那好吧，可以先放一邊，想喝了再喝”。而不會一上來就是“喝不喝，不喝扔到垃圾桶”，對吧。

因此，針對彈窗按鈕的放置順序為：保存、取消、刪除。即“需要保存嗎?”—“不保存，那需要取消嗎?”—“原來文件不需要了，那刪除吧。”

這里筆者有一點自己的心得分享給大家，也就是在設計按鈕組的時候，可以運用以下步驟去思考：

• 第一：制定自己所負責的產品設計規(guī)范的內容塊中按鈕組的設計位置，例如 Footer 區(qū)按鈕組的位置在哪里(可以區(qū)分場景也可以不區(qū)分，由產品覆蓋的業(yè)務范疇決定)。
• 第二：制定主次按鈕的位置(是否區(qū)分場景也看產品情況)。在阿里云平臺設計規(guī)范中，主按鈕都在左側;而在 antd 中，主次按鈕位置是分場景的。
• 第三：制定按鈕組中每個按鈕的順序，建議參考 2.10 中的三個設計原則。

按鈕的設計原則

1. 讓它就是它

讓它就是它是說按鈕在外形上就要看起來是個按鈕，從用戶的心智模型來說，只有用戶第一眼識別到這是個按鈕，我操作它后，它可以讓我達成什么好的結果，用戶才會去使用。

2. 類型分明

類型分明是指設計者需要合理和正確使用不同類型的按鈕，正確表達按鈕的交互邏輯，讓用戶可以提前預判操作該按鈕后的結果。例如，不要讓用戶點擊鏈接后，彈出一個彈窗，正確的應該是點擊鏈接，打開一個新的頁面。

3. 形式單純

形式單純是指在 B 端產品中，按鈕不要設計的過于花哨，而是要干凈利索，以抱著用戶快速完成任務的心態(tài)去設計，而不是阻礙用戶的操作，過分干擾和分散用戶的視線。

4. 反饋明確

每個按鈕都承載一個功能，有功能有操作就需要有反饋，明確的反饋是用戶下一步操作的基礎。

5. 規(guī)則清晰

按鈕的使用規(guī)則，不同的設計規(guī)范有不同的定義，只要能合理定義自身所負責產品的按鈕使用規(guī)則，并讓用戶接受，就是好的規(guī)則。定義清晰的按鈕使用規(guī)則，不僅減少產品設計師之間的溝通成本，提升產品界面操作的一致性，同時降低用戶的出錯率。

結語

定義 B 端界面的設計規(guī)則是一項復雜且浩大的工程，但從長遠來看，這是一件不得不去做的事情。我們希望規(guī)則簡單、有約束、易拓展、有包容。關于按鈕，還有很多要去解決，歡迎小伙伴們一起交流。