初級設計師在進行設計時，往往會被原始樣式和固定思維局限。本文從下拉列表組件（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