按鈕(Buttons)

按鈕由文字和/或圖標組成,文字及圖標必須能讓人輕易地和點擊后展示的內容聯系起來。
主要的按鈕有三種:

顏色飽滿的圖標應當是功能性的,盡量避免把他們作為純粹裝飾用的元素。

按鈕的設計應當和應用的顏色主題保持一致。

用法

p0
懸浮響應按鈕

p1
浮動按鈕

p2
扁平按鈕

主按鈕

按鈕類型應該基于主按鈕、屏幕上容器的數量以及整體布局來進行選擇。

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

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

最后,檢查你的布局。 一個容器應該只使用一種類型的按鈕。 只在比較特殊的情況下(比如需要強調一個浮起的效果)才應該混合使用多種類型的按鈕。

p3

對話框中的按鈕

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

p4

p5

按鈕內邊距

根據特定的布局來選擇使用扁平按鈕或者浮動按鈕。對于扁平按鈕,應該在內部四周留出足夠的空間(內邊距)以使按鈕清晰可見。

p6

p7

底部固定按鈕

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

p8

p9

p10

不可在底部固定按鈕的區域內使用浮動按鈕。

p11

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

p12

p13

主按鈕

懸浮響應按鈕

懸浮響應按鈕是促進動作里的特殊類型。 是一個圓形的漂浮在界面之上的、擁有一系列特殊動作的按鈕,這些動作通常和變換、啟動、以及它本身的轉換錨點相關。

更多關于懸浮響應按鈕的信息, 請參考 模式:促進的動作(Promoted Actions)

p14

p15

懸浮響應按鈕有兩種尺寸: 默認尺寸和迷你尺寸。 迷你尺寸僅僅用于配合屏幕上的其他元素制造視覺上的連續性。

p16

p17

浮動按鈕

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

p18

p19

p20

正確使用浮動按鈕。

p21
不要
按鈕不明顯。

扁平按鈕

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

p22

p23

p24

正確使用扁平按鈕。

p25
不要
層次感太重。

扁平和浮動按鈕的狀態

按鈕狀態模擬

浮動按鈕看起來像一張放在頁面上的紙片,點擊后會浮起來并表現出色彩。

扁平按鈕會一直保持和頁面貼合的狀態,點擊后會填充顏色。

墨水效果會跟著焦點的改變從一個按鈕轉換到另一個按鈕。聚焦狀態的動畫會表現出正常狀態和點擊狀態間來回切換的過渡效果。

模擬按鈕狀態的時候, 可以使用圖形輪換來表現動畫。注意聚焦狀態會一直處于動畫的狀態。 (下面這些圖并沒有顯示出真實的聚焦狀態。)

p26
Flat Light/Light color
最小寬度: 88 dp, 高度: 36 dp
覆蓋狀態: 20% #999, 點擊狀態: 40% #999, 不可用狀態: 10% #999

p27
Flat Dark/Dark Color
最小寬度: 88 dp, 高度: 36 dp
覆蓋狀態: 15% #ccc, 點擊狀態: 25% #ccc, 不可用狀態: 10% #ccc

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

p29
Raised Dark/Dark Color
最小寬度: 88 dp, 高度: 36 do
正常狀態: Color 500, 覆蓋狀態: Color 600, 點擊狀態: Color 700,
不可用狀態: 10% #ccc

按鈕動態效果

扁平按鈕

浮動按鈕

其他類型的按鈕

圖標開關

圖標適合用在應用導航條或者工具條上,作為動作按鈕或者開關。

圖標開關可以在它的范圍內呈現彈性或者非彈性的墨水擴散漣漪效果。 更多信息請參考: 面響應

p30

p31

p32

移動端下拉菜單按鈕

下拉菜單按鈕

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

p33

p34

溢出下拉菜單按鈕

這種類型的下拉菜單按鈕不會顯示當前狀態,而是顯示一個向下箭頭或者一個默認菜單圖標。點擊后會彈出菜單。點擊菜單中的任意一個選項將會引導到對應的設置頁面。

分段式下拉菜單按鈕

分段式下拉菜單按鈕有兩個區域: 當前狀態和下拉箭頭。點擊當前狀態會觸發狀態相應的動作。點擊下拉箭頭則會彈出所有狀態菜單; 點擊任意一個狀態會改變當前的狀態。

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

可編輯分段式下拉菜單按鈕的當前狀態位置是可編輯的(例如用來選擇文字大小的下拉菜單)。 點擊當前狀態位置會觸發相應的動作并且當前狀態會變成可編輯。點擊下拉箭頭會顯示所有狀態。

p35

桌面下拉相關

桌面應用工具欄

p36

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

两码中特期期