開關(guān)

開關(guān)允許用戶選擇選擇項(xiàng)。一共有三種類型的開關(guān)：復(fù)選框、單選按鈕和 on/off 開關(guān)。

注釋：下面示例中所示的圖形環(huán)代表一個(gè)動畫，并不是實(shí)際按鈕的外觀。

復(fù)選框

復(fù)選框允許用戶從一組選項(xiàng)中選擇多個(gè)。

如果需要在一個(gè)列表中出現(xiàn)多個(gè) on/off 選項(xiàng)，復(fù)選框是一種節(jié)省空間的好方式。

如果只有一個(gè) on/off 選擇，不要使用復(fù)選框，而應(yīng)該替換成 on/off 開關(guān)。

通過主動將復(fù)選框換成勾選標(biāo)記，可以使去掉勾選的操作變得更加明確且令人滿意。

復(fù)選框通過動畫來表達(dá)聚焦和按下的狀態(tài)。

復(fù)選框動作

http://wiki.jikexueyuan.com/project/material-design/images/components-switches-checkbox-switches_07a_large_mdpi.png" alt="checkbox-switches_07a" />

http://wiki.jikexueyuan.com/project/material-design/images/components-switches-checkbox-switches_07b_large_mdpi.png" alt="checkbox-switches_07b" />

單選按鈕

單選按鈕只允許用戶從一組選項(xiàng)中選擇一個(gè)。如果你認(rèn)為用戶需要看到所有可用的選項(xiàng)并排顯示，那么請為排他選擇使用單選按鈕。

否則，考慮相比顯示全部選擇更節(jié)省空間的下拉。

單選按鈕通過動畫來表達(dá)聚焦和按下的狀態(tài)。

單選框動作

http://wiki.jikexueyuan.com/project/material-design/images/components-switches-radio_02_large_mdpi.png" alt="switches-radio_02" />

http://wiki.jikexueyuan.com/project/material-design/images/components-switches-radiobutton-radio_spec_12a_large_mdpi.png" alt="switches-radiobutton-radio_spec_12a" />

http://wiki.jikexueyuan.com/project/material-design/images/components-switches-radiobutton-radio_spec_12b_large_mdpi.png" alt="switches-radiobutton-radio_spec_12a" />

開關(guān)

On/off 開關(guān)切換單一設(shè)置選擇的狀態(tài)。開關(guān)控制的選項(xiàng)以及它的狀態(tài)，應(yīng)該明確的展示出來并且與內(nèi)部的標(biāo)簽相一致。開關(guān)應(yīng)該單選按鈕呈現(xiàn)相同的視覺特性。

開關(guān)通過動畫來傳達(dá)被聚焦和被按下的狀態(tài)。

開關(guān)滑塊上標(biāo)明 "on" 和 "off" 的做法被棄用，取而代之的是下圖所示的開關(guān)。

http://wiki.jikexueyuan.com/project/material-design/images/components-switches-switch-switches_spec_03_large_mdpi.png" alt="switches-switch-switches_spec_03" />

http://wiki.jikexueyuan.com/project/material-design/images/components-switches-radio_switches_spec_03_dark_large_mdpi.png" alt="switches-radio_switches_spec_03_dark" />

http://wiki.jikexueyuan.com/project/material-design/images/components-switches-switch-switches_spec_10a_large_mdpi.png" alt="switches-switch-switches_spec_10a" />

http://wiki.jikexueyuan.com/project/material-design/images/components-switches-switch-switches_spec_10b_large_mdpi.png" alt="../images/components-switches-switch-switches_spec_10b_large_mdpi.png" />

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

http://wiki.jikexueyuan.com/project/material-design/images/components-switches-switch-mobile-fingertouch_large_mdpi.png" alt="../images/components-switches-switch-mobile-fingertouch_large_mdpi.png" />

http://wiki.jikexueyuan.com/project/material-design/images/components-switches-switch-desktop-fingertouch_large_mdpi.png" alt="../images/components-switches-switch-desktop-fingertouch_large_xhdpi.png" />

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