即使滑動(dòng)條的設(shè)計(jì)再細(xì)致，用戶的操作技巧再精準(zhǔn)，用滑動(dòng)條做準(zhǔn)確的數(shù)值設(shè)定也是件困難的事情。如果對(duì)操作界面上的參數(shù)設(shè)置要求非常精確的話，那么建議設(shè)計(jì)時(shí)使用其它的視覺控件。

在選擇某個(gè)值或某個(gè)范圍時(shí)，經(jīng)常會(huì)用到滑動(dòng)條。然而，從使用角度來說，滑動(dòng)條并不利于操作。特別是在觸屏設(shè)計(jì)中，很難用滑動(dòng)條精確設(shè)置到某個(gè)特定的值。

定義：滑動(dòng)條是一種設(shè)計(jì)控件，主要通過水平移動(dòng)滑塊或滑桿來控制某種變量，比如用來調(diào)節(jié)音量或者屏幕亮度。

不精確的交互

當(dāng)進(jìn)行UI設(shè)計(jì)時(shí)，設(shè)計(jì)師必須考慮到用戶的使用場(chǎng)景。尤其是在設(shè)計(jì)移動(dòng)端時(shí)，需要考慮用戶經(jīng)常用一只手拿著手機(jī)，同時(shí)又在干其他的事，比如看電視，散步，甚至開車。在這種情況下，在屏幕上按住并拖拽控件到某個(gè)特定的位置屬于非常困難的操作方式?；瑒?dòng)條的設(shè)計(jì)方式遵循隧道定律（steering law）,定律描述了，當(dāng)通過一個(gè)隧道時(shí)，隧道越長越窄，所需的時(shí)間越長。（下拉菜單和滾動(dòng)條的設(shè)計(jì)也遵循隧道定律
）。在移動(dòng)設(shè)備上操作滑動(dòng)條時(shí)，很多用戶在手指離開屏幕的瞬間，又不小心移動(dòng)了滑動(dòng)條，從而使數(shù)值偏離了他們最初想要設(shè)置的值。

Kayak iOS端滑動(dòng)條形式的篩選器截圖

Kayak APP設(shè)計(jì)了很多滑動(dòng)條，用來選擇時(shí)間，過濾航班。然而設(shè)定起飛和到達(dá)時(shí)間的滑動(dòng)條以小時(shí)為單位，但選擇飛行時(shí)長的滑動(dòng)條則精確到分鐘。

另一個(gè)在觸屏交互界面設(shè)計(jì)時(shí)需要重點(diǎn)考慮的因素是控件的易用性。對(duì)于不經(jīng)常使用電子設(shè)備的人來說，操作滑動(dòng)條來進(jìn)行參數(shù)設(shè)置并不是件容易的事。他們真的能夠通過滑動(dòng)條選擇到（或者接近）他們預(yù)期的那個(gè)數(shù)值么？為了設(shè)定到那個(gè)數(shù)值，他們需要花費(fèi)多少精力，嘗試多少次？相比許多年輕人，很多老年用戶的手都不穩(wěn)，因此在操作對(duì)手勢(shì)有精準(zhǔn)要求的小控件時(shí)，難度系數(shù)更大。若想讓用戶輕松的使用你的產(chǎn)品，建議不要使用滑動(dòng)條當(dāng)控件來完成精確的參數(shù)設(shè)置。

一個(gè)精確的數(shù)值是必要的嗎？

通常，讓用戶設(shè)置非常精確的數(shù)值沒有什么必要，也沒有多大意義。

滑動(dòng)條適用于在一定范圍內(nèi)對(duì)數(shù)值進(jìn)行粗略的設(shè)定，而對(duì)于精確的數(shù)值并無嚴(yán)格要求。kayak其實(shí)可以不用滑動(dòng)條來設(shè)置飛行時(shí)長，到達(dá)和起飛的具體時(shí)間，因?yàn)榇蠖鄶?shù)用戶對(duì)“中午”這樣的起飛時(shí)間設(shè)定已經(jīng)覺得足夠了，并不介意精確的起飛時(shí)間是多少。但是，一旦要求設(shè)定精確數(shù)值時(shí)，滑動(dòng)條這種設(shè)定形式就變的不適用了。比如，如果你需要在表格里填上年齡、身高、體重等具體數(shù)值時(shí)，使用滑動(dòng)條就變的不妥當(dāng)了。

一個(gè)滑動(dòng)條的可選擇范圍越大或者單位越密集，要選擇一個(gè)精確數(shù)值就越難。Delectable應(yīng)用讓用戶在6-10的分?jǐn)?shù)范圍內(nèi)給葡萄酒打分，精確到了0.1。這種不尋常的打分范圍不僅讓用戶很困惑，而且選擇一個(gè)精確的分?jǐn)?shù)（比如9.5或9.3）簡直需要高超的操作技巧。有人可能會(huì)說用戶根本不在乎最終的分?jǐn)?shù)是9.3還是9.5，因?yàn)閮蓚€(gè)分?jǐn)?shù)都是差不多。既然這樣，那為什么要用0.1精度擾亂用戶而不用更簡單的五分制的評(píng)分方法呢？

左：Delectable應(yīng)用使用滑動(dòng)條這種方式給葡萄酒做精確的評(píng)分。右：Amazon應(yīng)用使用更通用且更簡單的方式讓用戶通過點(diǎn)擊星星給產(chǎn)品打分。

想想拇指

在適合用滑動(dòng)條展現(xiàn)的案例中，設(shè)計(jì)師需要確?；瑒?dòng)條的設(shè)計(jì)樣式不會(huì)降低它的可用性。在觸屏設(shè)計(jì)上，需要考慮當(dāng)操作滑動(dòng)條時(shí)用戶的手指應(yīng)放在屏幕的什么位置，有哪些區(qū)域是因此而被遮蓋的。在設(shè)計(jì)用鼠標(biāo)操作的界面時(shí)，標(biāo)簽可直接置于滑動(dòng)條下方區(qū)域，然而在移動(dòng)設(shè)備和其他觸屏設(shè)計(jì)中，同樣的標(biāo)簽擺放則會(huì)很難用，因?yàn)樵谑褂每丶臅r(shí)候，標(biāo)簽可能會(huì)被用戶的手指擋住。

左圖：在BrilliantEarth.com中的滑動(dòng)條將描述滑動(dòng)條單位的標(biāo)簽放在了滑動(dòng)槽的下方，在操作控件時(shí)，用戶的拇指會(huì)將標(biāo)簽擋住。右：AirBnB.com正確的將數(shù)值放在了滑動(dòng)條上方，所以在使用過程中，一直可以保證它們能夠被看見。

為了保證在使用過程中可以看到滑動(dòng)條有關(guān)的描述或數(shù)值，設(shè)計(jì)師需要將這些內(nèi)容置于‘拇指’的上方或者旁邊，所謂的拇指在這里包含兩種含義：用戶的拇指和滑動(dòng)條的‘拇指’（也就是滑塊或者滑桿）

結(jié)論

當(dāng)精確數(shù)值對(duì)用戶意義不大，僅一個(gè)粗略數(shù)值就足夠的情況下再使用滑動(dòng)條。確保用戶無需太繁雜的操作就能輕松的設(shè)置滿意的值。另外滑動(dòng)條的全部標(biāo)簽需要放在滑動(dòng)條的上方或者旁邊，而不是放在下方，以保證用戶在選擇某個(gè)值的過程中標(biāo)簽持續(xù)可見。也可以考慮通過不同的視覺元素樣式讓用戶通過點(diǎn)擊，甚至是打字輸入等方式表示他們的準(zhǔn)確數(shù)值，而不僅僅依靠按住并滑動(dòng)的手勢(shì)進(jìn)行數(shù)值展現(xiàn)。

文章來源@MUX

原文地址：http://www.nngroup.com/articles/gui-slider-controls/

版權(quán)聲明：若該文章涉及版權(quán)問題，請(qǐng)聯(lián)系我們主編，QQ：419297645