导航菜单设计趋势与实例 (Navigation Menus)

原文出处:http://www.smashingmagazine.com/2008/02/26/navigation-menus-trends-and-examples/

版权声明:本文版权归原作者所有 译介仅供国内读者参考

BANG421388A95514C2DCE6B44914XIANGUO

对于一个网站来说,导航栏菜单应该是最为重要的一个元素。由于网页没有什么可供用户作为定位的东西,所以全站一致的导航栏就成了少数可以给用户带来方向,引导他们浏览整个网站的元素之一。用户很依赖它,所以设计师绝对不能在这个地方马虎了事。

还是那句老话,最好的往往是最简单的,当然简单的东西绝对不代表就是乏味的。去年,我们就曾经就导航栏写过一篇文章  modern approaches of navigation design 。现在让我们看看这方面的设计的最新趋势吧。

下面就让我们来看看,最新的导航栏设计趋势,实例和一些非常炫的设计

1.会“说话”的导航栏 (Speaking navigation)

对于导航栏来说,最重要的任务莫过于非常清楚的引领用户访问站点的每个模块。但是通常来说,很难用1-2个关键字来准确描述这个模块的具体内容和功能,特别是在水平导航栏布局下。这就是为什么通常导航栏不会简单地将关键字一个个排列起来来展示所拥有的选项(“沉默”导航栏 silent navigation),设计师多数会选择使用比较具体的描述来表达该选项的内容或者功能。

过去的几个月里,我们发现这种趋势越来越流行。

30.png

evan.png

free.png

okb.png

为了让信息变得更加容易接受,通常使用相同高度宽度的块状显示,大图标的使用也越来越普遍,当然评判导航栏好坏最主要的还是网页的整体布局和设计。鼠标悬停效果的设计使用,能让你的网页变得更加亲切。

lon2.png

panic.png

pix.png

raka.png

 

这样的形式同样可以应用在垂直导航栏上

inter.png

jason.png

2. 苹果风格越来越流行

不知道苹果风格是web2.0设计风格大进攻的幸存者,还是一个完全独立的设计风格,又或者只是一个暂时的潮流趋势,恐怕没人能说明白。(看来老外的设计师对苹果风格也有着不同见解)

但毋庸置疑的,越来越多的网站采用了苹果风格

apple.png

ten.png

ten2.png

更多示例请参考原文

3. 图标的应用越来越多

为了更好的和用户沟通,设计师越来越多的使用非常具有感染力的图标(appealing icon),当然这个的前提是你的图标必须非常易于辨认和理解你的意思。

tasty.png

menurabbit.gif  (这个是我觉得非常出色的设计)

lon.png

men-5-gotocss3.jpg

rawnet.png

4. 垂直的Tab导航栏

vol5.png

ivytan.jpg

5. 手写体的大量应用

ohio.png

satsu.png

6. 实验性解决方案

当然还有许许多多不拘一格的新奇设计,有兴趣的朋友可以去仔细看看 原文

17fav 收藏本文   

相关日志:

One Response to “导航菜单设计趋势与实例 (Navigation Menus)”

  1. zousuper says:

    请问如何联系你?

Leave a Reply