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

[[407690]]

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

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

按鈕的作用

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

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

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

第二：引導(dǎo)下一步操作

通過(guò)在適當(dāng)?shù)奈恢梅胖冒粹o，引導(dǎo)用戶操作。

第三：聚合信息

當(dāng)需要展示的內(nèi)容過(guò)多時(shí)，可以通過(guò)按鈕觸發(fā)跳轉(zhuǎn)詳情，無(wú)需在當(dāng)前頁(yè)展示全部?jī)?nèi)容。

第四：形成用戶心智

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

按鈕的要素分解

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

1. 按鈕類型

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

2. 按鈕形態(tài)

根據(jù)按鈕類型，及按鈕不同場(chǎng)景的使用需要，可以將按鈕分成圖標(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)就是按鈕正常顯示在頁(yè)面的狀態(tài)。

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

Pressed 態(tài)(點(diǎn)擊態(tài))：當(dāng)鼠標(biāo)指針按壓按鈕時(shí)，按鈕的效果反饋。

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

4. 使用場(chǎng)景

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

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

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

虛線按鈕：虛線按鈕通常用于當(dāng)前頁(yè)內(nèi)容的添加操作。

文本按鈕：在一些無(wú)需主次按鈕的場(chǎng)景中，可以使用文本按鈕，例如表格行操作項(xiàng)。

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

危險(xiǎn)按鈕：一般在需要二次確認(rèn)的地方，需要使用危險(xiǎn)按鈕，如刪除、修改權(quán)限等場(chǎng)景。

幽靈按鈕：按鈕用在需要放置在不同底色或背景復(fù)雜的場(chǎng)景中。

禁用按鈕：當(dāng)前操作不可用，需要禁用按鈕。

加載中按鈕：在提交內(nèi)容后，無(wú)法及時(shí)反饋，還需加載過(guò)程的，需要用到加載中按鈕。

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

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

組合按鈕：有多個(gè)按鈕性質(zhì)相似時(shí)，適合使用組合按鈕，如視圖切換按鈕。

下拉按鈕：當(dāng)按鈕數(shù)量過(guò)多，適合將一些低頻按鈕收納起來(lái)。

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

5. 視覺(jué)樣式

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

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

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

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

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

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

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

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

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

6. 交互方式

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

按鈕的交互分為六種：

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

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

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

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

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

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

7. 展示數(shù)量

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

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

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

8. 歸類聚合

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

9. 按鈕位置

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

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

10. 按鈕順序

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

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

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

方向性原則

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

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

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

符合對(duì)話習(xí)慣

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

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

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

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

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

1. 讓它就是它

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

2. 類型分明

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

3. 形式單純

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

4. 反饋明確

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

5. 規(guī)則清晰

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

結(jié)語(yǔ)

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