按鈕由文字和/或圖標(biāo)組成，文字及圖標(biāo)必須能讓人輕易地和點(diǎn)擊后展示的內(nèi)容聯(lián)系起來。
主要的按鈕有三種:

• 懸浮響應(yīng)按鈕(Floating action button)， 點(diǎn)擊后會產(chǎn)生墨水?dāng)U散效果的圓形按鈕。
• 浮動按鈕(Raised button)， 常見的方形紙片按鈕，點(diǎn)擊后會產(chǎn)生墨水?dāng)U散效果。
• 扁平按鈕(Flat button)， 點(diǎn)擊后產(chǎn)生墨水?dāng)U散效果，和浮動按鈕的區(qū)別是沒有浮起的效果。

顏色飽滿的圖標(biāo)應(yīng)當(dāng)是功能性的，盡量避免把他們作為純粹裝飾用的元素。

按鈕的設(shè)計(jì)應(yīng)當(dāng)和應(yīng)用的顏色主題保持一致。

用法

http://wiki.jikexueyuan.com/project/material-design/images/components-buttons-usage-01_intro_large_mdpi.png" alt="p0" />
懸浮響應(yīng)按鈕

http://wiki.jikexueyuan.com/project/material-design/images/components-buttons-usage-02_intro_large_mdpi.png" alt="p1" />
浮動按鈕

http://wiki.jikexueyuan.com/project/material-design/images/components-buttons-usage-03_intro_large_mdpi.png" alt="p2" />
扁平按鈕

主按鈕

按鈕類型應(yīng)該基于主按鈕、屏幕上容器的數(shù)量以及整體布局來進(jìn)行選擇。

首先，審視一遍你的按鈕功能: 它是不是非常重要而且應(yīng)用廣泛到需要用上懸浮響應(yīng)按鈕?

然后，基于放置按鈕的容器以及屏幕上層次堆疊的數(shù)量來選擇使用浮動按鈕還是扁平按鈕。而且應(yīng)該避免過多的層疊。

最后，檢查你的布局。 一個容器應(yīng)該只使用一種類型的按鈕。 只在比較特殊的情況下（比如需要強(qiáng)調(diào)一個浮起的效果）才應(yīng)該混合使用多種類型的按鈕。

http://wiki.jikexueyuan.com/project/material-design/images/components-buttons-usage-05_chart_large_mdpi.png" alt="p3" />

對話框中的按鈕

對話框中使用扁平按鈕作為主要按鈕類型以避免過多的層次疊加。

http://wiki.jikexueyuan.com/project/material-design/images/components-buttons-dialog_usage_1_large_mdpi.png" alt="p4" />

http://wiki.jikexueyuan.com/project/material-design/images/components-buttons-dialog_usage_2_large_mdpi.png" alt="p5" />

按鈕內(nèi)邊距

根據(jù)特定的布局來選擇使用扁平按鈕或者浮動按鈕。對于扁平按鈕，應(yīng)該在內(nèi)部四周留出足夠的空間（內(nèi)邊距）以使按鈕清晰可見。

http://wiki.jikexueyuan.com/project/material-design/images/components-buttons-usage-1_usage_padding_large_mdpi.png" alt="p6" />

http://wiki.jikexueyuan.com/project/material-design/images/components-buttons-usage-2_usage_padding_large_mdpi.png" alt="p7" />

底部固定按鈕

如果需要一個對用戶持續(xù)可見的功能按鈕，應(yīng)該首先考慮使用懸浮響應(yīng)按鈕。如果需要一個非主要、但是能快速定位到的按鈕，則可以使用底部固定按鈕。

http://wiki.jikexueyuan.com/project/material-design/images/components-buttons-usage-1_buttons_usage_19_large_mdpi.png" alt="p8" />

http://wiki.jikexueyuan.com/project/material-design/images/components-buttons-usage-2_buttons_usage_19_large_mdpi.png" alt="p9" />

http://wiki.jikexueyuan.com/project/material-design/images/components-buttons-persistant-footer-1_large_mdpi.png" alt="p10" />

不可在底部固定按鈕的區(qū)域內(nèi)使用浮動按鈕。

http://wiki.jikexueyuan.com/project/material-design/images/components-buttons-usage-usage_persistent_large_mdpi.png" alt="p11" />

底部固定按鈕也可以用在內(nèi)容可拉動的對話框中，前提是要加上 divider。

http://wiki.jikexueyuan.com/project/material-design/images/components-buttons-persistant-footer-4a_large_mdpi.png" alt="p12" />

http://wiki.jikexueyuan.com/project/material-design/images/components-buttons-persistant-footer-4b_large_mdpi.png" alt="p13" />

主按鈕

懸浮響應(yīng)按鈕

懸浮響應(yīng)按鈕是促進(jìn)動作里的特殊類型。 是一個圓形的漂浮在界面之上的、擁有一系列特殊動作的按鈕，這些動作通常和變換、啟動、以及它本身的轉(zhuǎn)換錨點(diǎn)相關(guān)。

更多關(guān)于懸浮響應(yīng)按鈕的信息， 請參考 模式：促進(jìn)的動作(Promoted Actions)。

http://wiki.jikexueyuan.com/project/material-design/images/components-buttons-floating-actions-1a_large_mdpi.png" alt="p14" />

http://wiki.jikexueyuan.com/project/material-design/images/components-buttons-floating-actions-1b_large_mdpi.png" alt="p15" />

懸浮響應(yīng)按鈕有兩種尺寸: 默認(rèn)尺寸和迷你尺寸。 迷你尺寸僅僅用于配合屏幕上的其他元素制造視覺上的連續(xù)性。

http://wiki.jikexueyuan.com/project/material-design/images/patterns-promotedactions-floatingactionbuttonFAB3_large_mdpi.png" alt="p16" />

http://wiki.jikexueyuan.com/project/material-design/images/patterns-promotedactions-floatingactionbuttonFAB4_large_mdpi.png" alt="p17" />

浮動按鈕

浮動按鈕使按鈕在比較擁擠的界面上更清晰可見。能給大多數(shù)扁平的布局帶來層次感。

http://wiki.jikexueyuan.com/project/material-design/images/components-buttons-usage-raised-do_large_mdpi.png" alt="p18" />

http://wiki.jikexueyuan.com/project/material-design/images/components-buttons-usage-raised-dont_large_mdpi.png" alt="p19" />

http://wiki.jikexueyuan.com/project/material-design/images/components-buttons-usage-raised-1a_large_mdpi.png" alt="p20" />

(上圖)可取

正確使用浮動按鈕。

http://wiki.jikexueyuan.com/project/material-design/images/components-buttons-usage-raised-1b_large_mdpi.png" alt="p21" />

(上圖)不可取

按鈕不明顯。

扁平按鈕

扁平按鈕一般用于對話框或者工具欄， 可避免頁面上過多無意義的層疊。

http://wiki.jikexueyuan.com/project/material-design/images/components-buttons-usage-flat-1a_large_mdpi.png" alt="p22" />

http://wiki.jikexueyuan.com/project/material-design/images/components-buttons-usage-flat-1b_large_mdpi.png" alt="p23" />

http://wiki.jikexueyuan.com/project/material-design/images/components-buttons-usage-flat-do_large_mdpi.png" alt="p24" />

(上圖)可取

正確使用扁平按鈕。

http://wiki.jikexueyuan.com/project/material-design/images/components-buttons-usage-flat-dont_large_mdpi.png" alt="p25" />

(上圖)不可取

層次感太重。

扁平和浮動按鈕的狀態(tài)

按鈕狀態(tài)模擬

浮動按鈕看起來像一張放在頁面上的紙片，點(diǎn)擊后會浮起來并表現(xiàn)出色彩。

扁平按鈕會一直保持和頁面貼合的狀態(tài)，點(diǎn)擊后會填充顏色。

墨水效果會跟著焦點(diǎn)的改變從一個按鈕轉(zhuǎn)換到另一個按鈕。聚焦?fàn)顟B(tài)的動畫會表現(xiàn)出正常狀態(tài)和點(diǎn)擊狀態(tài)間來回切換的過渡效果。

模擬按鈕狀態(tài)的時候， 可以使用圖形輪換來表現(xiàn)動畫。注意聚焦?fàn)顟B(tài)會一直處于動畫的狀態(tài)。 (下面這些圖并沒有顯示出真實(shí)的聚焦?fàn)顟B(tài)。)

http://wiki.jikexueyuan.com/project/material-design/images/components-buttons-states-for-mocks-1a_large_mdpi.png" alt="p26" />

Flat Light/Light color
最小寬度: 88 dp， 高度: 36 dp
覆蓋狀態(tài): 20% #999， 點(diǎn)擊狀態(tài): 40% #999， 不可用狀態(tài): 10% #999

http://wiki.jikexueyuan.com/project/material-design/images/components-buttons-states-for-mocks-1b_large_mdpi.png" alt="p27" />

Flat Dark/Dark Color
最小寬度: 88 dp， 高度: 36 dp
覆蓋狀態(tài): 15% #ccc， 點(diǎn)擊狀態(tài): 25% #ccc， 不可用狀態(tài): 10% #ccc

http://wiki.jikexueyuan.com/project/material-design/images/components-buttons-states-for-mocks-2a_large_mdpi.png" alt="p28" />

Raised Light/Light Color
最小寬度: 88 dp， 高度: 36 dp

http://wiki.jikexueyuan.com/project/material-design/images/components-buttons-states-for-mocks-2b_large_mdpi.png" alt="p29" />

Raised Dark/Dark Color
最小寬度: 88 dp， 高度: 36 do
正常狀態(tài): Color 500， 覆蓋狀態(tài): Color 600， 點(diǎn)擊狀態(tài): Color 700， 不可用狀態(tài): 10% #ccc

按鈕動態(tài)效果

扁平按鈕

浮動按鈕

其他類型的按鈕

圖標(biāo)開關(guān)

圖標(biāo)適合用在應(yīng)用導(dǎo)航條或者工具條上，作為動作按鈕或者開關(guān)。

圖標(biāo)開關(guān)可以在它的范圍內(nèi)呈現(xiàn)彈性或者非彈性的墨水?dāng)U散漣漪效果。 更多信息請參考： 面響應(yīng)

http://wiki.jikexueyuan.com/project/material-design/images/components-buttons-icon-toggles-1_large_mdpi.png" alt="p30" />

http://wiki.jikexueyuan.com/project/material-design/images/components-buttons-icon-toggles-2_large_mdpi.png" alt="p31" />

http://wiki.jikexueyuan.com/project/material-design/images/components-buttons-icon-toggles-3_large_mdpi.png" alt="p32" />

移動端下拉菜單按鈕

下拉菜單按鈕

下拉菜單按鈕可以用來控制對象狀態(tài); 一般會有兩個甚至更多的狀態(tài)。 按鈕會顯示當(dāng)前狀態(tài)以及一個向下的箭頭—當(dāng)按鈕觸發(fā)后， 一個包含所有狀態(tài)的菜單會在按鈕周圍彈出（通常都是在下方）。 菜單中的狀態(tài)通常會以字符、調(diào)色板、圖標(biāo)或者其他的形式呈現(xiàn)出來。點(diǎn)擊任意一個狀態(tài)將會改變按鈕的狀態(tài)顯示。這展示的是一個常見的帶有列表式菜單的下拉菜單按鈕。

http://wiki.jikexueyuan.com/project/material-design/images/components-buttons-mobile-dropdowns-1a_large_mdpi.png" alt="p33" />

http://wiki.jikexueyuan.com/project/material-design/images/components-buttons-mobile-dropdowns-1b_large_mdpi.png" alt="p34" />

溢出下拉菜單按鈕

這種類型的下拉菜單按鈕不會顯示當(dāng)前狀態(tài)，而是顯示一個向下箭頭或者一個默認(rèn)菜單圖標(biāo)。點(diǎn)擊后會彈出菜單。點(diǎn)擊菜單中的任意一個選項(xiàng)將會引導(dǎo)到對應(yīng)的設(shè)置頁面。

分段式下拉菜單按鈕

分段式下拉菜單按鈕有兩個區(qū)域: 當(dāng)前狀態(tài)和下拉箭頭。點(diǎn)擊當(dāng)前狀態(tài)會觸發(fā)狀態(tài)相應(yīng)的動作。點(diǎn)擊下拉箭頭則會彈出所有狀態(tài)菜單; 點(diǎn)擊任意一個狀態(tài)會改變當(dāng)前的狀態(tài)。

可編輯分段式下拉菜單按鈕

可編輯分段式下拉菜單按鈕的當(dāng)前狀態(tài)位置是可編輯的（例如用來選擇文字大小的下拉菜單）。 點(diǎn)擊當(dāng)前狀態(tài)位置會觸發(fā)相應(yīng)的動作并且當(dāng)前狀態(tài)會變成可編輯。點(diǎn)擊下拉箭頭會顯示所有狀態(tài)。

http://wiki.jikexueyuan.com/project/material-design/images/components-buttons-mobile-dropdowns-3_large_mdpi.png" alt="p35" />

桌面下拉相關(guān)

桌面應(yīng)用工具欄

http://wiki.jikexueyuan.com/project/material-design/images/components-buttons-desktop-dropdowns_large_mdpi.png" alt="p36" />

原文：Buttons 翻譯：7heaven 校對：阿九(Siton)