1.Converse

Converse是一個(gè)在線售賣最新衣物、鞋子和旅行裝備的時(shí)尚網(wǎng)站。它的首頁選用了點(diǎn)擊可觸發(fā)的下拉菜單式導(dǎo)航設(shè)計(jì)。整個(gè)下拉菜單，最大的特色就是添加了非常豐富的鼠標(biāo)懸浮特效，以幫助用戶快速聚焦各個(gè)選項(xiàng)。 兩欄的布局設(shè)計(jì)，直觀易讀，也方便用戶快速查看和選擇。

2.Santa Cruz

Santa Cruz 是一個(gè)網(wǎng)上的自行車商店。它的下拉菜單導(dǎo)航，利用大量“圖片+文字”的卡片設(shè)計(jì)，直接清晰地展示了網(wǎng)站的各類商品。如此，用戶通過導(dǎo)航菜單，就能提前對(duì)各個(gè)商品有所了解，并快速選擇。省略掉用戶需要逐一點(diǎn)開、查看詳情并最后才能做出選擇的復(fù)雜過程，非常實(shí)用。適合各類在線商店學(xué)習(xí)和借鑒。 

3.Helias Oils 

Helias Oils 是一個(gè)在線精油網(wǎng)站。它的首頁也選用了點(diǎn)擊可觸發(fā)的下拉菜單式導(dǎo)航。除了豐富的懸浮特效，設(shè)計(jì)師還添加了炫酷的波浪式轉(zhuǎn)場(chǎng)動(dòng)效，吸引用戶停留的同時(shí)，也快速引導(dǎo)用戶做出選擇。

4.Whirling CSS3 Drop Down Menu

Whirling CSS3 Drop Down Menu 是一款視覺效果極佳的CSS導(dǎo)航下拉菜單模板設(shè)計(jì)。它最有趣的地方就是添加了十分新穎的扭轉(zhuǎn)展開式動(dòng)效。適合各類暗黑風(fēng)網(wǎng)頁設(shè)計(jì)使用。感興趣的設(shè)計(jì)師，可以點(diǎn)擊“返回教程”查看制作詳情。 

5.Lion Burger

Lion Burger 是一個(gè)使用按鈕式下拉菜單導(dǎo)航的網(wǎng)站。它最值得關(guān)注的就是下拉菜單所選用的配色。紅色選項(xiàng)搭配白色文案的設(shè)計(jì)，清晰展示菜單選項(xiàng)內(nèi)容的同時(shí)，也與主頁黑色背景形成鮮明對(duì)比，讓用戶不自覺的將關(guān)注點(diǎn)放在導(dǎo)航上。 

6.CSS3 Slide Drop Down Box Menu

CSS3 Slide Drop Down Box Menu 是另一款精美的下拉菜單式導(dǎo)航設(shè)計(jì)。鼠標(biāo)指向主菜單選項(xiàng)時(shí)， 相應(yīng)的模塊圖片和菜單列表也會(huì)隨即展示。菜單選項(xiàng)向左、向右自動(dòng)滑出的動(dòng)效設(shè)計(jì)，也極賦創(chuàng)意。感興趣的小伙伴，可以下載看看。 

7.Responsive Drop Down Navigation Menu

Responsive drop down navigation menu 是一款為專為Bootstrap網(wǎng)頁模板而特制的下拉菜單導(dǎo)航。整個(gè)導(dǎo)航分為四欄，前三欄通過純文本設(shè)計(jì)，依次羅列了商品不同分類下的各個(gè)選項(xiàng)，而最后一欄則通過商品圖片輪播設(shè)計(jì)，引導(dǎo)用戶選擇， 結(jié)構(gòu)分明，布局清晰，任何用戶都能快速熟悉并按需選擇。適合具有類似清晰產(chǎn)品分類的網(wǎng)頁或App借鑒。 

8.Drop Down Menu Bryan

Drop Down Menu Bryan 是一款三級(jí)下拉菜單導(dǎo)航設(shè)計(jì)。用戶點(diǎn)擊左上角的導(dǎo)航按鈕，各級(jí)菜單就會(huì)隨即一步步展示，輕松引導(dǎo)用戶快速找到所需選項(xiàng)。適合具有復(fù)雜導(dǎo)航系統(tǒng)的網(wǎng)站借鑒和使用。

9.PopSockets

PopSockets 是一款色彩豐富的概念性下拉菜單導(dǎo)航設(shè)計(jì)。整個(gè)導(dǎo)航設(shè)計(jì)除了高效直觀的四欄布局，還添加了多彩的產(chǎn)品繪畫進(jìn)行點(diǎn)綴，精美實(shí)用。

10.Minimal Drop Down Menu Exploration

Minimal Drop Down Menu Exploration 是一款典型的極簡(jiǎn)風(fēng)下拉菜單導(dǎo)航設(shè)計(jì)。整個(gè)網(wǎng)頁的主菜單導(dǎo)航欄，直接簡(jiǎn)化成了細(xì)小的色彩條。鼠標(biāo)懸浮，相關(guān)菜單選項(xiàng)才會(huì)隨即展開。鼠標(biāo)離開后，又立即收起。反應(yīng)靈敏，簡(jiǎn)潔高效。各類極簡(jiǎn)風(fēng)網(wǎng)頁不妨學(xué)習(xí)一下。 

11.Creative Drop Down Menu with Icons 

Creative Drop Down Menu with Icons 是一個(gè)結(jié)構(gòu)分明的下拉菜單導(dǎo)航。藍(lán)色背景搭配白色選項(xiàng)，美觀時(shí)尚。鏤空的圖標(biāo)點(diǎn)綴，也有力突出了每個(gè)選項(xiàng)，讓整個(gè)菜單結(jié)構(gòu)布局更加清晰。

12.Zenith Arena De Lille Drop Down Menu

Zenith Arena De Lille Drop Down Menu 是一個(gè)專為室內(nèi)競(jìng)技場(chǎng)網(wǎng)站而打造的下拉菜單導(dǎo)航。不同于一般網(wǎng)頁通過添加蒙版或新窗口的方式，展示下拉菜單，該款設(shè)計(jì)直接將菜單融合在界面主頁上，點(diǎn)擊觸發(fā)，整個(gè)頁面也會(huì)隨之展開或隱藏，操作展示更便捷。對(duì)類似菜單展示方式感興趣的設(shè)計(jì)師，可以了解一下。 

13.SkySmile Drop Down Menu

SkySmile Drop Down Menu 最值得學(xué)習(xí)的地方就是選用了漸變色菜單背景。這樣的設(shè)計(jì)，不僅成功突出了下拉菜單內(nèi)容，還輕松與網(wǎng)站的主體配色相呼應(yīng)，確保了網(wǎng)頁整體設(shè)計(jì)風(fēng)格的一致性。 

14.Minimal Drop Down Menu Interaction

Minimal Drop Down Menu Interaction 是一款專為簡(jiǎn)約風(fēng)懸浮導(dǎo)航按鈕而打造的下拉菜單設(shè)計(jì)。整個(gè)菜單和選項(xiàng)都由簡(jiǎn)單的圖標(biāo)構(gòu)成， 適用于各類簡(jiǎn)約風(fēng)App設(shè)計(jì)。 

15.Mobile App Drop Down Menu

Mobile App Drop Down Menu 是另一個(gè)簡(jiǎn)約風(fēng)App可參考的導(dǎo)航按鈕設(shè)計(jì)。除了極簡(jiǎn)的圖標(biāo)導(dǎo)航菜單，此款設(shè)計(jì)還添加了橫向滑出動(dòng)效，更加生動(dòng)地展示低一級(jí)的菜單選項(xiàng)，吸引用戶關(guān)注。 

16.Notification Drop Down Box Design

Notification Drop Down Box Design 是一個(gè)消息提示類下拉菜單設(shè)計(jì)。用戶指向頂部的消息提示圖標(biāo)，菜單隨即展開，清晰呈現(xiàn)相關(guān)涉及人員、發(fā)送時(shí)間以及消息內(nèi)容等信息，實(shí)用性極強(qiáng)。

17.Notification Drop Down Menu

Notification Drop Down Menu 是另一款專為消息提示設(shè)計(jì)打造的下拉菜單。不同于上一個(gè)案例，布滿圖片和文字，此款設(shè)計(jì)外觀上更加簡(jiǎn)約美觀。可愛的卡通貓繪畫，也無形中引導(dǎo)用戶快速聚焦于當(dāng)前的選中項(xiàng)，幫助他們快速做出選擇。

18.HTML Drop Down Menu Animation

HTML Drop Down Menu Animation 也是一個(gè)極簡(jiǎn)的導(dǎo)航按鈕下拉菜單設(shè)計(jì)，提供免費(fèi)的HTML、CSS以及JS源代碼資源。它最值得效仿的地方，就是為下拉菜單添加了逐一展開各個(gè)選項(xiàng)的動(dòng)效設(shè)計(jì)，個(gè)性而獨(dú)特。

19.About Us Drop Down Menu Animation

About Us Drop Down Menu Animation 是一個(gè)專為網(wǎng)頁“關(guān)于我們”的導(dǎo)航模塊而設(shè)計(jì)的下拉菜單。整個(gè)設(shè)計(jì)最亮眼的地方就是添加了菜單彈出動(dòng)效，靈動(dòng)而富有活力。單個(gè)選項(xiàng)"圖標(biāo)+文案"的組合設(shè)計(jì)，也極大方便用戶清晰查看各個(gè)選項(xiàng)。 

20.Interactive Drop Down Menus 

Interactive Drop Down Menus 是一款專為搜索過濾器而打造的交互式下拉菜單設(shè)計(jì)。用戶展開菜單，即可根據(jù)需要選擇篩選條件。整個(gè)下拉菜單，組件豐富，結(jié)構(gòu)分明，值得借鑒。

更多創(chuàng)意下拉菜單設(shè)計(jì)實(shí)例：

21.Shop Drop Down Menu

Shop Drop Down Menu 是一款僅由圖標(biāo)按鈕打造的下拉菜單導(dǎo)航設(shè)計(jì)。 

22.Mini Cooper 

Mini Cooper 是寶馬旗下Mini Cooper汽車的官方網(wǎng)站。它的下拉菜單導(dǎo)航，結(jié)構(gòu)清晰，選擇多樣，特效豐富，引導(dǎo)力極強(qiáng)。 

23.Board Star

Board Star 是一個(gè)在線的滑雪用品售賣店。它的導(dǎo)航欄也選用了下拉菜單式設(shè)計(jì)?？ㄆ讲季郑庇^易用。復(fù)古風(fēng)外觀，也讓用戶輕松記住該網(wǎng)站或品牌。 

24.Porsche 

Porsche 是德國寶時(shí)捷汽車的官方網(wǎng)站。它的導(dǎo)航采用聯(lián)動(dòng)式下拉菜單設(shè)計(jì)，以引導(dǎo)用戶快速查看和選擇所需車型。

25.Audi 

Audi 是德國奧迪汽車的官方網(wǎng)站。它的網(wǎng)站也選用了聯(lián)動(dòng)式下拉菜單導(dǎo)航設(shè)計(jì)。但相較于Porsche， 它則選用了完全不同的布局方式。感興趣的設(shè)計(jì)師，可以對(duì)比兩款設(shè)計(jì)，尋求設(shè)計(jì)靈感。  

26.Sony Play Station

Sony Play Station 采用了橫向展開的圖標(biāo)菜單導(dǎo)航，簡(jiǎn)單的文字介紹，也加深了用戶對(duì)各個(gè)選項(xiàng)的理解。 

27.Mr Clean 

Mr Clean 直接通過產(chǎn)品圖片展示下拉菜單的各個(gè)選項(xiàng)，清晰易用，方便選擇。 

28.KFC 

KFC 采用了豎式下拉菜單設(shè)計(jì)。它的菜單展示動(dòng)畫也十分新穎。

29.Taco Bell

Taco Bell 是一個(gè)在線的美食查找網(wǎng)站。側(cè)邊導(dǎo)航欄搭配豎式下拉菜單的設(shè)計(jì)，也是很有創(chuàng)意了。

30.Bern Tourism 

Bern Tourism 也選用了下拉菜單式導(dǎo)航設(shè)計(jì)。為更好的引導(dǎo)用戶，下拉菜單內(nèi)還加入了更為高效的標(biāo)簽導(dǎo)航欄，以方便用戶根據(jù)需要點(diǎn)擊查看不同標(biāo)簽下的各個(gè)選項(xiàng)。 

使用下拉菜單的形式似乎已是司空見慣：它不占用太多空間的界面，它自動(dòng)驗(yàn)證輸入，所有瀏覽器和平臺(tái)都支持它，實(shí)現(xiàn)下拉菜單非常的方便且容易，用戶對(duì)他們也習(xí)以為常了。

與此同時(shí)，根據(jù)Luke Wroblewski和被多人提及的原則：“下拉菜單應(yīng)該是最后的選擇”的說法，那么下拉菜單卻是最經(jīng)常被誤用的。

讓我們看一看下拉菜單的局限性和令人擔(dān)憂的地方：

• 下拉菜單控件的可用是選項(xiàng)不可見的，直到你點(diǎn)擊或點(diǎn)擊打開它。同時(shí)， 在第一眼看到列表時(shí)，列表的長(zhǎng)度是隱藏的，即用戶無法預(yù)測(cè)一個(gè)下拉菜單是包含2個(gè)還是50個(gè)元素。
• 從下拉列表中選擇一個(gè)選項(xiàng)，（尤其是在移動(dòng)設(shè)備上）是一個(gè)多步驟的過程：你必須點(diǎn)擊下拉菜單打開選項(xiàng)列表，然后滾動(dòng)和瀏覽項(xiàng)目并選擇一個(gè)，然后關(guān)閉下拉。
• 下拉菜單可以讓設(shè)計(jì)師懶惰：設(shè)計(jì)師很容易就把所有可能的選項(xiàng)不分任何優(yōu)先級(jí)一起放到下拉列表里（這很類似于漢堡菜單的做法）。
• 像國家地區(qū)選擇這種很長(zhǎng)的下拉菜單，用眼睛掃描起來簡(jiǎn)直是噩夢(mèng)，尤其是在鍵盤搜索通常是不可用的移動(dòng)端。
• 在可見、可滾動(dòng)但面積很小的屏幕上滾動(dòng)去選擇想要的選項(xiàng)是一件非常痛苦的事情。

在IOS系統(tǒng)上，第一眼可見的選項(xiàng)少的驚人。

但是好消息是這里有大量的很棒的可替代下拉菜單控件的選擇，能為你在不同的情況下所用到。

考慮選項(xiàng)的數(shù)量

若只有兩個(gè)選項(xiàng)（例如開/關(guān)），那么使用下拉菜單就是一個(gè)錯(cuò)誤的選擇。這里你需要用復(fù)選框(CheckBox)或者用切換開關(guān)（toggle switch）。

如果你的下拉菜單僅僅包含是/否、開/關(guān)這樣的選項(xiàng)，那么就用開關(guān)控件來替代它

對(duì)于個(gè)數(shù)少且互斥的選項(xiàng) ，建議使用單選按鈕（radio buttons）或分段控件（segmented），使所有可用的選項(xiàng)第一眼可見，且無需打開列表。

分段控件(SEGMENTED CONTROLS)可以一次性展示出所有的可選項(xiàng)

可見選項(xiàng)的數(shù)量取決于屏幕寬度和選項(xiàng)標(biāo)簽的長(zhǎng)度，但不要超過5項(xiàng)

當(dāng)用戶確切地知道他們?cè)趯ふ沂裁磿r(shí)，對(duì)于大量確定的選項(xiàng)，考慮使用“請(qǐng)輸入…”這樣的解決方案，其中篩選選項(xiàng)列表在輸入第一個(gè)或兩個(gè)字母之后顯示。

用讓用戶來輸入文字來篩選選項(xiàng)的方式替代滑動(dòng)下拉菜單

對(duì)于大型和多樣的列表，嘗試使用現(xiàn)有的用戶數(shù)據(jù)來排列優(yōu)先級(jí)，只列出幾個(gè)用戶常選的選項(xiàng)。這種方式有一個(gè)好處就是90%的用戶會(huì)立即發(fā)現(xiàn)自己偏好的選擇項(xiàng)，只有10%的人選擇立即“其他”然后跳到指定的下一個(gè)問題。

雖然“其他”不適一個(gè)優(yōu)雅的解決方案，但是優(yōu)先級(jí)排序的方式能夠提高大多用戶的體驗(yàn)

考慮預(yù)填寫

下拉列表的好處之一是用戶不必輸入很多內(nèi)容。然而，如果預(yù)期的輸入不是太長(zhǎng)并且經(jīng)常被問到（例如個(gè)人信息），通常用輸入的方式是比較容易的，而不是從列表中選擇：

在移動(dòng)設(shè)備上輸入生日的年份，使用數(shù)字鍵盤比滑動(dòng)長(zhǎng)列表要容易的多

通常，在移動(dòng)設(shè)備上輸入數(shù)值會(huì)比數(shù)字下拉列表效率高。

盡管數(shù)字下拉列表是清晰的，但是輸入數(shù)值依然比滑動(dòng)選擇要方便。

如果驗(yàn)證用戶輸入的內(nèi)容很重要，輸入內(nèi)容用于篩選可用選項(xiàng)時(shí)，“請(qǐng)輸入……”這個(gè)方法可能是有用的。

在羅列出美國各洲的時(shí)候，只需輸入一個(gè)字母就能大大簡(jiǎn)化原本很長(zhǎng)的列表。

當(dāng)列表元素的排序順序不清晰時(shí)，在選項(xiàng)列表中搜索的能力特別有用。

不清楚貨幣代碼排列順序的用戶，能確保他們能在名稱和貨幣代碼間進(jìn)行搜索

同樣的技術(shù)也應(yīng)該應(yīng)用于國家列表上面：使用讓用戶盡快開始鍵入并過濾結(jié)果來替代列出200多個(gè)條目的方案。

對(duì)于表示數(shù)量的非連續(xù)值（例如乘客數(shù)量或購物車中的商品數(shù)量），步進(jìn)器（stepper）允許用戶點(diǎn)擊來快速增加或減少數(shù)值。

對(duì)于連續(xù)數(shù)值或在某個(gè)范圍內(nèi)的數(shù)值，請(qǐng)考慮使用滑塊。

顯示最大值和最小值的范圍有助于用戶理解

選擇當(dāng)下最近日期，使用多個(gè)選擇菜單選擇可能是一次非常痛苦的體驗(yàn)，因此我們選擇使用日期選擇器（date picker）。（但千萬別用它輸入出生日期）

設(shè)計(jì)更智能的下拉菜單

雖然本文一直在告誡你不要使用下拉菜單，但如果在某些場(chǎng)景下，你確實(shí)認(rèn)為讓用戶在下拉菜單中選擇是一種最合適的輸入方式，也沒關(guān)系，不過你要進(jìn)來讓下拉菜單更友好一些。

• 使用有意義的標(biāo)簽：當(dāng)下拉菜單打開時(shí)，菜單標(biāo)題和描述也需要保留且清晰可見。在“選擇”菜單中使用一個(gè)描述性標(biāo)簽，告訴用戶他們正在選擇什么（即“選擇類型”而不是“請(qǐng)選擇”）。
• 按合理的方式排序條目：基于用戶數(shù)據(jù)嘗試將最流行的選項(xiàng)放在列表的頂部。甚至預(yù)先選擇用戶最常選的選項(xiàng)作為默認(rèn)選項(xiàng)。
• 使用智能默認(rèn)值：手機(jī)和瀏覽器知道用戶的位置、日期等大量的信息。利用已知的數(shù)據(jù)預(yù)先為每個(gè)用戶選擇最有可能的選項(xiàng)。
• 減少用戶需要填寫的內(nèi)容，讓計(jì)算機(jī)分擔(dān)一些工作：如果用戶輸入郵政編碼，毫無疑問計(jì)算機(jī)已經(jīng)能識(shí)別出這個(gè)郵政編碼所屬的國家和城市。如果用戶輸入信用卡號(hào)碼，計(jì)算機(jī)也可以自動(dòng)識(shí)別出這是Master信用卡?。不需要讓用戶自己填寫。

• 考慮使用API：使用第三方的方式注冊(cè)比填寫注冊(cè)表要容易。PayPal支付比輸入你的信用卡信息更容易。

如果你想知道更多關(guān)于下拉菜單的設(shè)計(jì)，請(qǐng)看Golden Krishna 和 Eric Campbell 在 SXSW的分享.https://www.youtube.com/watch?v=hcYAHix-riY（請(qǐng)自備梯子）

原作者：ZOLTAN KOLLIN

原文地址：HTTPS://MEDIUM.COM/@KOLLINZ/DROPDOWN-ALTERNATIVES-FOR-BETTER-MOBILE-FORMS-53E40D641B53

譯文地址：https://ddc.dianrong.com/?p=3419

對(duì)于如今熱衷于網(wǎng)頁設(shè)計(jì)的愛好者們來說，單調(diào)的網(wǎng)頁效果已經(jīng)遠(yuǎn)遠(yuǎn)不能滿足他們新奇的心理了。本文就來介紹一種簡(jiǎn)單的下拉菜單的制作。只要你懂得一點(diǎn)點(diǎn)HTML的知識(shí)，就可以。即使什么也不懂，照葫蘆畫瓢也行，呵呵。

第一步，定義下拉菜單JS代碼

第二步，在適當(dāng)?shù)奈恢貌迦肽夸洸藛?

第三步，插入隱藏層的定義.

到這里，你就可以看到一個(gè)完整的下拉菜單的網(wǎng)頁特效了。