Button

按鈕有分以下三種類型:懸浮式按鈕、抬升式按鈕、平面化按鈕

依照權重排列如下圖:

權重由上至下排序,越上層權重越高

在選擇將按鈕放在哪個層級時,必須要考慮以下三個因素:

  • 功能性
    按鈕是否重要到必須懸浮在應用上層,使其在操作過程中不會消失
  • 圖層
    依照畫面的圖層數量,決定是否需要將按鈕拉升一層,使其容易辨識
  • 限制
    任何一個畫面應盡量以一種類型為主,除非有非用不可的原因

懸浮式按鈕

懸浮式按鈕為權重最高的按鈕,通常使用為需要常駐的按鈕。

主要會以下面兩種形式存在:

  • 新增

點擊後新增一物件

  • 分離

點擊後分離兩物件

其代表的功能為當前畫面的主要功能,且無法由其他的當前畫面的物件代表,所以一個畫面最多只有一個。

>

此畫面主要用途為新增檔案,任何其他物件都不具有新增功能

>

此畫面主要用途為點擊圖片,所以不需要懸浮式按鈕

動畫

跟懸浮式按鈕本身有關的動畫有分以下三種:

  • 轉場

畫面轉變時,如所代表的功能不同,則需要一個動畫提示;如果相同,則移動到新的位置即可


按鈕應該獨立於畫面的轉場動畫外

  • 選單

按鈕可以轉變成一個工具列

滾動可以還原按鈕

>

由懸浮式按鈕轉變成的工具列,必須要放類型相關的功能

懸浮式按鈕也可轉變成數個小按鈕,且懸浮式按鈕將留在畫面中,並轉為關閉圖示

>

小按鈕的數量至少2個,至多6個

>

相同的,由懸浮式按鈕轉變而來的小按鈕,也要具備與內容直接相關的功能

如需要多餘6個以上的功能,或是要顯示圖文選項,則可將懸浮式按鈕轉變成選單列

>

選單列將包含一個工具列,即可處理多功能的情況

  • 形變

懸浮式按鈕可以轉變成一個物件,並插入當前畫面

懸浮式按鈕可以轉變成一個全新的畫面,也因此並不能中斷動畫

規範

按鈕必須為圓形且平面化:

>

圓形且平面

中央圖示必須要是正面意義:

新增、最愛、探索和導航等

依照情境有分成兩種大小:

  • 一般
>

直徑:56 dp
圖示:24 dp,同[系統圖示](../style/icon.html#系統圖示)

  • 縮小
>

直徑:40 dp
圖示:同一般

抬升式按鈕

抬升式按鈕為權重次高的按鈕,通常使用在畫面之中:

>

抬升效果可比平面化按鈕更凸出於畫面之中

狀態

依照情境可分以下兩種:

  • 容器底色為亮色系
>

停用
文字顏色:黑
不透明度:26%

按鈕底色:黑
不透明度:12%

  • 容器底色為暗色系
>

碰觸
按鈕底色:600

按壓
按鈕底色:700

停用
文字顏色:白
不透明度:30%

按鈕底色:白
不透明度:12%

運用實例

設計規範

>

文字:全部大寫
文字顏色:白
按鈕底色:500
按鈕觸控範圍高:48 dp
按鈕高:36 dp
按鈕寬:至少 88 dp
左右內間距:8 dp
左右外間距:8 dp

平面化按鈕

平面化按鈕為權重最低的按鈕,通常使用在三種地方:

  • 對話框
>

詳細請查看[對話框](dialog.html)

  • 置底按鈕
>

如果應用需要一個長駐的按鈕,除了使用懸浮按鈕,也可以使用置底按鈕

  • 卡片
>

詳細請查看[卡片](card.html)

狀態

依照情境可分以下兩種:

  • 容器底色為亮色系
>

碰觸
按鈕底色:#999999
不透明度:20%

按壓
按鈕底色:#999999
不透明度:40%

停用
文字顏色:黑
不透明度:26%

  • 容器底色為暗色系
>

碰觸
按鈕底色:#CCCCCC
不透明度:15%

按壓
按鈕底色:#CCCCCC
不透明度:25%

停用
文字顏色:白
不透明度:30%

運用實例

設計規範

>

與抬升式按鈕大致相同,除了以下項目:
文字顏色:主題色,或與內容文字不同的顏色
按鈕底色:同容器底色
按鈕寬:至少 88 dp(一般),64 dp (對話框)