詳解網頁“下拉菜單”結構與用戶體驗

Sponsor

前言：下拉菜單雖然不是主要視覺元素，但它在操作的交互體驗中十分重要，尤其是做后臺管理的項目，有下拉表單的頁面就非常之多，如果做得體驗不好，就會引起用戶的反感，前期我們介紹過表單的優化，今天的文章中將詳解網頁下拉菜單的結構剖析，并通過一些案例說明如何提升它的用戶體驗，不要小看這些小部件，學問可多著呢，下面我們來一起學習吧。

下拉菜單主要有兩種類型：

1. 用于導航的下拉菜單
2. 用于表單的下拉菜單

在本文中，我們將對以下內容進行介紹：

1、 結構剖析

下拉菜單的解剖結構與文本輸入字段的解剖結構非常相似。

2、下拉菜單類型和變體

雖然標準的下拉菜單被廣泛理解，但有一些不同的類型和變體，你可能需要在下一步的工作中考慮。請注意，在這些例子中，我只包括表格中使用的下拉菜單，而不包括導航中使用的下拉菜單。

標準下拉菜單
標準下拉菜單是我們聽到 “下拉菜單 “這個詞的時候會想到的。在活動狀態下，它看起來應該和文本輸入字段非常相似，直到你點擊它，它就會打開一個菜單。

帶自動推薦的下拉菜單

我第一次知道自動推薦是在Google的搜索領域；然而，我不知道它是在哪里開始實施的。(如果你知道，請告訴我。)當你有長長的列表，用戶已經知道答案的時候，它就特別有用(例如，你來自哪個國家)。

具有自動完成和自動推薦功能的下拉菜單

自動建議不要與自動完成混淆。自動建議是當輸入字段顯示供用戶選擇的選項時。自動完成是指輸入提出一種完成單詞或短語的方法。

自動填寫字段有時會偽裝成文字輸入，直到你開始打字為止。

帶多選的下拉菜單

雖然大多數下拉菜單是單選按鈕的延伸（因為你只能選擇一個項目），但這個下拉菜單是復選框的延伸：用戶可以在一個輸入字段中選擇多個項目。

如果可能的話，盡量避開這種類型。我不得不使用它，因為一個超長的分類列表，我晚上醒來后仍然為這個決定出了一身冷汗。理想情況下，人們會希望有一個自動推薦&自動完成的組合。

帶分組的下拉菜單

雖然長的下拉菜單并不理想，但你可以將一些項目歸類到不同的類別下，這樣可以更容易找到你想要的東西。

多重選擇菜單

雖然嚴格來說不是下拉菜單，但多選菜單是一個可以考慮的替代方案。與下拉菜單不同的是，它們從一開始就打開，基本上是一個小小的滾動窗口。

雖然它們在桌面上很好，但對于移動端來說就有點糟糕了，因為它們是一個 “卷軸中的滾動”。

日期選擇器

日期選擇器應該只用于安排會議、活動等。有一個星期的日期日歷可以幫助你決定何時安排早午餐，但如果你想輸入護照的到期日期，就會非常煩人。我喜歡那些既可以輸入，也可以從下拉菜單中選擇的日歷–只要確保輸入的內容足夠聰明，可以在月、日、年之間加上”/”，否則就會有點混亂。

3、下拉樣式

與下拉類型不同的是，”下拉樣式 “指的是下拉的實際外觀，而不是它的工作方式。下面我列出了一些常見的樣式。

標準樣式

我稱這種風格為 “標準”，因為這是我們最?？吹降?。

標準樣式（分離式）

我越來越多的看到了分離式菜單的風格。這是很有意義的，因為它允許將菜單放在字段的上方或下方，這取決于瀏覽器的視口。

圓角邊框

圓形的邊框與具有更多游戲性的UI配合起來效果很好。

帶圖標

在輸入的開頭添加一個簡單的圖標可以讓它看起來更有 “設計感”。每當有人抱怨一個表單看起來太無聊時，我就會添加圖標。這是一個簡單的解決方法。

小貼士：如果有人抱怨長表格看起來很無聊，只需添加圖標即可。

帶圖像

作為一項規則，我避免在下拉菜單中添加圖片—-只是因為必須更新背后的維護很麻煩，尤其是當它是一個經常變化的列表時。然而，當你想顯示事物之間的區別時（狗的品種、蛋糕、辦公家具等），它是非常有用的。

然而，我認為，由于下拉式的尺寸有限，很難看清圖片是什么（見上圖），所以除非你把圖片做得非常大，否則通常不值得努力。

Material Design的填充下拉菜單

我是Material Design的忠實粉絲，包括他們的下拉菜單。

在Material Design指南中，”僅限行 “字段已經不再使用，但你仍然會在網上看到它。

僅限行 “字段被替換成了 “已填寫的下拉菜單”，在用戶測試中似乎做得更好。雖然沒有那么酷，但更方便用戶使用–這就是它的意義所在，伙計們。

Material Design的簡要下拉菜單

就像他們的概要文本字段一樣，Material Design的簡要下拉菜單超級酷。他們的菜單與實際的下拉式容器分離，這可以幫助解決一些可用性問題。

我敢肯定，大家都會看到這個性感的小動畫，它的焦點在輸入的頂部變小。我還想指出一些經常被（我）忽略的內容：如果查看實際的下拉列表，您會注意到第一項是空白的。這樣一來，如果用戶想稍后再返回該問題或將其留空，則可以“重置”下拉列表。

4、下拉狀態

當用戶與任何類型的輸入交互時，輸入應該切換狀態或外觀來給用戶反饋。這里我們將研究一下下拉菜單的不同狀態。

活動狀態

活動狀態是用戶在與下拉菜單交互之前的樣子。

禁用狀態

如果你禁用了一個輸入字段，用戶將無法與之交互，但他們可以看到它。如果你的業務規則需要，你可以使用這個功能，但可能不會經常使用。

懸停

如果用戶將鼠標懸停在下拉菜單上，它應該表示可以點擊。

N00b提示：你不能在觸摸設備上懸停，所以如果你是為移動或平板電腦應用設計，就不要設計這些狀態。

高亮狀態

高亮的狀態是指用戶在使用分頁地圖時（這是指用戶使用 “tab “導航界面和 “回車 “輸入信息時），在選擇前突出顯示下拉菜單。我們通?？吹降氖强牲c擊項目上的 “藍色光環”。

然而，有些網站將高亮和焦點狀態結合在一起，這樣即使用戶不點擊 “輸入”，下拉菜單也會直接打開。我對什么是最好的系統很糾結。從邏輯上講，將這兩種狀態結合起來是有意義的；但是，當下拉菜單在沒有我明確告訴他們的情況下打開時，我感到非常困惑。還有人有過這樣的經驗嗎？請在評論中告訴我。

焦點狀態

焦點狀態是指項目可交互的時候。一旦你點擊了下拉菜單，它就會打開一個菜單并顯示其選項。

雖然我所交互的很多下拉菜單在活動狀態和聚焦狀態下都會保持箭頭指向同一個方向，但我更喜歡切換箭頭的方向。我認為它們就像手風琴一樣。而且如果你超級酷的話，你可以用動畫的方式來改變箭頭的方向。

當用戶將鼠標懸停在菜單中的項目上時，它應該顯示被懸停在哪個選項上。

已完成的輸入

一旦用戶選擇了一個選項，輸入端就會自動恢復到活動狀態，只是它將顯示所選項目。

失敗反饋

在自由文本輸入的情況下，用戶有可能會出現錯別字等。但是，由于下拉菜單中的選項是預先設定好的，所以應該只有一種類型的失敗反饋：”不完整 “類型，用戶只有在填寫完表格之前點擊 “提交 “按鈕，才會收到這種反饋。

5、占位符應該說什么

一般情況下，我會保持與自由文本字段類似的占位符/提示文字。還是不確定？這里有幾個選項供您選擇。

保持占位符空白

如果其他文本字段沒有占位符的話，留空占位符通常是最簡單的選擇。

在占位符里有一個通用提示

‘-選擇-‘、’選擇’等都是下拉菜單中的經典提示。

在占位符里有一個推廣詞

使用通用的’Select’/’Choose’，然后你想讓他們選擇的東西，這是一種很酷的方式，可以讓你的下拉菜單保持一致性，同時也可以給用戶一個提示，讓他們知道該怎么做。

在占位符中設置一個選項

雖然你可以在下拉菜單中選擇一個預選項目，但你必須小心翼翼地確保用戶已經看到并閱讀了它，否則他們可能會同意一些他們不愿意看到的東西。
#classicDarkPatternMove

那么，你應該選擇什么方案呢？當有疑問時，選擇一致性。如果你的文本字段都有占位符，那就使用占位符。

6、何時不使用下拉菜單(以及何時使用)

這是獻給所有讓我用下拉菜單輸入出生年份的網站：f*****你。我不需要再通過滾動瀏覽一整個月的列表來提醒我的年齡迅速增長，直到我最終找到我出生的年份。

如果你只有不到5個選項

如果你的選項少于5個，可能更容易使用單選按鈕，而不是使用額外的點擊來獲得所有的列表選項。任何超過五個以上的選項都會開始占用很多空間。

注：有人說，規則是應該少于6個，而不是少于5個，還是讓你來判斷吧。

如果說打字比選字更方便的話

如果你的用戶打字的時間比從下拉菜單中選擇東西要少，你真的要問哪個更好嗎？例如，對于一個出生日期，輸入日期比使用三個單獨的下拉菜單更容易。

有時候，開發者可能會反對這樣做，因為做一個下拉菜單比設置所有關于用戶可以和不能在自由文本字段中輸入什么的規則更容易。唉，已經輸掉了這場戰斗很多次，但我還是繼續打好這場戰斗。

如果你有兩個選項，而且它們是 “開 “和 “關”（或 “是 “和 “否”）。

有一個有兩個選項的下拉菜單有點煩人。特別是在 “是/否 “問題上。Toggles可以很好地解決這類問題。

如果選項是數字式的

如果你的選項是數字，你有幾個選擇。

第一種是，再次讓他們打出它。步進器也是有幫助的，但我只有在行為預期到最大5的時候才會建議這樣做。否則，你可憐的用戶會坐在那里點擊到100。

第二種是使用滑塊選擇值?；瑝K對于較大的數字或近似值特別有幫助。

如果有很多選擇

如果一個下拉菜單有很多選項（如果可能的話，你應該避免這種情況），讓用戶 “搜索 “他們的選項。最?？吹竭@種類型的行為的時候是國家下拉菜單，因為它們很龐大，但也很容易回答。正如前面提到的，這最好是與自動填寫配對。

那么，什么時候應該使用下拉式菜單呢？

一個輸入需要滿足兩個要求才能考慮使用下拉菜單。

01.有六個以上的選項。

02.當選項不是用戶直接就能知道的時候。例如，假設你的用戶正在上傳一個視頻，而主機需要知道要在視頻中附加什么樣的許可證。一般的用戶不會知道平臺上所有的選項，所以下拉菜單是必要的。

7、原生下拉菜單

當時間和預算緊張時，或者當我們在做MVP時，我們傾向于使用原生或默認選項。擁有自定義的輸入是蛋糕上的糖霜，但有時我們沒有選項來做那個甜蜜的糖霜。在這種情況下，知道你有什么東西可以用就好了。

當涉及到不同設備之間的可用性時，原生下拉菜單也是比較安全的。

我們的大規模結賬可用性測試和基準測試顯示，雖然82%的電子商務網站在結賬流程中使用自定義設計的下拉菜單，但31%的自定義設計的下拉菜單有明顯的可用性問題。

默認值

下面是一些原生下拉式的例子。

從這些例子中可以看到，它們都因平臺和瀏覽器的不同而略有不同。它們并不漂亮，但都很好用。

使用shell

以前我一直把它叫做 “半定制”，但最近我發現一篇文章把這個圖案叫做外殼，聽起來更正式。所以我發誓從今以后要把它稱為 “殼”，我還發誓要在會議上使用它，并在人們問我它是什么意思的時候，我就會陶醉在它的力量中，這樣我就可以炫耀我有多聰明。

但是什么是shell？你會問。shell是指當一個字段看起來是自定義的，但當你點擊它時，它使用了原生的下拉菜單樣式。這是一個簡單的方法，可以讓頁面的風格與你的品牌保持一致，并降低開發成本。它還可以幫助解決自定義字段帶來的所有用戶體驗問題。

8、無障礙檢查表

1.下拉菜單的活動狀態(包含標簽)是否大于44px(我們把標簽包含在其中，因為如果點擊標簽，下拉菜單應該還能打開)。

2.下拉菜單中的每一行的高度是否大于44px，中間有8px？

3.顏色是否符合標準？

4.你的下拉菜單是否有高亮的狀態？

5.確保下拉菜單能在標簽地圖上工作。

6.如果你確實使用了自定義的下拉菜單，請確保它可以在瀏覽器視口太低的情況下向上或向下打開。

看到這里想必你已經看完了，希望你能掌握它們，并應用到實踐中去。這里你需要反復的實踐和練習并熟練的掌握他們。

作者 | 追波范兒
來源 | 追波范兒（id:dribbbledesign）

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。