按鈕是設計界面中常用且重要的組件之一，它在頁面中占據的位置不大，卻承載著重要的交互操作。我們在設計的過程中很容易忽略對按鈕設計，它的樣式、使用場景、層級與排布等等，都值得我們深入了解、學習，從而合理的利用到我們設計的頁面中去。本篇文章主要歸納總結 web 端按鈕設計的相關知識點：

本篇文章著重講解 web 端按鈕，app 端與 pc 客戶端按鈕有部分知識點與之相通。后期會持續更新這兩個端按鈕的相關知識～

按鈕的定義與作用

1. 按鈕的起源與定義

在物理世界按鈕是這樣定義的：是一種常用的控制電器元件，常用來接通或斷開“控制電路”（其中電流很?。瑥亩_到控制電動機或其他電氣設備運行目的的一種開關。

在日常生活中，燈的開關、電視遙控器上的按鍵、汽車上的各種控制鍵等等都是我們 UI 按鈕在物理世界的實體存在。所以在之前很長一段時間，都很流行擬物風格的按鈕，即在觸摸屏上展示 1:1 復制物理世界按鈕樣式的 UI 按鈕。雖然現在 UI 按鈕的設計風格大多都是采用扁平風格或微寫實風格，但其體驗感及交互均是對物理世界按鈕的一種映射。

所以 UI 按鈕設計，是否直觀、易用會直接影響用戶完成整個業務流程的感受、意愿及效率。例如：

使用電視遙控器調臺，電視卻沒有任何反應——感到苦惱、無法完成調臺；點擊業務流程中的提交按鈕，頁面卻沒有任何反應——感到困惑、無法完成操作、不想繼續使用了。

在 UI 設計中，按鈕的定義如下：是一個明確指示交互行為動作的組件，標記了一個操作命令，響應用戶點擊行為，點擊后可觸發一個即時操作獲得相應的反饋&結果。

2. 按鈕的作用

接下來我們看一下 UI 按鈕的具體作用：

作用一：觸發某種功能

通過操作按鈕，觸發功能獲得相應的反饋&結果，例如：

收起、展開按鈕——點擊收起展開頁面信息

作用二：引導用戶進行下一步操作

將按鈕放在適當的位置，去引導用戶進行下一步操作，避免用戶不知道后續如何進行，從而提高任務流程完成率。例如：

在分步驟復雜的表單最后放置的“下一步”按鈕，用戶填寫完當前頁后，點擊“下一步”——進入下一個填寫流程中。

作用三：聚合信息

使用按鈕，跳轉詳情頁面，例如：

對于一些說明、隱私政策等等，如果需要展示的內容過多，但又不是當前頁面的重點，可以設置一個圖標按鈕或文字鏈接按鈕，通過點擊觸發，可跳轉完整的內容詳情頁。

作用四：培養用戶習慣

通過相對固定的位置、形式、文案，以及觸發反饋，可以培養用戶操作認知和習慣。例如：對于一些常見圖標按鈕，收藏、點贊、分享、說明等，用戶看到類似的樣式，就會知道是什么含義，點擊后會獲得怎樣的反饋。

按鈕的分類與使用場景

通過以上的一些配圖，我們會發現頁面中的按鈕展現形式多樣，有色塊的、描邊的、文字的、圖標的等等。那他們具體是如何分類和使用的呢？接下來就帶大家詳細地剖析下按鈕的分類與使用場景。

首先，根據我們頁面中控件的使用交互形式，我們可以將按鈕分為兩大類：

命令按鈕：常規按鈕、圖標按鈕、文字按鈕、幽靈按鈕、懸浮按鈕——通常會觸發頁面與頁面之間的交互，視覺優先級高

選擇按鈕：開關按鈕、單選框、復選框、膠囊選擇、標簽選擇按鈕——通常是一種狀態即時改變的交互，視覺優先級低

接下來我們詳細看一下這兩大類按鈕的具體細分和使用場景

1. 命令按鈕控件

常規按鈕

常規按鈕，有主次按鈕之分。主按鈕承載重要核心操作、次按鈕承載輔助操作。常規按鈕的常見狀態主要有以下 6 種：

正常狀態（Normal)——按鈕在頁面中正?？蛇M行點擊操作的狀態

聚焦狀態(Focus）——為方便鍵盤用戶，展示電腦光標所在位置的一種狀態。用戶可以通過鍵盤上的Tab鍵對頁面內的元素進行選擇操作。類似于表單填寫中輸入框的聚焦狀態(獲取焦點狀態），我們可以通過鍵盤選擇和聚焦反饋，知道自己選中的填寫項是哪個，從而進行填寫操作。該狀態，很多產品都去掉了，但是在開發代碼中是可以設定的。如果設計師合理利用，可以提高產品易用性。舉個例子：表單填寫過程中，用戶通過鍵盤完成了所有的填寫項目。當我們的按鈕設計該狀態，就可以通過鍵盤繼續操作，先聚焦按鈕，然后點擊enter鍵進行取消或提交操作。

懸停狀態(Hover)——鼠標移入停留在按鈕上但未點擊的狀態

點擊狀態(Pressed)——鼠標點擊按鈕的時候，按鈕給出的效果反饋狀態

加載狀態（Loading）——點擊按鈕后，因為系統、網絡等等原因，操作需要等待一段時間后才會跳轉或生效。這個時候就需要加載狀態反饋給用戶，避免給用戶造成困擾(疑惑有沒有點擊成功？），避免用戶因為困擾重復操作，緩解用戶的等待焦慮。

禁用狀態(Disabled)——表示該按鈕不可點擊的狀態，用于頁面中未達到觸發條件的時候，按鈕的樣式。

以上幾種狀態，通常通過改變其填充顏色的灰度和亮度來表達不同的狀態，具體呈現形式，可以根據自己產品的特性去定義。下面，我們來看下主按鈕和次按鈕的詳細定義和常見狀態案例展示。

主按鈕

主按鈕為高權重按鈕，與頁面上的核心操作強相關，所以在頁面上需要醒目顯示去引導用戶操作，通常使用色塊填充引導用戶視覺聚焦。

主按鈕可以是色塊+文字，也可以是色塊+圖標+文字；通常為主色，也可以根據頁面情況賦予不同顏色（詳見章節三、不同顏色賦予按鈕的情感，與層級關系）

次按鈕

次按鈕也叫標準按鈕，為中權重按鈕，在頁面中使用最多。通常使用邊框+文字的形式呈現。

次按鈕可以是邊框+文字，也可以是邊框+圖標+文字；通常為灰色、主色，也可以根據頁面情況賦予不同顏色（詳見章節三、不同顏色賦予按鈕的情感，與層級關系）。

此處以灰色為例，展示其變化規則：

圖標按鈕

圖標按鈕是一種圖形，樣式不一，為低權重按鈕，在頁面中根據業務情況展示，豐富頁面效果。

通常以用戶已經形成認知的形式去展現，例如：

文字按鈕/鏈接

文字按鈕、鏈接為低權重按鈕，視覺感弱。當某個按鈕在同一個頁面上重復出現，為了不干擾用戶視線，可以使用文字按鈕，例如表格行的操作項。

文字按鈕、鏈接也可以與圖標組合使用，層級略高于純文本按鈕

按鈕菜單

菜單按鈕是一種合集按鈕，將頁面中一些低頻操作或同類型操作整合收起，以達到精簡頁面的效果。展現形式可以是色塊、文字鏈接、圖標等等，點擊后展開具體操作供用戶選擇。

其他命令類型按鈕

幽靈按鈕

幽靈按鈕是網頁設計中，以線框簡單示意輪廓、文字示意功能的按鈕：

• 樣式通透簡約，可以與頁面背景很好的融合
• 常用于官網設計，與圖片結合使用
• 與次按鈕不同點在于，不受規范約束，可以根據設計場景定制輪廓粗細、字體大小粗細等
• 現在很多網頁中，線框形式的幽靈按鈕不再作為主要按鈕單獨使用，而是與色塊形式按鈕搭配使用。（現在很多網頁產品，更注重行為召喚、點擊率，使用色塊形式的按鈕能更好的聚焦用戶目光）

懸浮按鈕

懸浮按鈕是指懸浮在頁面上方的按鈕，不會隨著頁面的滾動變化消失。源自安卓的 Material Design。應用到網頁上，通常承載一些咨詢、客服、置頂等常用功能或者想讓用戶使用的功能。設計要點：

• 懸浮按鈕是按鈕一種展現形式，既可以承載命令類型按鈕，例如分享；也可以承載選擇類型按鈕，例如收藏；
• 可用來承載常用關鍵操作，例如網站某個作品頁面中的：收藏、評論、推薦、分享的懸浮按鈕；
• 可作為引導工具，引導用戶操作，例如很多官網都會懸浮在線咨詢、客服一類的按鈕；
• 可以根據不同場景，在頁面中選擇是否放置懸浮按鈕；
• 不要過度使用懸浮按鈕，如果一個頁面上懸浮按鈕太多，且分散在各個地方，會干擾用戶視線，使得整個頁面亂糟糟的；
• 懸浮按鈕只承載正向操作，不應該執行危險破壞性的操作，例如刪除。

2. 選擇按鈕控件

選擇按鈕通常被納入選擇控件中講解，為了讓大家更好的了解它與命令按鈕的區別，此處我們來簡單講解一下常用的選擇按鈕：

開關按鈕

開關按鈕類似于物理世界中燈的開關，切換「開關」會立即生效，適合用于具有對立意義的選項，無需與命令類按鈕搭配使用。

當出現以下情況時，我們應該使用開關：

• 無需確認或審核操作，即可生效選擇后的結果
• 選項是獨立、且對立的功能、行為，僅在“開或關”的選項上做選擇時

單選框

單選框是只能選中其中一項的按鈕，它容許用戶在一組選項中選擇其中一個。

• 選項數量一般為 2-5 個
• 平鋪展示，會更快捷提供給用戶進行選擇
• 描述過多的時候，可采取縱向排列的形式，方便用戶進行對比判斷

復選框

復選框是一種可同時選中多項的基礎控件，允許用戶從多個選項當中選擇多個選項的選擇控件。

• 選項數量一般為 2-5 個
• 平鋪展示，會更快捷提供給用戶進行選擇
• 具有半選中狀態(indeterminate)
• 可以獨立出現，常用于「是否同意用戶協議」等場景

其他狀態切換按鈕

膠囊選擇按鈕

膠囊選擇是單選框的一種衍生樣式，特點是點擊面積更大，同時更強調選項。在 element 中，膠囊選擇既可以作為單選按鈕、也可以作為多選按鈕。但個人認為，膠囊選擇的樣式更適合當作單選按鈕。

標簽選擇按鈕

標簽選擇按鈕樣式多樣，可以以按鈕的形式單獨存在，也可以與單、復選框結合構成結合樣式使用。

常規按鈕的視覺組成

上一個章節，我們弄清楚了按鈕的分類與使用場景。以上按鈕中，使用最多、層級最高的就是常規按鈕，接下來我們以常規按鈕為例，剖析它的視覺組成、繪制技巧以及各類風格樣式。

1. 常規按鈕的組成元素

常規按鈕由容器、背景、描邊、圓角、圖標、文案、投影組成，這些元素不是必須出現的，而是根據具體使用場景去呈現。不同的元素搭配，構成的按鈕樣式也不同，以傳達給用戶各類信息。

容器：整個按鈕的承載體，容納其他組成元素。容器的形狀一般為規則圖形，尺寸根據頁面要求制定。

背景：為按鈕的底色，不同顏色的底色可以表達出按鈕不同的功能特性，例如紅色代表危險操作；同時也是不同按鈕狀態的展示形式。

描邊：為按鈕最外層的邊框線條，常用于次按鈕的描邊。不同顏色描邊可以表達出按鈕不同的功能特性，例如主色描邊二級按鈕、灰色描邊三級按鈕、紅色描邊危險按鈕；同時也是不同次按鈕狀態的展示形式。

圓角：傳達按鈕氣質的一種元素，可影響界面視覺風格。

圖標：對按鈕文案的一種圖形化表達，目的是為了加強按鈕層級、吸引用戶注意力、豐富美化頁面。

文案：使用合適的字號表現樣式，使用精簡的文字表達按鈕的含義。

投影：一種豐富按鈕樣式的設計手法，讓按鈕突出，更具質感、層次感?？商嵘粹o的視覺呈現。特殊風格才會有，一般沒有。

根據以上組成元素，接下來我們來詳細看一下，如何設計定義這些屬性，不同屬性對按鈕的呈現有何影響。

2. 按鈕的容器與尺寸制定

容器的形狀，需要遵循無障礙設計

• 在一套系統中需要保持樣式的統一性
• 符合用戶認知，使用用戶已經形成心智模型的樣式

根據不同場景大部分產品可以將按鈕分成超大、大、中、小三種。這一點大家根據自己產品的復雜度可以調整新增按鈕尺寸。此處做一個通用展示。

超大按鈕：用于登錄等具有重要意義的場景下

大按鈕：用于全局性操作的界面上

中按鈕：標準按鈕，可用于各類操作場景

小按鈕：用于局部控件類操作界面，例如下拉面板、選擇器彈窗、表格等

按鈕的高度如何定義？

通常以 4 的倍數去制定

按鈕的寬度如何定義？

為了保證同一個組件內，不同字數文案按鈕的樣式統一，可以固定 4 個字以內的按鈕為一個固定寬度（min-width)，超出 4 個字設定 padding 值自適應適配。

3. 按鈕的背景與描邊

按鈕的背景色與描邊色，可以表達出按鈕的狀態，也可以表達出按鈕不同的功能特性。按鈕的狀態在前文我們已經詳細展示過了，接下來我們來看看不同顏色的按鈕表達出的功能特性。通常使用的顏色有以下幾類：

品牌色——主題色，常用于普通信息按鈕

功能色——成功色、危險色（出錯、失?。?、警告色（提醒）

其他——灰度色，用于層級較低的二級、三級按鈕

4. 按鈕的圓角

按鈕的圓角，主要分為三大類直角、圓角、全圓角。圓角通常使用的是小圓角，應盡量避免大圓角。

直角——圓角為0px，形狀尖銳，給人嚴謹的感覺，常用于性質較為嚴謹的產品。

圓角——通?？刂圃诎粹o高度的1/6及以下，以2的倍數設定，例如2px、4px、6px等。通常根據產品的定位去設定。例如釘釘、企業微信的受眾比較廣泛，主要按鈕的圓角值為4px；飛書的受眾偏年輕，主要按鈕的圓角值為6px。

全圓角——全圓角按鈕的圓角值固定為高度的50%，按鈕形狀柔和。web端全圓角的使用相對以上兩種比較少，因為需要考慮到鼠標的操作熱區與其他控件的組合使用。

另外，同一套系統中，不同大小按鈕的圓角值，應當根據按鈕的尺寸，按統一比例設定，而非使用固定圓角。以達到視覺比例平衡，圓角“看起來”一致。

5. 按鈕的文案

對于按鈕中的文案，需要遵循以下原則；

• 使用合適比例的字號
• 精簡文案，避免折行
• 使用合理、無歧義的文案

6. 按鈕的投影

按鈕的風格除了扁平風，還有漸變、輕擬物等風格。通過顏色漸變、添加投影樣式，可以塑造其他風格的按鈕。對于按鈕的投影需要注意以下幾點：

• 基于按鈕本身的色值，去設置投影樣式，會讓投影更干凈舒適。
• 淺色按鈕應避免使用投影，否則會影響按鈕的識別度，頁面顯臟。
• 根據頁面慎重使用投影樣式，一般層級較高的主要按鈕才使用。（B 端扁平風格按鈕使用居多）

按鈕的層級與排布

分析完了表層樣式規范，這個章節，我們來看看按鈕在界面中的具體使用。

1. 按鈕的層級

對于頁面中常用組合搭配的按鈕層級如下：01～12 層級由高到低排列（具體是否有這些樣式，根據產品情況確定）

高權重按鈕——色塊按鈕

中權重按鈕——描邊按鈕

低權重按鈕——文字按鈕、圖標按鈕

（此處我們暫不考慮獨立場景、層級的按鈕）

2. 按鈕位置

web 端頁面，除去頂部和側邊導航欄，主要內容頁面里的按鈕該如何放置排布呢？我們可以將內容頁面分為以下三個部分：

標題欄(Header)——主要是全局性操作按鈕，例如編輯、新建等；

主體內容(Body)——有兩種操作按鈕

第一種，是局部操作按鈕，例如表格內部的操作項目；

第二種，是全局性完成按鈕，跟隨在內容后的，例如取消、確定、上一步、下一步等；

底欄(Footer)——主要是全局性頁面完成按鈕，需要貼底固定性質的。例如取消、確定、保存等。

對于彈窗頁面，內容相對比較少，按鈕排布方式可以如下：

對于內容頁和彈窗頁底部按鈕的對齊方式，根據具體業務場景和視覺協調度選擇即可（內容頁居中比較多，因為頁面太大了；彈窗右對齊比較多）。注意保持，同一類場景下對齊方式一致。

3. 按鈕順序：

確定了按鈕的放置位置，還需要確定按鈕放置的順序。放置順序分為兩步確定：

第一步：確定主按鈕、次按鈕的順序

第二步：確定同級別按鈕之間的順序

確定主、次按鈕的順序

首先，我們看一下頁面中按鈕的閱讀順序：

左對齊排布按鈕——從左往右閱讀——符合用戶“F”型瀏覽模式

右對齊排布按鈕——從右往左閱讀——符合“Z”型閱讀模式、費茨定律、古騰堡法則

然后根據閱讀順序，我們可以初步的定義出以下按鈕層級順序：

上圖的按鈕層級順序，只是一個基礎參考，在實際設計的過程中我們還應當考慮業務場景和用戶心智模型。例如，主體內容區的底部跟隨按鈕，若帶有明確方向、具有下一步性質的按鈕，應當為主按鈕，放在最右邊。

常見問題討論：確定和取消該怎么放？

這個問題，是在設計的過程中，經常被拋出來討論的問題，有沒有固定確切的答案呢。首先說明，沒有。各個平臺、軟件都有不同的規范。最具代表的就是：win 的用戶都習慣確定在左、取消在右；mac 的用戶都習慣確定在右、取消在左。

個人更傾向確定在右、取消在左的放置規則，原因如下：

1. 根據“Z”型閱讀模式，確定在右時，用戶的視覺流更加流暢；

2. 根據費茨定律，確定在右時，用戶到達我們想要引導他進行操作的按鈕，更快，操作效率高；

3. 根據古騰堡法則，確定在右時，剛好處于最終視覺落點區，便于用戶快速獲得目標操作；

4. 根據方向性原則，取消和確定，一定意義上帶有“上一步”和“下一步”的意義，正如前文展示的，確定在右會更合理；

5. 根據用戶心智，如今移動端產品，大部分都是確定在右，一定程度上培養了很多用戶的使用習慣，那么轉到 web 端，保持和移動端同樣的交互，用戶使用起來會更順手。（為什么移動端的產品采用這樣的排布方式，個人認為大概是蘋果設計規范的影響，而且據統計：全世界右利手的人占比約 90%，左利手的人僅約 10%，確定按鈕在右，更利于絕大多數用戶的操作）

對于確定和取消到底該怎么放，大家可以結合自身產品的情況定位，需要注意的是，要保證同一個產品內規范一致。

確定同級別按鈕的順序

對于同級別按鈕，我們需要遵循以下原則去確定順序：

• 相關按鈕臨近原則，將與主按鈕相關的次按鈕優先放在主按鈕旁邊。
• 根據業務場景，按照前文的閱讀順序規律，衡量按鈕權重再進行位置分配。

除了以上案例分析的組合樣式，B 端頁面中按鈕組合多樣，以下羅列了一些常見場景供大家參考：

按鈕設計的原則總結&注意事項

最后根據以上內容我們來總結下，按鈕在設計應當遵循的原則及注意事項

1. 設計原則

按鈕樣式符合用戶心智模型

按鈕類型、層級分明，規則統一

按鈕狀態清晰，操作反饋明確

根據業務場景使用合適的按鈕

2. 設計注意事項

一個操作區域至多一個主按鈕

主次按鈕樣式統一、與其他控件樣式區分處理

按鈕樣式慎用大圓角

按鈕中的文字，字號適中，文案精簡、無歧義

合理使用投影樣式

根據場景合理使用禁用按鈕：需要應引導用戶操作時，扔掉禁用；明確區分禁用和可用樣式；在恰當的時候對禁用按鈕給出解釋；結合 loading 狀態讓禁用按鈕更生動。

參考文章推薦

1. 「按鈕的學問：確定在左，取消在右？」

推薦指數：五顆星

推薦理由：使用不同的理論說明佐證確定和取消按鈕的排版方式

2. 「交互細節！確定按鈕到底該放在左邊還是右邊？」

推薦指數：四顆星

推薦理由：用實驗論證確定按鈕的放置位置，結論是：確定按鈕放在右邊比較好

3. 「大廠高手出品！中臺組件設計指南：按鈕篇 」

推薦指數：五顆星

推薦理由：使用完整的規范去寫的文章，實打實的案例。

4. 「按鈕規范系列！從四個方面詳解「按鈕位置」的設計方法」

推薦指數：四顆星

推薦理由：用古騰堡原則詳解按鈕位置的擺放規律，為什么這么放置。主要案例是 APP 端的。

5. 「5000 字干貨！寫給新人的按鈕設計指南」

推薦指數：五顆星

推薦理由：主要講的是 APP 端的，層級清晰、案例完整。

6. 「從 6 個層面，系統分析按鈕設計的知識點」

推薦指數：五顆星

推薦理由：主要講的是 APP 端的，命令按鈕和選擇按鈕做了區分說明。案例豐富，常見按鈕組成拆解和最后的按鈕樣式小結表都超級棒

7. 「推薦！禁用狀態二三事 」

推薦指數：三顆星

推薦理由：講述了什么時候、什么場景使用禁用狀態以及使用禁用狀態的注意事項

結尾

整篇文章內容是基于日常學習與工作經驗的總結，部分規范內容，大家可以根據自己的產品業務做適配調整，以上僅供參考。部分案例配圖源自網絡，僅供交流學習，侵刪。

歡迎點贊、分享，期待你的關注小紅點～歡迎留言交流～