全栈工程师?
嗯.....目前并不是!

數值輸入控件:用滑塊、旋鈕、矩陣控件平衡探索度和精度

輸入控件作為最常用的界面設計控件之一,包含了哪些類型以及各類型與特徵以及使用關鍵點有哪些呢?一起來了解下。

文章大綱:

  • 離散型與連續型輸入控件
  • 便於用戶探索更多選項的UI控件:線性滑塊/旋鈕控件/二維曲線控件
  • 同時支持粗略和精確輸入值調整的聯合控件:聯合控件的鍵盤聚焦/控件的默認預設值
  • 小結

數值參數是對象屬性之一,其值為數字。

具體例子包括:電商網站上的商品價格、數量,以及照片編輯應用中的照片透明度等。

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

不同控件適用於不同的交互場景來傳達編輯數值信息。

多數情況下,控件的類型和參數值之間存在一定的自然映射關係。比如旋鈕控件,可以自然地跟角度參數相對應。

這些UI控件傳達編輯數值信息的同時,也遵循了「尼爾森十大可用性原則」之一 ——環境貼切原則:匹配系統與真實世界

許多創意類或數據分析類的應用和網站均包含了較長的表單,允許用戶對特定屬性進行詳細調整。控件在實現連續複雜的數值變化的同時,需要建立以下兩種體驗上的平衡:

  • 探索度:便於用戶任意去探索整個數值範圍內的控件選項
  • 精確度:允許用戶精確地選取特定值

離散型與連續型輸入控件

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

  • 離散型控件:提供有限的步進器數值或可選項。常見的例子包括開關、以及帶有一些預選項的單選和複選框
  • 連續型控件:涉及一定範圍(通常在最大值和最小值之間)的數值輸入。滑塊和旋鈕均屬於連續型控件。(需要注意的是,理論上連續型的控件可以取範圍內的任意值)。

嚴格來說,範圍值從0到100的滑塊是一個離散型控件,因為它的值並不是連續的。而實際使用當中,如果一個滑塊可選的數值範圍夠大而且不僅限於有限的幾個固定選項值的話,可以被認為是連續型控件,從用戶的實際體驗上來看它也是連續的。

Mac 版本 Kindle 包含了離散型及連續型兩種控件:

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

便於用戶探索更多選項的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

翻譯:一起吃雪糕

版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《數值輸入控件:用滑塊、旋鈕、矩陣控件平衡探索度和精度》
文章链接:https://www.pmbear.com/%e6%95%b8%e5%80%bc%e8%bc%b8%e5%85%a5%e6%8e%a7%e4%bb%b6%ef%bc%9a%e7%94%a8%e6%bb%91%e5%a1%8a%e3%80%81%e6%97%8b%e9%88%95%e3%80%81%e7%9f%a9%e9%99%a3%e6%8e%a7%e4%bb%b6%e5%b9%b3%e8%a1%a1%e6%8e%a2%e7%b4%a2/
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

大前端WP主题 更专业 更方便

联系我们联系我们