按鈕

Stay organized with collections Save and categorize content based on your preferences.

請將 Button 元件用於使用者充分瞭解且不需要文字標籤的動作。按鈕為圓型設計,這是和方塊的區別。

圖解

A. 內容

按鈕會為圖示或文字保留一個版位。請選取與執行按鈕動作相關的圖示。如果圖示無法描述相關動作,您可使用文字,但不能超過三個字元。如果圖示無法清楚描述動作,請考慮使用方塊元件

B. 容器

按鈕容器只能填入單色。

切換鈕

切換鈕可讓使用者在兩個狀態之間切換。

精簡按鈕

精簡按鈕看起來較小,但有較大的可輕觸區域。預設的可輕觸區域為 48x48dp。

階層圖

高強調

要辨別高強調按鈕,可以從填滿按鈕內的顏色著手。這些按鈕包含應用程式的主要動作。如果是高強調按鈕,要以原色或二次色塗繪容器,另以疊加原色和疊加二次色為內容上色。詳情請參閱「Wear Material 主題設定」。

中強調

中強調按鈕所用的塗色是較不鮮明的對比色。比起主要動作,這些按鈕包含的動作比較不重要。請為容器使用表面色,並在內容使用疊加表面色。

低強調 (僅限圖示)

低強調按鈕的特徵就是沒有塗色。這個選項最適合用於錶面上需要精簡規劃的較小區域。請為內容使用疊加表面色。

大小

使用不同大小的按鈕,以增加強調或減少強調動作。


圖示 (30 x 30dp)
容器 (60 x 60dp)

預設
圖示 (26 x 26dp)
容器 (52 x 52dp)



圖示 (24 x 24dp)
容器 (48 x 48dp)

圖示 (24 x 24dp)
容器 (32 x 32dp)
只有精簡的按鈕可以特別小。

使用方式

您可運用標準按鈕讓使用者執行單一動作,例如接受或拒接來電,或啟動計時器。

若要讓使用者開啟或關閉特定選項,例如選取和取消選取星期幾,或是暫停及重新啟動計時器,則可以運用切換按鈕達到目的。