開關

開關允許用戶選擇選擇項。一共有三種類型的開關:復選框、單選按鈕和 on/off 開關。

注釋:下面示例中所示的圖形環代表一個動畫,并不是實際按鈕的外觀。

復選框

復選框允許用戶從一組選項中選擇多個。

如果需要在一個列表中出現多個 on/off 選項,復選框是一種節省空間的好方式。

如果只有一個 on/off 選擇,不要使用復選框,而應該替換成 on/off 開關。

通過主動將復選框換成勾選標記,可以使去掉勾選的操作變得更加明確且令人滿意。

復選框通過動畫來表達聚焦和按下的狀態。

復選框動作

checkbox-switches_07a

checkbox-switches_07b

單選按鈕

單選按鈕只允許用戶從一組選項中選擇一個。如果你認為用戶需要看到所有可用的選項并排顯示,那么請為排他選擇使用單選按鈕。

否則,考慮相比顯示全部選擇更節省空間的下拉。

單選按鈕通過動畫來表達聚焦和按下的狀態。

單選框動作

switches-radio_02

switches-radiobutton-radio_spec_12a

switches-radiobutton-radio_spec_12a

開關

On/off 開關切換單一設置選擇的狀態。開關控制的選項以及它的狀態,應該明確的展示出來并且與內部的標簽相一致。開關應該單選按鈕呈現相同的視覺特性。

開關通過動畫來傳達被聚焦和被按下的狀態。

開關滑塊上標明 "on" 和 "off" 的做法被棄用,取而代之的是下圖所示的開關。

switches-switch-switches_spec_03

switches-radio_switches_spec_03_dark

switches-switch-switches_spec_10a

images/components-switches-switch-switches_spec_10b_large_mdpi.png

僅在支持觸屏操作的情況下,對在交互中被完全遮擋的元素使用外部徑向擴張效果。桌面使用的是鼠標,你不需要這個額外的指示。

images/components-switches-switch-mobile-fingertouch_large_mdpi.png

images/components-switches-switch-desktop-fingertouch_large_xhdpi.png

原文:Switches 翻譯:vincent4j 校對:PoppinLp

两码中特期期