在滑塊設計中需要注意“做什么”和“不應該做什么”呢？本文將來探討下，enjoy~

價格范圍滑塊，360度視圖滑塊，時間線滑塊……

在所有這些例子中，滑塊都很有用，因為減少了用戶的輸入，更可以推動用戶探索更多選項，從而幫助他們做出明智的決定。

那么，在滑塊設計中需要注意“做什么”和“不應該做什么”呢？一起來分析探討一下：

文章大綱：

1. 什么時候我們需要滑塊？
2. 滑塊組件有哪些類型？
3. 哪一些情況并不應該采用滑塊？
4. 滑塊設計需要考慮的問題清單
5. 滑塊設計問題具體探討
6. 總結

1. 什么時候我們需要滑塊？

并不是每個頁面都可以從滑塊中受益。但是，如果我們想要設定幾種選項或幫助用戶快速限制多個選項時，或者用戶對于輸入結果相對模糊或不準確時，滑塊就可以被考慮使用了。

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

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

例如：購物中的例子：當你選擇快遞速度的時候，可以選擇快遞方式來查看快遞費用。當然可以通過下拉菜單，但是顯然單選按鈕更直觀，選擇項直接暴露給用戶。這個時候滑塊自然就是可以適用的，只要增加對應的價格提示。另外每個選擇上方的價格提示更有針對性，右滑價格更高，左滑價格降低，顯得更清楚。

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

2. 滑塊組件有哪些類型

2.1 單連續(xù)滑塊

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

2.2 單一，離散滑塊

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

2.3 雙點滑塊（兩個連續(xù)的滑塊）

過濾或者劃分某個區(qū)間

3. 哪一些情況并不應該采用滑塊

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

反例1：滑塊并沒有包含進度、線性的關系

反例2：對于有限的選項，滑塊不是最佳的

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

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

4. 滑塊設計需要考慮的問題清單

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

5. 滑塊設計問題探討

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

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

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

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

那么，多大足夠大，關鍵刻度線之間水平間距至少65px?；瑝K按鈕必須32x32px。那么對于相應布局呢？刻度線之間的間距會隨著尺寸變化而縮放。所以，還需要在滑塊上設置最大寬度，同樣設定最小的間距。一旦確定間距約束，就可以設置周圍的組件。

5.2 顯示刻度標記和當前值

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

5.3 滑塊范圍比例的設定

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

默認情況下，我們假設一個合適的滑塊范圍比例應該是線性的，將整個范圍分解成一組等距的線段。不過像上面的例子，軌道中間設置7500美元，但是這將是非常無效的，因為50%的軌道被用來控制1%的產(chǎn)品。換句話說大部分將代表過濾中沒有變化，小部分代表過濾中的巨大變化。實際產(chǎn)品中出現(xiàn)的情況很多。當發(fā)生這種情況時，用戶將會面臨很大的壓力。

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

例子2：帶有直方圖的線性價格滑塊可提供更多信息

這種方法不僅可以幫助用戶導航滑塊上的范圍，也可以減少死胡同（令人沮喪的無結果頁）。

5.4 消除零結果過濾

避免零結果頁面的策略：

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

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

5.5 視覺增強指示范圍

提供范圍值，以及視覺指向

5.6 可視化選擇結果

在某些場景下，視覺動畫是一個不錯的主意。

5.7 滑動流暢響應

如果滑動響應緩慢，會顯得很笨重。當用戶與滑塊交互時，必須確保交互的連續(xù)性。

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

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

5.8 精確的內(nèi)編輯，增強滑塊體驗

要使用滑塊提供精確輸入的快捷方式，我們可以使用預定義的預設值（頻繁選擇的值或值范圍），也可以使用文本輸入字段回退來增強滑塊。預設值和輸入字段都可以逐步公開 – 既可以通過點擊按鈕，也可以通過點擊滑塊上的當前值。

5.9 游標可視化反饋，增強滑塊體驗

5.10 提供額外的“滑塊”

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

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

總結

如果你的界面只接受幾個輸入選項，那么使用滑塊可能是一個畫蛇添足的操作。一組單選按鈕，復選按鈕或預定義的選項可能會更好。但是如果對于用戶的輸入是鼓勵探索的機制，而不是精確，滑塊絕對是一個不錯的選擇。

與滑塊交互的重要點是快速顯示結果。這意味著不用強迫用戶點擊按鈕來查看結果，或者等待顯示結果。反饋應該是平滑和連續(xù)的，沒有明顯的滯后。

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

當用戶在軌道上移動滑塊時，我們可以放大懸停的滑塊，添加一些陰影，改變軌道的顏色。最后，精致的可編輯可以一定程度上增強滑塊體驗。

原文作者：Vitaly Friedman

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

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

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

題圖由作者提供