今天介紹的是按鈕。按鈕是設(shè)計(jì)過程中經(jīng)常使用的一種控件。我們來看看Google的Material Design和蘋果的設(shè)計(jì)規(guī)范都是怎么說的。

往期回顧：

1. 高手幫你學(xué)規(guī)范！iOS和Android規(guī)范解析之提示框+警告框
2. 高手幫你學(xué)規(guī)范！iOS和Android規(guī)范解析之簡易菜單+彈框
3. 高手幫你學(xué)規(guī)范！iOS和Android規(guī)范解析之底部浮層

Material Design Guidelines

按鈕告知用戶按下按鈕后將進(jìn)行的操作，我們可以把按鈕理解為一個(gè)操作的觸發(fā)器。按鈕主要有以下五種：扁平按鈕、凸起按鈕、懸浮按鈕、底部常駐按鈕、下拉菜單按鈕、開關(guān)按鈕。下面我們來一一介紹。

扁平按鈕

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

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

行為：在點(diǎn)擊扁平按鈕的時(shí)候，按鈕不會(huì)有升起的動(dòng)作，但是它的背景會(huì)有一個(gè)從中間向四周擴(kuò)展顏色的動(dòng)效，如下圖的第三個(gè)動(dòng)畫所示：

△ ?扁平按鈕的各種狀態(tài)（動(dòng)畫）

△ ?左：扁平按鈕的各種狀態(tài)（靜態(tài)）；右：按下扁平按鈕時(shí)的狀態(tài)示例

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

凸起按鈕

凸起按鈕由于具有一定的高度，視覺上相對(duì)搶眼，所以可以起到強(qiáng)調(diào)按鈕本身的作用。

當(dāng)頁面中的按鈕需要強(qiáng)調(diào)的時(shí)候，建議使用凸起按鈕，如下圖：

行為：當(dāng)點(diǎn)擊凸起按鈕時(shí)，按鈕的背景會(huì)從中間向四周填充上顏色，同時(shí)按鈕本身會(huì)升起一段距離作為反饋：

△ ?凸起按鈕的各種狀態(tài)（動(dòng)畫）

△ ?凸起按鈕的各種狀態(tài)（靜態(tài)）

懸浮按鈕

關(guān)于懸浮按鈕，MD用了單獨(dú)一節(jié)專門講這個(gè)按鈕，由于內(nèi)容較多，我會(huì)在下篇文章詳細(xì)介紹。

底部常駐按鈕

如果你的應(yīng)用需要用戶隨時(shí)可以進(jìn)行某個(gè)操作，那么請(qǐng)考慮使用懸浮按鈕或者底部常駐按鈕。

△ ?底部常駐按鈕示例

下拉菜單按鈕

下拉菜單按鈕允許用戶從一系列選項(xiàng)中選擇一個(gè)選項(xiàng)。按鈕默認(rèn)會(huì)展示當(dāng)前選中的選項(xiàng)以及一個(gè)下拉箭頭。

△ ?下拉菜單按鈕示例

當(dāng)用戶點(diǎn)擊下拉菜單按鈕，選項(xiàng)會(huì)在按鈕的正上方彈出，擋住下拉菜單按鈕，如下圖所示：

△ ?使用下拉菜單選擇選項(xiàng)的動(dòng)畫示意

需要注意的是，下拉菜單的選項(xiàng)是可以設(shè)計(jì)成允許修改的，設(shè)計(jì)師可以根據(jù)需要決定是否需要可修改的屬性。具體如下圖所示：

△ ?選項(xiàng)值可修改的下拉菜單按鈕

開關(guān)按鈕

開關(guān)按鈕，就像開關(guān)一樣有兩種狀態(tài)：點(diǎn)擊一下，它就會(huì)從狀態(tài)A切換成狀態(tài)B；再次點(diǎn)擊，又從B切換成A。最常見的比如喜歡、收藏按鈕：

△ ?開關(guān)按鈕示例

iOS Human Interface Guidelines

蘋果的規(guī)范對(duì)于按鈕的介紹要簡略的多，主要介紹了蘋果系統(tǒng)提供的三種按鈕：系統(tǒng)按鈕、信息按鈕和添加聯(lián)系人按鈕。

系統(tǒng)按鈕

所謂的系統(tǒng)按鈕，其實(shí)就跟MD中的扁平按鈕一樣：使用一個(gè)詞做為一個(gè)按鈕。

△ ?系統(tǒng)按鈕示例

關(guān)于系統(tǒng)按鈕，蘋果給出了以下三個(gè)注意的要點(diǎn)：

1. 使用動(dòng)詞。表明了操作的動(dòng)詞，可以表明這個(gè)詞是可操作的，并且說明了點(diǎn)擊之后會(huì)有什么效果。

2. 盡量使動(dòng)詞簡短。

3. 只在必要的情況下，增加邊框或者背景色。默認(rèn)情況下，系統(tǒng)按鈕是沒有邊框和背景色的。但在某些情況下，如果需要強(qiáng)調(diào)該按鈕，則可以增加邊框和背景色。

信息按鈕

信息按鈕很好理解，就是點(diǎn)擊之后會(huì)出現(xiàn)相關(guān)的詳細(xì)信息，一般以模態(tài)的形式出現(xiàn)。

△ ?信息按鈕示例

有一點(diǎn)需要特別注意：如果是通過點(diǎn)擊整行來出現(xiàn)詳細(xì)信息，那么請(qǐng)不要同時(shí)使用信息按鈕，否則容易引起誤解。

添加聯(lián)系人按鈕

添加聯(lián)系人實(shí)在沒什么好說的，就是點(diǎn)擊按鈕之后會(huì)出現(xiàn)聯(lián)系人的頁面，一般也是以模態(tài)視圖的形態(tài)出現(xiàn)。（蘋果關(guān)于按鈕的說明也是很沒有誠意呢，攤手。）

△ ?添加聯(lián)系人按鈕

以上介紹了MD和iOS設(shè)計(jì)規(guī)范中按鈕這個(gè)高頻使用的控件。值得一提的是，MD的按鈕動(dòng)效還是很有自家特色的，在應(yīng)用中稍微一使用，就會(huì)有明顯的MD風(fēng)格。大家在做設(shè)計(jì)時(shí)，有機(jī)會(huì)可以嘗試一下。

歡迎關(guān)注作者微信公眾號(hào)：新設(shè)計(jì)青年

「如何看懂iOS 10 的設(shè)計(jì)規(guī)范指南」

1. 看趨勢(shì)變化丨《從IOS 10設(shè)計(jì)指南變化看設(shè)計(jì)的新趨勢(shì)》
2. 看交互啟示丨《從IOS 10 的交互設(shè)計(jì)中學(xué)到的3個(gè)設(shè)計(jì)啟示》
3. 看使用方法丨《一份超詳細(xì)的「IOS 10 UI KIT」使用手冊(cè)（附源文件）》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛好者也準(zhǔn)備了貼心的知識(shí)樹專欄。開啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計(jì)導(dǎo)航：國內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備：http://hao.uisdc.com