按鈕

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

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

顏色飽滿(mǎn)的圖標(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" />
浮動(dòng)按鈕

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

主按鈕

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

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

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

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

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

對(duì)話(huà)框中的按鈕

對(duì)話(huà)框中使用扁平按鈕作為主要按鈕類(lèi)型以避免過(guò)多的層次疊加。

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ù)特定的布局來(lái)選擇使用扁平按鈕或者浮動(dòng)按鈕。對(duì)于扁平按鈕，應(yīng)該在內(nèi)部四周留出足夠的空間（內(nèi)邊距）以使按鈕清晰可見(jiàn)。

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" />

底部固定按鈕

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

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)使用浮動(dòng)按鈕。

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

底部固定按鈕也可以用在內(nèi)容可拉動(dòng)的對(duì)話(huà)框中，前提是要加上 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)動(dòng)作里的特殊類(lèi)型。 是一個(gè)圓形的漂浮在界面之上的、擁有一系列特殊動(dòng)作的按鈕，這些動(dòng)作通常和變換、啟動(dòng)、以及它本身的轉(zhuǎn)換錨點(diǎn)相關(guān)。

更多關(guān)于懸浮響應(yīng)按鈕的信息， 請(qǐng)參考 模式：促進(jìn)的動(dòng)作(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)尺寸和迷你尺寸。 迷你尺寸僅僅用于配合屏幕上的其他元素制造視覺(jué)上的連續(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" />

浮動(dòng)按鈕

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

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" />

(上圖)可取

正確使用浮動(dòng)按鈕。

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

(上圖)不可取

按鈕不明顯。

扁平按鈕

扁平按鈕一般用于對(duì)話(huà)框或者工具欄， 可避免頁(yè)面上過(guò)多無(wú)意義的層疊。

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" />

(上圖)不可取

層次感太重。

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

按鈕狀態(tài)模擬

浮動(dòng)按鈕看起來(lái)像一張放在頁(yè)面上的紙片，點(diǎn)擊后會(huì)浮起來(lái)并表現(xiàn)出色彩。

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

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

模擬按鈕狀態(tài)的時(shí)候， 可以使用圖形輪換來(lái)表現(xiàn)動(dòng)畫(huà)。注意聚焦?fàn)顟B(tài)會(huì)一直處于動(dòng)畫(huà)的狀態(tài)。 (下面這些圖并沒(mé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

按鈕動(dòng)態(tài)效果

扁平按鈕

浮動(dòng)按鈕

其他類(lèi)型的按鈕

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

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

圖標(biāo)開(kāi)關(guān)可以在它的范圍內(nèi)呈現(xiàn)彈性或者非彈性的墨水?dāng)U散漣漪效果。 更多信息請(qǐng)參考： 面響應(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" />

移動(dòng)端下拉菜單按鈕

下拉菜單按鈕

下拉菜單按鈕可以用來(lái)控制對(duì)象狀態(tài); 一般會(huì)有兩個(gè)甚至更多的狀態(tài)。 按鈕會(huì)顯示當(dāng)前狀態(tài)以及一個(gè)向下的箭頭—當(dāng)按鈕觸發(fā)后， 一個(gè)包含所有狀態(tài)的菜單會(huì)在按鈕周?chē)鷱棾觯ㄍǔ６际窃谙路剑?菜單中的狀態(tài)通常會(huì)以字符、調(diào)色板、圖標(biāo)或者其他的形式呈現(xiàn)出來(lái)。點(diǎn)擊任意一個(gè)狀態(tài)將會(huì)改變按鈕的狀態(tài)顯示。這展示的是一個(gè)常見(jiàn)的帶有列表式菜單的下拉菜單按鈕。

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" />

溢出下拉菜單按鈕

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

分段式下拉菜單按鈕

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

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

可編輯分段式下拉菜單按鈕的當(dāng)前狀態(tài)位置是可編輯的（例如用來(lái)選擇文字大小的下拉菜單）。 點(diǎn)擊當(dāng)前狀態(tài)位置會(huì)觸發(fā)相應(yīng)的動(dòng)作并且當(dāng)前狀態(tài)會(huì)變成可編輯。點(diǎn)擊下拉箭頭會(huì)顯示所有狀態(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 校對(duì)：阿九(Siton)