按鈕是設(shè)計(jì)界面中常用且重要的組件之一，它在頁(yè)面中占據(jù)的位置不大，卻承載著重要的交互操作。我們?cè)谠O(shè)計(jì)的過(guò)程中很容易忽略對(duì)按鈕設(shè)計(jì)，它的樣式、使用場(chǎng)景、層級(jí)與排布等等，都值得我們深入了解、學(xué)習(xí)，從而合理的利用到我們?cè)O(shè)計(jì)的頁(yè)面中去。本篇文章主要?dú)w納總結(jié) web 端按鈕設(shè)計(jì)的相關(guān)知識(shí)點(diǎn)：

本篇文章著重講解 web 端按鈕，app 端與 pc 客戶端按鈕有部分知識(shí)點(diǎn)與之相通。后期會(huì)持續(xù)更新這兩個(gè)端按鈕的相關(guān)知識(shí)～

按鈕的定義與作用

1. 按鈕的起源與定義

在物理世界按鈕是這樣定義的：是一種常用的控制電器元件，常用來(lái)接通或斷開"控制電路"（其中電流很?。瑥亩_(dá)到控制電動(dòng)機(jī)或其他電氣設(shè)備運(yùn)行目的的一種開關(guān)。

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

所以 UI 按鈕設(shè)計(jì)，是否直觀、易用會(huì)直接影響用戶完成整個(gè)業(yè)務(wù)流程的感受、意愿及效率。例如：

使用電視遙控器調(diào)臺(tái)，電視卻沒(méi)有任何反應(yīng)——感到苦惱、無(wú)法完成調(diào)臺(tái)；點(diǎn)擊業(yè)務(wù)流程中的提交按鈕，頁(yè)面卻沒(méi)有任何反應(yīng)——感到困惑、無(wú)法完成操作、不想繼續(xù)使用了。

在 UI 設(shè)計(jì)中，按鈕的定義如下：是一個(gè)明確指示交互行為動(dòng)作的組件，標(biāo)記了一個(gè)操作命令，響應(yīng)用戶點(diǎn)擊行為，點(diǎn)擊后可觸發(fā)一個(gè)即時(shí)操作獲得相應(yīng)的反饋&結(jié)果。

2. 按鈕的作用

接下來(lái)我們看一下 UI 按鈕的具體作用：

作用一：觸發(fā)某種功能

通過(guò)操作按鈕，觸發(fā)功能獲得相應(yīng)的反饋&結(jié)果，例如：

收起、展開按鈕——點(diǎn)擊收起展開頁(yè)面信息

作用二：引導(dǎo)用戶進(jìn)行下一步操作

將按鈕放在適當(dāng)?shù)奈恢?，去引?dǎo)用戶進(jìn)行下一步操作，避免用戶不知道后續(xù)如何進(jìn)行，從而提高任務(wù)流程完成率。例如：

在分步驟復(fù)雜的表單最后放置的"下一步"按鈕，用戶填寫完當(dāng)前頁(yè)后，點(diǎn)擊"下一步"——進(jìn)入下一個(gè)填寫流程中。

作用三：聚合信息

使用按鈕，跳轉(zhuǎn)詳情頁(yè)面，例如：

對(duì)于一些說(shuō)明、隱私政策等等，如果需要展示的內(nèi)容過(guò)多，但又不是當(dāng)前頁(yè)面的重點(diǎn)，可以設(shè)置一個(gè)圖標(biāo)按鈕或文字鏈接按鈕，通過(guò)點(diǎn)擊觸發(fā)，可跳轉(zhuǎn)完整的內(nèi)容詳情頁(yè)。

作用四：培養(yǎng)用戶習(xí)慣

通過(guò)相對(duì)固定的位置、形式、文案，以及觸發(fā)反饋，可以培養(yǎng)用戶操作認(rèn)知和習(xí)慣。例如：對(duì)于一些常見圖標(biāo)按鈕，收藏、點(diǎn)贊、分享、說(shuō)明等，用戶看到類似的樣式，就會(huì)知道是什么含義，點(diǎn)擊后會(huì)獲得怎樣的反饋。

按鈕的分類與使用場(chǎng)景

通過(guò)以上的一些配圖，我們會(huì)發(fā)現(xiàn)頁(yè)面中的按鈕展現(xiàn)形式多樣，有色塊的、描邊的、文字的、圖標(biāo)的等等。那他們具體是如何分類和使用的呢？接下來(lái)就帶大家詳細(xì)地剖析下按鈕的分類與使用場(chǎng)景。

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

命令按鈕：常規(guī)按鈕、圖標(biāo)按鈕、文字按鈕、幽靈按鈕、懸浮按鈕——通常會(huì)觸發(fā)頁(yè)面與頁(yè)面之間的交互，視覺優(yōu)先級(jí)高

選擇按鈕：開關(guān)按鈕、單選框、復(fù)選框、膠囊選擇、標(biāo)簽選擇按鈕——通常是一種狀態(tài)即時(shí)改變的交互，視覺優(yōu)先級(jí)低

接下來(lái)我們?cè)敿?xì)看一下這兩大類按鈕的具體細(xì)分和使用場(chǎng)景

1. 命令按鈕控件

常規(guī)按鈕

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

正常狀態(tài)（Normal)——按鈕在頁(yè)面中正?？蛇M(jìn)行點(diǎn)擊操作的狀態(tài)

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

懸停狀態(tài)(Hover)——鼠標(biāo)移入停留在按鈕上但未點(diǎn)擊的狀態(tài)

點(diǎn)擊狀態(tài)(Pressed)——鼠標(biāo)點(diǎn)擊按鈕的時(shí)候，按鈕給出的效果反饋狀態(tài)

加載狀態(tài)（Loading）——點(diǎn)擊按鈕后，因?yàn)橄到y(tǒng)、網(wǎng)絡(luò)等等原因，操作需要等待一段時(shí)間后才會(huì)跳轉(zhuǎn)或生效。這個(gè)時(shí)候就需要加載狀態(tài)反饋給用戶，避免給用戶造成困擾(疑惑有沒(méi)有點(diǎn)擊成功？），避免用戶因?yàn)槔_重復(fù)操作，緩解用戶的等待焦慮。

禁用狀態(tài)(Disabled)——表示該按鈕不可點(diǎn)擊的狀態(tài)，用于頁(yè)面中未達(dá)到觸發(fā)條件的時(shí)候，按鈕的樣式。

以上幾種狀態(tài)，通常通過(guò)改變其填充顏色的灰度和亮度來(lái)表達(dá)不同的狀態(tài)，具體呈現(xiàn)形式，可以根據(jù)自己產(chǎn)品的特性去定義。下面，我們來(lái)看下主按鈕和次按鈕的詳細(xì)定義和常見狀態(tài)案例展示。

主按鈕

主按鈕為高權(quán)重按鈕，與頁(yè)面上的核心操作強(qiáng)相關(guān)，所以在頁(yè)面上需要醒目顯示去引導(dǎo)用戶操作，通常使用色塊填充引導(dǎo)用戶視覺聚焦。

主按鈕可以是色塊+文字，也可以是色塊+圖標(biāo)+文字；通常為主色，也可以根據(jù)頁(yè)面情況賦予不同顏色（詳見章節(jié)三、不同顏色賦予按鈕的情感，與層級(jí)關(guān)系）

次按鈕

次按鈕也叫標(biāo)準(zhǔn)按鈕，為中權(quán)重按鈕，在頁(yè)面中使用最多。通常使用邊框+文字的形式呈現(xiàn)。

次按鈕可以是邊框+文字，也可以是邊框+圖標(biāo)+文字；通常為灰色、主色，也可以根據(jù)頁(yè)面情況賦予不同顏色（詳見章節(jié)三、不同顏色賦予按鈕的情感，與層級(jí)關(guān)系）。

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

圖標(biāo)按鈕

圖標(biāo)按鈕是一種圖形，樣式不一，為低權(quán)重按鈕，在頁(yè)面中根據(jù)業(yè)務(wù)情況展示，豐富頁(yè)面效果。

通常以用戶已經(jīng)形成認(rèn)知的形式去展現(xiàn)，例如：

文字按鈕/鏈接

文字按鈕、鏈接為低權(quán)重按鈕，視覺感弱。當(dāng)某個(gè)按鈕在同一個(gè)頁(yè)面上重復(fù)出現(xiàn)，為了不干擾用戶視線，可以使用文字按鈕，例如表格行的操作項(xiàng)。

文字按鈕、鏈接也可以與圖標(biāo)組合使用，層級(jí)略高于純文本按鈕

按鈕菜單

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

其他命令類型按鈕

幽靈按鈕

幽靈按鈕是網(wǎng)頁(yè)設(shè)計(jì)中，以線框簡(jiǎn)單示意輪廓、文字示意功能的按鈕：

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

懸浮按鈕

懸浮按鈕是指懸浮在頁(yè)面上方的按鈕，不會(huì)隨著頁(yè)面的滾動(dòng)變化消失。源自安卓的 Material Design。應(yīng)用到網(wǎng)頁(yè)上，通常承載一些咨詢、客服、置頂?shù)瘸Ｓ霉δ芑蛘呦胱層脩羰褂玫墓δ?。設(shè)計(jì)要點(diǎn)：

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

2. 選擇按鈕控件

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

開關(guān)按鈕

開關(guān)按鈕類似于物理世界中燈的開關(guān)，切換「開關(guān)」會(huì)立即生效，適合用于具有對(duì)立意義的選項(xiàng)，無(wú)需與命令類按鈕搭配使用。

當(dāng)出現(xiàn)以下情況時(shí)，我們應(yīng)該使用開關(guān)：

• 無(wú)需確認(rèn)或?qū)徍瞬僮鳎纯缮нx擇后的結(jié)果
• 選項(xiàng)是獨(dú)立、且對(duì)立的功能、行為，僅在"開或關(guān)"的選項(xiàng)上做選擇時(shí)

單選框

單選框是只能選中其中一項(xiàng)的按鈕，它容許用戶在一組選項(xiàng)中選擇其中一個(gè)。

• 選項(xiàng)數(shù)量一般為 2-5 個(gè)
• 平鋪展示，會(huì)更快捷提供給用戶進(jìn)行選擇
• 描述過(guò)多的時(shí)候，可采取縱向排列的形式，方便用戶進(jìn)行對(duì)比判斷

復(fù)選框

復(fù)選框是一種可同時(shí)選中多項(xiàng)的基礎(chǔ)控件，允許用戶從多個(gè)選項(xiàng)當(dāng)中選擇多個(gè)選項(xiàng)的選擇控件。

• 選項(xiàng)數(shù)量一般為 2-5 個(gè)
• 平鋪展示，會(huì)更快捷提供給用戶進(jìn)行選擇
• 具有半選中狀態(tài)(indeterminate)
• 可以獨(dú)立出現(xiàn)，常用于「是否同意用戶協(xié)議」等場(chǎng)景

其他狀態(tài)切換按鈕

膠囊選擇按鈕

膠囊選擇是單選框的一種衍生樣式，特點(diǎn)是點(diǎn)擊面積更大，同時(shí)更強(qiáng)調(diào)選項(xiàng)。在 element 中，膠囊選擇既可以作為單選按鈕、也可以作為多選按鈕。但個(gè)人認(rèn)為，膠囊選擇的樣式更適合當(dāng)作單選按鈕。

標(biāo)簽選擇按鈕

標(biāo)簽選擇按鈕樣式多樣，可以以按鈕的形式單獨(dú)存在，也可以與單、復(fù)選框結(jié)合構(gòu)成結(jié)合樣式使用。

常規(guī)按鈕的視覺組成

上一個(gè)章節(jié)，我們弄清楚了按鈕的分類與使用場(chǎng)景。以上按鈕中，使用最多、層級(jí)最高的就是常規(guī)按鈕，接下來(lái)我們以常規(guī)按鈕為例，剖析它的視覺組成、繪制技巧以及各類風(fēng)格樣式。

1. 常規(guī)按鈕的組成元素

常規(guī)按鈕由容器、背景、描邊、圓角、圖標(biāo)、文案、投影組成，這些元素不是必須出現(xiàn)的，而是根據(jù)具體使用場(chǎng)景去呈現(xiàn)。不同的元素搭配，構(gòu)成的按鈕樣式也不同，以傳達(dá)給用戶各類信息。

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

背景：為按鈕的底色，不同顏色的底色可以表達(dá)出按鈕不同的功能特性，例如紅色代表危險(xiǎn)操作；同時(shí)也是不同按鈕狀態(tài)的展示形式。

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

圓角：傳達(dá)按鈕氣質(zhì)的一種元素，可影響界面視覺風(fēng)格。

圖標(biāo)：對(duì)按鈕文案的一種圖形化表達(dá)，目的是為了加強(qiáng)按鈕層級(jí)、吸引用戶注意力、豐富美化頁(yè)面。

文案：使用合適的字號(hào)表現(xiàn)樣式，使用精簡(jiǎn)的文字表達(dá)按鈕的含義。

投影：一種豐富按鈕樣式的設(shè)計(jì)手法，讓按鈕突出，更具質(zhì)感、層次感?？商嵘粹o的視覺呈現(xiàn)。特殊風(fēng)格才會(huì)有，一般沒(méi)有。

根據(jù)以上組成元素，接下來(lái)我們來(lái)詳細(xì)看一下，如何設(shè)計(jì)定義這些屬性，不同屬性對(duì)按鈕的呈現(xiàn)有何影響。

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

容器的形狀，需要遵循無(wú)障礙設(shè)計(jì)

• 在一套系統(tǒng)中需要保持樣式的統(tǒng)一性
• 符合用戶認(rèn)知，使用用戶已經(jīng)形成心智模型的樣式

根據(jù)不同場(chǎng)景大部分產(chǎn)品可以將按鈕分成超大、大、中、小三種。這一點(diǎn)大家根據(jù)自己產(chǎn)品的復(fù)雜度可以調(diào)整新增按鈕尺寸。此處做一個(gè)通用展示。

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

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

中按鈕：標(biāo)準(zhǔn)按鈕，可用于各類操作場(chǎng)景

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

按鈕的高度如何定義？

通常以 4 的倍數(shù)去制定

按鈕的寬度如何定義？

為了保證同一個(gè)組件內(nèi)，不同字?jǐn)?shù)文案按鈕的樣式統(tǒng)一，可以固定 4 個(gè)字以內(nèi)的按鈕為一個(gè)固定寬度（min-width)，超出 4 個(gè)字設(shè)定 padding 值自適應(yīng)適配。

3. 按鈕的背景與描邊

按鈕的背景色與描邊色，可以表達(dá)出按鈕的狀態(tài)，也可以表達(dá)出按鈕不同的功能特性。按鈕的狀態(tài)在前文我們已經(jīng)詳細(xì)展示過(guò)了，接下來(lái)我們來(lái)看看不同顏色的按鈕表達(dá)出的功能特性。通常使用的顏色有以下幾類：

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

功能色——成功色、危險(xiǎn)色（出錯(cuò)、失?。?、警告色（提醒）

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

4. 按鈕的圓角

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

直角——圓角為0px，形狀尖銳，給人嚴(yán)謹(jǐn)?shù)母杏X，常用于性質(zhì)較為嚴(yán)謹(jǐn)?shù)漠a(chǎn)品。

圓角——通常控制在按鈕高度的1/6及以下，以2的倍數(shù)設(shè)定，例如2px、4px、6px等。通常根據(jù)產(chǎn)品的定位去設(shè)定。例如釘釘、企業(yè)微信的受眾比較廣泛，主要按鈕的圓角值為4px；飛書的受眾偏年輕，主要按鈕的圓角值為6px。

全圓角——全圓角按鈕的圓角值固定為高度的50%，按鈕形狀柔和。web端全圓角的使用相對(duì)以上兩種比較少，因?yàn)樾枰紤]到鼠標(biāo)的操作熱區(qū)與其他控件的組合使用。

另外，同一套系統(tǒng)中，不同大小按鈕的圓角值，應(yīng)當(dāng)根據(jù)按鈕的尺寸，按統(tǒng)一比例設(shè)定，而非使用固定圓角。以達(dá)到視覺比例平衡，圓角"看起來(lái)"一致。

5. 按鈕的文案

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

• 使用合適比例的字號(hào)
• 精簡(jiǎn)文案，避免折行
• 使用合理、無(wú)歧義的文案

6. 按鈕的投影

按鈕的風(fēng)格除了扁平風(fēng)，還有漸變、輕擬物等風(fēng)格。通過(guò)顏色漸變、添加投影樣式，可以塑造其他風(fēng)格的按鈕。對(duì)于按鈕的投影需要注意以下幾點(diǎn)：

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

按鈕的層級(jí)與排布

分析完了表層樣式規(guī)范，這個(gè)章節(jié)，我們來(lái)看看按鈕在界面中的具體使用。

1. 按鈕的層級(jí)

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

高權(quán)重按鈕——色塊按鈕

中權(quán)重按鈕——描邊按鈕

低權(quán)重按鈕——文字按鈕、圖標(biāo)按鈕

（此處我們暫不考慮獨(dú)立場(chǎng)景、層級(jí)的按鈕）

2. 按鈕位置

web 端頁(yè)面，除去頂部和側(cè)邊導(dǎo)航欄，主要內(nèi)容頁(yè)面里的按鈕該如何放置排布呢？我們可以將內(nèi)容頁(yè)面分為以下三個(gè)部分：

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

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

第一種，是局部操作按鈕，例如表格內(nèi)部的操作項(xiàng)目；

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

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

對(duì)于彈窗頁(yè)面，內(nèi)容相對(duì)比較少，按鈕排布方式可以如下：

對(duì)于內(nèi)容頁(yè)和彈窗頁(yè)底部按鈕的對(duì)齊方式，根據(jù)具體業(yè)務(wù)場(chǎng)景和視覺協(xié)調(diào)度選擇即可（內(nèi)容頁(yè)居中比較多，因?yàn)轫?yè)面太大了；彈窗右對(duì)齊比較多）。注意保持，同一類場(chǎng)景下對(duì)齊方式一致。

3. 按鈕順序：

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

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

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

確定主、次按鈕的順序

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

左對(duì)齊排布按鈕——從左往右閱讀——符合用戶"F"型瀏覽模式

右對(duì)齊排布按鈕——從右往左閱讀——符合"Z"型閱讀模式、費(fèi)茨定律、古騰堡法則

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

上圖的按鈕層級(jí)順序，只是一個(gè)基礎(chǔ)參考，在實(shí)際設(shè)計(jì)的過(guò)程中我們還應(yīng)當(dāng)考慮業(yè)務(wù)場(chǎng)景和用戶心智模型。例如，主體內(nèi)容區(qū)的底部跟隨按鈕，若帶有明確方向、具有下一步性質(zhì)的按鈕，應(yīng)當(dāng)為主按鈕，放在最右邊。

常見問(wèn)題討論：確定和取消該怎么放？

這個(gè)問(wèn)題，是在設(shè)計(jì)的過(guò)程中，經(jīng)常被拋出來(lái)討論的問(wèn)題，有沒(méi)有固定確切的答案呢。首先說(shuō)明，沒(méi)有。各個(gè)平臺(tái)、軟件都有不同的規(guī)范。最具代表的就是：win 的用戶都習(xí)慣確定在左、取消在右；mac 的用戶都習(xí)慣確定在右、取消在左。

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

1. 根據(jù)"Z"型閱讀模式，確定在右時(shí)，用戶的視覺流更加流暢；

2. 根據(jù)費(fèi)茨定律，確定在右時(shí)，用戶到達(dá)我們想要引導(dǎo)他進(jìn)行操作的按鈕，更快，操作效率高；

3. 根據(jù)古騰堡法則，確定在右時(shí)，剛好處于最終視覺落點(diǎn)區(qū)，便于用戶快速獲得目標(biāo)操作；

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

5. 根據(jù)用戶心智，如今移動(dòng)端產(chǎn)品，大部分都是確定在右，一定程度上培養(yǎng)了很多用戶的使用習(xí)慣，那么轉(zhuǎn)到 web 端，保持和移動(dòng)端同樣的交互，用戶使用起來(lái)會(huì)更順手。（為什么移動(dòng)端的產(chǎn)品采用這樣的排布方式，個(gè)人認(rèn)為大概是蘋果設(shè)計(jì)規(guī)范的影響，而且據(jù)統(tǒng)計(jì)：全世界右利手的人占比約 90%，左利手的人僅約 10%，確定按鈕在右，更利于絕大多數(shù)用戶的操作）

對(duì)于確定和取消到底該怎么放，大家可以結(jié)合自身產(chǎn)品的情況定位，需要注意的是，要保證同一個(gè)產(chǎn)品內(nèi)規(guī)范一致。

確定同級(jí)別按鈕的順序

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

• 相關(guān)按鈕臨近原則，將與主按鈕相關(guān)的次按鈕優(yōu)先放在主按鈕旁邊。
• 根據(jù)業(yè)務(wù)場(chǎng)景，按照前文的閱讀順序規(guī)律，衡量按鈕權(quán)重再進(jìn)行位置分配。

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

按鈕設(shè)計(jì)的原則總結(jié)&注意事項(xiàng)

最后根據(jù)以上內(nèi)容我們來(lái)總結(jié)下，按鈕在設(shè)計(jì)應(yīng)當(dāng)遵循的原則及注意事項(xiàng)

1. 設(shè)計(jì)原則

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

按鈕類型、層級(jí)分明，規(guī)則統(tǒng)一

按鈕狀態(tài)清晰，操作反饋明確

根據(jù)業(yè)務(wù)場(chǎng)景使用合適的按鈕

2. 設(shè)計(jì)注意事項(xiàng)

一個(gè)操作區(qū)域至多一個(gè)主按鈕

主次按鈕樣式統(tǒng)一、與其他控件樣式區(qū)分處理

按鈕樣式慎用大圓角

按鈕中的文字，字號(hào)適中，文案精簡(jiǎn)、無(wú)歧義

合理使用投影樣式

根據(jù)場(chǎng)景合理使用禁用按鈕：需要應(yīng)引導(dǎo)用戶操作時(shí)，扔掉禁用；明確區(qū)分禁用和可用樣式；在恰當(dāng)?shù)臅r(shí)候?qū)冒粹o給出解釋；結(jié)合 loading 狀態(tài)讓禁用按鈕更生動(dòng)。

參考文章推薦

1. 「按鈕的學(xué)問(wèn)：確定在左，取消在右？」

推薦指數(shù)：五顆星

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

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

推薦指數(shù)：四顆星

推薦理由：用實(shí)驗(yàn)論證確定按鈕的放置位置，結(jié)論是：確定按鈕放在右邊比較好

3. 「大廠高手出品！中臺(tái)組件設(shè)計(jì)指南：按鈕篇 」

推薦指數(shù)：五顆星

推薦理由：使用完整的規(guī)范去寫的文章，實(shí)打?qū)嵉陌咐?/p>

4. 「按鈕規(guī)范系列！從四個(gè)方面詳解「按鈕位置」的設(shè)計(jì)方法」

推薦指數(shù)：四顆星

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

5. 「5000 字干貨！寫給新人的按鈕設(shè)計(jì)指南」

推薦指數(shù)：五顆星

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

6. 「從 6 個(gè)層面，系統(tǒng)分析按鈕設(shè)計(jì)的知識(shí)點(diǎn)」

推薦指數(shù)：五顆星

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

7. 「推薦！禁用狀態(tài)二三事 」

推薦指數(shù)：三顆星

推薦理由：講述了什么時(shí)候、什么場(chǎng)景使用禁用狀態(tài)以及使用禁用狀態(tài)的注意事項(xiàng)

結(jié)尾

整篇文章內(nèi)容是基于日常學(xué)習(xí)與工作經(jīng)驗(yàn)的總結(jié)，部分規(guī)范內(nèi)容，大家可以根據(jù)自己的產(chǎn)品業(yè)務(wù)做適配調(diào)整，以上僅供參考。部分案例配圖源自網(wǎng)絡(luò)，僅供交流學(xué)習(xí)，侵刪。

作者：youki_ren