網(wǎng)站導(dǎo)航欄中經(jīng)常能看到下拉菜單的使用。它是大多數(shù)用戶熟悉的UI組件之一肚豺，很多設(shè)計師在導(dǎo)航設(shè)計中也會依賴這類組件板甘。
但是怎樣區(qū)分下拉菜單的設(shè)計是否合理呢？在這篇文章中详炬，我們將從什么是下拉菜單開始盐类，一步步來分析下拉菜單的設(shè)計構(gòu)成。
?1.什么是下拉菜單呛谜？
下拉菜單是經(jīng)典的UI組件在跳，服務(wù)于各種不同程度的需求。用戶可以在很多地方應(yīng)用到下拉菜單隐岛，例如在網(wǎng)頁導(dǎo)航欄中就能頻繁地看到下拉菜單的使用猫妙。
但有沒有思考過，下拉菜單背后都承載著哪些功能和目的聚凹？
設(shè)定好的下拉菜單通常用作以下功能：
命令菜單：展開后割坠，下拉菜單可以展示更多的選項按鈕，讓用戶獲得更多對界面的選擇權(quán)妒牙。
導(dǎo)航菜單：水平導(dǎo)航欄中一種常見的導(dǎo)航菜單彼哼，用于為用戶提供更多鏈接。
表單填寫：方便用戶從許多不同的選項中進行選擇湘今，例如在酒店網(wǎng)站上選擇房間類型或者將要住多少人時的下拉表單設(shè)計敢朱。
屬性選擇：允許用戶從多個選項中選擇一個值，操作方式類似于表單寫摩瞎。
?2.下拉菜單設(shè)計法則?
下拉菜單在設(shè)計中也存在爭議拴签，例如很多設(shè)計師在設(shè)計網(wǎng)頁導(dǎo)航時過分依賴下拉菜單導(dǎo)致設(shè)計缺乏創(chuàng)新，還有就是在移動端中下拉設(shè)計會占用過多屏幕空間旗们，造成可用性上的問題蚓哩。
但如果設(shè)計得當，下拉菜單能夠提供很出色的產(chǎn)品體驗上渴，來看看這些關(guān)鍵的設(shè)計法則：
不要更改顯示的選項
許多平臺都使用交互式下拉菜單岸梨，其中的選項取決于設(shè)置或選定的功能。
如果窗口中列出的選項根據(jù)用戶所查看的網(wǎng)站的不同而有所變化驰贷，則會讓用戶感到困惑盛嘿，增加學(xué)習(xí)使用功能的成本，會直接影響產(chǎn)品的可發(fā)現(xiàn)性和可用性括袒。
通常需要確定菜單上的選項并保持不變次兆。這將幫助用戶了解可以使用下拉菜單執(zhí)行的一般操作，同時立即知道無法選擇哪些選項锹锰。
讓用戶看到所有選項
設(shè)計下拉菜單時一個主要考慮的問題是選項的大小和數(shù)量芥炭，是哪些原因?qū)е孪吕藛蔚某叽缣螅?/p>
下拉菜單的可用性與尺寸大小密切相關(guān)漓库。如果菜單提供太多的選項和鏈接，用戶將無法一眼看到它們园蝠。
這可能會導(dǎo)致用戶在打開下拉菜單的同時難以滾動渺蒿，或者沒有意識到需要滾動才能看到更多選項。
▲?當還有其他選項時彪薛，一個查看更多的按鈕可以快速讓用戶了解到存在更多的選項茂装，引導(dǎo)用戶做出選擇。
為認知找到合適的平衡點
下拉菜單可以讓用戶在不輸入內(nèi)容的情況下就可以做出選擇善延。
一般情況下少态，輸入信息(打字)需要用戶付出大量的認知努力，所以在很多表單設(shè)計中會采用下拉選項來提升操作效率易遣。
▲?一個輸入生日的表單設(shè)計彼妻，月份填寫采用下拉菜單的設(shè)計，因為一年只有12個月豆茫，方便用戶快速選擇侨歉；年份和日期沒有采用下拉設(shè)計而是直接輸入，因為年份和日期有很大的范圍可以選擇揩魂，使用下拉設(shè)計反而會增加使用負擔幽邓。
不要濫用主導(dǎo)航中的下拉菜單
很多網(wǎng)站都在使用甚至濫用下拉菜單，因為這是一種很方便的設(shè)計形式肤京，在網(wǎng)頁中使用很少的屏幕空間就可以存儲更多的路徑和鏈接颊艳，同時可以確保用戶能夠回到原來的位置茅特。
▲?下拉菜單雖然占據(jù)很少的網(wǎng)頁空間忘分，但導(dǎo)航上的一些重要信息會被隱藏到更深的層級中，會導(dǎo)致用戶難以發(fā)現(xiàn)菜單里面的內(nèi)容白修。
▲?如果網(wǎng)站包括很多層級的網(wǎng)頁或分類妒峦，考慮使用大型菜單。顯示方式與下拉菜單類似兵睛，但大型菜單更引人注目肯骇，這意味著用戶不太可能忽視主導(dǎo)航。
?3.移動端下拉菜單設(shè)計?
移動端的屏幕尺寸很小祖很，設(shè)計難度也會更大笛丙，因為下拉菜單在展開時往往會占用大量空間。把握這些設(shè)計技巧假颇，移動端上也可以更好地使用下拉菜單胚鸯。
iOS選擇器
蘋果很早就在考慮如何在手機屏幕上設(shè)計下拉菜單，蘋果沒有直接在手機中使用下拉菜單笨鸡，而是專門定制了選擇器組件姜钳。
▲?選擇器組件不像傳統(tǒng)下拉列菜單那樣在屏幕上展開坦冠，而是從屏幕底部升起，占據(jù)三分之一到一半的空間哥桥。同時仍然可以看到原來的界面辙浑，以便用戶可以參考之前的內(nèi)容。
另外蘋果建議設(shè)計師盡量將選項保持在最低限度拟糕，因為滾動一長串選項對用戶來說可能會很乏味判呕。
Android
與iOS不同，Android沒有定制專門的組件送滞，而是為設(shè)計師提供了一些在Android應(yīng)用程序上正確使用下拉菜單的建議佛玄。
▲?下拉菜單可以放在屏幕上的任何地方，但必須與觸發(fā)它們的圖標很接近或有聯(lián)系累澡。另一個重要的細節(jié)是菜單狀態(tài)的變化梦抢，下拉菜單的活動狀態(tài)應(yīng)該幫助用戶了解他們在界面中的位置或操作。
?4.下拉菜單案例分析?
Puma
▲?Puma提供了一個帶有多級導(dǎo)航功能的下拉菜單愧哟，展開的菜單不僅簡潔明了地顯示了商品的幾個大分類奥吩，還展示了具體的商品細分。
雖然下拉菜單中包含了很多選項蕊梧，但經(jīng)過清晰地層級劃分和排版霞赫，讓這些信息很容易被用戶理解，整體的設(shè)計簡潔明了肥矢，干凈而時尚端衰。
Philip Lester
▲?頁面中的下拉菜單設(shè)計充分利用視覺效果，包含了很多細節(jié)：有趣的圖標使用很少的空間提供了大量的信息甘改；標題層次分明旅东，文案的設(shè)計言簡意賅；帶有透明度的背景讓下拉菜單看起來更自然十艾。
Shiva
▲?頁面設(shè)計涉及到漢堡菜單和下拉菜單之間的聯(lián)合使用抵代。雖然最左邊的設(shè)計只使用圖標可能表達的信息不夠深入，但至少為設(shè)計提供了更多可能性忘嫉。最右邊的設(shè)計更為合理荤牍，用戶可以輸入和搜索他們喜歡的食物，也能在下拉菜單中選擇庆冕。
Airbnb
▲?Airbnb網(wǎng)站的設(shè)計非常關(guān)注細節(jié)康吵，并提供了出色的體驗。當用戶預(yù)訂住宿時访递，下拉菜單顯示三種類型的來賓：成人晦嵌、兒童和嬰兒。對于每種類型的客戶，用戶都可以選擇增加或減少耍铜，直到達到所需的數(shù)量邑闺。
?最后?
下拉菜單具有將許多不同的內(nèi)容壓縮到一個組件中的能力，從而一定程度上節(jié)省屏幕空間棕兼。在保持可用性的前提下陡舅，下拉菜單能夠真正幫助用戶，并減輕設(shè)計負擔伴挚。
慢慢來比較快靶衍，希望對你有幫助！
精彩推薦：
