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

在B端界面中，按鈕是每張頁面都會出現(xiàn)的最基礎(chǔ)的元素，用戶的任務(wù)流程皆從按鈕開始，按鈕設(shè)計(jì)的有理有據(jù)，可以為界面及產(chǎn)品專業(yè)度加分不少。

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

因此，整理按鈕的里里外外相當(dāng)重要，從細(xì)微之處提升產(chǎn)品的體驗(yàn)。

一、按鈕的作用

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

1. 觸發(fā)某一類功能：用戶通過操作按鈕，可以觸發(fā)功能從而完成任務(wù)。
2. 引導(dǎo)下一步操作：通過在適當(dāng)?shù)奈恢梅胖冒粹o，引導(dǎo)用戶操作。
3. 聚合信息：當(dāng)需要展示的內(nèi)容過多時，可以通過按鈕觸發(fā)跳轉(zhuǎn)詳情，無需在當(dāng)前頁展示全部內(nèi)容。
4. 形成用戶心智：當(dāng)按鈕的位置、形式、文案都相對固定，且觸發(fā)的功能一致，用戶會對該按鈕形成習(xí)慣，會形成用戶對產(chǎn)品的依賴。

二、按鈕的要素分解

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

1. 按鈕類型

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

2.?按鈕形態(tài)

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

3. 按鈕狀態(tài)

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

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

4. 使用場景

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

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

5. 視覺樣式

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

1）尺寸

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

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

2）文本

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

3）圖標(biāo)

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

4）顏色

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

5）間距

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

6）形狀

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

7）風(fēng)格

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

1. 使得界面信息展現(xiàn)更清晰，用戶將更聚焦于內(nèi)容及任務(wù)操作。
2. 在開發(fā)上更方便，扁平化拋棄了很多不必要的設(shè)計(jì)。
3. 減少了陰影等細(xì)節(jié)，提升了產(chǎn)品性能。

6. 交互方式

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

按鈕的交互分為六種：

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

第二：點(diǎn)擊按鈕后關(guān)閉、退出當(dāng)前操作，例如保存對表單的操作。

第三：點(diǎn)擊按鈕后在當(dāng)前頁反饋信息，例如當(dāng)前頁新增表單項(xiàng)。

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

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

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

7. 展示數(shù)量

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

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

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

8. 歸類聚合

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

9. 按鈕位置

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

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

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

10. 按鈕順序

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

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

除了以上基礎(chǔ)的設(shè)計(jì)建議外，還有以下三個設(shè)計(jì)原則需要遵守：

1）方向性原則

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

2）相關(guān)按鈕臨近原則

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

3）符合對話習(xí)慣

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

因此，針對彈窗按鈕的放置順序?yàn)椋罕４妗⑷∠?、刪除。即“需要保存嗎？”—“不保存，那需要取消嗎？”—“原來文件不需要了，那刪除吧。”

這里筆者有一點(diǎn)自己的心得分享給大家，也就是在設(shè)計(jì)按鈕組的時候，可以運(yùn)用以下步驟去思考：

第一、制定自己所負(fù)責(zé)的產(chǎn)品設(shè)計(jì)規(guī)范的內(nèi)容塊中按鈕組的設(shè)計(jì)位置，例如Footer區(qū)按鈕組的位置在哪里（可以區(qū)分場景也可以不區(qū)分，由產(chǎn)品覆蓋的業(yè)務(wù)范疇決定）。

第二、制定主次按鈕的位置（是否區(qū)分場景也看產(chǎn)品情況）。在阿里云平臺設(shè)計(jì)規(guī)范中，主按鈕都在左側(cè)；而在antd中，主次按鈕位置是分場景的。

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

三、按鈕的設(shè)計(jì)原則

1. 讓它就是它

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

2. 類型分明

類型分明是指設(shè)計(jì)者需要合理和正確使用不同類型的按鈕，正確表達(dá)按鈕的交互邏輯，讓用戶可以提前預(yù)判操作該按鈕后的結(jié)果。例如，不要讓用戶點(diǎn)擊鏈接后，彈出一個彈窗，正確的應(yīng)該是點(diǎn)擊鏈接，打開一個新的頁面。

3. 形式單純

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

4. 反饋明確

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

5. 規(guī)則清晰

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

四、結(jié)語

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

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

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

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