數值輸入控制元件：用滑塊、旋鈕、矩陣控制元件平衡探索度和精度
輸入控制元件作為最常用的介面設計控制元件之一，包含了哪些型別以及各型別與特徵以及使用關鍵點有哪些呢？一起來了解下。
文章大綱：
- 離散型與連續型輸入控制元件
- 便於使用者探索更多選項的UI控制元件： 線性滑塊 / 旋鈕控制元件 / 二維曲線控制元件
- 同時支援粗略和精確輸入值調整的聯合控制元件： 聯合控制元件的鍵盤聚焦 / 控制元件的預設預設值
- 小結
數值引數是物件屬性之一，其值為數字。
具體例子包括：電商網站上的商品價格、數量，以及照片編輯應用中的照片透明度等。
常用的數值引數互動控制元件包括：文字輸入框、滑塊、旋鈕控制元件、可編輯的二維曲線控制元件以及能對預先給定的預設值進行遞增或遞減的步進器等。
不同控制元件適用於不同的互動場景來傳達編輯數值資訊。
多數情況下，控制元件的型別和引數值之間存在一定的自然對映關係。比如旋鈕控制元件，可以自然地跟角度引數相對應。
這些UI控制元件傳達編輯數值資訊的同時，也遵循了「尼爾森十大可用性原則」之一 ——環境貼切原則：匹配系統與真實世界
許多創意類或資料分析類的應用和網站均包含了較長的表單，允許使用者對特定屬性進行詳細調整。控制元件在實現連續複雜的數值變化的同時，需要建立以下兩種體驗上的平衡：
- 探索度： 便於使用者任意去探索整個數值範圍內的控制元件選項
- 精確度： 允許使用者精確地選取特定值
離散型與連續型輸入控制元件
輸入控制元件的兩種主要型別：
- 離散型控制元件： 提供有限的步進器數值或可選項。常見的例子包括開關、以及帶有一些預選項的單選和複選框
- 連續型控制元件： 涉及一定範圍（通常在最大值和最小值之間）的數值輸入。滑塊和旋鈕均屬於連續型控制元件。（需要注意的是，理論上連續型的控制元件可以取範圍內的任意值）。
嚴格來說，範圍值從0到100的滑塊是一個離散型控制元件，因為它的值並不是連續的。而實際使用當中，如果一個滑塊可選的數值範圍夠大而且不僅限於有限的幾個固定選項值的話，可以被認為是連續型控制元件，從使用者的實際體驗上來看它也是連續的。
Mac 版本 Kindle 包含了離散型及連續型兩種控制元件：
- 字型大小設定滑條屬於離散型控制元件：允許設定的字型大小僅限於12個預先設定的標在隱約可見的刻度線上的數值。即使使用者想要把滑塊移動到給定刻度線數值之間，滑塊也會自動移動到臨近的可用數值刻度線處。
- 色彩模式設定的單選按鈕同樣屬於離散型控制元件：僅提供白、黑、深褐色三種供選擇的色彩模式
- 單行顯示字數和螢幕亮度調節滑塊均屬於連續型控制元件：在滑塊範圍內可選任意值
便於使用者探索更多選項的UI控制元件
1. 線性滑塊
線性滑塊是一種有用的控制元件，當對應值屬於給定的範圍內（明確的最大值和最小值），並且數值的精確度對使用者來說沒那麼重要時。
根據 Accot-Zhai 提出的“引導法則”（Steering Law），在滑塊上選定一個精確值並不容易。
所謂“引導法則”，是由人機互動原則之一的費茨定律推導而來。
引導法則：使用者滑動二維路徑上的滑塊時所需的時間受路徑的長度和寬度影響。簡單地說，路徑越寬或長度越短，則滑塊移動速度越快。大多數的滑塊寬度較窄，使得使用者很難選中相對精確值。
線性滑塊的高效性在於：使用者在滑動滑塊的過程中可以實時預覽效果。一旦使用者的操作和實際效果存在一定延遲，線性滑塊可能就不是個合適的選擇。（根據標準響應時間原則，延遲的時間最多不應超過0.1s）
如果是頁面顯示結果比較費時的情況下，滑塊同樣不是個很好的選擇。
可選擇諸如：實時渲染視訊效果，龐大的資料集合的篩選控制元件（e.g.價格範圍的篩選）等等……
IOS系統螢幕亮度滑塊並不是用於選定一個準確的亮度值，而是獲取一個相近的、類似的亮度值。
通常來說，使用者移動滑塊僅僅是為了讓螢幕比現有的更亮或更暗些。
這種控制元件的易用性關鍵在於——系統是否能夠在使用者滑動滑塊的同時通過改變螢幕亮度來給予即時反饋。
一旦使用者的操作和它產生的實際螢幕亮度效果存在較大延遲，使用者也就無法在滑塊上準確地選定合適的亮度值。
滑塊控制元件的其中一種變體是：具有兩個在可選值範圍內移動的滑塊。
這種滑塊變體常用於網頁介面的篩選，使用者可以設定最小最大價格，航班的起始和結束時間等。
和其他型別的滑塊類似，雙滑塊控制元件選取準確值比較困難，因此這種控制元件僅適用於少數情況。
雙滑塊與直方圖之類的圖表結合使用時，可以確保選擇的範圍值可實際匹配到對應的內容或選項，從而避免無搜尋結果的情況的發生。
Kayak 網站（提供機票、酒店服務的旅遊網站）的一大特徵就是提供範圍選擇滑塊來篩選航班起飛時間段。
雖然精確的起飛時間如12:15pm比較難選中，但航班起飛時間與對應費用圖表的搭配使用，使得使用者在平衡時間和費用後作出較優選擇變為可能。
2. 旋鈕控制元件
旋鈕控制元件或其他使用者需要旋轉的控制元件自然地代表了平移（音訊工程師可以在混合音訊的時候調節音訊的左右聲道）之類的引數。
然而，使用常用的滑鼠、觸控板等輸入裝置去操作旋鈕有一定的難度，在旋轉功能上不具備較好的功能可見性。
鑑於滑鼠之類的線性輸入裝置執行旋轉操作比較困難，一些設計中會賦予旋鈕一種隱式的線性拖動操作。使用者可以任意通過點選、上下或垂直拖動來調整數值大小。
但這種線性拖動操作往往是意料之外的，通常不作任何提示，難以被使用者發現。
另外，如果應用不當，會使那些試圖通過滑鼠轉圈去模仿旋鈕旋轉的人失去自主控制權。
GarageBand (一款數碼音樂創作軟體) 為使用者提供多個旋鈕，通過點選或垂直拖動進行旋轉。
該設計彌補了不能很好掌控旋轉的裝置（滑鼠等）的缺陷，但是不容易被發現，並且與使用者嘗試移動游標轉圈來轉動旋鈕的意圖相違背。
這個例子裡，旋鈕控制元件的靈感來源於過去的音訊工程師所使用的旋鈕，是擬物設計的不恰當應用例項之一。
既然它的引數值並不能很好地對映到一個圈內，水平的滑塊可能更適用於該引數。
Adobe 影象管理器 Lightroom 的設定面板針對數值引數使用了多種輸入控制元件，其中包括了滑塊和旋鈕。
儘管每個控制元件都代表連續的數值，他們也反映了一些重要的額外的關於這些被修改資料的資訊。
其中包括：用旋鈕來代表物體周邊陰影角度的角度控制元件；包含最小和最大值範圍值的滑塊（e.g.0% – 100%透明度滑塊）。
3. 二維曲線控制元件
二維曲線輸入控制元件是一種通過調整一個複雜曲線來同時修改多個相關引數的專業控制元件。
通常情況下與之互動方式是，通過在已有的直線或曲線上新增一個節點。
一旦添加了新的節點，並且將節點拖曳至新位置時，系統會在兩個節點之間繪製出一條新的曲線。
這種控制元件在以下情況下非常實用：有兩個相關聯、互相牽制、會被同時修改的引數（e.g.影象視訊編輯應用裡的亮度和RGB曲線）或需要通過二維空間來描述物體的位置和路徑時（e.g. 電影的環繞聲）。
GIMP（GNU影象處理程式）用二維曲線控制元件來同時控制多個引數，否則可能需要多個滑塊才能實現。
上述例子中，X 軸 Y 軸代表不同引數，其中 X 軸（從暗到亮）對應輸入，Y 軸對應輸出。曲線越接近於水平，圖片的整體色調範圍越小。
如果這些數值用滑塊來表示並進行調節，可能需要多對控制元件來實現，每個對應使用者需要調整的引數值。
使用二維網格的情況下，使用者簡單地通過點選在線上新增任意位置節點，將節點拖曳至新的座標處。
這類設計使得使用者可以通過一些小的調整來完成複雜曲線的建立。
同時支援粗略和精確輸入值調整的聯合控制元件
實現精確值輸入最簡單的一種方式是使用輸入框，使用者可以輸入該精確值。
然而，這種解決方案提供精確輸入的同時，不支援使用者高效地探索引數值範圍。
輸入一個提前已知的值比較簡單，但在你不知道要輸入什麼值的情況下，如果讓你不停地隨機輸入一個看起來像樣的顏色值，整個過程是冗長乏味的。
即使額外提供增減顏色值的步進器按鈕。有些文字框甚至不會顯示可輸入值的範圍。比如，RGB 顏色值輸入框，對於新手使用者來說 RGB 顏色值的範圍是0-255就不是那麼直觀。
Microosoft Ofiice 通過在輸入框旁新增上下箭頭按鈕的步進器，來快速地增減數值。
上述輸入框問題的一個典型的解決方案是，使用兩個互相獨立而又相關聯的控制元件來對同個引數進行或粗略或精準的數值調整。
所謂聯合控制元件是指兩種（或多種）調整同個數值的控制元件組合。
一般來說，連續型控制元件，如：滑塊，用於粗略的輸入，不斷探索範圍內的數值從而找出所需值的大致臨近值。
之後，輸入框作為精確控制元件用來確定具體的數值。精確控制元件也有助於那些已經知道所需具體數值的超級使用者。
聯合控制元件的設計不僅支援輸入值的精細調整，也能直接顯示出當前狀態下的引數值，告知使用者與其期望輸出效果相關聯的值是多少。
一個關鍵點：由於這兩個控制元件持續關聯，兩者展示同一值時調整其中一個，另一個控制元件值應隨之立即（通常指0.1s之內）發生變化。
1. 聯合控制元件的鍵盤聚焦
為了使聯合控制元件有更好的使用體驗，使用者調整滑塊時，鍵盤的聚焦應移動至輸入框。
這樣一來，使用者設定粗略滑塊值後能輕鬆在文字框進行輸入，而無需點選文字框。這個設計有助於讓尋的（即移動手從滑鼠到鍵盤或鍵盤到滑鼠的行為）更高效。
另外無論如何要確保的是：當鍵盤聚焦在微調輸入控制元件，鍵盤快捷鍵仍能被使用。
近期的（文章寫於2017.04）一個可用性研究中顯示，某個 Adobe Photoshop 的PC使用者在使用透明度滑塊與鍵盤去放大（Alt+滾輪）時遇到了問題：
一旦鍵盤聚焦在輸入框，該使用者使用快捷鍵時系統總會播放錯誤的提示音（輸入框僅允許數字作為有效輸入）。
2. 引數控制元件的預設預設值
合適的引數預設值十分重要：不僅能節省使用者時間和精力，而且能為新手提供使用指導。
典型的預設值便是選取一箇中立的值（取決於具體引數）：對於縮放滑塊來說，100%（值位於滑塊中間）是個理想的預設值；對於其他包含0和最大值的控制元件，理想的預設值可能是中點。
為預設值的輸入提供便捷的方式，例如：重置按鈕。
一旦中立數值在範圍中的某個位置或者所處位置不明顯時，重置按鈕顯得尤其好用。
如果預設值帶有某種視覺指示符號同樣易於使用，比如預設值在滑塊上所處位置顯示小箭頭刻度線。
Apple 的相簿應用包含多個調節引數滑塊以及能夠一鍵重置這些數值的重置按鈕。（然而，該重置功能被隱藏於上下文選單中）
小結
精確的數值輸入依賴於合適的控制元件選擇。
控制元件傳遞出的資訊不僅包括這些控制元件應該如何被使用，也包含了它們所代表數值的範圍。
控制元件應該提供簡便的方式用於探索可能的數值範圍選項以及給定精確值。
為使用者提供獨立而又相關聯的粗略和精確輸入控制元件，給定合適預設值的同時為正在使用粗略數值控制元件的使用者提供輸入框的鍵盤聚焦。
原文作者： Page Laubheimer
原文地址： https://www.nngroup.com/articles/sliders-knobs
翻譯：一起吃雪糕
本文由 @一起吃雪糕 原創釋出於人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基於CC0協議