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