滑塊控件是調(diào)整音量和亮度等設(shè)置的首選解決方案。它們立即生效，并允許用戶通過(guò)移動(dòng)手柄來(lái)微調(diào)值?；瑝K可以很好地達(dá)到目的，尤其是在精度不是很重要的情況下。

但是，這些控件可能會(huì)令人困惑，難以抓取并設(shè)置為精確值。另外，從可訪問(wèn)性的角度來(lái)看，操作它們可能非常具有挑戰(zhàn)性。

了解如何創(chuàng)建有效的控件有助于設(shè)計(jì)師探索各種解決方案，并遠(yuǎn)離可預(yù)測(cè)和無(wú)聊的按鈕。

+

追蹤

滑塊允許用戶通過(guò)沿軌道拖動(dòng)拇指來(lái)設(shè)置一個(gè)值或一個(gè)值范圍。就像鐵軌引導(dǎo)火車一樣，滑塊軌道允許用戶沿著代表所有可用值的水平路徑移動(dòng)。

拇指

拇指是一個(gè)手柄，用戶可以沿著軌道來(lái)回拖動(dòng)以更改滑塊值。確保拇指的觸摸區(qū)域在移動(dòng)設(shè)備上足夠大，并且不會(huì)給用戶帶來(lái)困難，尤其是對(duì)于有運(yùn)動(dòng)障礙的用戶。

刻度

刻度 是顯示軌道上預(yù)定義位置的微小筆劃或點(diǎn)。 有時(shí)，粗略估計(jì)就足夠了（例如，當(dāng)您計(jì)劃度假、尋找住宿和設(shè)定大致價(jià)格時(shí)）。

當(dāng)精確值很重要時(shí)（例如，選擇多個(gè)房間或客人時(shí)），移動(dòng)滑塊時(shí)可以使用刻度作為可靠的參考點(diǎn)。

當(dāng)前值

value元素有  多種形狀和大小，其作用是根據(jù)位置顯示當(dāng)前值。例如，當(dāng)您更改揚(yáng)聲器音量時(shí)，您可以通過(guò)從左向右移動(dòng)拇指來(lái)增加音量，值標(biāo)簽會(huì)顯示數(shù)字。

對(duì)于觸摸屏，請(qǐng)確保在操作控件時(shí)該值不會(huì)被用戶的手指遮擋。將值標(biāo)簽放在所涉及的兩個(gè)拇指旁邊或上方：用戶和滑塊。

填寫金額

對(duì)于從左到右的語(yǔ)言，軌道從左開始填充，沿值最高的右端增長(zhǎng)。

對(duì)軌道的填充和未填充部分使用對(duì)比色是個(gè)好主意。

最小值/最大值

對(duì)于從左到右的語(yǔ)言，最小值和最大值分別放在滑塊的左端和右端。對(duì)于從右到左的語(yǔ)言，它反向工作。

當(dāng)需要精確到十分之一點(diǎn)的精確值時(shí)，請(qǐng)避免使用滑塊——您不想將選擇正確數(shù)字的簡(jiǎn)單過(guò)程變成精細(xì)運(yùn)動(dòng)技能挑戰(zhàn)。

浮動(dòng)值

浮動(dòng)值通常位于拇指上方或旁邊，  并在您沿軌道滾動(dòng)時(shí)動(dòng)態(tài)更新。這樣，如果他們?cè)谝苿?dòng)設(shè)備上與之交互，它就不會(huì)被鼠標(biāo)指針或用戶的手指遮擋。

輸入值

一些用戶可能仍然更喜歡手動(dòng)輸入，因?yàn)樗鼈冊(cè)试S他們?cè)O(shè)置更精確的滑塊位置。要在滑塊中適應(yīng)這種情況，請(qǐng)使用一旦用戶輸入值就會(huì)自動(dòng)更改拇指位置的輸入。

離散滑塊

離散滑塊在按下或單擊拇指時(shí)顯示值標(biāo)簽，允許用戶輸入精確值。您可以添加刻度線以鼓勵(lì)用戶通過(guò)捕捉拇指來(lái)探索各種離散位置。

確保所有用戶都可以訪問(wèn)滑塊，并且他們可以通過(guò)單擊 Tab 并使用鍵盤箭頭移動(dòng)滑塊來(lái)激活拇指。

連續(xù)滑塊

連續(xù)滑塊，也稱為線性滑塊，不需要特定的值，也沒(méi)有拇指上方的標(biāo)簽。用戶直觀地放置拇指。

當(dāng)精確值不重要時(shí)，此類滑塊更適合用戶隨心所欲地執(zhí)行的操作，例如調(diào)整音樂(lè)應(yīng)用程序的音量。

雙滑塊

與帶有一個(gè)拇指的普通滑塊相比，雙滑塊有助于定義范圍，這對(duì)于確定航班的價(jià)格或持續(xù)時(shí)間非常有用。要?jiǎng)?chuàng)建雙滑塊，請(qǐng)?zhí)砑恿硪粋€(gè)拇指以沿軌道滑動(dòng)，以便用戶可以定義整體范圍。