MyException - 我的异常网
当前位置:我的异常网» 网页设计 » 网页设计中的隐藏菜单示范

网页设计中的隐藏菜单示范

www.MyException.Cn  网友分享于:2015-04-28  浏览:0次
网页设计中的隐藏菜单示例

原文出处: designmodo   译文出处:网秦UEC   欢迎分享原创到伯乐头条

在网页设计中使用导航图标这一趋势正迫使我们再度审视导航菜单、它们在设计中的位置以及在用户体验中的角色。尽管这一理念并没有弱化其在导航方面的意义和重要性,但其能够给设计师和开发人员带来更多的创意空间。

根据项目的不同,导航图标彼此区别很大,但是其中大多数会偏向于使用流行、简单、贴合移动端的三行图标,这一类图标外观漂亮,而且在几乎任何环境下都比较带感。这个小图标能够用来隐藏小菜单,也能够隐藏复杂、内容量大的菜单。

如果再给打开过程配合上动态化的功能或细微但吸引人的效果,那么这种古朴的图形更能优化设计。另外,其不仅能够应用于各类导航(明确传达信息),还能帮助解决响应性方面的问题,并促进与移动网站的结合。

下面是一些采用隐藏菜单配合导航图标的网站设计,都是鲜货。

 

eWebDesign

 

本例中,我们可以看到大量的图像背景和视差效果。菜单图标放置在大标题的右上角,打开后有非常详尽的导航菜单指向其他板块。

 

Sampedro

 

标题栏的显眼图片和诙谐的slogan,这二者的组合能够绝对地吸引用户的注意。隐藏导航栏有效地以不突兀的方式将重心从导航栏转移到了复杂的背景上。

 

Chapoleone

 

Chapoleone采用了华丽的照片背景,流露出奢华精美的感觉。在这里如果用综合式的导航栏就会破坏整体的冲击力,因此左上角隐藏在小图形后方的滑出菜单绝对相得益彰。

 

Maecia

 

Maecia通过其诱人的动态效果和精美的背景将好奇的人带入了其作品。为了不让网上的访客迷乱,其主页采用了鼠标单击打开的隐藏导航栏。

 

We are Empire

 

We are Empire证明了基于古典色调和大量留白空间的最简设计也能有华丽而诱人的外观。在这里,隐藏菜单极佳地补完了整体外观。

 

Brand Junkie

 

漂亮的圆形复古风格logo非常抢注意力,让人第一眼就难以忘记。导航图标与整体环境完美贴合,甚至第一眼都找不到,要过几秒钟才能慢慢映入眼帘。

 

Intelart

 

Intelart美妙的暗色首页完美运用了背景与前景的对比。其左上角无缝贴合的汉堡按钮与logo和文字完美回应,以美妙的方式呈现出了一副以图片为核心的精美导航栏。

 

Monograph

 

Monograph的导航图标完全不像是习惯上的三行按钮,但是这一有趣的方式却使其成为了整体环境的重要组成部分,与其他内容完美结合。

 

Camp David Film

 

尽管主导航栏习惯性地占据了标题栏的位置,但公司团队却巧妙地隐藏了二级导航栏。二级导航栏可以让用户进一步通过分类探索网站,节省了大量的空间以便展示漂亮的照片。

 

Michael Villeneuve

 

Michael Villeneuve选用了非常趁手的简约化关键。通过结合俏皮的轮廓线图形、吸引人的小动画和简洁的实心彩色背景,其营造出了美妙而独一无二的用户体验。

 

Exit Film

 

Exit Film采用了网页设计潮流中比较新鲜的集中布局风格。其汉堡按钮占据了中心位置,与非正统的页面安排完美和谐。

 

La Ligne Rouge

 

这里的导航图标目的是完善整体设计并强化印象。导航按钮采用了精美的曲棍球棒,与logo相互呼应,巧妙融入主页页面。

 

Xander

 

通过全屏滚动展示的别致图片,网上的观众完全不会因为缺乏主导航栏而感到麻烦,更不会感到烦人。这里隐藏菜单是个绝佳的选择。

 

Tannbach

 

尽管使用汉堡按钮是主流,但你还是可以返璞归真,把菜单隐藏到简单的拖拽使用面板后方。Tannbach就使用了这一方法。不过,其做法不乏互动和美感。首页漂亮的图片和背景巧妙地容纳了部分动态导航元素,可以说是绝配。

 

Cofa Media

 

Cofa Media通过其描绘公司工作流程的有趣视频背景来吸引用户。略微细长的汉堡按钮巧妙地展现出主导航栏,进而占据整个屏幕,提高用户体验。

 

Alt_Cph14

 

Alt_Cph14拥有独一无二绝对能够抓住人注意力的外观。其数字化的设计匹配了很多脉冲干扰效果,外加扎眼的蓝色单色背景营造出了鲜明的印象。简单原始的汉堡按钮与整体主题相得益彰。

 

Ball&Claw

 

Ball&Claw 通过精美的图形、巧妙的文字体系和经典的配色展示出了美妙的家装感觉。导航图标与主页设计完美搭配,带来了一丝高贵感。

 

Hooch Creative

 

首页不要任何视觉元素使其文案成为了主角,占据了首要位置。标语在这种环境下显然具有巨大的视觉重量。菜单图标也起到了一定的辅助作用。

 

Sam Dallyn

 

Sam Dallyn成功地将用户的注意力引导到了作品上。网格化、中心布局效果不错,很好的强调了视觉元素。所有内容看起来都很精美漂亮,甚至是左侧侧边栏上不显眼的小汉堡按钮也和设计主线相互应和。

 

The First 50 Years of Bose

 

首页整齐地分为两个板块,可以用鼠标单击激活,包含了多种动画控制方式。汉堡按钮用肉眼几乎看不见,但又是整体作品的关键部分,其可以作为网上读者的方向标。

 

Demodern

 

Demodern采用了独到的导航图标,与视频背景形成鲜明对比。另外,其可爱的几何图形让菜单与主页设计巧妙结合,给用户带来了优秀的阅读感。

 

结束语

导航图标能够补充并提升不同网站的设计。不管是要让用户关注作品的作品集,还是文案为主导的普通公司网站,其都在其中占有一席之地。

文章评论

程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
程序员的鄙视链
程序员的鄙视链
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
总结2014中国互联网十大段子
总结2014中国互联网十大段子
为什么程序员都是夜猫子
为什么程序员都是夜猫子
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
 程序员的样子
程序员的样子
程序员都该阅读的书
程序员都该阅读的书
Java程序员必看电影
Java程序员必看电影
我是如何打败拖延症的
我是如何打败拖延症的
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
我的丈夫是个程序员
我的丈夫是个程序员
旅行,写作,编程
旅行,写作,编程
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
程序员必看的十大电影
程序员必看的十大电影
如何成为一名黑客
如何成为一名黑客
中美印日四国程序员比较
中美印日四国程序员比较
程序员应该关注的一些事儿
程序员应该关注的一些事儿
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
老程序员的下场
老程序员的下场
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
那些争议最大的编程观点
那些争议最大的编程观点
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
程序员和编码员之间的区别
程序员和编码员之间的区别
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
代码女神横空出世
代码女神横空出世
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
编程语言是女人
编程语言是女人
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有