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

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

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

一、有序數據與無序數據

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

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

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

杠精預防提示：這里小編提出的概念只是易于讓大家理解「滑動輸入條」，并不是邏輯學、數學或等一些領域對于「有序數據」，「無序數據」的定義概念，杠精請高抬貴手。

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

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

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

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

以水平或垂直軌道的形式，或者以圓形撥動的形式出現，用戶從一系列「有序數據」范圍內進行顆粒度選擇的交互形式統稱為「滑動輸入條」。

三、「滑動輸入條」的基本結構

這里引用下MATERIAL DESIGN對于「滑動輸入條」的結構示意圖：

1. 追蹤桿（Track）

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

2. 滑塊（Thumb）

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

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

滑塊所處位置的實際刻度數值。

4. 刻度（Tick mark）

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

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

四、「滑動輸入條」的交互狀態

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

五、「滑動輸入條」的應用形式

1. 單滑塊

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

2. 多滑塊

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

3. 與步進器配合使用

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

六、「滑動輸入條」的設計注意點

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

1. 巧用圖標釋意

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

2. 輸入即生效

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

3. 注意熱區范圍

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

4. 支持鍵盤操作

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

5. 支持點擊跳轉

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

6. 適當使用情感化設計

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

7. 考慮不同文化場景

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

七、文末總結

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

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

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

本文由 @月亮與六便士 原創發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來Unsplash，基于CC0協議。