订阅摹客文章

免费获取优质的设计资讯!

文章分类
Mockplus是什么?

更快更简单的原型设计工具,微软、联合国国贸中心、华为、百度、东软、育碧、中石油、Oracle、西门子、IBM都在用,你呢?

开始使用
2019,都在用iDoc了!

更高效的协作设计工具,产品团队必备。智能标注、一键切图、多样批注、交互原型、全貌画板、团队管理。

免费使用
【友情推荐】人人秀,H5活动制作工具,3分钟完成制作。

了解更多
入门教程 了解更多

分享到微信朋友圈:

打开微信,点击底部的“发现”,使用 “扫一扫” 即可将网页分享到我的朋友圈。

博客 > UI设计 > 设计师必看!国外8大常见下拉菜单设计示例+教程

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

Cherry
2018-07-09
68282


下拉菜单设计是APP和网页设计中比较常见的输入控件,它在不同的使用情景中发挥着同等重要的作用。作为一名UI/UX设计师,如何才能设计出一个既好看又实用的下拉菜单?今天,小编为大家整理了8款顶尖常见的网页下拉菜单供大家寻求灵感,并介绍了简单的设计步骤可供设计师练习。

网页下拉菜单设计示例


1.Military Boekelo

Military Boekelo是国外知名的马术网站,网站整体色彩为绿色白色,清爽自然。该网页下拉菜单使用了经典的白色底色,黑色字体,简洁大方。

Military Boekelo网页界面

2. Adira


Adira(亚德里亚航空)是一家总部位于斯洛文尼亚首都卢布尔雅那的航空公司,该网站的整体设计取色低调,给用户沉稳可靠的感觉。它的下拉菜单设计在主界面右上角位置。设计者考虑到语言切换非网站的主要信息,为避免喧宾夺主嫌疑,使用了较小的字体和纯色背景。

Adria网页界面

3.Japan Airline


Japan Airline 是日本的一家航空公司,网站整体风格偏轻松活泼,想用户展示了美丽的风景图片。该网站的下拉菜单设计主要应用于用户对出发地及目的地的选择上,点击触发出发/到达即会弹出选项。

Japan Airline网页界面

4. Dribbble


Dribbble是一个向设计师等人群提供作品在线服务,供用户查看已完成或正在创作的作品交流网站。该网站整体采用黑白粉三个色调,下拉菜单设计背景采用的黑色,这样设计既能与导航栏背景色保持一致,也不用担心白色背景色与界面融为一体,产生视觉混淆。

Dribbble网站界面

5. Vimeo


Vimeo是国外一个高清视频播客网站,为了不影响主页流动的动画效果,导航栏使用透明背景,字体也选用了低调的灰色。该网站的下拉菜单背景色为深灰色,选中的条目字体背景会呈浅灰色,字体也对应变为白色,以便用户清楚地看到选项信息。

Vimeo网站界面

6. Airbnb


Airbnb (爱彼迎)是一家联系旅游人士和家有空房出租的房主的服务型网站,它为用户提供多样的住宿信息。它的下拉菜单位于右侧的信息选填框中,使用白色为背景色,选中状态为蓝色,整体配色清爽,相关信息的展示也一目了然。

Airbnb网站界面

7. Alaska


Alaska 是一个机票预定网站,它的下拉菜单设计位于左侧预定等相关信息选择栏中。下拉菜单出现的位置偏多,如在人数选择,儿童年龄等位置。整体背景色为白色,选中某选项后会出现蓝色边框,蓝色字体表示选中状态。

Alaska网站界面

8. RumChata


RumChata是一个高端烈酒品牌网站,该网站的下拉菜单设计应用于网站语言切换场景。背景色与众多网站一致,选择了百搭的白色。而字体选中后,条目的背景色变为浅灰色,字体的颜色由黄色变为黑色,在视觉上起到了一定的强调作用。

RumChata网站界面

如何设计一款实用好看的下拉菜单?

欣赏了这么多出色的网页下拉菜单示例,小编相信各位已经跃跃欲试了!心动不如行动,赶紧动手设计吧!作为新手不知道从何下手?没关系,小编挑选了一款简单快速的原型工具,并罗列了详细的设计步骤以供参考。

设计步骤:

Step1:从左侧组件库中选择面板组件拖放至工作区。

Step2 : 具体菜单样式可根据需求自定义。

Step3:设置交互。

(1) 面板1,链接到当前面板,调整大小(调整尺寸和面板中菜单尺寸相当,并设置自动还原)。链接到面板2,位移(位移尺寸和上一个面板展开尺寸相当,并设置自动还原)。链接到面板3,位移(同上)。

(2) 面板2,链接到当前面板,调整大小(同上)。链接到面板3,位移(同上)。

(3)面板3,链接到当前面板,调整大小(同上)。

Step 4:交互设置完成,将面板调整到菜单第一条选项的宽度,然后按交互顺序叠放。

Step5:点击预览即可查看手风琴下拉菜单效果。

下拉菜单效果预览

What? 不够直观?好吧好吧,满足你的需求,戳这里可以查看教程视频哟!

后记

下拉菜单设计的形式多种多样,是最令设计师头疼的交互之一。设计师通常不知道如何下手,通过浏览本篇8例网页下拉菜单示例以及设计步骤,相信你已经有了灵感。心动不如行动,赶紧开始你的设计吧!


【新年福利】高效的原型设计工具Mockplus为各位赠送新年福利啦~


Mockplus3.5新版本新增了智能标注功能,2019年Mockplus将全面升级为摹客RP,为大家带来更好的体验,Mockplus春节送福利,赶快领取Mockplus个人版激活码吧,数量有限,时间有限,先到先得!

专属激活码:Mockplus2019
激活数量:限量150个。
有效期:2019年1月31日。
激活地址:https://www.mockplus.cn/user/upgrade

上一篇
创意进度条设计-12个优秀作品分享【附实例分析】

Anne   07/10

2018年,你不能错过的8本Web设计书籍推荐

Berry   07/06

下一篇
需要帮助?

摹客产品顾问为你服务

帮助群:651432826

服务邮箱:service@jongde.com