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

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

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

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

文章大綱：

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

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

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

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

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

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

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

2. 滑塊組件有哪些類型

2.1 單連續(xù)滑塊

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

2.2 單一，離散滑塊

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

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

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

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

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

反例1：滑塊并沒有包含進度、線性的關(guān)系

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

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

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

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

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

5. 滑塊設(shè)計問題探討

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

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

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

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

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

5.2 顯示刻度標記和當前值

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

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

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

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

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

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

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

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

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

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

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

5.5 視覺增強指示范圍

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

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

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

5.7 滑動流暢響應

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

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

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

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

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

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

5.10 提供額外的“滑塊”

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

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

總結(jié)

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

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

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

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

原文作者：Vitaly Friedman

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

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

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

題圖由作者提供

塊QSlider控件提供一個垂直或者水平的滑動條，滑動條是一個用于控制有界值典型的控件，它允許用戶沿水平或者垂直方向在某一范圍內(nèi)移動滑塊，并將滑塊所在的位置轉(zhuǎn)換為一個合法范圍內(nèi)的整數(shù)值，有時候這中方式比輸入數(shù)字更加自然。

QSlider控件的常用事件類型有如下幾種。

滑塊控件QSlider可以以水平或垂直的方式顯示，只需在構(gòu)造函數(shù)中設(shè)置不同的值即可，Qt.Horizontal表示水平，Qt.Vertical表示垂直。QSlider控件的常用方法如下表所示。

QSlider_TickPosition可選枚舉值如下表所示。

程序清單：slider.py

import sys
from PyQt5.QtWidgets import QApplication, QWidget, QDesktopWidget, QLabel,
  QSlider, QSpinBox, QVBoxLayout
from PyQt5.QtCore import Qt


# 繼承QWidget
class SliderWidget(QWidget):
    info_lbl = None

    def __init__(self):
        super().__init__()
        self.init_ui()

    def init_ui(self):
        # 垂直布局
        v_box = QVBoxLayout()
        self.info_lbl = QLabel("滑塊控件的當前值為:10")
        v_box.addWidget(self.info_lbl)
        # 創(chuàng)建水平方向滑動條
        slider = QSlider(Qt.Horizontal)
        slider.setProperty("id", 1)
        slider.setMinimum(10)  # 設(shè)置最小值
        slider.setMaximum(100)  # 設(shè)置最大值
        slider.setSingleStep(10)  # 步長
        slider.setValue(20)  # 設(shè)置當前值
        slider.setTickInterval(10)  # 設(shè)置刻度間距
        slider.valueChanged.connect(self.valuechange)
        v_box.addWidget(slider)
        self.setLayout(v_box)
        # 調(diào)整窗口大小
        self.resize(600, 200)
        # 窗口居中
        self.center()
        # 窗口標題
        self.setWindowTitle("滑塊的應用")
        # 顯示窗口
        self.show()

    def valuechange(self):
        sender = self.sender()
        self.info_lbl.setText("滑塊控件的當前值為:%d" % sender.value())

    # 實現(xiàn)居中
    def center(self):
        f = self.frameGeometry()
        c = QDesktopWidget().availableGeometry().center()
        f.moveCenter(c)
        self.move(f.topLeft())


if __name__ == "__main__":
    app = QApplication(sys.argv)
    w = SliderWidget()
    sys.exit(app.exec_())

運行程序之后，彈出的窗口如下：

好了，滑塊控件的內(nèi)容就說到這了，關(guān)注我，下一節(jié)更精彩。

碼字不易，你的關(guān)注和轉(zhuǎn)發(fā)是對我最大的鼓勵，謝謝！

一個當了10年技術(shù)總監(jiān)的老家伙，分享多年的編程經(jīng)驗。想學編程的朋友，關(guān)注我，你就賺到了。我正在分享Python、前端、Java和App方面的干貨了。趕緊來圍觀啊!!!

#python#