編輯導語：按鈕設計在產(chǎn)品中是非常重要的組件之一，并且也是跟用戶觸發(fā)按鈕的關鍵操作，所以設計師在對于按鈕的設計時需要注意多種細節(jié)和規(guī)范，確保用戶體驗；本文作者分享了關于B端組件設計中的按鈕，我們一起來了解一下。

我們在工作中經(jīng)常會遇到各種各樣的問題，遇到問題并不可怕，畢竟解決問題也是設計師不可或缺的能力之一，包豪斯“以解決問題為中心”的設計理念也深深影響著現(xiàn)代設計，所以定期的復盤和整理以及尋找解決辦法是我們設計道路非常重要的環(huán)節(jié)，此篇即為設計師遇事不求人自己找答案系列的按鈕篇；

回到本文，我們在日常的設計工作中，按鈕是比較常見的組件，也是各個終端必不可少的組件之一。本文主要整理B端Web端的按鈕的使用，Web常用的組件主要有反饋類組件、表單類組件、基礎組件即按鈕、數(shù)據(jù)展示類組件、導航類組件以及業(yè)務類組件。

一、按鈕的概述

1. 概述

按鈕是界面設計中比較重要的組件之一，是用戶引流和行動觸發(fā)的關鍵，用于提示用戶按下按鈕后將進行的操作，主要由文字和圖標組成，可理解為一個操作的觸發(fā)器。

來看看幾個網(wǎng)站的解釋：

• Ant Design：按鈕用于開始一個即時操作。
• Material io：Buttons allow users to take actions, and make choices, with a single tap；通過按鈕，用戶只需單擊一下即可執(zhí)行操作并做出選擇。
• Vant：按鈕用于觸發(fā)一個操作，如提交表單。
• View UI：基礎組件，觸發(fā)業(yè)務邏輯時使用。

2. 按鈕的起源

按鈕的前身是物理按鈕，是連接人類與工業(yè)產(chǎn)品的橋梁，極大程度降低了人與機器互動的門檻，為人們提供了很大的便利。

1988年柯達公司發(fā)明了第一臺可拍攝100張照片的柯達相機布朗尼，同時它的創(chuàng)始人伊士曼設計了流芳百世的廣告詞：“您只需按一下按鈕，剩余的我們來做”，廣告詞言簡意賅，并迅速傳播開來，可謂開創(chuàng)了攝影文化及物理按鈕的先河。

150年后，當今的布朗尼誕生了，也就是蘋果iPhone，自07年iPhone初代發(fā)布以來，觸摸屏逐漸取代了物理按鈕成為人機交互的主流形態(tài)。

17年iPhoneX發(fā)布，手勢交互成為大勢所趨，虛擬按鈕已經(jīng)逐漸取代了物理按鈕；布朗尼也許不是第一款便攜相機，iPhone也不是第一款觸摸屏手機，但是它們的成就都超越了技術，為各自時代的變革做出了貢獻。

即使到現(xiàn)代，按鈕仍是吸引用戶點擊的組件。觸摸或點擊按鈕即可觸發(fā)操作。很多家用電器和其他設備的物理按鈕變?yōu)橛|摸屏控件，它們形成的行為習慣會繼續(xù)延續(xù)按鈕設計的初衷：直觀性和易用性。

二、按鈕的組成和分類

1. 按鈕的適用范圍

首先我們在設計產(chǎn)品中的按鈕時，肯定會遵循或制定設計規(guī)范，設計規(guī)范就是產(chǎn)品的標準使用說明；統(tǒng)一的設計規(guī)范可以幫助設計師提高效率，也可以幫助產(chǎn)品開發(fā)測試甚至用戶有更好的體驗，并降低學習成本。

而企業(yè)的規(guī)范也會有不同的適用范圍，我們做設計時也要根據(jù)不同的范圍去定義設計。

首先企業(yè)級的設計規(guī)范，是針對企業(yè)整體的品牌調(diào)性，是所有產(chǎn)品設計規(guī)范的基石；其次某個產(chǎn)品線的設計規(guī)范，是在遵循企業(yè)級設計規(guī)范的基礎上，對該產(chǎn)品線上所有產(chǎn)品定制的專屬設計語言規(guī)范，如品牌形象、設計語言、用戶體驗等；具體產(chǎn)品規(guī)范則指針對具體某個產(chǎn)品，根據(jù)該產(chǎn)品的產(chǎn)品特性定制化設計語言；

2. 按鈕的分類

1）按使用平臺分類

日常設計工作中，移動端常見的按鈕主要有懸浮響應按鈕、浮動按鈕及扁平按鈕；web端常見的是面性按鈕、線性按鈕、圖標按鈕、文字按鈕；本文主要以Web端為主，所以移動端不占過多篇幅講解。

2）按結構分類

Web端按鈕主要用來作為執(zhí)行下一個操作的入口，一般在執(zhí)行對象為一個流程對象或者作為操作按鈕時使用；Web端按鈕樣式主要有面性、線性、圖標及文字四種；面性按鈕一般用在比較重要的場景；線性按鈕則用在次重要的操作場景；在使用純圖標按鈕時候，一般會在鼠標停留時出現(xiàn)提示；文字按鈕一般使用顏色來表示該文字可通過點擊鏈接到下一個操作，且多使用主題色，視覺效果弱于面性按鈕和線性按鈕。

① 圖標文字按鈕

圖標文字按鈕也是較常使用的按鈕形式，為確保按鈕的語義更加明確，通常會加上文本來注釋圖標語義；

如何來處理圖標和文字的關系呢？

• 圖標和文字字體的頂線上下對齊；
• 圖標和文字的杭高上下對齊，另外還要注意圖標和文字的視覺重量，適當調(diào)整以確保視覺平衡；

② 圖標文字按鈕

顧名思義，面性按鈕即為填充底色的按鈕，一般用作主按鈕。

線性文字按鈕和幽靈按鈕：幽靈按鈕（Ghost Buttons）最大的特點就是透和薄，沒有填充底色和紋理，只有邊框，既保留了作為按鈕的功能性，又具備一定的簡約視覺美感。一般用于網(wǎng)站首頁，而線性按鈕用途則十分廣泛。

文字按鈕：文本按鈕一般用在列表中，常見的樣式是加顏色或下劃線的鏈接文本；

圖標按鈕：圖標按鈕相比于一般按鈕，節(jié)省了很大的空間，可以與其他圖標按鈕一起排列，但是語義不明確的時候，容易造成用戶理解偏差。

一般會用下面兩種處理方式：

• 圖標按鈕一般會在鼠標移動到圖標上時通過鼠標hover效果展示提示信息；
• 在為認知度較低的人群設計產(chǎn)品時，建議使用圖標文字按鈕。

懸浮按鈕：一般用于移動端，Google Material Design更為常見，看起來像圖標按鈕，其實是頁面中的主要操作按鈕；網(wǎng)站也有使用，如飛書。

3）按優(yōu)先級分類

根據(jù)優(yōu)先級和對應樣式分為，主要按鈕，次要按鈕，輔助按鈕，一個頁面中應包含有一個主要按鈕；當頁面總有多個按鈕的時候，通常主要按鈕和次要按鈕搭配使用，B端頁面中，由于業(yè)務功能比較復雜，有時還會出現(xiàn)多個同等重要的主要按鈕。

4）按作用分類

行動按鈕 CTA（Call To Action）行為召喚按鈕。

在日常生活中，常見的CTA有商場里的產(chǎn)品銷售模式，比如宜家的“請?zhí)上略囋嚒?、“打開抽屜看看”，迪卡儂使用了“請試穿 Try Me”等來召喚邀請用戶，而用戶只有在試用體驗后才有可能轉化為真正的用戶。

在互聯(lián)網(wǎng)行業(yè)，CTA同樣有很多的應用，如在按鈕、文案、圖標等很多組件元素中，正確合理的使用行為召喚，可以為產(chǎn)品帶來更高的轉化率和收益。

行動按鈕是連接用戶和產(chǎn)品的交互點，在產(chǎn)品設計中扮演重要的角色，可以有效引導用戶進行下一步操作，提高交互效率，提升交互體驗及產(chǎn)品轉化率。

功能按鈕：例如加減折疊等，主要用于交互場景。

基礎功能按鈕：主要指在各個系統(tǒng)中都通用的基礎操作，如打開、關閉、讀取數(shù)據(jù)、計算、復制、保存、刪除等基礎性操作。

管控按鈕：主要指除去基礎功能之外的功能，如對業(yè)務標準、管理規(guī)則等等進行檢查，將業(yè)務處理的結果與設定的規(guī)則進行比對，如與規(guī)則不符，則給出相應的處理，如：詢問、提示、警告、終止、通知等操作。

常見功能性按鈕：

• 新增——界面上新增一條數(shù)據(jù)的功能；
• 查詢——查詢歷史數(shù)據(jù)的功能；
• 修改——修改已有數(shù)據(jù)的功能；
• 保存——將輸入的數(shù)據(jù)保存到數(shù)據(jù)庫的功能；
• 提交——完成業(yè)務處理后發(fā)出通知（包括走審批、轉向下個流程節(jié)點）。

兩者關系：不同的按鈕，功能也不盡相同，對應的要處理的業(yè)務也都不一樣，將規(guī)則與按鈕綁定后，可以在不同的業(yè)務處理階段的結果進行相應的管理操作，點擊按鈕亦是激活管理規(guī)則。

3. 按鈕的組成

1）按鈕的組成

按鈕用于提示用戶按下按鈕后進行操作，主要有三個部分組成：按鈕容器，圖標和文字，其中容器又包含了容器的大小，填充/描邊顏色，以及圓角，如圖所示。

2）影響按鈕的視覺元素

設計按鈕要有主次區(qū)分，根據(jù)信息傳遞的優(yōu)先級，利用視覺元素（大小、顏色、填充、描邊、飽和度等）來表現(xiàn)按鈕的等級。

① 容器圓角

通常選用全圓角或者小圓角，小圓角一般為高度的1/4以內(nèi)。圓角傳達了一種簡單、樂觀、開放的感覺；它始于移動端，后面逐漸應用于Web端；很多設計系統(tǒng)都在使用圓角，并在圖標、按鈕、插畫中廣泛使用應用。

全圓角按鈕在界面中會更突顯，更容易引導用戶注意進而點擊按鈕操作。例如音樂界面中的全部播放和暫停按鈕；

② 容器填充或描邊

通常大部分的按鈕會使用品牌色，并使用一些輔助色來形成差異化，但是紅色和橙色具有刺激行為的作用，不適合在非品牌色時濫用。淺灰色和低飽和度的顏色會給人一種按鈕不可用或者禁用失效的感覺，需酌情使用。

顏色可用性：

• 我們在設計產(chǎn)品時，要考慮顏色的可用性，以確保又視覺障礙的人群可以使用我們的產(chǎn)品，可使用accessible-colors查看對比度，確保按鈕可讀性；
• 另外設計按鈕時，要考慮狀態(tài)色和主題色的區(qū)分，比如紅色橙色黃色等用于警示的顏色；

③ 容器陰影

投影顏色一般選擇與按鈕同色系，這樣看起來會更通透，不顯臟。

投影雖然會使按鈕看起來更有層次感，但是一些淺色按鈕使用投影后，反而會降低投影的辨識度，看起來不夠干凈清爽。

④ 容器形狀

按鈕的存在是為了引導用戶操作，如果只是為了凸顯設計使用異形按鈕，打破用戶習慣；反而會讓用戶對下一步的行為產(chǎn)生困惑，這個形狀到底它到底是個啥，是不是按鈕，能不能點擊，如果點擊了會有什么后果。

⑤ 容器尺寸

按鈕大小要便于用戶進行點擊操作，對于大多數(shù)平臺，無論屏幕大小，觸摸區(qū)域至少達到48X48dp，物理尺寸約為9mm，不同熱區(qū)之間的間距應為8dp，一般如果按鈕文字大小不小于極限值，按鈕的交互熱區(qū)都會滿足點擊需求。

如果是只有圖標的按鈕，不僅要確保按鈕大小合適，也要確保交互熱區(qū)滿足點擊要求。

麻省理工觸摸實驗表明，在使用觸摸屏時人的手指部分尺寸時8-10mm，如果希望避免用戶觸摸錯誤，最小按鈕尺寸應大于或等于10mm，而鼠標光標比手指接觸觸摸屏時的接觸面積小很多，因此web端按鈕可以偏小一些。

點擊按鈕是一個簡單的任務，如果用戶不能成功點擊按鈕或誤觸相鄰按鈕，會給用戶帶來負面體驗并浪費更多的時間。

對于圖標按鈕，需確保觸摸區(qū)域大于元素的本身大小，不僅在移動端或平板上如此，在web端也應如此。

設計按鈕的時候不應對按鈕的尺寸做限制，按鈕是產(chǎn)品系統(tǒng)中的一部分，按鈕的大小對界面的可訪問性會有一定的影響，因此我們在設計按鈕的時候，寬度和高度都應有一定的標準。

高度上應根據(jù)字體的行高，再添加標準單位的倍數(shù)間距，一般最小單位為4px，原因有兩個：

• 有視覺障礙的人可能會放大瀏覽器的頁面，這時頁面字體會變大，如果按鈕尺寸定死，按鈕文字就會超出按鈕容器；
• 前端在創(chuàng)建按鈕的時候，會在div容器中添加內(nèi)間距，而不是固定高度；

水平內(nèi)間距，有兩種方法：

• 使按鈕的寬度和網(wǎng)格對齊，這樣所有的按鈕長度都可以保持一致，但是它對按鈕文字有一定限制；
• 兩側固定內(nèi)間距，并設定按鈕的最小寬度，這樣可以在一定程度上避免過窄的按鈕出現(xiàn)，但是不同字段按鈕的長度也不同，當很多按鈕在一起的時候，看起來會有些不均勻；

還有一種方法是使用大寫字母W（字號同按鈕文字）來確定邊距，垂直水平內(nèi)間距都至少為1W，為了提高可讀性，水平內(nèi)間距一般為2W；

⑥ 圖標

按鈕中圖標需要統(tǒng)一設計并保持一致，圖標的線條粗細盡量和文字的筆畫粗細保持一致，更顯細節(jié)。

雖然純圖標按鈕顯得干凈簡潔，但是還需要考慮圖形能否準確表達含義、傳遞信息，是否會引起用戶誤解或者認知錯誤。

⑦ 文本

按鈕文字：

一定的留白會使按鈕看起來更有呼吸感?？梢苑治鲆恍┌粹o的負空間，看看按鈕文字與按鈕容器中負空間之間是否存在一些比例關系，并將這些關系運用到按鈕設計中，這樣我們的設計也許會更加的理性和有理有據(jù)。

一致性：

我們在產(chǎn)品設計前期，需要制定按鈕標簽的規(guī)范，以免后期花費更多的時間去修改所有的按鈕；大多數(shù)按鈕都包含指示文字告知用戶下一步將執(zhí)行什么操作，一般建議使用“動詞+名詞”結構，如：保存文章，而不是保存，這樣按鈕文本會更具有規(guī)范性以及語義明確。

按鈕文本言簡意賅：

• 盡量不要換行，一行之內(nèi)顯示；
• 好的文案會引導用戶進行操作；
• 按鈕上的文案與樣式一樣重要，錯誤的文案會使用戶感到困惑，甚至會導致錯誤操作；
• 好的文案會引導用戶操作，并且最好包含動詞，以及準確的表達操作目的，避免使用是、否或通用詞語。

⑧ 一致性

為了降低用戶在操作過程中的理解成本，設計按鈕的時候也要注意一致性，比如同一板塊的按鈕盡量大小和風格一致（比如圓角的大小，按鈕形狀的大?。?/p>

非按鈕文字，比如標題不要設計成按鈕的樣式，以免對用戶錯誤的引導，產(chǎn)生誤操作。

⑨ 主次分明

通過視覺效果凸顯主要按鈕，弱化次要按鈕和輔助按鈕，以引導用戶操作。

三、按鈕的狀態(tài)

1. 按鈕的不同狀態(tài)

按鈕不同的狀態(tài)可以給予用戶不同的反饋，可以讓用戶了解產(chǎn)品按鈕是否可以點擊，已經(jīng)點擊或者已經(jīng)成功點擊。

• 正常-表示該組件是可交互的，也就是正常頁面總的顯示效果；
• 焦點-當用戶使用選項卡時，需要有一個“焦點”狀態(tài)告知用戶按鈕是可點擊或者未點擊狀態(tài)，使用鍵盤或其他輸入法傳達用戶已突出顯示元素的信息
• 懸停-當用戶將鼠標置于按鈕上方時顯示的狀態(tài)，移動設備和平板電腦不會出現(xiàn)懸停狀態(tài)；
• 活動-按下狀態(tài)pressed，表示用戶已使用鼠標或手指輕按按鈕時的狀態(tài)，當用戶釋放鼠標或者手指時，按鈕會出現(xiàn)已點擊狀態(tài)。處理方式：增加10%的暗度；
• 進度/加載-在不立即執(zhí)行操作并通知組件正在完成操作的過程中使用。
• 已禁用-表示該組件當前處于非交互狀態(tài)，但將來可以啟用；一般用于信息未填寫完整，或者未達到使用條件時會出禁用狀態(tài)；顏色使用建議：一般使用灰色或者降低不透明度，把正常狀態(tài)做弱，提醒用戶避免做無效點擊；

相信每個人都遇到過這種情況，對當前進度產(chǎn)生困惑，花費了一些時間去思考，為什么操作進度被禁用按鈕阻止了， 我們需要做什么才能恢復原來的可交互狀態(tài)。

建議盡可能避免使用禁用按鈕，如果用戶未提供必填信息，只需突出顯示未填信息或者顯示消息提示通知。

使用場景：

• 界面內(nèi)容已通過審核，不可再編輯；
• 操作用戶沒有編輯權限；

四、如何選擇正確的按鈕

1. 關于按鈕的使用規(guī)則

1）并不是所有時候都有默認按鈕

我們通常會將最常用按鈕設置為默認按鈕（主按鈕樣式），并置于焦點狀態(tài)；以便引導用戶更快的完成任務。

但是，當所有按鈕的重要程度都相同時，或者是危險操作時，這種情況下需要用戶慎重選擇，而不是做區(qū)分導致用戶誤操作。

如果可交互元素和不可交互元素使用來相同的樣式，用戶就會疑惑，不知道哪里可以點擊，哪里不可以點擊。

2）不要讓我思考

界面對用戶來說應該是清晰明了的，而不是讓人困惑的，經(jīng)過多年的各種設備和產(chǎn)品的訓練，用戶對按鈕的認知已經(jīng)有了一定的認知，如果偏差較大，會讓用戶產(chǎn)生困惑從而花更多的時間來思考。

3）一致性有助于提高效率和準確性

“一致性是最強大的可用性原則之一：當事物始終表現(xiàn)相同時，用戶不必擔心會發(fā)生什么?！薄鸥鞑肌つ釥柹↗akob Nielsen）

使用一致性，有助于用戶高效并且準確的在產(chǎn)品中實現(xiàn)其目標；我們在做設計按鈕的主要、次要和第三種樣式的時候，盡量使用一些常見的樣式，不僅要在設計系統(tǒng)內(nèi)保持一致，也要考慮到整個平臺的一致性。

4）無障礙設計

影響可訪問性的因素有很多，比如熱區(qū)大小，字體 大小、顏色和對比度等，有很多工具可以用來檢查組件設計的性能。

2. 適配不同的場景

1）不同設備

不同的機型，要考慮按鈕的上下銜接，以便給用戶帶來更好的體驗。

2）不同主題模式

確保按鈕的可讀性，需要考慮在不同環(huán)境下的適應度，現(xiàn)在很多產(chǎn)品都適配了深色主題模式，按鈕的配色不能只考慮白色或淺色背景下的運用，還需考慮深色模式，確保按鈕與背景的對比度和可讀性。

3）主按鈕的左右位置

不管是什么選擇，都有相應的理論依據(jù)支撐，并且不管選擇哪一種，都不會出現(xiàn)嚴重的可用性問題，所以，不管最終作何選擇，相信我們都會有自己的理由。

Windows系統(tǒng)系統(tǒng)將確認按鈕放在左邊，Mac OS系統(tǒng)習慣將確認按鈕放在右邊，用戶使用不同的系統(tǒng)，行為習慣也會有所不同。移動端傾向于將引導用戶操作的按鈕放在右邊，吸引用戶點擊。

用戶對彈窗中行動按鈕的認知一般為左退右進；平臺上iOS和mac OS一般均為左退右進，而Windows和Android為左進右退，Android4.0發(fā)布以后也改為退右進模式，更貼合用戶心智模型。

為了防止用戶誤操作，通常會將確認按鈕放在左邊，通過助力設計讓用戶再次確認；我們在做設計的時候既要考慮操作不同系統(tǒng)的使用習慣，也要結合用戶的習慣，將按鈕放在合適的位置以便用戶操作。

針對按鈕位置左的A/B測試結論：

Walker 和 Stanley 的兩人針對這個問題做了對比研究實驗，實驗結果告訴我們，不要違背用戶使用習慣；因為曾經(jīng)有人做過實驗，在操作性條件學習的初期，行為是具有目標導向的，會根據(jù)行為結果靈活調(diào)整；而在過度學習后，行為轉變成習慣行為，模式固定，不易改變。

習慣行為是一種經(jīng)過長期重復形成固定動作，不需經(jīng)大腦思考，自動執(zhí)行。

首先用戶的習慣是點擊右側按鈕，當主要按鈕在右側的時候，會更加引導用戶習慣性的點擊，當處于A選項時，主按鈕位置與用戶心理預期位置不符，用戶會稍微停留一下，思考主按鈕和次要按鈕的文案內(nèi)容，再去點擊。

五、總結

按鈕是界面設計中比較重要的組件之一，是用戶引流和行動觸發(fā)的關鍵，用于提示用戶按下按鈕后將進行的操作。

本篇文章整理有不夠詳盡之處，后面會繼續(xù)更新補改；另外帶著問題和目的找答案，并將答案整理歸納，才能盡可能將我們見到的知識內(nèi)化為自己掌握的本領。

參考文章：

https://www.iyunying.org/ue/2816.html#group=nogroup&photo=1

https://material.io/design/environment/elevation.html#depicting-elevation

https://uxdesign.cc/is-it-ok-to-grey-out-disabled-buttons-8afa74a0fae

https://uxdesign.cc/button-design-user-interface-components-series-85243b6736c7

http://theventurebank.com/pd/4175418.html

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

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