小小滑塊大大學問,你真的會用滑塊了嗎?

2021-09-12 12:16:41 字數 2265 閱讀 4971

滑塊的使用已經不是什麼新鮮的設計方式了,作為一種標準ui控制項,滑塊在設計上被廣泛用於選擇某個值或值範圍。滑塊之所以在可以設計上大顯身手,最主要的原因就是它可以讓使用者快速瀏覽一系列選項,提供流暢的使用者體驗。

滑塊這個控制項,主要用途就是幫助使用者選擇某個特定值(或值範圍)。通常,使用者通過讀取滑塊上的標籤就能獲取有關值的資訊。同時,將視覺化資料連線到滑塊還可以建立更佳的使用者體驗。

視覺化輸出為何重要?

一位國外的著名設計師曾說,「a picture is worth a thousand words」。那麼,的表達方式真的能勝過萬千文字的描述嗎?我們不妨來看看。

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

使用者想要購房,如何在紛擾的戶型中做出選擇?視覺化輸出。

使用者想要為自己的**挑選一款合適的背景色,該怎麼直觀的挑選?視覺化輸出。

使用者在挑選不同的漢堡,又該怎麼輕鬆檢視並做出選擇?視覺化輸出。

使用者想對某個產品或者**進行反饋,如何表達?視覺化輸出。

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

滑塊可以引導使用者做出明智的選擇。滑塊的這種設計被很多**採用,airbnb就是乙個典型的例子。

airbnb將**範圍選擇的滑塊與直方圖進行了配對,在直方圖上顯示了**分布和每晚平均**。此圖表可以很好的引導使用者在預期的**區間裡做出選擇。

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

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

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

移動應用程式中的滑塊通常會遇到盲點問題。比如當手指覆蓋某個重要資料(比如乙個選定值)時,就容易產生盲點。針對此問題,virgil pana建立了流體滑塊的概念,這樣,使用者在與滑塊互動時也能看到他們選擇的值,從而解決盲點問題。

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

使用公升級碼free可獲得摹客設計神器公升級體驗,感受更加高階的功能體驗。具體方式如下:

第二步: 輸入公升級碼:free

摹客idoc的核心功能點包括:智慧型標註、一鍵切圖、多樣批註、互動原型、全貌畫板、團隊管理。支援上傳ps,sketch,adobe xd三大設計工具的設計稿,以及原型圖(justinmind、mockplus、axure等)

三正規化的依賴,小小的知識,大大的學問

三正規化使得資料庫的設計變得有據可依,資料庫的冗餘大大減少。然而,三正規化的定義,卻不那麼讓人省心,一堆文字外加數學知識,讓人著實有點小蒙。雖然說完全按照三正規化設計資料庫並不可取,但是要想設計乙個好的資料庫,三正規化的知識是必不可少的。要想更好理解三正規化的定義,那麼了解依賴是必不可少的,了解了這...

移動端下拉列表 移動端小小小螢幕大大大內涵

視覺語言適配各種大小的移動端螢幕,讓資訊準確的傳達給使用者。為了讓使用者能在不同的場景中合理的使用,設計師就需要針對不同場景使用者會使用到的不同尺寸螢幕進行不同設計。設計方向包括功能 互動 已經視覺展現,從而讓產品能夠更友好的被使用者使用。螢幕的大小不同,所能承載的資訊數量自然也不同。為了保持不同分...

小按鈕,大學問

核心提示 作為最基本的互動控制項,按鈕 button 無論是在 pc 還是移動裝置中都是無處不在的,這些最不起眼但卻是使用最頻繁的按鈕不僅有著大作用還有著大學問。在我們日常使用個人電腦以及手機等各種移動裝置過程中,按鈕或許是最不起眼但卻是使用最頻繁的。對於乙個產品來說,作為最基本的互動控制項的按鈕統...