今天介紹的是按鈕。按鈕是設計的過程中，經常使用的一種控件。我們來看看Google的Material Design和蘋果的設計規范都是怎么說的。

Material Design Guidelines

按鈕告知用戶按下按鈕后將進行的操作（疑似廢話，，MD開篇就是這一句，好氣哦）。我們可以把按鈕理解為一個操作的觸發器。按鈕主要有以下五種：扁平按鈕，凸起按鈕，懸浮按鈕，底部常駐按鈕，下拉菜單按鈕，開關按鈕。下面我們來一一介紹。

扁平按鈕

扁平按鈕就是把文字用作按鈕，如下圖：

文字按鈕示例（圖中紅色虛線即為文字按鈕）

行為：在點擊扁平按鈕的時候，按鈕不會有升起的動作，但是它的背景會有一個從中間向四周擴展顏色的動效，如下圖的第三個動畫所示：

扁平按鈕的各種狀態（動畫）

左：扁平按鈕的各種狀態（靜態）；右：按下扁平按鈕時的狀態示例

用法：扁平按鈕一般用在警告框中，推薦居右對齊。一般右邊放操作性的按鈕，左邊放取消按鈕。如果用在卡片中，扁平按鈕一般居左對齊，以增加按鈕的曝光。不過，卡片有很多種不同的樣式，設計師可以根據內容和上下文來安排扁平按鈕的位置。只要保證在同一個產品中，卡片內的扁平按鈕的位置統一就可以了。

凸起按鈕

凸起按鈕由于具有一定的高度，視覺上相對搶眼，所以可以起到強調按鈕本身的作用。

當頁面中的按鈕需要強調的時候，建議使用凸起按鈕，如下圖：

行為：當點擊凸起按鈕時，按鈕的背景會從中間向四周填充上顏色，同時按鈕本身會升起一段距離作為反饋：

凸起按鈕的各種狀態（動畫）

凸起按鈕的各種狀態（靜態）

懸浮按鈕

關于懸浮按鈕，MD用了單獨一節專門講這個按鈕，由于內容較多，我會在下篇文章詳細介紹。

底部常駐按鈕

如果你的應用需要用戶隨時可以進行某個操作，那么請考慮使用懸浮按鈕或者底部常駐按鈕。

底部常駐按鈕示例

下拉菜單按鈕

下拉菜單按鈕允許用戶從一系列選項中選擇一個選項。按鈕默認會展示當前選中的選項以及一個下拉箭頭。

下拉菜單按鈕示例

當用戶點擊下拉菜單按鈕，選項會在按鈕的正上方彈出，擋住下拉菜單按鈕，如下圖所示：

使用下拉菜單選擇選項的動畫示意

需要注意的是，下拉菜單的選項是可以設計成允許修改的，設計師可以根據需要決定是否需要可修改的屬性。具體如下圖所示：

選項值可修改的下拉菜單按鈕

開關按鈕

開關按鈕，就像開關一樣有兩種狀態：點擊一下，它就會從狀態A切換成狀態B；再次點擊，又從B切換成A。最常見的比如喜歡、收藏按鈕：

開關按鈕示例

iOS Human Interface Guidelines

蘋果的規范對于按鈕的介紹要簡略的多，主要介紹了蘋果系統提供的三種按鈕：系統按鈕、信息按鈕和添加聯系人按鈕。

系統按鈕

所謂的系統按鈕，其實就跟MD中的扁平按鈕一樣：使用一個詞做為一個按鈕。

系統按鈕示例

關于系統按鈕，蘋果給出了以下三個注意的要點：

1. 使用動詞。表明了操作的動詞，可以表明這個詞是可操作的，并且說明了點擊之后會有什么效果。
2. 盡量使動詞簡短。
3. 只在必要的情況下，增加邊框或者背景色。默認情況下，系統按鈕是沒有邊框和背景色的。但在某些情況下，如果需要強調該按鈕，則可以增加邊框和背景色。

信息按鈕

信息按鈕很好理解，就是點擊之后會出現相關的詳細信息，一般以模態的形式出現。

信息按鈕示例

有一點需要特別注意：如果是通過點擊整行來出現詳細信息，那么請不要同時使用信息按鈕，否則容易引起誤解。

添加聯系人按鈕

添加聯系人實在沒什么好說的，就是點擊按鈕之后會出現聯系人的頁面，一般也是以模態視圖的形態出現。（蘋果關于按鈕的說明也是很沒有誠意呢，攤手。）

添加聯系人按鈕

以上介紹了MD和iOS設計規范中按鈕這個高頻使用的控件。值得一提的是，MD的按鈕動效還是很有自家特色的，在應用中稍微一使用，就會有明顯的MD風格。大家在做設計時，有機會可以嘗試一下。

討論使我們認識更加深刻，歡迎留言討論。

#專欄作家#

沐風，微信公眾號：“沐風與體驗設計”。人人都是產品經理專欄作家，2017年度作家評選最佳人氣獎。愛奇藝Phone和PC端交互團隊負責人。留德海龜，曾任職騰訊微生活、網易、宜信。6年交互設計經驗，專注設計領域，歡迎關注。

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

題圖來自 Unsplash，基于CC0協議。