控制器控制器以圖示的型態存在於一個列表方塊的左邊或是右邊,用於顯示當前方塊的狀態、資訊或是操作。

控制器也可以存在方塊的底層,使用滑動的方式將其顯示。

控制器可以當作以下四種功能來使用:

  • 顯示狀態

  • 主要操作

複選框,選取操作比顯示細節重要

巢狀選單

  • 次要操作

複選框

開關

排序

延展

其他,同時提示使用者在整個應用中,滑動列表方塊代表的意義

  • 次要資訊

功能說明

不能將控制器圖示並排於其他圖示,而屬於次要操作的控制項應至於右邊。

類型控制器依照類型分為三種,各種有不同的使用時機:

  • 複選框用於讓使用者可以進行複選,但如果只有一個選項,建議使用開關。


顏色:主題色


顏色:黑
透明度:54 %

停用
顏色:黑
透明度:26 %


顏色:主題色


顏色:白
透明度:70 %

停用
顏色:白
透明度:30 %

  • 單選按鈕用於讓使用者從一組選項中挑選一個,通常為第二層選單且選單是全部展開,如果不需要使用者可以一次看到所有選項,建議使用下拉式選單。


顏色:主題色


顏色:黑
透明度:54 %

停用
顏色:黑
透明度:26 %


顏色:主題色


顏色:白
透明度:70 %

停用
顏色:白
透明度:30 %

  • 開關用於讓使用者決定某一個選項的開關狀態


顏色:主題色(控鈕),主題色(橫桿)
透明度:100 %(控鈕),50 %(橫桿)


顏色:#FAFAFA(控鈕),黑(橫桿)
透明度:100 %(控鈕),26 %(橫桿)


顏色:#BDBDBD(控鈕),黑(橫桿)
透明度:100 %(控鈕),12 %(橫桿)


顏色:主題色 200(控鈕),主題色 200(橫桿)
透明度:100 %(控鈕),50 %(橫桿)


顏色:#FAFAFA(控鈕),白(橫桿)
透明度:100 %(控鈕),30 %(橫桿)


顏色:#424242(控鈕),白(橫桿)
透明度:100 %(控鈕),10 %(橫桿)