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

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

此時(shí)就會(huì)有一個(gè)冷門被人遺忘的交互控件「slider滑動(dòng)輸入條」在角落里努力吶喊著：“我也很乖很好用啊，設(shè)計(jì)師可否考慮一下讓我也出鏡一下?。俊蹦敲唇裉煳覀兙妥屗?dāng)一回主角，看看「滑動(dòng)輸入條」到底是怎么用的。

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

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

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

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

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

二、「滑動(dòng)輸入條」的定義

1. 「滑動(dòng)輸入條」的物理隱喻

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

2. 「滑動(dòng)輸入條」的交互定義

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

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

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

1. 追蹤桿（Track）

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

2. 滑塊（Thumb）

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

3. 標(biāo)簽值（ Value label）（可選）

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

4. 刻度（Tick mark）

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

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

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

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

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

1. 單滑塊

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

2. 多滑塊

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

3. 與步進(jìn)器配合使用

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

六、「滑動(dòng)輸入條」的設(shè)計(jì)注意點(diǎn)

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

1. 巧用圖標(biāo)釋意

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

2. 輸入即生效

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

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

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

4. 支持鍵盤操作

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

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

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

6. 適當(dāng)使用情感化設(shè)計(jì)

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

7. 考慮不同文化場景

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

七、文末總結(jié)

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

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

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

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

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