马海祥博客是一个专注于分享SEO优化、网站制作、网络营销和运营思维的自媒体博客!
马海祥博客 > 网站制作 > 网站设计 > 十个简单而有创意的网站导航设计案例

十个简单而有创意的网站导航设计案例

时间:2016-03-10   文章来源:马海祥博客   访问次数:

在塑造网站体验上,导航发挥了重要作用,它提供了获取信息的方式,增强了认知度,反映了品牌,并赋予了网站的整体可靠性,导航设计是一个不仅限于选择整排按钮的任务,它非常广泛,同时微妙无比,导航设计师协调用户目标和业务目标,这需要领会每一方面,并深刻了解信息组织、页面设计和设计说明。

简单而有创意的导航菜单对用户体验及搜索效率有着明显的帮助,今天,马海祥将跟大家分享一些让人印象深刻导航方案,包括有趣的、有创意的、原创的,甚至十分超前的设计,这些方案中,部分比你平常对导航的认识要复杂的多。

我们不只是出于设计的原创性才列出了这份清单,清单中的多数示例对技术有着大胆的使用,使我们的清单更加有启发性、教育性。

1、JOVA

Jova的导航菜单干净、纯粹,并且在菜单结构上也很恰当,感觉相当和谐。

十个简单而有创意的网站导航设计案例-马海祥博客

细而直的线条,网格布局,黑与白的配色,干脆而锋利的排版,几何风格的文本,这些导航元素的组合使网站给人以精致的感觉,在淡化过的图片背景下效果更为突出。

2、Beloesuhoe

Beloesuhoe整个网站的设计都炫酷到没朋友。

十个简单而有创意的网站导航设计案例-马海祥博客

这支团队的设计巧妙并且独具一格,在打开网站后你就会感受到强烈的视觉冲击,乍一眼看上去,首页就只有一张背景图片,但在菜单title旁像脉搏一样跳动的红点暗示着这一切并不是那么简单。

准确的说,这些菜单不是无趣的平铺直叙,而是本身就具有交互效果,引导你点击前往你所需要的页面。

这项与实物图片结合的设计其实带有一丝虚拟现实的味道。

3、First Person

First Person创造了一个复杂而超现实的立方体,认真严谨的透视效果相当有趣,立方体还有白天和黑夜两种状态,但这种方式还是难以作为主导航来使用,吸引用户的作用更加明显。

十个简单而有创意的网站导航设计案例-马海祥博客

无论怎样,这种使用动效技术,展示一个物体深入细节的创意简直可以用天马行空来形容。

4、Mint Design Company

Mint Design有种让人难以置信的设计,网站使用了手绘的插图,并且配合合理的动效,让该网站充满了生气。

十个简单而有创意的网站导航设计案例-马海祥博客

得益于是艺术项目的原因,所有元素,包括导航风格都相当统一。

每个菜单项都有黑白和彩色两种状态,通过这种设定,状态之间的不停切换带来了活泼的感觉(具体可查看马海祥博客《基于网站色彩设计对用户体验影响的研究》的相关介绍)。

5、Vive Latino

这只团队试图用涂鸦的方式让自己的首页更加突出。

十个简单而有创意的网站导航设计案例-马海祥博客

干净的单色方案、手绘排版设计、动态的小人物,这些元素不仅为了渲染一种节日氛围,也使得菜单导航看起来非常动感。

6、Pete Nottage

对色彩的放纵、肆意的使用使得网站新奇而跳动,网页上的城市由充满生气的扁平化元素组成,整个城市好像一个游乐场,而主导航也融入其中。

十个简单而有创意的网站导航设计案例-马海祥博客

开发者不仅对诸如轿车和快艇的一些细节添加了动效,通过点击还可以使一些元素以有趣的方式消失,这些设计细节相当逗比又迷人。

7、Moira Young

Moira Young自然又略带梦幻的主题使网页变得高雅而精致。

十个简单而有创意的网站导航设计案例-马海祥博客

导航不像平常一样显眼,每个链接都隐藏在大树旁跳动的微光里。

8、Mathilde Jacon

Mathilde Jaco的首页只有一个主体——一个可交互的、圆形的菜单导航,出乎寻常而又有趣。

十个简单而有创意的网站导航设计案例-马海祥博客

最重要的是,每个不同想小分块代表了不同的链接,通过组合的方式实现了风格独特的导航设计(具体可查看马海祥博客《如何从内容需求的角度策划设计网站导航》的相关介绍)。

9、Bancolombia

和上诉部分例子很像,Bancolombia主页在风景画融入了动态元素。

十个简单而有创意的网站导航设计案例-马海祥博客

不过要特别提到的是该网页需要flash,这些亮点在H5的情况下将不复存。

10、Nat-Ant

对极简主义有所体现的设计一向值得关注,该网站的设计和结构恰是如此。

十个简单而有创意的网站导航设计案例-马海祥博客

整个网页从整体看上去非常简洁与纯粹,并有大量的留白,仅有的一些元素也是精致的分散在页面上。

他们用一种不平庸的方式展现了菜单导航。

马海祥博客点评:

非传统的、不陈腐的导航方式总能引起用户关注,激发他们的兴趣,好的导航设计能够使一个原本普通的页面得到升华。

无论怎样,知道什么时候提醒自己别再让网页变得喧闹和拥挤是至关重要的,因为在多数情况下这对用户非常关键,即使你的网页看起来是多么有趣或不平常。

本文发布于马海祥博客文章,如想转载,请注明原文网址摘自于http://www.mahaixiang.cn/wzsj/1459.html,注明出处;否则,禁止转载;谢谢配合!

相关标签搜索: 网站设计   导航设计   设计案例  

上一篇:响应式网站页面的设计需求和设计流程
下一篇:响应式网页图片库设计的基本规则和技巧

您可能还会对以下这些文章感兴趣!

  • 全能型设计师必备的10个技能

    为了成为一个全能的设计师,你必须学会掌握一些技能来有效的应对客户或你的老板,很多情况下,一个设计师需要有良好的审美观和许多年的经验,而将那些“经常被雇佣”的设计师和其他设计师区分开来的就是下面列出来的技能,掌握这些技能,你不仅能在团队中成为更有价值的……【查看全文

    阅读:1071关键词: 设计师   设计技能   日期:2014-11-07
  • 什么是响应式网页设计?

    响应式网页设计(Responsive Web design,通常缩写为RWD)是指:页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。可以说是一种网页设计的技术做法,该设计可使网站在多种浏览设备(从桌面电脑显示器到移动电话或其他……【查看全文

    阅读:5336关键词: 网页设计   响应式设计   响应式网页设   响应式网页   日期:2013-09-15
  • 分享20个极简主义的网页设计风格

    极简主义的设计之所以总是流行,是因为他们一直用一些很简单的创意和资源去表达概念,网页设计的领域受极简主义设计的影响很大,许多有才华的设计师总是用几个简单的工具就设计出了不起的网站,比如字体和几何图形等元素。简约设计的优势不仅仅是其优雅的风格,也有在网页加……【查看全文

    阅读:718关键词: 极简主义   网页设计   设计风格   日期:2018-11-01
  • 关于响应式页面重构的一些关键技术点

    单纯的页面重构,所涉及到的工作内容一般是“分析设计稿>切图>写HTML和CSS”,虽然看起来很少,但要做好这份工作,绝非所想的那么容易。原因很简单:工作内容单一,在时间和工作量上必会很苛刻,往往跟设计师的工作时间是3:1,即设计师给三天的时间,制作只给一天的时间……【查看全文

    阅读:698关键词: 响应式   响应式页面   日期:2016-09-25
  • 网页设计新手需知道的10条实用法则

    大胆留白是设计概念中常常会提到的理论,但真正能根据理论具体落实的设计师却为数不多,可能是因为设计师胆儿不够大,另一种可能是没有在实际中领会到留白的美妙,网页设计中的留白是为了在有限的容量中预留一些让其中元素呼吸的负空间,并不是一种所谓的“偷懒”行为,……【查看全文

    阅读:733关键词: 网页设计   设计法则   日期:2015-01-15
  • 响应式网页布局的实现方法原理

    昨天我在马海祥博客上跟大家详细的介绍过《什么是响应式网页设计?》,我觉的响应式网页设计不仅仅是一种趋势,还更是一个新的设计解决方案!它有助于解决不同的分辨率和设备(台式电脑,笔记本电脑,平板,手机)相关的设计问题。既然是设计的问题,这里就会涉及到很多……【查看全文

    阅读:52335关键词: 响应式网页   响应式布局   响应式原理   响应式设计   日期:2013-09-17
  • 响应式网页设计的排版设计趋势

    假如你研究一个流行的作品集网站,里面展示了当今的网页设计,毫无疑问,你会注意到网页的基本结构千变万化,根本没有固定形态,它可以伸缩变化成任何所需的东西,我认为这是响应式网页设计带来的最棒的副产品,事实上,新的准则,就是根本没有固定准则,我们能观察发现……【查看全文

    阅读:1117关键词: 响应式网页   响应式设计   排版设计   设计趋势   网页设计   日期:2015-04-01
  • 基于页面易读性的文字编排设计要点

    文字的编排还应注意文字本身的格式效果。图文画面构成中,把不同重点的文字内容用不同的字体来表现,是设计中常用手法,如:行首的强调、引文的强调等。但字体过多画面就显得不安宁,字体过少又缺乏必要的生气,字体数量的多寡常暗示平面中核心内容的多少,所以我们要详……【查看全文

    阅读:760关键词: 易读性   文字编排   文字编排设计   设计要点   日期:2014-04-15
  • 全方位解析响应式网页的设计与应用

    响应式网页设计可以提供一个比较满意的效果,他给广泛的应用设备提供了一个自定义的解决方案,无论是一个老式旧笔记本还是最先进的设备都能够获得比较好的体验。但响应式网页设计也并不是最好的,这只是个单纯的概念,它可以有效的提高用户体验但是却不能彻底解决。我们……【查看全文

    阅读:1301关键词: 响应式网页   网页设计   响应式应用   应用设计   日期:2014-05-08
  • 网站设计的重要因素及注意事项

    网站设计(Web Design)就是一个把信息需求转换成用软件网站表示的过程,就是指在因特网上,根据一定的规则,使用Dreamweaver、photoshop等工具制作的用于展示特定内容的相关网页的集合。网站设计的目的就是产生网站。简单的信息如文字,图片(GIFs, JPEGs,PNGs)和表格……【查看全文

    阅读:1306关键词: 网站设计   网站设计因素   网站设计注意   日期:2012-10-05
↓ 点击查看更多 ↓

互联网更多>>

SEO优化 更多>>

企业网站SEO推广能给企业带来哪些好处? 百度搜索用户建议专区上线公告