在網(wǎng)頁設(shè)計和移動端設(shè)計中，下拉菜單可謂說是很常見的一種表現(xiàn)形式，對于下拉菜單的使用設(shè)計師們也是各抒己見。但不可否認(rèn)的是，從設(shè)計的角度來看，下拉菜單設(shè)計的確是一個很好的功能，因為下拉菜單有助于整理煩亂的布局，可有效的引導(dǎo)用戶進行選擇。如果你的布局良好清晰，下拉菜單可以是一個實用的導(dǎo)航工具，同時也會是一個吸引用戶的賣點。在這篇文章中，小編將從下拉菜單的優(yōu)勢，下拉菜單實例以及如何來創(chuàng)建自己的下拉菜單三個方面給大家做一個分享。

首先我們?yōu)槭裁匆O(shè)計下拉菜單呢，下拉菜單有哪些優(yōu)勢？

1.它們在界面上占用的空間不多，節(jié)約了屏幕的空間，使用戶免受錯誤數(shù)據(jù)的干擾。

2.方便用戶使用，可有效的引導(dǎo)用戶。

3.技術(shù)門檻低，實現(xiàn)起來容易。

4.避免滾動?？赏ㄟ^排版，圖標(biāo)和工具提示來精確用戶的選擇

以下小編給大家整理了一些經(jīng)典的下拉菜單實例賞析

有一些下拉菜單設(shè)計，非常簡潔和清晰，而另一些則比較特別和有趣，穿插多種復(fù)雜的元素。我們先來看看簡約界的網(wǎng)頁下拉菜單代表。

簡約界的網(wǎng)頁下拉菜單

Ben Sherman

如果你想采用簡約性的下拉菜單設(shè)計，Ben Sherman絕對是一個值得參考的例子。清晰的導(dǎo)航結(jié)構(gòu)，簡約的白色系，會給人一種很簡單舒服的感覺。

沃爾瑪">沃爾瑪

沃爾瑪?shù)南吕藛卧O(shè)計也遵循簡約風(fēng)格，但相比前一個例子來說，它可以點擊并展開更多不同的類別。這個下拉菜單實例可以用于電子商務(wù)網(wǎng)站中，里面所有產(chǎn)品都被劃分成了更精確的類別，這使買家很容易找到他們想找的東西。

羅技">羅技

導(dǎo)航和下拉菜單作為一個整體應(yīng)該保持一致性，使用相同的樣式，字體和背景顯得尤為重要。羅技的官網(wǎng)就突出了這種一致性，非常美觀漂亮。此設(shè)計比較獨特且引人注目，菜單欄中的一切都井井有條，可以更輕松的瀏覽和找到你需要的東西。

Bern

下拉菜單設(shè)計中的過渡效果是一個非常棒的細(xì)節(jié)。當(dāng)你點擊時，不要很生硬地彈出菜單，而是嘗試向下自然的淡出或淡入。Bern的下拉菜單就帶有淡入淡出的過渡效果，并且下拉列表非常的寬，因此可以輕松地將鼠標(biāo)停留在目標(biāo)上面。

下拉菜單設(shè)計也可以很酷炫，突出視覺效果，并沒有規(guī)定下拉菜單必須只是文本。有許多網(wǎng)站，比較常見的是一些電子商務(wù)網(wǎng)站，它們使用視覺效果來吸引用戶，并突出產(chǎn)品性質(zhì)和服務(wù)的差異化。比如以下例子，東方本田網(wǎng)站設(shè)計的下拉菜單導(dǎo)航，點擊下拉菜單，會彈出車輛產(chǎn)品的縮略圖并清楚的展示了車輛的型號及標(biāo)志，非常的清楚明了，方便了用戶的選擇。這個例子看起來很棒，而且非常有創(chuàng)意。

Dribbble上面極具創(chuàng)意的下拉菜單實例

另外，給大家分享一些dribbble上面極具創(chuàng)意的下拉菜單設(shè)計實例，大可家借鑒一下國外設(shè)計師的靈感以及設(shè)計思路。

No：1

No：2

No：3

No：4

如何快速的做一個下拉菜單

教學(xué)時間到！今天小編教大家如何利用原型設(shè)計工具利器Mockplus來做鼠標(biāo)懸停時菜單下拉的效果。

Step 1：

先用矩形做好一個菜單，將其復(fù)制成多個。其中一個作為菜單的展示區(qū)域（圖中綠色矩形），再把另外幾個拼接起來作為菜單的內(nèi)容。然后在右側(cè)參數(shù)面板中，設(shè)置第一個矩形設(shè)置為不可見。

Step 2：

將綠色矩形移動到不可見矩形的位置，并在右側(cè)參數(shù)面板中將其下移一層，此時依然可以看到綠色矩形，因為上層的形狀是不可見的。

Step 3：

利用交互效果，在界面右側(cè)的參數(shù)面板上，將透明度設(shè)置為0，并點擊“透明度”前的小閃電。選擇“鼠標(biāo)經(jīng)過時”，透明度設(shè)置為100。這樣，一個簡單的鼠標(biāo)懸停下拉菜單例子就做好了。

Step 4：預(yù)覽

當(dāng)然，下拉菜單設(shè)計方式不僅僅以上一種。以上只是介紹了如何用Mockplus做出簡單的下拉菜單，其實用Mockplus還可以做出一些更復(fù)雜的下拉菜單，如手風(fēng)琴菜單，戳鏈接學(xué)習(xí)教程：http://doc.mockplus.cn/?p=3078

總結(jié)

如今咱們的用戶與應(yīng)用程序，網(wǎng)站和產(chǎn)品的大部分互動都會牽涉下拉菜單設(shè)計。結(jié)構(gòu)清晰的網(wǎng)站導(dǎo)航是確保良好用戶體驗的關(guān)鍵，而下拉菜單非常適合擁有多級層次結(jié)構(gòu)的網(wǎng)站。所以大家在設(shè)計時，可以考慮整體布局來決定是否需要下拉菜單，也可借鑒一下國內(nèi)外一些設(shè)計大師們的作品，找找設(shè)計靈感。