60多个网页导航菜单设计实例欣赏

导航是网页设计中的重要元素。一个良好的网页导航系统能不止是要把它设计的够漂亮,同时更重要的是要能够带领你的用户逗留在你的网站之中,让访客轻松找到他们想要观看的内容。这篇文章介绍了导航菜单在近期的发展趋势,实例和创新的解决方案,非常的丰富,相信能够为你的下次网页设计带来更好的灵感和参考。

1. “对话式”的导航菜单

一个导航菜单最重要的目标,就是引导访客浏览网站中的更多页面。但是,有的时候,光是靠一两个关键字并不能达到效果,因为很可能这些关键字让人费解,并不能够吸引用户的注意。

在过去的几个月里面,你能发现一个导航菜单的设计趋势,就是为导航菜单进行简短的补充说明。通过在大的菜单标题里再加上几个能够凸现出该页面的重要信息的关键词来吸引访客,让访客一目了然的知道,它进去这个页面,将会看到些什么东西。我将这种导航菜单称之为“对话式”的导航菜单,因为它确实能和访客之前营造一种更好的沟通氛围。

Screenshot

Screenshot

Screenshot

Screenshot

同时,很多导航菜单不仅加上了多个关键词的简短介绍,也加入了一些大图标。这除了美化导航菜单之外,另外一个好处就是,如果你的网站受众来自多个国家的话,通过图片将能使用不同语言的用户方便理解。

Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

这种对话式的导航菜单不仅适于横向导航菜单,同时,也适用纵向导航菜单。

Screenshot

Screenshot

2. Mac风格仍然流行?

Mac可以说是在Web2.0设计攻击下的最大幸存者,我们知道,在过去的一两年,Web2.0风格的设计席卷狂潮。说实话,帕兰个人并不太喜欢Web2.0风格的设计,yichi也曾跟我提起,在某种程序上,Web2.0可以说是毁了设计。但你无法不承认,它是如此的流行。

但是,有趣的是,在过去的几个月说,你会发现,有很多网站使用Mac风格的设计。而这些网站并不都是设计苹果公司相关信息的,有很多甚至网站内容与Apple没有任何关系。使用Mac风格只有一个理由:它是如此的精美和超酷。或许,继续发展下去,Mac风格设计能够成为一个单一的设计元素概念。Web2.0 style不算什么,尤其是在全世界视觉设计工业最强大的Apple面前。
Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

导航栏并不需要完全模仿Mac风格,进行一些延伸设计也是可以的。

Screenshot
绿色版本的过渡型Mac风格菜单

Screenshot

3.更多的使用图标来达到视觉吸引效果

为导航菜单添加一个准确的图标也趋于流行,帕兰之前也在收集图标网站的文章里说过(50多个国外的免费Icon图标免费下载网站20多个国内的免费Icon图标免费下载网站)在使用图标来进行导航菜单设计的时候,最重要的东西是,要确保该图标是很容易辨认的,明确地传达了讯息。

Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

…and on the right-hand side in the sidebar.

Screenshot

4. 垂直的导航菜单

虽然传统的桌面应用几乎都不使用垂直制表符,但是很多设计师却乐意这样做,它往往能创造出很漂亮的效果,同时也能吸引到用户。Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

5. 手工绘画风格的使用

手工绘画风格的导航菜单给人的第一感觉就是个性,但要创建一个这样的导航菜单并不容易,并不是说手工绘画风格本身难,而是要让这样的菜单融入到整个网站中,还真是有点困难。Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

6.实验性的导航菜单解决方案

尽管可能不是什么好主意,甚至可能造成不好的效果,但是作为一个设计,往往喜欢制作疯狂和不寻常的实验作品,想出一些奇怪或独特的网站导航。

Screenshot

Screenshot

Screenshot

Screenshot


Screenshot

Screenshot


Screenshot

No, Adipintilie.eu has navigation options also placed at the top; however, these are only external links.

Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

posted @ 2008-05-25 10:25  CB  阅读(4385)  评论(0编辑  收藏  举报