滑塊已經(jīng)存在很長一段時間了亏镰,并且事實上已經(jīng)成為了標(biāo)準(zhǔn)UI控件腊满,用于選擇一個值或者一系列值套么。滑塊很有用碳蛋,因為它允許用戶快速的去探索一系列選項胚泌。
本文中,我們將回顧一下這個熟悉的UI元素的幾個創(chuàng)意概念肃弟。
1 可視化輸出
滑塊是一個允許用戶選擇一個特定的值(或者一個范圍的值)的控件玷室。通常,用戶通過閱讀滑塊上的標(biāo)簽來獲取這個值是關(guān)于什么的信息笤受。同時穷缤,通過可視化連接在滑塊上的數(shù)據(jù),有可能對我們的用戶產(chǎn)生一個更強(qiáng)的影響箩兽。
“A picture is worth a thousand words” 一幅圖值一千個字
試圖去找到一個完美的背景色用于他們的個人網(wǎng)站:
探索不同類型的漢堡:
或者是津肛,想留下關(guān)于產(chǎn)品或者服務(wù)的反饋
Visualisation makes it easier for users to make an informed decision.
可視化使用戶更容易做明智的決定。
在一些案例中汗贫,起初沒有看到輸出的情況下下身坐,去做一個明智的決定幾乎不可能。在Tylko落包,視覺輸出讓用戶明白了家具可能是什么樣子部蛇。僅僅通過閱讀測量來獲得這種理解很難。
2 幫助用戶選擇一個值
滑塊讓用戶去探索可用的選項咐蝇,但是在一些案例中搪花,用戶或許會疑惑他們應(yīng)當(dāng)選擇什么值。
Good user interface helps and guides the user.好的用戶界面幫助和指導(dǎo)用戶嘹害。
滑塊可以幫助用戶做出明智的決定撮竿。
在Airbnb網(wǎng)站上發(fā)現(xiàn)了一個很好的例子。Airbnb用圖表配對價格范圍滑塊笔呀,該圖表展示了價格的分布和每晚的平均價格幢踏。這個柱狀圖使用戶更容易在一個價格范圍里去選一個過濾值。
在Trulia網(wǎng)站上房蝉,發(fā)現(xiàn)了另一個更有意思的解決方案僚匆。Trulia的房屋可購性計算器使用了滑塊的顏色作為功能工具—滑塊來通知用戶關(guān)于債務(wù)—收入選擇。這個滑塊防止用戶選擇潛在的危險值
3 允許用戶去設(shè)置一個特殊的值
許多滑塊有同樣的問題—用滑塊選擇一個精確值不可能搭幻。毫無疑問對于精確輸入咧擂,滑塊絕不會擊敗一個常規(guī)的輸入框。那就是為什么如果你的設(shè)計需要精確的輸入檀蹋,最好一起使用輸入框和滑塊松申。
SGSf房屋成本計算器提供兩種設(shè)置值的方式—或者通過使用一個滑塊,或者通過將值放入相關(guān)的輸入框俯逾。如果你想在你的設(shè)計中使用這個技術(shù)贸桶,確保一切要保持同步至關(guān)重要:當(dāng)用戶使用滑塊改變值時,輸入框的值也應(yīng)當(dāng)被更新桌肴,當(dāng)輸入框中的值改變的時候皇筛,滑塊也應(yīng)當(dāng)更新。
4 解決盲點的問題
移動app的滑塊通常早搜盲點的問題坠七。這個問題發(fā)生在手指覆蓋重要數(shù)據(jù)(選定值)時水醋。由Virgil Pana創(chuàng)建的流體滑塊的概念試圖通過允許他們與滑塊交互的時看到的選中的值來去解決盲點這個問題。
原文鏈接:《4 Creative Concepts of Slider Control》Nick Babich