邮箱订阅

订阅即可免费获取优质的设计资讯!

邮箱订阅

感谢你的支持!

分享到微信朋友圈:

Close

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

热门文章

Mockplus是什么?

Mockplus,更快更简单的原型设计工具。快速创建原型,一键拖拽创建交互,团队协作省事省力。微软、华为、东软、育碧、Oracle、西门子、IBM等全球知名企业和全球300多所高校都在用,你也可以免费开始你的设计!

了解更多

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

Cherry 2018-07-09 07:36:14 阅读:13366


下拉菜单设计是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!

_____

Mockplus,更快更简单的原型设计工具。快速创建原型,一键拖拽创建交互,团队协作省事省力。微软、华为、东软、育碧、Oracle、西门子、IBM等全球知名企业和全球300多所高校都在用,你也可以免费开始你的设计!

免费下载
logo

咨询客服

帮助群:748169314 加入QQ群

服务邮箱:service@jongde.com

咨询客服

在线客服

置顶