B端體驗細節（一）：按鈕的里里外外

編輯導語：按鈕功能雖然聽起來微不足道，但是實際上卻對用戶體驗起著非常重要的作用。本文作者對按鈕的作用、要素和設計原則進行了分析，帶我們一起看看按鈕的里里外外。

在B端界面中，按鈕是每張頁面都會出現的最基礎的元素，用戶的任務流程皆從按鈕開始，按鈕設計的有理有據，可以為界面及產品專業度加分不少。

如果一個產品的界面，是如下圖那樣（按鈕的設計規則無規律可循，隨意為之），不僅產品用戶體驗會直線下降，產品所在企業及產品本身的口碑也會受到質疑。同時，按鈕作為產品設計規范中的一個部分，如果不加以約束，每種場景都會出現過多的組合方式，導致界面體驗無章可循。

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

一、按鈕的作用

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

1. 觸發某一類功能：用戶通過操作按鈕，可以觸發功能從而完成任務。
2. 引導下一步操作：通過在適當的位置放置按鈕，引導用戶操作。
3. 聚合信息：當需要展示的內容過多時，可以通過按鈕觸發跳轉詳情，無需在當前頁展示全部內容。
4. 形成用戶心智：當按鈕的位置、形式、文案都相對固定，且觸發的功能一致，用戶會對該按鈕形成習慣，會形成用戶對產品的依賴。

二、按鈕的要素分解

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

1. 按鈕類型

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

2. 按鈕形態

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

3. 按鈕狀態

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

• Normal（默認態）：該狀態就是按鈕正常顯示在頁面的狀態。
• Hover態（懸浮態）：當鼠標指針停留在按鈕上時，按鈕展示出的反饋。
• Pressed態（點擊態）：當鼠標指針按壓按鈕時，按鈕的效果反饋。
• Disable態（禁用態）：當頁面按鈕不可用時，可能是信息未填寫完成，可能是操作未達到某種條件要求，按鈕會展示不可用狀態。對于禁用按鈕，可以讓鼠標浮上去后展示解禁提示，這樣會對用戶更友好。

4. 使用場景

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

• 主按鈕：主按鈕為召喚按鈕，在界面上較為醒目，召喚用戶去操作，通常一個操作區只有一個主按鈕。
• 默認按鈕：按鈕組中沒有主次之分的按鈕，通常按鈕組中次按鈕數量沒有限制。
• 虛線按鈕：虛線按鈕通常用于當前頁內容的添加操作。
• 文本按鈕：在一些無需主次按鈕的場景中，可以使用文本按鈕，例如表格行操作項。
• 鏈接按鈕：顧名思義，用于外鏈到外部頁面的按鈕。
• 危險按鈕：一般在需要二次確認的地方，需要使用危險按鈕，如刪除、修改權限等場景。
• 幽靈按鈕：按鈕用在需要放置在不同底色或背景復雜的場景中。
• 禁用按鈕：當前操作不可用，需要禁用按鈕。
• 加載中按鈕：在提交內容后，無法及時反饋，還需加載過程的，需要用到加載中按鈕。
• 圖標按鈕：有些按鈕用純圖標不僅節省界面空間，還直觀，例如打印、修改文字顏色、內容布局等。
• 圖標+文字按鈕：圖標按鈕會讓頁面更有活力，更清晰表意，特別是如上傳文件、下載文件類按鈕，按鈕加上圖標比單純文字更直觀。
• 組合按鈕：有多個按鈕性質相似時，適合使用組合按鈕，如視圖切換按鈕。
• 下拉按鈕：當按鈕數量過多，適合將一些低頻按鈕收納起來。
• Block按鈕：這類按鈕在一些頁面需要強指引的時候出現，且操作較為全局性，比如登錄、注冊、付款、表單提交等。這類按鈕在使用中要注意數量控制在2個以內，通常為一個主要按鈕，一個次要按鈕，不要出現太多，太多了顯現不出該按鈕的特點了。

5. 視覺樣式

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

1）尺寸

在B端產品中，按鈕通常有3種尺寸，分為大中小。大按鈕主要使用在全局性操作的界面上；中按鈕通常為標準按鈕，其基本隨時隨地出現；小按鈕主要使用在下拉面板或一些需要使用到小按鈕的地方。

備注：計算標準按鈕高度的方法（僅供參考），文字字號2.4倍或2.5倍，計算出來的值取最靠近4的倍數的數字。例如12號字體在2.4倍數值為28.8，距離4的倍數最近的為28，因此標準按鈕高度為28px；14號字體在2.5倍數值為35，距離4的倍數最近的為36，因此標準按鈕高度為36px。

2）文本

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

3）圖標

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

4）顏色

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

5）間距

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

6）形狀

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

7）風格

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

1. 使得界面信息展現更清晰，用戶將更聚焦于內容及任務操作。
2. 在開發上更方便，扁平化拋棄了很多不必要的設計。
3. 減少了陰影等細節，提升了產品性能。

6. 交互方式

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

按鈕的交互分為六種：

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

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

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

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

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

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

7. 展示數量

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

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

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

8. 歸類聚合

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

9. 按鈕位置

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

• Header：放置在Header的按鈕，通常是一些全局性質的操作，例如編輯全部數據、切換視圖展示、批量刪除等。但是這些按鈕應該放左側、中間、還是右側呢？
• Body：放置在Body的按鈕，通常是對跟隨的內容直接操作，例如編輯單條表單項、編輯某部分表單區塊等。但是這些按鈕應該放在哪里呢？
• Footer：放置在Footer的按鈕，通常是全局完成類的操作，例如取消、確定、保存等。但是這些按鈕應該放在哪里呢？

Header、Body、Footer按鈕位置根據“F”和“Z”型的視覺瀏覽規律給出如下使用建議。圖中藍色為主按鈕，白色為次按鈕。

10. 按鈕順序

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

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

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

1）方向性原則

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

2）相關按鈕臨近原則

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

3）符合對話習慣

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

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

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

第一、制定自己所負責的產品設計規范的內容塊中按鈕組的設計位置，例如Footer區按鈕組的位置在哪里（可以區分場景也可以不區分，由產品覆蓋的業務范疇決定）。

第二、制定主次按鈕的位置（是否區分場景也看產品情況）。在阿里云平臺設計規范中，主按鈕都在左側；而在antd中，主次按鈕位置是分場景的。

第三、制定按鈕組中每個按鈕的順序，建議參考2.10中的三個設計原則。

三、按鈕的設計原則

1. 讓它就是它

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

2. 類型分明

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

3. 形式單純

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

4. 反饋明確

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

5. 規則清晰

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

四、結語

定義B端界面的設計規則是一項復雜且浩大的工程，但從長遠來看，這是一件不得不去做的事情。我們希望規則簡單、有約束、易拓展、有包容。關于按鈕，還有很多要去解決，歡迎小伙伴們一起交流，筆者也會陸續整理和輸出B端體驗細節的其他部分，歡迎我的關注公眾號“知果日記”，這是一個有理想的公眾號喲~

 

作者：知果；公眾號：知果日記

本文由 @知果 原創發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。