開關(guān)允許用戶選擇選擇項。一共有三種類型的開關(guān):復(fù)選框、單選按鈕和 on/off 開關(guān)。
注釋:下面示例中所示的圖形環(huán)代表一個動畫,并不是實際按鈕的外觀。
復(fù)選框允許用戶從一組選項中選擇多個。
如果需要在一個列表中出現(xiàn)多個 on/off 選項,復(fù)選框是一種節(jié)省空間的好方式。
如果只有一個 on/off 選擇,不要使用復(fù)選框,而應(yīng)該替換成 on/off 開關(guān)。
通過主動將復(fù)選框換成勾選標記,可以使去掉勾選的操作變得更加明確且令人滿意。
復(fù)選框通過動畫來表達聚焦和按下的狀態(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" />
單選按鈕只允許用戶從一組選項中選擇一個。如果你認為用戶需要看到所有可用的選項并排顯示,那么請為排他選擇使用單選按鈕。
否則,考慮相比顯示全部選擇更節(jié)省空間的下拉。
單選按鈕通過動畫來表達聚焦和按下的狀態(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" />
On/off 開關(guān)切換單一設(shè)置選擇的狀態(tài)。開關(guān)控制的選項以及它的狀態(tài),應(yīng)該明確的展示出來并且與內(nèi)部的標簽相一致。開關(guān)應(yīng)該單選按鈕呈現(xiàn)相同的視覺特性。
開關(guān)通過動畫來傳達被聚焦和被按下的狀態(tài)。
開關(guān)滑塊上標明 "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" />
僅在支持觸屏操作的情況下,對在交互中被完全遮擋的元素使用外部徑向擴張效果。桌面使用的是鼠標,你不需要這個額外的指示。
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" />