在滑塊設(shè)計(jì)中需要注意“做什么”和“不應(yīng)該做什么”呢？本文將來(lái)探討下，enjoy~

價(jià)格范圍滑塊，360度視圖滑塊，時(shí)間線(xiàn)滑塊……

在所有這些例子中，滑塊都很有用，因?yàn)闇p少了用戶(hù)的輸入，更可以推動(dòng)用戶(hù)探索更多選項(xiàng)，從而幫助他們做出明智的決定。

那么，在滑塊設(shè)計(jì)中需要注意“做什么”和“不應(yīng)該做什么”呢？一起來(lái)分析探討一下：

文章大綱：

1. 什么時(shí)候我們需要滑塊？
2. 滑塊組件有哪些類(lèi)型？
3. 哪一些情況并不應(yīng)該采用滑塊？
4. 滑塊設(shè)計(jì)需要考慮的問(wèn)題清單
5. 滑塊設(shè)計(jì)問(wèn)題具體探討
6. 總結(jié)

1. 什么時(shí)候我們需要滑塊？

并不是每個(gè)頁(yè)面都可以從滑塊中受益。但是，如果我們想要設(shè)定幾種選項(xiàng)或幫助用戶(hù)快速限制多個(gè)選項(xiàng)時(shí)，或者用戶(hù)對(duì)于輸入結(jié)果相對(duì)模糊或不準(zhǔn)確時(shí)，滑塊就可以被考慮使用了。

例如：用戶(hù)選擇抵押的首付范圍或者機(jī)場(chǎng)出發(fā)的時(shí)間范圍，在這種情況下用戶(hù)選擇到最后一分的數(shù)額或者選擇到最后一秒的出發(fā)時(shí)間并不是真正需要的。

例如：在探索度假目的地時(shí)，用戶(hù)可能希望通過(guò)他們喜歡體驗(yàn)的活動(dòng)來(lái)篩選他們的選項(xiàng)。在這種情況下，可以使用滑塊來(lái)使其能夠?yàn)楦鞣N活動(dòng)分配權(quán)重，以便最終選擇的選項(xiàng)根據(jù)其興趣精確定制?；蛘咴谔幚淼貓D時(shí)，滑塊可以幫助用戶(hù)限制或擴(kuò)展搜索的地理范圍。

例如：購(gòu)物中的例子：當(dāng)你選擇快遞速度的時(shí)候，可以選擇快遞方式來(lái)查看快遞費(fèi)用。當(dāng)然可以通過(guò)下拉菜單，但是顯然單選按鈕更直觀，選擇項(xiàng)直接暴露給用戶(hù)。這個(gè)時(shí)候滑塊自然就是可以適用的，只要增加對(duì)應(yīng)的價(jià)格提示。另外每個(gè)選擇上方的價(jià)格提示更有針對(duì)性，右滑價(jià)格更高，左滑價(jià)格降低，顯得更清楚。

一般來(lái)說(shuō)，每當(dāng)你想在你的界面上添加一個(gè)“模糊”過(guò)濾器或者指示選項(xiàng)之間的關(guān)系時(shí)，滑塊是一個(gè)值得考慮的選擇。然而，一個(gè)相應(yīng)緩慢，顯得笨重的滑塊比一個(gè)可預(yù)測(cè)的通用按鈕更令人沮喪。要有效，滑塊必須非常容易操作，并且必須快速而持續(xù)地響應(yīng)變化。

2. 滑塊組件有哪些類(lèi)型

2.1 單連續(xù)滑塊

如果滑塊的主要目標(biāo)是從一系列值中選擇一個(gè)值，那么我們可以使用一個(gè)連續(xù)的滑塊。

2.2 單一，離散滑塊

如果連續(xù)滑塊允許客戶(hù)連續(xù)更改滑塊上的值，則離散滑塊僅允許選擇預(yù)定義的值組。

2.3 雙點(diǎn)滑塊（兩個(gè)連續(xù)的滑塊）

過(guò)濾或者劃分某個(gè)區(qū)間

3. 哪一些情況并不應(yīng)該采用滑塊

滑塊組件之間的元素都應(yīng)該存在互動(dòng)的關(guān)聯(lián)關(guān)系。每當(dāng)滑塊從左向右進(jìn)行操作時(shí)，最終值應(yīng)該和前面的值存在關(guān)聯(lián)。就好像音量控制器。往右是增長(zhǎng)，往左數(shù)值減小。

反例1：滑塊并沒(méi)有包含進(jìn)度、線(xiàn)性的關(guān)系

反例2：對(duì)于有限的選項(xiàng)，滑塊不是最佳的

反例3：數(shù)值變化未突出顯示

只要其中一個(gè)條件沒(méi)有得到滿(mǎn)足，這可能是一個(gè)滑塊并不是一個(gè)完美的解決問(wèn)題的方案。但是，如果在您的情況下確實(shí)是有意義的，那么您必須進(jìn)行大量的設(shè)計(jì)考慮才能為您的設(shè)計(jì)找到最佳的解決方案。

4. 滑塊設(shè)計(jì)需要考慮的問(wèn)題清單

• 滑塊是否是這個(gè)問(wèn)題的正確解決方案，或者我們應(yīng)該使用單選按鈕還是復(fù)選框？
• 我們可以為滑塊提供多大的空間，以及如何使它在小屏幕和大屏幕上運(yùn)行良好？
• 我們使用單個(gè)還是雙重滑塊？
• 滑塊應(yīng)該連續(xù)還是離散？
• 我們?nèi)绾卧O(shè)計(jì)滑塊，軌道和標(biāo)簽？
• 我們?nèi)绾芜x擇滑動(dòng)標(biāo)尺：線(xiàn)性還是非線(xiàn)性？
• 我們需要多少滴答點(diǎn)，我們?nèi)绾卧O(shè)計(jì)它們？
• 我們?nèi)绾螛?biāo)記滑條的下邊界和上邊界？
• 如果有的話(huà)，我們使用滑塊的圖標(biāo)是什么？
• 我們?nèi)绾我约霸谀睦镲@示當(dāng)前值？
• 滑塊是否需要精確的輸入（例如輸入域）？如果是，我們?nèi)绾伪硎緮?shù)字輸入是可編輯的？
• 我們是否需要使用經(jīng)常使用的值或值范圍作為預(yù)設(shè)來(lái)將用戶(hù)推向“最佳”選項(xiàng)？
• 我們?nèi)绾沃甘究捎眯砸员苊馑篮?/li>
• 滑塊軌跡應(yīng)該如何隨拇指移動(dòng)而改變？
• 使用雙滑塊，如果用戶(hù)將末端拇指移動(dòng)到左手拇指上，或者反過(guò)來(lái)，會(huì)發(fā)生什么情況？如果用戶(hù)點(diǎn)擊或點(diǎn)擊兩個(gè)拇指之間的區(qū)域會(huì)發(fā)生什么？UI是否應(yīng)該調(diào)整下限或上限？還是應(yīng)該完全禁用這個(gè)動(dòng)作？
• 滑塊上是否有任何值不應(yīng)被接受？
• 我們是否應(yīng)該接受選擇太多或太少的范圍？
• 用戶(hù)是否能夠恢復(fù)以前的滑塊操作狀態(tài)？
• 我們是否應(yīng)該添加動(dòng)畫(huà)或轉(zhuǎn)換到交互？
• 我們有相互依存的滑塊，滑塊的輸入取決于之前的輸入嗎？用戶(hù)是否應(yīng)該能夠“鎖定”一些值？

5. 滑塊設(shè)計(jì)問(wèn)題探討

5.1 滑塊所需要的區(qū)域空間

滑塊組件，雖然只是一個(gè)過(guò)濾選項(xiàng)，不需要太多的空間，但是為了有效且易于操作，滑塊還是需要大量的水平空間。滑塊按鈕必須足夠大，軌道必須足夠?qū)捯员阌邳c(diǎn)擊。

如果滑塊的寬度只有200~300px，用戶(hù)進(jìn)行選擇探索的時(shí)候?qū)⒎浅＠щy。例如谷歌字體大小滑塊，獲取正確的值非常的困難。

對(duì)滑塊組件空間要求有很大影響的一個(gè)重要變量是滑塊上的關(guān)鍵刻度線(xiàn)。如果所需要的關(guān)鍵刻度越多，那么所需要的空間就越大。由于滑塊也必須具有響應(yīng)性，因此這些刻度線(xiàn)之間必須足夠大以至于不需要太高的精度。

那么，多大足夠大，關(guān)鍵刻度線(xiàn)之間水平間距至少65px。滑塊按鈕必須32x32px。那么對(duì)于相應(yīng)布局呢？刻度線(xiàn)之間的間距會(huì)隨著尺寸變化而縮放。所以，還需要在滑塊上設(shè)置最大寬度，同樣設(shè)定最小的間距。一旦確定間距約束，就可以設(shè)置周?chē)慕M件。

5.2 顯示刻度標(biāo)記和當(dāng)前值

假設(shè)大量的刻度線(xiàn)顯示在離軌道非常近的未知，用戶(hù)一旦用戶(hù)，滑動(dòng)按鈕就會(huì)出現(xiàn)遮擋的情況。這個(gè)時(shí)候可以采用垂直的分隔線(xiàn)來(lái)指示滑塊的值與位置之間的聯(lián)系。

5.3 滑塊范圍比例的設(shè)定

滑塊的定位是一回事，但選擇一個(gè)尺度來(lái)準(zhǔn)確的反應(yīng)所選擇的范圍是另外一回事。就好比服裝店有數(shù)百件商品，價(jià)格從50美元到15000美元不等，你怎么設(shè)計(jì)你對(duì)滑塊范圍比例？在軌道中間設(shè)置多少值？

默認(rèn)情況下，我們假設(shè)一個(gè)合適的滑塊范圍比例應(yīng)該是線(xiàn)性的，將整個(gè)范圍分解成一組等距的線(xiàn)段。不過(guò)像上面的例子，軌道中間設(shè)置7500美元，但是這將是非常無(wú)效的，因?yàn)?0%的軌道被用來(lái)控制1%的產(chǎn)品。換句話(huà)說(shuō)大部分將代表過(guò)濾中沒(méi)有變化，小部分代表過(guò)濾中的巨大變化。實(shí)際產(chǎn)品中出現(xiàn)的情況很多。當(dāng)發(fā)生這種情況時(shí)，用戶(hù)將會(huì)面臨很大的壓力。

好的解決案例：使用預(yù)先定義的預(yù)設(shè)，用戶(hù)可以跳轉(zhuǎn)

例子2：帶有直方圖的線(xiàn)性?xún)r(jià)格滑塊可提供更多信息

這種方法不僅可以幫助用戶(hù)導(dǎo)航滑塊上的范圍，也可以減少死胡同（令人沮喪的無(wú)結(jié)果頁(yè)）。

5.4 消除零結(jié)果過(guò)濾

避免零結(jié)果頁(yè)面的策略：

例子1：根據(jù)內(nèi)容分布來(lái)定義刻度值。將整個(gè)范圍分成幾個(gè)部分，每個(gè)部分都有相同數(shù)目的結(jié)果。

例子2：airbnb的直方圖滑塊顯示價(jià)格分布

5.5 視覺(jué)增強(qiáng)指示范圍

提供范圍值，以及視覺(jué)指向

5.6 可視化選擇結(jié)果

在某些場(chǎng)景下，視覺(jué)動(dòng)畫(huà)是一個(gè)不錯(cuò)的主意。

5.7 滑動(dòng)流暢響應(yīng)

如果滑動(dòng)響應(yīng)緩慢，會(huì)顯得很笨重。當(dāng)用戶(hù)與滑塊交互時(shí)，必須確保交互的連續(xù)性。

設(shè)計(jì)師和開(kāi)發(fā)人員希望用戶(hù)能夠抓住滑塊按鈕來(lái)橫向水平滑動(dòng)。，然而并不一定是大多數(shù)用戶(hù)喜歡的交互，用戶(hù)可能選擇點(diǎn)擊來(lái)跳轉(zhuǎn)到軌道上的任何值。這就意味著水平軌道必須輕易的可以被點(diǎn)擊到。

我們也可以放大滑塊按鈕，改變他的顏色，添加一些陰影，甚至改變軌道的顏色。

5.8 精確的內(nèi)編輯，增強(qiáng)滑塊體驗(yàn)

要使用滑塊提供精確輸入的快捷方式，我們可以使用預(yù)定義的預(yù)設(shè)值（頻繁選擇的值或值范圍），也可以使用文本輸入字段回退來(lái)增強(qiáng)滑塊。預(yù)設(shè)值和輸入字段都可以逐步公開(kāi) – 既可以通過(guò)點(diǎn)擊按鈕，也可以通過(guò)點(diǎn)擊滑塊上的當(dāng)前值。

5.9 游標(biāo)可視化反饋，增強(qiáng)滑塊體驗(yàn)

5.10 提供額外的“滑塊”

相互依賴(lài)的滑塊，一個(gè)滑塊的更改可能會(huì)限制后續(xù)滑塊的選項(xiàng)，建議擴(kuò)展滑塊上的“可填充”區(qū)域以指示改變的范圍。

如果一個(gè)滑塊中的值發(fā)生變化，則會(huì)提示其他滑塊向上或向下縮放，我們也可以在一個(gè)滑塊中“鎖定”一個(gè)滑塊，旁邊有一個(gè)掛鎖圖標(biāo)。

總結(jié)

如果你的界面只接受幾個(gè)輸入選項(xiàng)，那么使用滑塊可能是一個(gè)畫(huà)蛇添足的操作。一組單選按鈕，復(fù)選按鈕或預(yù)定義的選項(xiàng)可能會(huì)更好。但是如果對(duì)于用戶(hù)的輸入是鼓勵(lì)探索的機(jī)制，而不是精確，滑塊絕對(duì)是一個(gè)不錯(cuò)的選擇。

與滑塊交互的重要點(diǎn)是快速顯示結(jié)果。這意味著不用強(qiáng)迫用戶(hù)點(diǎn)擊按鈕來(lái)查看結(jié)果，或者等待顯示結(jié)果。反饋應(yīng)該是平滑和連續(xù)的，沒(méi)有明顯的滯后。

按鈕滑塊通常不需要任何特殊的視覺(jué)圖像，但需要適當(dāng)?shù)囊曈X(jué)指示處理，平滑的過(guò)度和動(dòng)畫(huà)可以增強(qiáng)用戶(hù)的參與度?？潭染€(xiàn)不僅可以幫助用戶(hù)定位滑塊，更可以指示可以跳轉(zhuǎn)的離散值。請(qǐng)記住，算法尺度通常比線(xiàn)性尺度更好用。

當(dāng)用戶(hù)在軌道上移動(dòng)滑塊時(shí)，我們可以放大懸停的滑塊，添加一些陰影，改變軌道的顏色。最后，精致的可編輯可以一定程度上增強(qiáng)滑塊體驗(yàn)。

原文作者：Vitaly Friedman

原文地址：https://www.smashingmagazine.com/2017/07/designing-perfect-slider/

譯者：UX筆記本，（微信號(hào)公眾號(hào)：大貓的設(shè)計(jì)本），UX/UI設(shè)計(jì)師，關(guān)注互聯(lián)網(wǎng)設(shè)計(jì)動(dòng)態(tài)，關(guān)注設(shè)計(jì)細(xì)節(jié)，愛(ài)思考，愛(ài)總結(jié)。

本文由 @UX筆記本?翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖由作者提供