編輯導語：不同的APP的有不同按鈕設置，背後也有其設計的奧妙。在這篇文章中，作者盤點了各類按鈕使用的規範，一起看看學習一下吧。

一、定義

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

二、按鈕種類

1. 文字按鈕

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

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

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

如下圖所示：

文字按鈕相比于link，視覺上可以說是一摸一樣。但link是用于鍊接的跳轉。

2. 輪廓按鈕

常規按鈕，用于非主要動作。

常常出現在主要按鈕旁邊，作為次要行動點。

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

3. 填充按鈕

填充按鈕是主要按鈕，視覺上非常明顯，常常用來強調某個行動點。

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

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

4. 圖标按鈕

圖标提供視覺線索，避免逐字閱讀按鈕文案，更高效地使用界面。

需要在較小的空間内展示盡量多的按鈕。

使用純圖标按鈕必須有 Tooltip 提示按鈕含義。

按鈕有強弱的分别。

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

圖标按鈕往往出現在工具類的産品中，呈現button group的形式。

關于如何确定按鈕的類型，一般情況下考慮單頁面的視覺。強調就使用填充按鈕，非常次要會使用文字按鈕等等。

但是也有特殊的用法。

在一個流程下，界面結構相似，同一個按鈕在不同的頁面下按鈕樣式的選擇取決于最複雜的情況。例如在映兔聯盟後台中待測評卡片中的“留言”按鈕，按照前面填充按鈕的規則，應該是用填充按鈕。

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

當兩個按鈕同時出現，并表示抉擇的時候。如果有引導的需求。可以強化其中一個，弱化另外一個按鈕。下圖為Mate：

rial Design中的案例

三、按鈕大小

1. 按鈕寬度

（1）由文字寬度決定

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

（2）由容器決定

下左圖，“發布視頻”按鈕寬度由左側的導航欄決定，因為導航欄不随浏覽器的寬度變化而變化，所以“發布視頻”按鈕也不會變化。

下右圖，“立即邀約”按鈕的寬度取決于“博主-選擇卡片”的業務組件，并且會随着浏覽器的寬度。

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

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

2. 按鈕高度

實際項目需求中，不同場景用到的按鈕的高度也會不同。将通用按鈕劃分為大、中、小，按鈕高度分别對應着40px、32px、24px。

在B端的後台一般優先使用中尺寸的按鈕高度，因為大尺寸的按鈕過高，提升了屏占比。

四、按鈕狀态

按鈕一共有6種狀态普通、懸浮、點擊、激活、不可用、加載中。

1. 禁用狀态

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

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

2. 激活狀态

激活狀态的按鈕比較少見，因為大部分人習慣使用鼠标。在填表的情況下要觸發按鈕，往往使用鼠标移到對應區域進行點擊，這樣就看不見激活狀态了。

另外隻使用鍵盤的“→｜”也能在激活各個控件，對其進行操作。比如“激活”巨量星圖的“取消”按鈕，按下回車鍵，就使按鈕進入了Press狀态。

五、按鈕位置

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

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

• Header：主題的标題和摘要信息内容區的導航等，其中的按鈕放置影響模塊全局的操作。
• Body：具體内容，其中的按鈕按鈕區放置影響跟随内容的操作。
• Footer：主題的補充信息和工具欄等，其中的按鈕區放置具有“完結流程”意義的操作。

2. 按鈕内部的順序

當出現多個按鈕并列的時候，最常見且疑問按鈕的排列當屬主次該如何排序。

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

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

六、其他

Stata-Switch Controls

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

經常給設計造成困擾的切換按鈕的歧義性。

典型的比如“開/關”按鈕。

這樣的按鈕需要表現當前狀态、同時預示點擊以後的結果，在按鈕所連接的功能本身需要解釋、 空間有限、或者跨語言環境下，并不容易。

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

讓用戶更清晰得理解“狀态切換控件”的含義有下面幾種方式：

1. 使用有動詞文案，讓用戶去理解文字
2. 從控件本身強化認知。依據用戶的認知設計控件的樣式，比如收音機案例中按鈕的顔色變深
3. 從環境上本身強化認知。使用明顯的視覺、聽覺效果，讓用戶容易理解現在界面所處的狀态

這方面詳細内容見State-Switch Controls——狀态切換控件，該怎麼使用？

本文由 @biubiu 原創發布于人人都是産品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部