【附教程】2018九款最佳下拉菜單設(shè)計(jì)實(shí)例

時(shí)間：2023-07-24 21:12:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-07-24 21:12:01 來源：網(wǎng)站運(yùn)營

【附教程】2018九款最佳下拉菜單設(shè)計(jì)實(shí)例：在網(wǎng)頁設(shè)計(jì)和移動(dòng)端設(shè)計(jì)中，下拉菜單可謂說是很常見的一種表現(xiàn)形式，對于下拉菜單的使用設(shè)計(jì)師們也是各抒己見。但不可否認(rèn)的是，從設(shè)計(jì)的角度來看，下拉菜單設(shè)計(jì)的確是一個(gè)很好的功能，因?yàn)橄吕藛斡兄谡頍﹣y的布局，可有效的引導(dǎo)用戶進(jìn)行選擇。如果你的布局良好清晰，下拉菜單可以是一個(gè)實(shí)用的導(dǎo)航工具，同時(shí)也會(huì)是一個(gè)吸引用戶的賣點(diǎn)。在這篇文章中，小編將從下拉菜單的優(yōu)勢，下拉菜單實(shí)例以及如何來創(chuàng)建自己的下拉菜單三個(gè)方面給大家做一個(gè)分享。




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


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

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

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

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


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




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

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

Ben Sherman

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

沃爾瑪

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

羅技

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

Bern

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




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

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

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


No：1




No：2






No：3




No：4




如何快速的做一個(gè)下拉菜單


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




Step 1：

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




Step 2：

將綠色矩形移動(dòng)到不可見矩形的位置，并在右側(cè)參數(shù)面板中將其下移一層，此時(shí)依然可以看到綠色矩形，因?yàn)樯蠈拥男螤钍遣豢梢姷摹?br>



Step 3：

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




Step 4：預(yù)覽




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

總結(jié)

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

相關(guān)閱讀：

5分鐘玩轉(zhuǎn)摹客設(shè)計(jì)系統(tǒng)

反面教材，這9個(gè)糟糕的網(wǎng)頁設(shè)計(jì)實(shí)例引以為戒

設(shè)計(jì)類網(wǎng)站的“聯(lián)系我們”頁面設(shè)計(jì)盤點(diǎn)

干貨！2018年你值得一看的網(wǎng)頁設(shè)計(jì)作品集賞析

網(wǎng)頁設(shè)計(jì)有難題？12款網(wǎng)頁設(shè)計(jì)模板給你靈感！

極簡網(wǎng)頁設(shè)計(jì)技巧，打造簡約之美

進(jìn)階學(xué)習(xí)，如何無代碼設(shè)計(jì)一款美觀且實(shí)用的網(wǎng)站？

網(wǎng)站著陸頁設(shè)計(jì)，讓用戶開心著陸的10大技巧！

網(wǎng)站設(shè)計(jì)缺乏創(chuàng)意？視差滾動(dòng)網(wǎng)站設(shè)計(jì)讓你與眾不同

收集網(wǎng)站用戶反饋的5個(gè)常用問題

這9款小眾時(shí)尚的酒店網(wǎng)站設(shè)計(jì)，讓你不再戀家

時(shí)尚的不僅僅是它們的服裝，還有它們的網(wǎng)站設(shè)計(jì)

10個(gè)最新交互式Web設(shè)計(jì)實(shí)例欣賞

---