起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標(biāo)識詳盡的按鈕使用規(guī)范
編輯導(dǎo)語：不同的APP的有不同按鈕設(shè)置，背后也有其設(shè)計的奧妙。在這篇文章中，作者盤點了各類按鈕使用的規(guī)范，一起看看學(xué)習(xí)一下吧。
一、定義
按鈕是一個通過單擊來觸發(fā)行為的組件，是最常使用的組件之一。
二、按鈕種類
1. 文字按鈕
視覺上最弱的按鈕，是最次級的行動點。
可用于需大面積展示按鈕場景，例如表格組件中的操作列。
因為文字按鈕所占的高度小于“輪廓按鈕”和“填充按鈕”，在同樣的屏幕大小下，使用文字按鈕能顯示更多的行數(shù)，這么做提升了用戶的瀏覽效率。
如下圖所示：
文字按鈕相比于link，視覺上可以說是一摸一樣。但link是用于鏈接的跳轉(zhuǎn)。
2. 輪廓按鈕
常規(guī)按鈕，用于非主要動作。
常常出現(xiàn)在主要按鈕旁邊，作為次要行動點。
如果在背景豐富的圖片或者視頻上，為減少干擾同時保持一定的視覺吸引力也會用輪廓按鈕。
3. 填充按鈕
填充按鈕是主要按鈕，視覺上非常明顯，常常用來強調(diào)某個行動點。
常常使用在“完成”、“確定”類操作上。
一個按鈕區(qū)最多使用一個主按鈕，因為如果主按鈕過多，用戶不能在第一時間看到。那么所謂的主按鈕就失去意義了。
4. 圖標(biāo)按鈕
圖標(biāo)提供視覺線索，避免逐字閱讀按鈕文案，更高效地使用界面。
需要在較小的空間內(nèi)展示盡量多的按鈕。
使用純圖標(biāo)按鈕必須有 Tooltip 提示按鈕含義。
按鈕有強弱的分別。
填充按鈕＞輪廓按鈕＞文字按鈕。
圖標(biāo)按鈕往往出現(xiàn)在工具類的產(chǎn)品中，呈現(xiàn)button group的形式。
關(guān)于如何確定按鈕的類型，一般情況下考慮單頁面的視覺。強調(diào)就使用填充按鈕，非常次要會使用文字按鈕等等。
但是也有特殊的用法。
在一個流程下，界面結(jié)構(gòu)相似，同一個按鈕在不同的頁面下按鈕樣式的選擇取決于最復(fù)雜的情況。例如在映兔聯(lián)盟后臺中待測評卡片中的“留言”按鈕，按照前面填充按鈕的規(guī)則，應(yīng)該是用填充按鈕。
但是在“已測評”卡片下“留言”按鈕被定為“輪廓按鈕”，并且這些卡片處于一個流程下，則相同按鈕需要保持一致。
當(dāng)兩個按鈕同時出現(xiàn)，并表示抉擇的時候。如果有引導(dǎo)的需求?？梢詮娀渲幸粋€，弱化另外一個按鈕。下圖為Mate：
rial Design中的案例
三、按鈕大小
1. 按鈕寬度
（1）由文字寬度決定
一般情況下，按鈕的寬度隨文字寬度而變化，而非固定尺寸，這樣有利于按鈕寬度的擴展。
（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ū)域進行點擊，這樣就看不見激活狀態(tài)了。
另外只使用鍵盤的“→｜”也能在激活各個控件，對其進行操作。比如“激活”巨量星圖的“取消”按鈕，按下回車鍵，就使按鈕進入了Press狀態(tài)。
五、按鈕位置
1. 按鈕在外部空間的位置
頁面/卡片/一組信息都能夠呈現(xiàn)一個主題，主題的描述可以抽象為三個區(qū)域：
- Header：主題的標(biāo)題和摘要信息內(nèi)容區(qū)的導(dǎo)航等，其中的按鈕放置影響模塊全局的操作。
- Body：具體內(nèi)容，其中的按鈕按鈕區(qū)放置影響跟隨內(nèi)容的操作。
- Footer：主題的補充信息和工具欄等，其中的按鈕區(qū)放置具有“完結(jié)流程”意義的操作。
2. 按鈕內(nèi)部的順序
當(dāng)出現(xiàn)多個按鈕并列的時候，最常見且疑問按鈕的排列當(dāng)屬主次該如何排序。
Micrisoft、Apple、Google三家操作系統(tǒng)巨頭給出的方案各不相同，所以只要能在系統(tǒng)中保證統(tǒng)一性，都是可以被用戶所接受的。
個人認為用視線瀏覽的的順序來安排按鈕的順序。例如在Header和Footer，用戶看完之前的內(nèi)容，因為視線要移動較長的空間。所以會移動到一個方便“固定”的位置——邊緣。在Header和Footer就是最右側(cè)，所以按鈕顯眼程度從右到左排列。
六、其他
Stata-Switch Controls
Button上往往表意的是“動作”，但我們常常也能看見表示狀態(tài)的“按鈕”，比如視頻播放器的“靜音”，站酷的“已關(guān)注”。這會給用戶帶來困惑，因為按鈕的認知是相互矛盾的。
經(jīng)常給設(shè)計造成困擾的切換按鈕的歧義性。
典型的比如“開/關(guān)”按鈕。
這樣的按鈕需要表現(xiàn)當(dāng)前狀態(tài)、同時預(yù)示點擊以后的結(jié)果，在按鈕所連接的功能本身需要解釋、 空間有限、或者跨語言環(huán)境下，并不容易。
你可以看到iPhone中用圖形、文字、顏色、提示信息等多種方法共同作用才能達到效果，并且即使這樣也不是所有用戶一見到就會用、常常有用戶要嘗試一下、通過看到結(jié)果的提示信息才能確定。
讓用戶更清晰得理解“狀態(tài)切換控件”的含義有下面幾種方式：
- 使用有動詞文案，讓用戶去理解文字
- 從控件本身強化認知。依據(jù)用戶的認知設(shè)計控件的樣式，比如收音機案例中按鈕的顏色變深
- 從環(huán)境上本身強化認知。使用明顯的視覺、聽覺效果，讓用戶容易理解現(xiàn)在界面所處的狀態(tài)
這方面詳細內(nèi)容見State-Switch Controls——狀態(tài)切換控件，該怎么使用？
本文由 @biubiu 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自Unsplash，基于CC0協(xié)議
mark