編輯導(dǎo)語：在交互設(shè)計時，需要結(jié)合不同的用戶需求去運用不同合適的組件?；瑒虞斎霔l作為一個輸入數(shù)值的組件，卻鮮少給用到。這篇文章里，作者將會詳細介紹“滑動輸入條”以及設(shè)計注意點。

當新手設(shè)計師想幫助用戶完成選擇任務(wù)時，往往第一反應(yīng)會往「radio button」與「check box」的方向去思考交互設(shè)計。

此時就會有一個冷門被人遺忘的交互控件「slider滑動輸入條」在角落里努力吶喊著：“我也很乖很好用啊，設(shè)計師可否考慮一下讓我也出鏡一下??？”那么今天我們就讓它當一回主角，看看「滑動輸入條」到底是怎么用的。

一、有序數(shù)據(jù)與無序數(shù)據(jù)

在進入「滑動輸入條」介紹之前我們先來介紹兩個概念「有序數(shù)據(jù)」與「無序數(shù)據(jù)」。

什么叫有序數(shù)據(jù)：符合某一種邏輯，且此邏輯具有普遍共識性的數(shù)據(jù)可以稱作為「有序數(shù)據(jù)」，它的維度可以是“大小”、“數(shù)值”、“等級”、“時間”等等。

什么叫無序數(shù)據(jù)：不符合大眾認知邏輯的數(shù)據(jù)可以稱作為「無序數(shù)據(jù)」。

杠精預(yù)防提示：這里小編提出的概念只是易于讓大家理解「滑動輸入條」，并不是邏輯學(xué)、數(shù)學(xué)或等一些領(lǐng)域?qū)τ凇赣行驍?shù)據(jù)」，「無序數(shù)據(jù)」的定義概念，杠精請高抬貴手。

二、「滑動輸入條」的定義

1. 「滑動輸入條」的物理隱喻

在老式的汽車控制臺當中存在很多滑動輸入物理信息的控制設(shè)備，比如空調(diào)溫度，汽車音響音量。它們可以很好地把物理世界信息轉(zhuǎn)換到汽車控制系統(tǒng)中，并且這種控制形式反饋及時，不占用太多空間、操作控制極其簡單。

2. 「滑動輸入條」的交互定義

以水平或垂直軌道的形式，或者以圓形撥動的形式出現(xiàn)，用戶從一系列「有序數(shù)據(jù)」范圍內(nèi)進行顆粒度選擇的交互形式統(tǒng)稱為「滑動輸入條」。

三、「滑動輸入條」的基本結(jié)構(gòu)

這里引用下MATERIAL DESIGN對于「滑動輸入條」的結(jié)構(gòu)示意圖：

1. 追蹤桿（Track）

顯示可供用戶選擇的范圍。一般情況下最小的值出現(xiàn)在最左端，最大的值出現(xiàn)在最右端。同時對于特殊情況下比如阿拉伯文化下，這種方向是相反的。

2. 滑塊（Thumb）

滑塊，可以沿著軌道移動，顯示其位置的選定值。

3. 標簽值（ Value label）（可選）

滑塊所處位置的實際刻度數(shù)值。

4. 刻度（Tick mark）

刻度標記著用戶可以通過移動滑塊所能到達的預(yù)定值。

這里是基于MATERIAL DESIGN給出的「slider」基本結(jié)構(gòu)，設(shè)計師平常使用該組件的時候完全可以根據(jù)自己的需求進行自定義設(shè)計。

四、「滑動輸入條」的交互狀態(tài)

對于「滑動輸入條」組件的交互狀態(tài)，就谷歌Material Design而言他給出五種交互狀態(tài)的定義，分別是：啟用、禁用、懸停、聚焦和按壓狀態(tài)。

五、「滑動輸入條」的應(yīng)用形式

1. 單滑塊

1. 值是單選且為連續(xù)數(shù)據(jù)時使用自由拖動的滑桿，其允許用戶在一個主觀范圍內(nèi)選擇一個值。
2. 值是單選且為離散數(shù)據(jù)時使用帶有刻度的滑桿，其可以調(diào)整到一個特定的刻度值上。

2. 多滑塊

當需要選定某一個區(qū)間（比如金額上下限），或者多個區(qū)間（比如ps里面漸變的調(diào)色桿）的時候可以考慮使用多滑塊組件。

3. 與步進器配合使用

當「滑動輸入條」的數(shù)據(jù)范圍廣泛難以精確定位時，用戶就希望用「步進器」配合「滑動輸入條」共同幫助他們完成任務(wù)。同時「步進器」獨有的增加按鈕以及減少按鈕可以讓用戶更方便的取值，并對其進行高精度的校準。

六、「滑動輸入條」的設(shè)計注意點

跟「開關(guān)」組件一樣在交互設(shè)計當中都是屬于小玩意兒，但是小玩意兒有小道道兒，你品你仔細品。

1. 巧用圖標釋意

在滑桿左右兩側(cè)設(shè)計相對應(yīng)含義的圖標是一種不錯的設(shè)計策略，這種做法能讓用戶提前感知有序值的范圍以及極限值的情況，在控制音量、字號大小、明度調(diào)節(jié)等一些場景比較常見。

2. 輸入即生效

「滑動輸入條」與「開關(guān)」一樣無論是從物理隱喻上類比，還是從用戶對該組件慣有心智預(yù)期上理解，都是希望它是輸入即生效的，從某種意義上來說它算是一種數(shù)據(jù)可視化設(shè)計。

3. 注意熱區(qū)范圍

「滑動輸入條」在PC端情況中由于是用鼠標去與它進行交互，我們可以將滑塊的操作范圍做的比較小。但是如果在移動端設(shè)備上我們對于它的操作熱區(qū)就要深思熟慮了，如果還是延續(xù)pc端的操作熱區(qū)會讓用戶十分抓狂，適當擴大交互區(qū)域不失為一個優(yōu)雅的設(shè)計。

4. 支持鍵盤操作

「滑動輸入條」在PC端產(chǎn)品使用時，如果沒有配合「步進器」一起使用的話，那么設(shè)計的時候就要考慮讓用戶在鍵盤上需要使用“??”“??”按鈕來對其進行小范圍的調(diào)整。畢竟用鼠標控制「滑動輸入條」是一件很粗糙的事情，對一些需要精度較高場景就很困難了。

5. 支持點擊跳轉(zhuǎn)

當用戶對于輸入「滑動輸入條」的值有大致預(yù)判，并且對結(jié)果值精度要求不高，那么很大意義上用戶就需要一個點擊跳轉(zhuǎn)的交互操作了。這樣可以讓用戶快速的找到自己所需要的值，快速而高效。

6. 適當使用情感化設(shè)計

對于一些C端產(chǎn)品而言，對「滑動輸入條」進行生動活潑的情感化設(shè)計可以很好的降低用戶對于輸入值的理解成本，并且感知也更加直觀立體。

7. 考慮不同文化場景

在我們的文化場景中一般的邏輯順序都是范圍的最小值顯示在左側(cè)，最大值顯示在右側(cè)，但是碰到一些特殊的場景這個設(shè)計方法就需要深思熟慮，比如在阿拉伯文化當中與我們恰恰相反，值的位置應(yīng)該顛倒，最大的值放在左邊，最小的放在右邊。

七、文末總結(jié)

雖然「滑動輸入條」可講的點不多小編也是絞盡腦汁才總結(jié)出幾點，但是并不妨礙它是一種出色的交互控件，只是在平常的設(shè)計工作當中總是被人們習慣性的遺忘。

但它們也不是萬能的工具。當用戶想要找到精度要求相對不怎么高的值時，它們很好用。但即使有「步進器」配合，對于需要輸入高精度信息的場景時表現(xiàn)也不太好。所以在設(shè)計「滑動輸入條」時，衡量交互成本并確保用戶可以第一時間從一系列有序數(shù)據(jù)當中快速找到想要的值是非?？简炘O(shè)計功底的。

作者：月亮與六便士；公眾號：月亮體驗設(shè)計坊

本文由 @月亮與六便士 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來Unsplash，基于CC0協(xié)議。