編輯導(dǎo)語：不同的APP的有不同按鈕設(shè)置，背后也有其設(shè)計的奧妙。在這篇文章中，作者盤點了各類按鈕使用的規(guī)范，一起看看學(xué)習(xí)一下吧。

一、定義

按鈕是一個通過單擊來觸發(fā)行為的組件，是最常使用的組件之一。

二、按鈕種類

1. 文字按鈕

視覺上最弱的按鈕，是最次級的行動點。

可用于需大面積展示按鈕場景，例如表格組件中的操作列。

因為文字按鈕所占的高度小于“輪廓按鈕”和“填充按鈕”，在同樣的屏幕大小下，使用文字按鈕能顯示更多的行數(shù)，這么做提升了用戶的瀏覽效率。

如下圖所示：

文字按鈕相比于link，視覺上可以說是一摸一樣。但link是用于鏈接的跳轉(zhuǎn)。

2. 輪廓按鈕

常規(guī)按鈕，用于非主要動作。

常常出現(xiàn)在主要按鈕旁邊，作為次要行動點。

如果在背景豐富的圖片或者視頻上，為減少干擾同時保持一定的視覺吸引力也會用輪廓按鈕。

3. 填充按鈕

填充按鈕是主要按鈕，視覺上非常明顯，常常用來強(qiáng)調(diào)某個行動點。

常常使用在“完成”、“確定”類操作上。

一個按鈕區(qū)最多使用一個主按鈕，因為如果主按鈕過多，用戶不能在第一時間看到。那么所謂的主按鈕就失去意義了。

4. 圖標(biāo)按鈕

圖標(biāo)提供視覺線索，避免逐字閱讀按鈕文案，更高效地使用界面。

需要在較小的空間內(nèi)展示盡量多的按鈕。

使用純圖標(biāo)按鈕必須有 Tooltip 提示按鈕含義。

按鈕有強(qiáng)弱的分別。

填充按鈕＞輪廓按鈕＞文字按鈕。

圖標(biāo)按鈕往往出現(xiàn)在工具類的產(chǎn)品中，呈現(xiàn)button group的形式。

關(guān)于如何確定按鈕的類型，一般情況下考慮單頁面的視覺。強(qiáng)調(diào)就使用填充按鈕，非常次要會使用文字按鈕等等。

但是也有特殊的用法。

在一個流程下，界面結(jié)構(gòu)相似，同一個按鈕在不同的頁面下按鈕樣式的選擇取決于最復(fù)雜的情況。例如在映兔聯(lián)盟后臺中待測評卡片中的“留言”按鈕，按照前面填充按鈕的規(guī)則，應(yīng)該是用填充按鈕。

但是在“已測評”卡片下“留言”按鈕被定為“輪廓按鈕”，并且這些卡片處于一個流程下，則相同按鈕需要保持一致。

當(dāng)兩個按鈕同時出現(xiàn)，并表示抉擇的時候。如果有引導(dǎo)的需求。可以強(qiáng)化其中一個，弱化另外一個按鈕。下圖為Mate：

rial Design中的案例

三、按鈕大小

1. 按鈕寬度

（1）由文字寬度決定

一般情況下，按鈕的寬度隨文字寬度而變化，而非固定尺寸，這樣有利于按鈕寬度的擴(kuò)展。

（2）由容器決定

下左圖，“發(fā)布視頻”按鈕寬度由左側(cè)的導(dǎo)航欄決定，因為導(dǎo)航欄不隨瀏覽器的寬度變化而變化，所以“發(fā)布視頻”按鈕也不會變化。

下右圖，“立即邀約”按鈕的寬度取決于“博主-選擇卡片”的業(yè)務(wù)組件，并且會隨著瀏覽器的寬度。

那么什么時候由文字寬度決定，由容器決定呢？

建議單個填充按鈕、輪廓按鈕的寬度所在的容器小于“3個欄目的+2個槽的寬度”時，優(yōu)先使用由容器決定。

2. 按鈕高度

實際項目需求中，不同場景用到的按鈕的高度也會不同。將通用按鈕劃分為大、中、小，按鈕高度分別對應(yīng)著40px、32px、24px。

在B端的后臺一般優(yōu)先使用中尺寸的按鈕高度，因為大尺寸的按鈕過高，提升了屏占比。

四、按鈕狀態(tài)

按鈕一共有6種狀態(tài)普通、懸浮、點擊、激活、不可用、加載中。

1. 禁用狀態(tài)

（1）顯示禁用則代表它在滿足一定條件后即可擁有可點擊性，讓我們明確地了解它就在這里，未來是可操作的。只是當(dāng)前操作不了，但是知道告知用戶處理信息，就可以讓這個按鈕有效。比如有些營銷活動頁面，顯示據(jù)活動開始還有xx小時xx分xx秒。

（2）解釋不可用的原因。某些情況下，用戶之前是可點擊按鈕的，但是因為某些原因點擊不了了。比如鏈接邀請時間有限制，限制之后就處于禁用狀態(tài)。用戶可能一時間不理解為什么邀請不了，使用禁用狀態(tài)加額外的信息，可以解釋緣由。

2. 激活狀態(tài)

激活狀態(tài)的按鈕比較少見，因為大部分人習(xí)慣使用鼠標(biāo)。在填表的情況下要觸發(fā)按鈕，往往使用鼠標(biāo)移到對應(yīng)區(qū)域進(jìn)行點擊，這樣就看不見激活狀態(tài)了。

另外只使用鍵盤的“→｜”也能在激活各個控件，對其進(jìn)行操作。比如“激活”巨量星圖的“取消”按鈕，按下回車鍵，就使按鈕進(jìn)入了Press狀態(tài)。

五、按鈕位置

1. 按鈕在外部空間的位置

頁面/卡片/一組信息都能夠呈現(xiàn)一個主題，主題的描述可以抽象為三個區(qū)域：

• Header：主題的標(biāo)題和摘要信息內(nèi)容區(qū)的導(dǎo)航等，其中的按鈕放置影響模塊全局的操作。
• Body：具體內(nèi)容，其中的按鈕按鈕區(qū)放置影響跟隨內(nèi)容的操作。
• Footer：主題的補(bǔ)充信息和工具欄等，其中的按鈕區(qū)放置具有“完結(jié)流程”意義的操作。

2. 按鈕內(nèi)部的順序

當(dāng)出現(xiàn)多個按鈕并列的時候，最常見且疑問按鈕的排列當(dāng)屬主次該如何排序。

Micrisoft、Apple、Google三家操作系統(tǒng)巨頭給出的方案各不相同，所以只要能在系統(tǒng)中保證統(tǒng)一性，都是可以被用戶所接受的。

個人認(rèn)為用視線瀏覽的的順序來安排按鈕的順序。例如在Header和Footer，用戶看完之前的內(nèi)容，因為視線要移動較長的空間。所以會移動到一個方便“固定”的位置——邊緣。在Header和Footer就是最右側(cè)，所以按鈕顯眼程度從右到左排列。

六、其他

Stata-Switch Controls

Button上往往表意的是“動作”，但我們常常也能看見表示狀態(tài)的“按鈕”，比如視頻播放器的“靜音”，站酷的“已關(guān)注”。這會給用戶帶來困惑，因為按鈕的認(rèn)知是相互矛盾的。

經(jīng)常給設(shè)計造成困擾的切換按鈕的歧義性。

典型的比如“開/關(guān)”按鈕。

這樣的按鈕需要表現(xiàn)當(dāng)前狀態(tài)、同時預(yù)示點擊以后的結(jié)果，在按鈕所連接的功能本身需要解釋、 空間有限、或者跨語言環(huán)境下，并不容易。

你可以看到iPhone中用圖形、文字、顏色、提示信息等多種方法共同作用才能達(dá)到效果，并且即使這樣也不是所有用戶一見到就會用、常常有用戶要嘗試一下、通過看到結(jié)果的提示信息才能確定。

讓用戶更清晰得理解“狀態(tài)切換控件”的含義有下面幾種方式：

1. 使用有動詞文案，讓用戶去理解文字
2. 從控件本身強(qiáng)化認(rèn)知。依據(jù)用戶的認(rèn)知設(shè)計控件的樣式，比如收音機(jī)案例中按鈕的顏色變深
3. 從環(huán)境上本身強(qiáng)化認(rèn)知。使用明顯的視覺、聽覺效果，讓用戶容易理解現(xiàn)在界面所處的狀態(tài)

這方面詳細(xì)內(nèi)容見State-Switch Controls——狀態(tài)切換控件，該怎么使用？

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

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