為什麼你設計的滑塊那麼難用?新手設計師最容易犯的錯誤之一

黃淑英
黃淑英
Jul 22, 2017 · 6 min read

以前我在弄的應用程序設計或者網頁設計的時候,我都盡量避免使用滑塊這種設計。

有些交互模型是屬於進階技巧,並不是一個新手UX設計師可以掌握住的;滑塊就是屬於這種;而且他可以是所有交互模型當中最難的一種。

在這裡我不希望你犯了跟我一樣的錯。

我跟你說一個故事,我還很菜的時候,第一次設計使用滑塊,很快的把東西交出去;結果使用者的反應如下:

單純滑塊
  1. 你設計滑塊我不會使用
  2. 永遠認為滑塊只能單一方向拉動
  3. 使用滑塊方式搜尋,卻無法找到我要的東西
  4. 為什麼滑塊那麼難用我明明只要調整一個整數例如200,我前後拉了快要5次才拉到
  5. 我根本不知道移動到了哪裡
  6. 為什麼一定要拉,那一條線不能點嗎

而這些問題,其實不難解決,但是難就難在這些設計都在非常細的細節裡面,如果你沒有刻意注意,基本上你是很難發現這些問題的。

如何解決這些問題

問題:我不會使用你的滑塊
分析:

  1. 有發現年紀大約在50〜60歲的使用者都是一次使用這類型的滑塊,當然會不知道可以拉動。

解法:

  1. 這類族群特點是視覺或者觸覺上要給一個反饋,所以我們在視覺上給一個箭頭,讓他們知道這個是可以拉動的。
只有單向提示的滑塊

問題:永遠認為滑塊只能單一方向拉動。

分析:

  1. 我們給了一個箭頭讓使用者知道可以往某一個方向拉動,但卻忘了實際上也可拉回去,他是雙向的。

解法:

  1. 在另外一邊也個一個箭頭,這樣子就是雙箭頭讓使用者知道可以雙向拉。
雙向提示的滑塊

問題:使用滑塊方式搜尋,卻無法找到我要的東西。

分析:

  1. 一條桿上,可以有一個以上的滑塊,兩個的就是雙滑塊;通常可以使用在雙滑塊都是你的東西是有範圍的時候;而這個範圍要剛好不能太大也不能太小;例如:你開會的時間,出國的時間,搭車的時間,價格搜尋範圍,資料搜尋的範圍,旅遊預算,電腦預算,其他預算..等。
  2. 注意雙滑塊不是適合使用在需要準確並且是線性的時候;什麼意思呢你,滑塊的東西越往右邊拉,數值越大,且東西數值要求很明確,例如:你的收入就不適合雙滑塊。
  3. 發現很多人在使用雙滑塊的時候,往往還是只會拉單向。
  4. 就算會使用雙向的人,原本預設給他的初始值他也不會變動,還是只會去拉單向,但是會拉雙向的人會不斷的操作很多次。
  5. 3,4點的人共通點就是,都知道到可以拉,但是搜尋的時候總是希望可以更精準。
  6. 搜尋範圍最大值與最小值,間隔太短,例如使用者只想搜尋100~100元的東西卻無法選擇。
  7. 預設的搜尋範圍不準確,不是我要的,不容易看到其他產品。

解法:

  1. 可以在滑塊的附近增加一個輸入框,讓使用者自己輸入搜尋範圍。
在滑塊上面增加輸入框
  1. 滑塊的搜尋最大值與最小值,間隔可以為0。
可以把間格變成0
  1. 滑塊的預設範圍,最小值與最大值全部都設定為最低與最高。
最大最小值全部設定最高最低
  1. 使用價格搜尋選項,例如30元以下的商品,100以上的商品,類似雅虎拍賣的價格搜選選項。
手動輸入價格
用價格分類的選項方法
  1. 隨著商品類別不同,可以使用動態間距的方法調整滑塊的間距。
  2. 使用滑塊搜尋商品,最好可以把搜尋的數量秀出來。
搜尋的時候可以知道數量多少
  1. 加強提示可以告訴使用者,你現在使用雙滑塊是一個範圍不是一個數值;雙滑塊的箭頭是不都往裡面藍色的的方向指向。
看一下雙滑塊的箭頭,加強提示。

問題:

  1. 為什麼一定要拉,那一條線不能點嗎
  2. 我根本不知道移動到了哪裡
  3. 為什麼滑塊那麼難用我明明只要調整一個整數例如200,我前後拉了快要5次才拉到

分析:

  1. 有發現我們滑塊太小,使用者不容易移動。
  2. 間隔太小,使用者不容易選到正確的數值。
  3. 當前刻度重要刻度沒有顯示出來。
  4. 發現使用者希望可以點擊是因為他想要直接減少搜尋範圍或者點選他想要的值,而並不想要拖拉,覺得太慢了,實際上是對於某些價格或者商品感興趣。
  5. 滑塊被拖動的時候,視覺提示不夠明顯。

解法:

  1. 滑塊大小通常請不要小於44 * 44px,通常寬度會在200〜300像素,移動的時候,不用特別選擇滑塊,整塊都可以選。
  2. 間隔的問題,我自己也弄很久,這也是滑塊裡面最難的部分,設計的太小,你的使用者很難精準的選到自己想要的;所以我建議是這樣子,如果你的東西是要精準;請不要使用滑塊,間隔的設計最好可以被5整除,最好可以使用動態間隔方式來自訂間隔,如果可以請把重要的刻度標示出來;這邊注意一下,你把重要的刻度顯示出來,在滑動滑塊的時候,這個刻度的範圍要大一點。
剛好被5整除,被請滑塊再拉到刻度的時候,刻度的範圍大一點。
  1. 麻煩再拖動的時候,滑塊可以換一個顏色,並且滑鼠鼠標可以變成手指,然後在移動的時候數據上可以馬上變動;而不要等待,再來就是,滑塊在拉的時候,凹槽的顏色需要改變,越往右邊拉數值越大,滑塊或者數值的背景顏色還有相關圖像需要變化。
案例看一下

如果你覺得時候到了,那是時候為自己做某些改變了,讓我來幫忙你,我希望你可以更好,你現在就應該行動讓我幫你製作一個網站或應用程序

mamatate

這裡是分享給要做網站或者app開發而且想要設計一個好的網站還有app的人看的 你知道一個要開發其實並不難,但是要做好很難嗎? 為什麼每次我開發的app或者網站總是被人抱怨很難用或者銷售不好? 這裡你將學習到 1.怎麼樣是一個好的app或者電子商務網站設計 2.什麼是使用者體驗?? 3.電子商務與app成功的秘訣在哪裡? 4.app與電子商務網站要如何行銷 5.我要外包app與網站大家都說可以,我到底要選誰?

黃淑英

Written by

黃淑英

mamatate

mamatate

這裡是分享給要做網站或者app開發而且想要設計一個好的網站還有app的人看的 你知道一個要開發其實並不難,但是要做好很難嗎? 為什麼每次我開發的app或者網站總是被人抱怨很難用或者銷售不好? 這裡你將學習到 1.怎麼樣是一個好的app或者電子商務網站設計 2.什麼是使用者體驗?? 3.電子商務與app成功的秘訣在哪裡? 4.app與電子商務網站要如何行銷 5.我要外包app與網站大家都說可以,我到底要選誰?

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade