滑動條設(shè)計:拇指法則

0 評論 12854 瀏覽 153 收藏 8 分鐘

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

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

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

不精確的交互

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

Kayak iOS端滑動條形式的篩選器截圖

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

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

一個精確的數(shù)值是必要的嗎?

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

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

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

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

想想拇指

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

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

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

結(jié)論

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

 

文章來源@MUX

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

版權(quán)聲明:若該文章涉及版權(quán)問題,請聯(lián)系我們主編,QQ:419297645

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!