輸入控件作為最常用的界面設(shè)計控件之一，包含了哪些類型以及各類型與特征以及使用關(guān)鍵點有哪些呢？一起來了解下。

文章大綱：

• 離散型與連續(xù)型輸入控件
• 便于用戶探索更多選項的UI控件：線性滑塊/旋鈕控件/二維曲線控件
• 同時支持粗略和精確輸入值調(diào)整的聯(lián)合控件：聯(lián)合控件的鍵盤聚焦/控件的默認預(yù)設(shè)值
• 小結(jié)

數(shù)值參數(shù)是對象屬性之一，其值為數(shù)字。

具體例子包括：電商網(wǎng)站上的商品價格、數(shù)量，以及照片編輯應(yīng)用中的照片透明度等。

常用的數(shù)值參數(shù)交互控件包括：文本輸入框、滑塊、旋鈕控件、可編輯的二維曲線控件以及能對預(yù)先給定的默認值進行遞增或遞減的步進器等。

不同控件適用于不同的交互場景來傳達編輯數(shù)值信息。

多數(shù)情況下，控件的類型和參數(shù)值之間存在一定的自然映射關(guān)系。比如旋鈕控件，可以自然地跟角度參數(shù)相對應(yīng)。

這些UI控件傳達編輯數(shù)值信息的同時，也遵循了「尼爾森十大可用性原則」之一 ——環(huán)境貼切原則：匹配系統(tǒng)與真實世界

許多創(chuàng)意類或數(shù)據(jù)分析類的應(yīng)用和網(wǎng)站均包含了較長的表單，允許用戶對特定屬性進行詳細調(diào)整?？丶趯崿F(xiàn)連續(xù)復(fù)雜的數(shù)值變化的同時，需要建立以下兩種體驗上的平衡：

• 探索度：便于用戶任意去探索整個數(shù)值范圍內(nèi)的控件選項
• 精確度：允許用戶精確地選取特定值

離散型與連續(xù)型輸入控件

輸入控件的兩種主要類型：

• 離散型控件：提供有限的步進器數(shù)值或可選項。常見的例子包括開關(guān)、以及帶有一些預(yù)選項的單選和復(fù)選框
• 連續(xù)型控件：涉及一定范圍（通常在最大值和最小值之間）的數(shù)值輸入?；瑝K和旋鈕均屬于連續(xù)型控件。（需要注意的是，理論上連續(xù)型的控件可以取范圍內(nèi)的任意值）。

嚴格來說，范圍值從0到100的滑塊是一個離散型控件，因為它的值并不是連續(xù)的。而實際使用當(dāng)中，如果一個滑塊可選的數(shù)值范圍夠大而且不僅限于有限的幾個固定選項值的話，可以被認為是連續(xù)型控件，從用戶的實際體驗上來看它也是連續(xù)的。

Mac 版本 Kindle 包含了離散型及連續(xù)型兩種控件：

1. 字體大小設(shè)置滑條屬于離散型控件：允許設(shè)置的字體大小僅限于12個預(yù)先設(shè)定的標(biāo)在隱約可見的刻度線上的數(shù)值。即使用戶想要把滑塊移動到給定刻度線數(shù)值之間，滑塊也會自動移動到臨近的可用數(shù)值刻度線處。
2. 色彩模式設(shè)置的單選按鈕同樣屬于離散型控件：僅提供白、黑、深褐色三種供選擇的色彩模式
3. 單行顯示字數(shù)和屏幕亮度調(diào)節(jié)滑塊均屬于連續(xù)型控件：在滑塊范圍內(nèi)可選任意值

便于用戶探索更多選項的UI控件

1. 線性滑塊

線性滑塊是一種有用的控件，當(dāng)對應(yīng)值屬于給定的范圍內(nèi)（明確的最大值和最小值），并且數(shù)值的精確度對用戶來說沒那么重要時。

根據(jù) Accot-Zhai 提出的“引導(dǎo)法則”（Steering Law），在滑塊上選定一個精確值并不容易。

所謂“引導(dǎo)法則”，是由人機交互原則之一的費茨定律推導(dǎo)而來。

引導(dǎo)法則：用戶滑動二維路徑上的滑塊時所需的時間受路徑的長度和寬度影響。簡單地說，路徑越寬或長度越短，則滑塊移動速度越快。大多數(shù)的滑塊寬度較窄，使得用戶很難選中相對精確值。

線性滑塊的高效性在于：用戶在滑動滑塊的過程中可以實時預(yù)覽效果。一旦用戶的操作和實際效果存在一定延遲，線性滑塊可能就不是個合適的選擇。（根據(jù)標(biāo)準(zhǔn)響應(yīng)時間原則，延遲的時間最多不應(yīng)超過0.1s）

如果是頁面顯示結(jié)果比較費時的情況下，滑塊同樣不是個很好的選擇。

可選擇諸如：實時渲染視頻效果，龐大的數(shù)據(jù)集合的篩選控件（e.g.價格范圍的篩選）等等……

IOS系統(tǒng)屏幕亮度滑塊并不是用于選定一個準(zhǔn)確的亮度值，而是獲取一個相近的、類似的亮度值。

通常來說，用戶移動滑塊僅僅是為了讓屏幕比現(xiàn)有的更亮或更暗些。

這種控件的易用性關(guān)鍵在于——系統(tǒng)是否能夠在用戶滑動滑塊的同時通過改變屏幕亮度來給予即時反饋。

一旦用戶的操作和它產(chǎn)生的實際屏幕亮度效果存在較大延遲，用戶也就無法在滑塊上準(zhǔn)確地選定合適的亮度值。

滑塊控件的其中一種變體是：具有兩個在可選值范圍內(nèi)移動的滑塊。

這種滑塊變體常用于網(wǎng)頁界面的篩選，用戶可以設(shè)定最小最大價格，航班的起始和結(jié)束時間等。

和其他類型的滑塊類似，雙滑塊控件選取準(zhǔn)確值比較困難，因此這種控件僅適用于少數(shù)情況。

雙滑塊與直方圖之類的圖表結(jié)合使用時，可以確保選擇的范圍值可實際匹配到對應(yīng)的內(nèi)容或選項，從而避免無搜索結(jié)果的情況的發(fā)生。

Kayak 網(wǎng)站（提供機票、酒店服務(wù)的旅游網(wǎng)站）的一大特征就是提供范圍選擇滑塊來篩選航班起飛時間段。

雖然精確的起飛時間如12:15pm比較難選中，但航班起飛時間與對應(yīng)費用圖表的搭配使用，使得用戶在平衡時間和費用后作出較優(yōu)選擇變?yōu)榭赡堋?/p>

2. 旋鈕控件

旋鈕控件或其他用戶需要旋轉(zhuǎn)的控件自然地代表了平移（音頻工程師可以在混合音頻的時候調(diào)節(jié)音頻的左右聲道）之類的參數(shù)。

然而，使用常用的鼠標(biāo)、觸控板等輸入設(shè)備去操作旋鈕有一定的難度，在旋轉(zhuǎn)功能上不具備較好的功能可見性。

鑒于鼠標(biāo)之類的線性輸入設(shè)備執(zhí)行旋轉(zhuǎn)操作比較困難，一些設(shè)計中會賦予旋鈕一種隱式的線性拖動操作。用戶可以任意通過點擊、上下或垂直拖動來調(diào)整數(shù)值大小。

但這種線性拖動操作往往是意料之外的，通常不作任何提示，難以被用戶發(fā)現(xiàn)。

另外，如果應(yīng)用不當(dāng)，會使那些試圖通過鼠標(biāo)轉(zhuǎn)圈去模仿旋鈕旋轉(zhuǎn)的人失去自主控制權(quán)。

GarageBand (一款數(shù)碼音樂創(chuàng)作軟件) 為用戶提供多個旋鈕，通過點擊或垂直拖動進行旋轉(zhuǎn)。

該設(shè)計彌補了不能很好掌控旋轉(zhuǎn)的設(shè)備（鼠標(biāo)等）的缺陷，但是不容易被發(fā)現(xiàn)，并且與用戶嘗試移動光標(biāo)轉(zhuǎn)圈來轉(zhuǎn)動旋鈕的意圖相違背。

這個例子里，旋鈕控件的靈感來源于過去的音頻工程師所使用的旋鈕，是擬物設(shè)計的不恰當(dāng)應(yīng)用實例之一。

既然它的參數(shù)值并不能很好地映射到一個圈內(nèi)，水平的滑塊可能更適用于該參數(shù)。

Adobe 圖像管理器 Lightroom 的設(shè)置面板針對數(shù)值參數(shù)使用了多種輸入控件，其中包括了滑塊和旋鈕。

盡管每個控件都代表連續(xù)的數(shù)值，他們也反映了一些重要的額外的關(guān)于這些被修改數(shù)據(jù)的信息。

其中包括：用旋鈕來代表物體周邊陰影角度的角度控件；包含最小和最大值范圍值的滑塊（e.g.0% – 100%透明度滑塊）。

3. 二維曲線控件

二維曲線輸入控件是一種通過調(diào)整一個復(fù)雜曲線來同時修改多個相關(guān)參數(shù)的專業(yè)控件。

通常情況下與之交互方式是，通過在已有的直線或曲線上添加一個節(jié)點。

一旦添加了新的節(jié)點，并且將節(jié)點拖曳至新位置時，系統(tǒng)會在兩個節(jié)點之間繪制出一條新的曲線。

這種控件在以下情況下非常實用：有兩個相關(guān)聯(lián)、互相牽制、會被同時修改的參數(shù)（e.g.圖像視頻編輯應(yīng)用里的亮度和RGB曲線）或需要通過二維空間來描述物體的位置和路徑時（e.g. 電影的環(huán)繞聲）。

GIMP（GNU圖像處理程序）用二維曲線控件來同時控制多個參數(shù)，否則可能需要多個滑塊才能實現(xiàn)。

上述例子中，X 軸 Y 軸代表不同參數(shù)，其中 X 軸（從暗到亮）對應(yīng)輸入，Y 軸對應(yīng)輸出。曲線越接近于水平，圖片的整體色調(diào)范圍越小。

如果這些數(shù)值用滑塊來表示并進行調(diào)節(jié)，可能需要多對控件來實現(xiàn)，每個對應(yīng)用戶需要調(diào)整的參數(shù)值。

使用二維網(wǎng)格的情況下，用戶簡單地通過點擊在線上添加任意位置節(jié)點，將節(jié)點拖曳至新的坐標(biāo)處。

這類設(shè)計使得用戶可以通過一些小的調(diào)整來完成復(fù)雜曲線的創(chuàng)建。

同時支持粗略和精確輸入值調(diào)整的聯(lián)合控件

實現(xiàn)精確值輸入最簡單的一種方式是使用輸入框，用戶可以輸入該精確值。

然而，這種解決方案提供精確輸入的同時，不支持用戶高效地探索參數(shù)值范圍。

輸入一個提前已知的值比較簡單，但在你不知道要輸入什么值的情況下，如果讓你不停地隨機輸入一個看起來像樣的顏色值，整個過程是冗長乏味的。

即使額外提供增減顏色值的步進器按鈕。有些文本框甚至不會顯示可輸入值的范圍。比如，RGB 顏色值輸入框，對于新手用戶來說 RGB 顏色值的范圍是0-255就不是那么直觀。

Microosoft Ofiice 通過在輸入框旁添加上下箭頭按鈕的步進器，來快速地增減數(shù)值。

上述輸入框問題的一個典型的解決方案是，使用兩個互相獨立而又相關(guān)聯(lián)的控件來對同個參數(shù)進行或粗略或精準(zhǔn)的數(shù)值調(diào)整。

所謂聯(lián)合控件是指兩種（或多種）調(diào)整同個數(shù)值的控件組合。

一般來說，連續(xù)型控件，如：滑塊，用于粗略的輸入，不斷探索范圍內(nèi)的數(shù)值從而找出所需值的大致臨近值。

之后，輸入框作為精確控件用來確定具體的數(shù)值。精確控件也有助于那些已經(jīng)知道所需具體數(shù)值的超級用戶。

聯(lián)合控件的設(shè)計不僅支持輸入值的精細調(diào)整，也能直接顯示出當(dāng)前狀態(tài)下的參數(shù)值，告知用戶與其期望輸出效果相關(guān)聯(lián)的值是多少。

一個關(guān)鍵點：由于這兩個控件持續(xù)關(guān)聯(lián)，兩者展示同一值時調(diào)整其中一個，另一個控件值應(yīng)隨之立即（通常指0.1s之內(nèi)）發(fā)生變化。

1. 聯(lián)合控件的鍵盤聚焦

為了使聯(lián)合控件有更好的使用體驗，用戶調(diào)整滑塊時，鍵盤的聚焦應(yīng)移動至輸入框。

這樣一來，用戶設(shè)置粗略滑塊值后能輕松在文本框進行輸入，而無需點擊文本框。這個設(shè)計有助于讓尋的（即移動手從鼠標(biāo)到鍵盤或鍵盤到鼠標(biāo)的行為）更高效。

另外無論如何要確保的是：當(dāng)鍵盤聚焦在微調(diào)輸入控件，鍵盤快捷鍵仍能被使用。

近期的（文章寫于2017.04）一個可用性研究中顯示，某個 Adobe Photoshop 的PC用戶在使用透明度滑塊與鍵盤去放大（Alt+滾輪）時遇到了問題：

一旦鍵盤聚焦在輸入框，該用戶使用快捷鍵時系統(tǒng)總會播放錯誤的提示音（輸入框僅允許數(shù)字作為有效輸入）。

2. 參數(shù)控件的默認預(yù)設(shè)值

合適的參數(shù)默認值十分重要：不僅能節(jié)省用戶時間和精力，而且能為新手提供使用指導(dǎo)。

典型的默認值便是選取一個中立的值（取決于具體參數(shù)）：對于縮放滑塊來說，100%（值位于滑塊中間）是個理想的默認值；對于其他包含0和最大值的控件，理想的默認值可能是中點。

為默認值的輸入提供便捷的方式，例如：重置按鈕。

一旦中立數(shù)值在范圍中的某個位置或者所處位置不明顯時，重置按鈕顯得尤其好用。

如果默認值帶有某種視覺指示符號同樣易于使用，比如默認值在滑塊上所處位置顯示小箭頭刻度線。

Apple 的相冊應(yīng)用包含多個調(diào)節(jié)參數(shù)滑塊以及能夠一鍵重置這些數(shù)值的重置按鈕。（然而，該重置功能被隱藏于上下文菜單中）

小結(jié)

精確的數(shù)值輸入依賴于合適的控件選擇。

控件傳遞出的信息不僅包括這些控件應(yīng)該如何被使用，也包含了它們所代表數(shù)值的范圍。

控件應(yīng)該提供簡便的方式用于探索可能的數(shù)值范圍選項以及給定精確值。

為用戶提供獨立而又相關(guān)聯(lián)的粗略和精確輸入控件，給定合適默認值的同時為正在使用粗略數(shù)值控件的用戶提供輸入框的鍵盤聚焦。

原文作者：Page Laubheimer

原文地址：https://www.nngroup.com/articles/sliders-knobs

翻譯：一起吃雪糕

本文由 @一起吃雪糕?原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

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