初級(jí)設(shè)計(jì)師在進(jìn)行設(shè)計(jì)時(shí)，往往會(huì)被原始樣式和固定思維局限。本文從下拉列表組件（down）的使用方法出發(fā)，從小見大，不僅依據(jù)場(chǎng)景拓展了下拉列表的展現(xiàn)形式，甚至提供了可替代下拉列表的組件與設(shè)計(jì)模式，幫助設(shè)計(jì)師在進(jìn)行設(shè)計(jì)創(chuàng)作時(shí)有更廣的思考方向和更豐富的設(shè)計(jì)表達(dá)。

作為最廣泛且頻繁使用的UI組件之一，下拉列表 (down) 為設(shè)計(jì)者提供了一個(gè)簡(jiǎn)易的、可以將多個(gè)選項(xiàng)組合在一個(gè)容器內(nèi)的方法。

然而依然有一些改善下拉列表使用體驗(yàn)的手段。如果你遵循了這些小竅門，既可以享受下拉列表的靈活性和簡(jiǎn)單性，又可以錦上添花地提升產(chǎn)品的體驗(yàn)。

此文結(jié)合了Golden Krishna（「最佳界面就是沒有界面」的作者，Google員工）在2016年SXSW上的主題演講，以及Eric Campbell的“嘿，去他的下拉列表”文中的內(nèi)容。

1.智能預(yù)設(shè)默認(rèn)項(xiàng)

我們通過大量的數(shù)據(jù)分析以及觀測(cè)總體模式，可以判斷出下拉列表內(nèi)最常用的選項(xiàng)是哪個(gè)。如果80％的用戶選擇了這個(gè)特定選項(xiàng)，那么可將該選項(xiàng)設(shè)置為智能的默認(rèn)顯示項(xiàng)，讓這批用戶完全跳過此步驟。

例如，如果用戶居住于科羅拉多州且要在線支付超速罰單，明智的方式是將支付網(wǎng)站內(nèi)“請(qǐng)選擇您所在州”的默認(rèn)選項(xiàng)直接設(shè)置為科羅拉多州。

2.盡量精簡(jiǎn)

如果有可能，我們可以通過分析得知下拉菜單中哪些選項(xiàng)不太需要。若用戶僅選擇少數(shù)幾個(gè)選項(xiàng)，而很少選擇或從未選擇其他選項(xiàng)，那么我們可以考慮刪除不常選擇的選項(xiàng)。簡(jiǎn)潔的下拉菜單將讓用戶更容易快速選中與目標(biāo)最相關(guān)的選項(xiàng)。

3.記住操作，定制化顯示默認(rèn)項(xiàng)

與智能預(yù)設(shè)默認(rèn)項(xiàng)類似，我們可以針對(duì)不同的用戶個(gè)體預(yù)勾選一個(gè)特定項(xiàng)。例如，如果登錄用戶經(jīng)常訂購越南菜，那么我們可以為他們預(yù)勾選“越南菜”選項(xiàng)，并展示其他相關(guān)選擇。輸入框的顯示越智能，用戶的體驗(yàn)就越好。

這也適用于航空或旅行軟件。一旦預(yù)訂的網(wǎng)站知道用戶經(jīng)常往返的目的地，這些選項(xiàng)都可以設(shè)置為默認(rèn)選項(xiàng)。

4.識(shí)別地區(qū)，智能顯示默認(rèn)項(xiàng)

設(shè)置地區(qū)模式會(huì)預(yù)先選擇與特定地理位置相關(guān)的選項(xiàng)。例如，如果用戶要進(jìn)行換匯或?qū)ふ腋浇纳痰?，“允許應(yīng)用/網(wǎng)站使用位置”可以讓我們猜測(cè)最合適的默認(rèn)選項(xiàng)。“選擇位置”選項(xiàng)，始終可以視作改善體驗(yàn)的開始。

5.使用單選項(xiàng)來代替下拉菜單

如果只有少數(shù)選項(xiàng)，請(qǐng)考慮使用單選按鈕。

單選按鈕將所有選項(xiàng)一目了然地呈現(xiàn)給用戶，并且只需點(diǎn)擊幾下即可獲得所需的選項(xiàng)。有一個(gè)極具適用性的經(jīng)驗(yàn)是，如果僅有六個(gè)及以下的選項(xiàng)，通常用單選項(xiàng)替代下拉菜單。

6.使用滑塊來代替下拉菜單

滑塊以線性方式呈現(xiàn)最小值到最大值的排序方式，是展示選項(xiàng)的一種好方法。它可以使用戶輕松地從視覺上看到最小值和最大值。如果下拉菜單中的內(nèi)容是定量的，并且只有少量選項(xiàng)，那么使用滑塊組件就對(duì)了。

“選擇快遞種類”就是一個(gè)很好的例子。在滑塊中顯示快遞到達(dá)時(shí)間：“3天達(dá)——隔夜達(dá)” 選項(xiàng)，從視覺上直觀呈現(xiàn)了最快和最慢的選項(xiàng)。

7.使用視覺化語言

有時(shí)，下拉菜單中的選項(xiàng)可作為視覺元素呈現(xiàn)。與其將它們放置在下拉列表中，還不如將界面設(shè)計(jì)成展示他們?cè)袪顟B(tài)——一個(gè)視覺元素的樣式。

我們經(jīng)常在電商網(wǎng)站內(nèi)“選擇顏色”的選項(xiàng)看到這種情況。用直接顯示可選顏色項(xiàng)（而不是展示顏色名）去替換下拉列表的樣式，可以優(yōu)化體驗(yàn)。

8. 提供智能聯(lián)想功能

提供智能聯(lián)想對(duì)于長(zhǎng)列表很有用，因?yàn)樗恍枰脩魸L動(dòng)全部列表去查找所需的選項(xiàng)。當(dāng)遇到數(shù)量眾多且無法進(jìn)行刪減的選項(xiàng)時(shí)，我們應(yīng)該提供前面提到的智能聯(lián)想功能，起到過濾下拉菜單的作用。

例如在“選擇您所在地區(qū)”的下拉菜單里，智能聯(lián)想能讓用戶跳過所有州后，快速定位至科羅拉多州。

9. 讓輸入框更加聰明

如果我們的程序能夠理解并認(rèn)可人類的語言，那么可以讓大多數(shù)用戶跳過通過下拉列表進(jìn)行選擇的操作步驟。

與其為每種貨幣或國(guó)家/地區(qū)代碼提供對(duì)應(yīng)的下拉選擇菜單，不如簡(jiǎn)化操作，將程序設(shè)計(jì)成可以識(shí)別用戶輸入的信息，然后對(duì)應(yīng)顯示。將軟件設(shè)計(jì)成用戶輸入信息后可以顯示類型的方式，這比要求用戶繁瑣地定義每種輸入類型的界面要聰明得多。

10. 使用單選列表框（而不是下拉列表)

下拉菜單需要用戶點(diǎn)擊后才能查看到選項(xiàng)。而列表框則相反，由于列表框直接呈現(xiàn)選項(xiàng)而不是將它們隱藏在下拉列表中，這用戶可以直觀地看到各種可選項(xiàng)。

列表框包含單選列表框、復(fù)選列表框以及滑動(dòng)開關(guān)列表框等種類。在顯示種類、型號(hào)、價(jià)格范圍，顏色等選項(xiàng)時(shí)，電商網(wǎng)站經(jīng)常使用列表框，而不是下拉表單的形式。

原文：https://uxdesign.cc/10-ways-to-improve-downs-in-ui-ux-design-59d61a304b70