设计师必看！国外8大常见下拉菜单设计示例+教程

下拉菜单设计是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例网页下拉菜单示例以及设计步骤，相信你已经有了灵感。心动不如行动，赶紧开始你的设计吧！