以下內容由摹客團隊翻譯整理，僅供學習交流，摹客是支持智能標注和切圖的產品協作設計神器。

滑塊的使用已經不是什么新鮮的設計方式了，作為一種標準UI控件，滑塊在設計上被廣泛用于選擇某個值或值范圍?；瑝K之所以在可以設計上大顯身手，最主要的原因就是它可以讓用戶快速瀏覽一系列選項，提供流暢的用戶體驗。

盡管滑塊已經是設計師耳熟能詳的設計元素，但要把它運用到恰到好處卻也并非易事，本文中，我將給大家介紹幾個關于滑塊的創意設計概念，希望能加深你對滑塊的認知。

1. 可視化輸出

滑塊這個控件，主要用途就是幫助用戶選擇某個特定值（或值范圍）。通常，用戶通過讀取滑塊上的標簽就能獲取有關值的信息。同時，將可視化數據連接到滑塊還可以創建更佳的用戶體驗。

可視化輸出為何重要？

一位國外的著名設計師曾說，“A picture is worth a thousand words”。那么，圖片的表達方式真的能勝過萬千文字的描述嗎？我們不妨來看看。

我們假定有一個用戶，這個用戶可能是任何人，可視化設計都能很好的滿足用戶需求，我們不妨來看看一下場景。

用戶想要購房，如何在紛擾的戶型中做出選擇？可視化輸出。

用戶想要為自己的網站挑選一款合適的背景色，該怎么直觀的挑選？可視化輸出。

用戶在挑選不同的漢堡，又該怎么輕松查看并做出選擇？可視化輸出。

用戶想對某個產品或者網站進行反饋，如何表達？可視化輸出。

在一些情況下，如果用戶不能預先看到輸出結果，很難做出正確的決定。在Tylko網站上，視覺輸出可以讓用戶直觀看到各類家具的外觀。如果只通過閱讀測量結果就很難讓用戶理解實物的具體大小了。

2. 幫助用戶做出選擇

滑塊雖然可以幫助用戶查看各個選擇項，但在某些情況下，直接引導用戶找到他們想要的結果也很重要。換句話說，好的用戶界面可以幫助和指導用戶。

滑塊可以引導用戶做出明智的選擇?；瑝K的這種設計被很多網站采用，Airbnb就是一個典型的例子。

Airbnb將價格范圍選擇的滑塊與直方圖進行了配對，在直方圖上顯示了價格分布和每晚平均價格。此圖表可以很好的引導用戶在預期的價格區間里做出選擇。

無獨有偶，在Trulia網站上你會可以看到滑塊引導用戶做出選擇的優秀案例。Trulia的房屋購買力承受計算器采用了色彩值變化的滑塊設計，該滑塊能夠通過色彩變化和形狀大小變化很直觀的告知用戶相關的債務收入情況，以此來引導用戶做出正確選擇，規避風險。

3. 允許用戶設置特定值

許多滑塊都有同樣的問題，很難通過滑動滑塊來選中一個精確值。毫無疑問，在這一點上，滑塊永遠也無法取代常規文本輸入字段。這里有一個建議，如果你的設計上有精確輸入的需求，最好同時使用輸入字段與滑塊。

SGS的住房成本計算器提供了兩種設置值的方法，使用滑塊或在相關字段中輸入值。如果你也想在自己的產品中運用該設計，一定要確保所有內容可以同步：當用戶使用滑塊更改值時，輸入框中的值也要更新，同理，如果用戶輸入了一個值，滑塊也應該更新。

4. 解決盲點問題

移動應用程序中的滑塊通常會遇到盲點問題。比如當手指覆蓋某個重要數據（比如一個選定值）時，就容易產生盲點。針對此問題，Virgil Pana創建了流體滑塊的概念，這樣，用戶在與滑塊交互時也能看到他們選擇的值，從而解決盲點問題。

5. 滑塊的設計

滑塊的設計其實已經不是難事，尤其是現在很多的設計工具已經有了很多封裝好的組件，拖拽即可使用，比如在Mockplus中，就有三種滑塊樣式可供選擇：滑塊、水平滑塊和垂直滑塊。尤其是對于早期的產品原型設計，這就可以起到很好的設計說明。

以上就是本次分享的滑塊設計概念，希望對你有所幫助，有更好的見解歡迎留言。

原文作者：Nick?Babich 翻譯：Trista
原文鏈接：https://uxplanet.org/4-creative-concepts-of-slider...

學習工具，但不受限于某種工具。摹客，高效協作，從產品到開發，只要一個文檔，讓你的團隊高效協作！

總結

以上是生活随笔為你收集整理的qt 怎么设计个性化的滑块_小小滑块大大学问，你真的会用滑块了吗？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。