設計師必看！國外8大常見下拉菜單設計示例+教程

08-10

來自專欄摹客產品設計專欄10 人贊了文章

下拉菜單設計是APP和網頁設計中比較常見的輸入控制項，它在不同的使用情景中發揮著同等重要的作用。作為一名UI/UX設計師，如何才能設計出一個既好看又實用的下拉菜單？今天，小編為大家整理了8款頂尖常見的網頁下拉菜單供大家尋求靈感，並介紹了簡單的設計步驟可供設計師練習。

網頁下拉菜單設計示例

1.Military Boekelo

Military Boekelo是國外知名的馬術網站，網站整體色彩為綠色白色，清爽自然。該網頁下拉菜單使用了經典的白色底色，黑色字體，簡潔大方。

2. Adira

Adira（亞德里亞航空）是一家總部位於斯洛維尼亞首都盧布爾雅那的航空公司，該網站的整體設計取色低調，給用戶沉穩可靠的感覺。它的下拉菜單設計在主界面右上角位置。設計者考慮到語言切換非網站的主要信息，為避免喧賓奪主嫌疑，使用了較小的字體和純色背景。

3.Japan Airline

Japan Airline 是日本的一家航空公司，網站整體風格偏輕鬆活潑，想用戶展示了美麗的風景圖片。該網站的下拉菜單設計主要應用於用戶對出發地及目的地的選擇上，點擊觸發出發/到達即會彈出選項。

4. Dribbble

Dribbble是一個向設計師等人群提供作品在線服務，供用戶查看已完成或正在創作的作品交流網站。該網站整體採用黑白粉三個色調，下拉菜單設計背景採用的黑色，這樣設計既能與導航欄背景色保持一致，也不用擔心白色背景色與界面融為一體，產生視覺混淆。

5. Vimeo

Vimeo是國外一個高清視頻播客網站，為了不影響主頁流動的動畫效果，導航欄使用透明背景，字體也選用了低調的灰色。該網站的下拉菜單背景色為深灰色，選中的條目字體背景會呈淺灰色，字體也對應變為白色，以便用戶清楚地看到選項信息。

6. Airbnb

Airbnb （愛彼迎）是一家聯繫旅遊人士和家有空房出租的房主的服務型網站，它為用戶提供多樣的住宿信息。它的下拉菜單位於右側的信息選填框中，使用白色為背景色，選中狀態為藍色，整體配色清爽，相關信息的展示也一目了然。

7. Alaska

Alaska 是一個機票預定網站，它的下拉菜單設計位於左側預定等相關信息選擇欄中。下拉菜單出現的位置偏多，如在人數選擇，兒童年齡等位置。整體背景色為白色，選中某選項後會出現藍色邊框，藍色字體表示選中狀態。

8. RumChata

RumChata是一個高端烈酒品牌網站，該網站的下拉菜單設計應用於網站語言切換場景。背景色與眾多網站一致，選擇了百搭的白色。而字體選中後，條目的背景色變為淺灰色，字體的顏色由黃色變為黑色，在視覺上起到了一定的強調作用。

欣賞了這麼多出色的網頁下拉菜單示例，小編相信各位已經躍躍欲試了！心動不如行動，趕緊動手設計吧！作為新手不知道從何下手？沒關係，小編挑選了一款簡單快速的原型工具，並羅列了詳細的設計步驟以供參考。

設計步驟：

Step1：從左側組件庫中選擇面板組件拖放至工作區。

Step2 : 具體菜單樣式可根據需求自定義。

Step3：設置交互。

（1）面板1，鏈接到當前面板，調整大小（調整尺寸和面板中菜單尺寸相當，並設置自動還原）。鏈接到面板2，位移（位移尺寸和上一個面板展開尺寸相當，並設置自動還原）。鏈接到面板3，位移（同上）。

（2）面板2，鏈接到當前面板，調整大小（同上）。鏈接到面板3，位移（同上）。

（3）面板3，鏈接到當前面板，調整大小（同上）。

Step 4：交互設置完成，將面板調整到菜單第一條選項的寬度，然後按交互順序疊放。

Step5：點擊預覽即可查看手風琴下拉菜單效果。

What? 不夠直觀？好吧好吧，滿足你的需求，戳這裡可以查看教程視頻喲！

下拉菜單設計的形式多種多樣，是最令設計師頭疼的交互之一。設計師通常不知道如何下手，通過瀏覽本篇8例網頁下拉菜單示例以及設計步驟，相信你已經有了靈感。心動不如行動，趕緊開始你的設計吧！