編輯導(dǎo)語：在UI組件中，下拉菜單是我們經(jīng)常能看到的組件類別之一。下拉菜單的使用可以讓用戶看到更多界面選擇，在設(shè)計(jì)合理得當(dāng)?shù)那闆r下有助于為用戶提供優(yōu)質(zhì)體驗(yàn)。本文作者便介紹了下拉菜單的設(shè)計(jì)要點(diǎn)，讀完之后，也許會(huì)對你有所幫助。

網(wǎng)站導(dǎo)航欄中經(jīng)常能看到下拉菜單的使用。它是大多數(shù)用戶熟悉的UI組件之一，很多設(shè)計(jì)師在導(dǎo)航設(shè)計(jì)中也會(huì)依賴這類組件。

但是怎樣區(qū)分下拉菜單的設(shè)計(jì)是否合理呢？在這篇文章中，我們將從什么是下拉菜單開始，一步步來分析下拉菜單的設(shè)計(jì)構(gòu)成。

一、什么是下拉菜單？

下拉菜單是經(jīng)典的UI組件，服務(wù)于各種不同程度的需求。用戶可以在很多地方應(yīng)用到下拉菜單，例如在網(wǎng)頁導(dǎo)航欄中就能頻繁地看到下拉菜單的使用。

但有沒有思考過，下拉菜單背后都承載著哪些功能和目的？

設(shè)定好的下拉菜單通常用作以下功能：

• 命令菜單：展開后，下拉菜單可以展示更多的選項(xiàng)按鈕，讓用戶獲得更多對界面的選擇權(quán)。
• 導(dǎo)航菜單：水平導(dǎo)航欄中一種常見的導(dǎo)航菜單，用于為用戶提供更多鏈接。
• 表單填寫：方便用戶從許多不同的選項(xiàng)中進(jìn)行選擇，例如在酒店網(wǎng)站上選擇房間類型或者將要住多少人時(shí)的下拉表單設(shè)計(jì)。
• 屬性選擇：允許用戶從多個(gè)選項(xiàng)中選擇一個(gè)值，操作方式類似于表單寫。

二、下拉菜單設(shè)計(jì)法則

下拉菜單在設(shè)計(jì)中也存在爭議，例如很多設(shè)計(jì)師在設(shè)計(jì)網(wǎng)頁導(dǎo)航時(shí)過分依賴下拉菜單導(dǎo)致設(shè)計(jì)缺乏創(chuàng)新，還有就是在移動(dòng)端中下拉設(shè)計(jì)會(huì)占用過多屏幕空間，造成可用性上的問題。

但如果設(shè)計(jì)得當(dāng)，下拉菜單能夠提供很出色的產(chǎn)品體驗(yàn)，來看看這些關(guān)鍵的設(shè)計(jì)法則。

1. 不要更改顯示的選項(xiàng)

許多平臺(tái)都使用交互式下拉菜單，其中的選項(xiàng)取決于設(shè)置或選定的功能。

如果窗口中列出的選項(xiàng)根據(jù)用戶所查看的網(wǎng)站的不同而有所變化，則會(huì)讓用戶感到困惑，增加學(xué)習(xí)使用功能的成本，會(huì)直接影響產(chǎn)品的可發(fā)現(xiàn)性和可用性。

通常需要確定菜單上的選項(xiàng)并保持不變。這將幫助用戶了解可以使用下拉菜單執(zhí)行的一般操作，同時(shí)立即知道無法選擇哪些選項(xiàng)。

2. 讓用戶看到所有選項(xiàng)

設(shè)計(jì)下拉菜單時(shí)一個(gè)主要考慮的問題是選項(xiàng)的大小和數(shù)量，是哪些原因?qū)е孪吕藛蔚某叽缣螅?/p>

下拉菜單的可用性與尺寸大小密切相關(guān)。如果菜單提供太多的選項(xiàng)和鏈接，用戶將無法一眼看到它們。

這可能會(huì)導(dǎo)致用戶在打開下拉菜單的同時(shí)難以滾動(dòng)，或者沒有意識(shí)到需要滾動(dòng)才能看到更多選項(xiàng)。

當(dāng)還有其他選項(xiàng)時(shí)，一個(gè)查看更多的按鈕可以快速讓用戶了解到存在更多的選項(xiàng)，引導(dǎo)用戶做出選擇。

3. 為認(rèn)知找到合適的平衡點(diǎn)

下拉菜單可以讓用戶在不輸入內(nèi)容的情況下就可以做出選擇。

一般情況下，輸入信息（打字）需要用戶付出大量的認(rèn)知努力，所以在很多表單設(shè)計(jì)中會(huì)采用下拉選項(xiàng)來提升操作效率。

一個(gè)輸入生日的表單設(shè)計(jì)，月份填寫采用下拉菜單的設(shè)計(jì)，因?yàn)橐荒曛挥?2個(gè)月，方便用戶快速選擇；年份和日期沒有采用下拉設(shè)計(jì)而是直接輸入，因?yàn)槟攴莺腿掌谟泻艽蟮姆秶梢赃x擇，使用下拉設(shè)計(jì)反而會(huì)增加使用負(fù)擔(dān)。

4. 不要濫用主導(dǎo)航中的下拉菜單

很多網(wǎng)站都在使用甚至濫用下拉菜單，因?yàn)檫@是一種很方便的設(shè)計(jì)形式，在網(wǎng)頁中使用很少的屏幕空間就可以存儲(chǔ)更多的路徑和鏈接，同時(shí)可以確保用戶能夠回到原來的位置。

下拉菜單雖然占據(jù)很少的網(wǎng)頁空間，但導(dǎo)航上的一些重要信息會(huì)被隱藏到更深的層級中，會(huì)導(dǎo)致用戶難以發(fā)現(xiàn)菜單里面的內(nèi)容。

如果網(wǎng)站包括很多層級的網(wǎng)頁或分類，考慮使用大型菜單。顯示方式與下拉菜單類似，但大型菜單更引人注目，這意味著用戶不太可能忽視主導(dǎo)航。

三、移動(dòng)端下拉菜單設(shè)計(jì)

移動(dòng)端的屏幕尺寸很小，設(shè)計(jì)難度也會(huì)更大，因?yàn)橄吕藛卧谡归_時(shí)往往會(huì)占用大量空間。把握這些設(shè)計(jì)技巧，移動(dòng)端上也可以更好地使用下拉菜單。

1. iOS選擇器

蘋果很早就在考慮如何在手機(jī)屏幕上設(shè)計(jì)下拉菜單，蘋果沒有直接在手機(jī)中使用下拉菜單，而是專門定制了選擇器組件。

選擇器組件不像傳統(tǒng)下拉列菜單那樣在屏幕上展開，而是從屏幕底部升起，占據(jù)三分之一到一半的空間。同時(shí)仍然可以看到原來的界面，以便用戶可以參考之前的內(nèi)容。

另外蘋果建議設(shè)計(jì)師盡量將選項(xiàng)保持在最低限度，因?yàn)闈L動(dòng)一長串選項(xiàng)對用戶來說可能會(huì)很乏味。

2. Android

與iOS不同，Android沒有定制專門的組件，而是為設(shè)計(jì)師提供了一些在Android應(yīng)用程序上正確使用下拉菜單的建議。

下拉菜單可以放在屏幕上的任何地方，但必須與觸發(fā)它們的圖標(biāo)很接近或有聯(lián)系。另一個(gè)重要的細(xì)節(jié)是菜單狀態(tài)的變化，下拉菜單的活動(dòng)狀態(tài)應(yīng)該幫助用戶了解他們在界面中的位置或操作。

四、下拉菜單案例分析

1. Puma

Puma提供了一個(gè)帶有多級導(dǎo)航功能的下拉菜單，展開的菜單不僅簡潔明了地顯示了商品的幾個(gè)大分類，還展示了具體的商品細(xì)分。

雖然下拉菜單中包含了很多選項(xiàng)，但經(jīng)過清晰地層級劃分和排版，讓這些信息很容易被用戶理解，整體的設(shè)計(jì)簡潔明了，干凈而時(shí)尚。

2. Philip Lester

頁面中的下拉菜單設(shè)計(jì)充分利用視覺效果，包含了很多細(xì)節(jié)：有趣的圖標(biāo)使用很少的空間提供了大量的信息；標(biāo)題層次分明，文案的設(shè)計(jì)言簡意賅；帶有透明度的背景讓下拉菜單看起來更自然。

3. Shiva

頁面設(shè)計(jì)涉及到漢堡菜單和下拉菜單之間的聯(lián)合使用。

雖然最左邊的設(shè)計(jì)只使用圖標(biāo)可能表達(dá)的信息不夠深入，但至少為設(shè)計(jì)提供了更多可能性。最右邊的設(shè)計(jì)更為合理，用戶可以輸入和搜索他們喜歡的食物，也能在下拉菜單中選擇。

4. Airbnb

Airbnb網(wǎng)站的設(shè)計(jì)非常關(guān)注細(xì)節(jié)，并提供了出色的體驗(yàn)。當(dāng)用戶預(yù)訂住宿時(shí)，下拉菜單顯示三種類型的來賓：成人、兒童和嬰兒。對于每種類型的客戶，用戶都可以選擇增加或減少，直到達(dá)到所需的數(shù)量。

最后

下拉菜單具有將許多不同的內(nèi)容壓縮到一個(gè)組件中的能力，從而一定程度上節(jié)省屏幕空間。在保持可用性的前提下，下拉菜單能夠真正幫助用戶，并減輕設(shè)計(jì)負(fù)擔(dān)。

作者：Clippp，微信公眾號：Clip設(shè)計(jì)夾。每周精選設(shè)計(jì)文章，專注分享關(guān)于產(chǎn)品、交互、UI視覺上的設(shè)計(jì)思考。

本文由 @Clippp 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。