初級設計師在進行設計時,往往會被原始樣式和固定思維局限。本文從下拉列表組件(down)的使用方法出發(fā),從小見大,不僅依據(jù)場景拓展了下拉列表的展現(xiàn)形式,甚至提供了可替代下拉列表的組件與設計模式,幫助設計師在進行設計創(chuàng)作時有更廣的思考方向和更豐富的設計表達。
作為最廣泛且頻繁使用的UI組件之一,下拉列表 (down) 為設計者提供了一個簡易的、可以將多個選項組合在一個容器內(nèi)的方法。
然而依然有一些改善下拉列表使用體驗的手段。如果你遵循了這些小竅門,既可以享受下拉列表的靈活性和簡單性,又可以錦上添花地提升產(chǎn)品的體驗。
此文結合了Golden Krishna(「最佳界面就是沒有界面」的作者,Google員工)在2016年SXSW上的主題演講,以及Eric Campbell的“嘿,去他的下拉列表”文中的內(nèi)容。
1.智能預設默認項
我們通過大量的數(shù)據(jù)分析以及觀測總體模式,可以判斷出下拉列表內(nèi)最常用的選項是哪個。如果80%的用戶選擇了這個特定選項,那么可將該選項設置為智能的默認顯示項,讓這批用戶完全跳過此步驟。
例如,如果用戶居住于科羅拉多州且要在線支付超速罰單,明智的方式是將支付網(wǎng)站內(nèi)“請選擇您所在州”的默認選項直接設置為科羅拉多州。
2.盡量精簡
如果有可能,我們可以通過分析得知下拉菜單中哪些選項不太需要。若用戶僅選擇少數(shù)幾個選項,而很少選擇或從未選擇其他選項,那么我們可以考慮刪除不常選擇的選項。簡潔的下拉菜單將讓用戶更容易快速選中與目標最相關的選項。
3.記住操作,定制化顯示默認項
與智能預設默認項類似,我們可以針對不同的用戶個體預勾選一個特定項。例如,如果登錄用戶經(jīng)常訂購越南菜,那么我們可以為他們預勾選“越南菜”選項,并展示其他相關選擇。輸入框的顯示越智能,用戶的體驗就越好。
這也適用于航空或旅行軟件。一旦預訂的網(wǎng)站知道用戶經(jīng)常往返的目的地,這些選項都可以設置為默認選項。
4.識別地區(qū),智能顯示默認項
設置地區(qū)模式會預先選擇與特定地理位置相關的選項。例如,如果用戶要進行換匯或?qū)ふ腋浇纳痰?,“允許應用/網(wǎng)站使用位置”可以讓我們猜測最合適的默認選項?!斑x擇位置”選項,始終可以視作改善體驗的開始。
5.使用單選項來代替下拉菜單
如果只有少數(shù)選項,請考慮使用單選按鈕。
單選按鈕將所有選項一目了然地呈現(xiàn)給用戶,并且只需點擊幾下即可獲得所需的選項。有一個極具適用性的經(jīng)驗是,如果僅有六個及以下的選項,通常用單選項替代下拉菜單。
6.使用滑塊來代替下拉菜單
滑塊以線性方式呈現(xiàn)最小值到最大值的排序方式,是展示選項的一種好方法。它可以使用戶輕松地從視覺上看到最小值和最大值。如果下拉菜單中的內(nèi)容是定量的,并且只有少量選項,那么使用滑塊組件就對了。
“選擇快遞種類”就是一個很好的例子。在滑塊中顯示快遞到達時間:“3天達——隔夜達” 選項,從視覺上直觀呈現(xiàn)了最快和最慢的選項。
7.使用視覺化語言
有時,下拉菜單中的選項可作為視覺元素呈現(xiàn)。與其將它們放置在下拉列表中,還不如將界面設計成展示他們原有狀態(tài)——一個視覺元素的樣式。
我們經(jīng)常在電商網(wǎng)站內(nèi)“選擇顏色”的選項看到這種情況。用直接顯示可選顏色項(而不是展示顏色名)去替換下拉列表的樣式,可以優(yōu)化體驗。
8. 提供智能聯(lián)想功能
提供智能聯(lián)想對于長列表很有用,因為它不需要用戶滾動全部列表去查找所需的選項。當遇到數(shù)量眾多且無法進行刪減的選項時,我們應該提供前面提到的智能聯(lián)想功能,起到過濾下拉菜單的作用。
例如在“選擇您所在地區(qū)”的下拉菜單里,智能聯(lián)想能讓用戶跳過所有州后,快速定位至科羅拉多州。
9. 讓輸入框更加聰明
如果我們的程序能夠理解并認可人類的語言,那么可以讓大多數(shù)用戶跳過通過下拉列表進行選擇的操作步驟。
與其為每種貨幣或國家/地區(qū)代碼提供對應的下拉選擇菜單,不如簡化操作,將程序設計成可以識別用戶輸入的信息,然后對應顯示。將軟件設計成用戶輸入信息后可以顯示類型的方式,這比要求用戶繁瑣地定義每種輸入類型的界面要聰明得多。
10. 使用單選列表框(而不是下拉列表)
下拉菜單需要用戶點擊后才能查看到選項。而列表框則相反,由于列表框直接呈現(xiàn)選項而不是將它們隱藏在下拉列表中,這用戶可以直觀地看到各種可選項。
列表框包含單選列表框、復選列表框以及滑動開關列表框等種類。在顯示種類、型號、價格范圍,顏色等選項時,電商網(wǎng)站經(jīng)常使用列表框,而不是下拉表單的形式。
原文:https://uxdesign.cc/10-ways-to-improve-downs-in-ui-ux-design-59d61a304b70
全站高品質(zhì)素材免費下載!