当前位置:首页 > 网页设计 > 网页导航栏设计新潮流归纳
Dec26th

网页导航栏设计新潮流归纳

diyidu 网页设计 9 人阅读了此文 我来说两句!

    网页导航栏在网页设计中的特殊重要地位是显而易见的。一个网站,导航栏的设计成功与否,直接决定了其用户进一步阅读的“深入”或“浅出”。因此,在网页设计过程中,我们要力争创设一个“设置合理、有个性且符合页面风格”的导航栏,以换取良好的用户体验。

    下面我向大家简要归纳下最近几年“网页导航栏设计”的一些新潮流、趋势,希望能为您提供一点参考。

    1.Mac风格继续受到追捧

    Apple公司的产品经常能引领新的潮流,比方现在十分风靡的ipod,就是一例。网页导航栏亦是如此。毫不夸张地说,苹果那种质感强烈的简洁设计,现在仍丝毫没有过时的征兆。Mac元素仍或多或少地被网页设计师们所吸收、运用。如图——

这是纯正的Mac风格

这是带Mac元素的设计应用案例

    2.Tab选项卡风格依旧热门,并有创新

    Tab选项卡设计在网页导航栏设计中,运用相当普遍。它的写法和实现效果可谓五花八门。之前,绝大多数的常见的Tab选项卡都是设计成横向格局的,但近两年又出现了创新——纵向Tab成为设计时尚。这种创新一定程度上丰富了Tab的表现力,为之注入了新的活力。OK,请欣赏几个案例——

这个Tab可以关闭,但好像没有打开功能,汗。

多功能Ajax Tab选项卡,可以让你在一个DIV层或原HTML元素里显示一个外在文件里的内容。

这是个二级层联的CSS Tab选项卡,在一个CSS Tab内容块里,可以再加入一个二级CSS Tab。

这就是传说中的纵向Tab了,如果还不甚了解,可以去淘宝网瞧一瞧。

这个也是纵向Tab,哈,就知道瞒不过你的眼睛:)

    3.图标应用越来越受到重视

    为了让网页导航栏更加显眼,设计师们有时会通过使用图标来修饰,这种做法越来越受到推崇。值得提醒的是,在这里,所选用的图标必须是能清晰辨认、且能够清晰体现分类内容的,而不是越大越好,当然也不是越显然越有视觉冲击越好。如图——

这个漂亮吧?我下个主题就准备用了,呵呵。

    4.手绘风格是目前最具个性的导航栏设计

    这种手绘的风格,经常出现在个人博客的页面设计上。原因只有一个,它是个站站长展示站点个性的一个有效元素。许多美工功底了得的个站站长,都乐于通过手绘的方式来制作自己的网页,如此一来,手绘导航栏也就成了其中的一个不可或缺的环节。也举两个图例吧——

手绘风格1

手绘风格2

    5.带文字描述的导航栏效果有了新发展

    我们知道,导航栏的首要任务是指引访客点入网站的各个分类,但很多时候,这些分类根本难以通过一两个词儿来描述清楚。因此,采用文字描述辅助导航的方法,可以让访客在点击进入之前,提前了解到自己将要看到的网页的内容梗概。这就仿佛为访客配备了个导游,进行现场解说似的。因而,相较于其他类型的导航风格而言,它又被称为“有声导航”。如今,这种“有声导航”,也在迅速发展壮大中。请看一个范例——

 

    6.暗示性导航栏效果的应用

    与带文字描述的导航栏效果有所不同,暗示设计一般不用明文来描述分类里的内容,而是通过色彩或图形来提示浏览者。不过浏览者没有足够的领悟能力的话,很难察觉到这一点。比方下图的这个按月存档导航。设计师为各个月份设置了代表颜色,温暖的月份用偏红的暖色调,寒冷的月份用偏蓝的冷色调。这就是暗示!

    7.flash风格的导航设计仍然吃香

    flash风格的导航设计已不算是新潮流了,但它应该还是并且在未来很长一段时期内仍将是设计师们所喜爱的一种设计手段,仍然将受到设计师们的青睐。具体原因主要取决于flash本身的强大开拓性和灵活性,设计者往往需要通过flash的形式,才能最好地切合自己的意图。这是flash最大的魅力所在。这里也列举两个范例(NO1NO2。点击观看演示!)——

本文出自:低一度,地址:http://www.diyidu.cn/post/menu_design.html,转载须注明!

to "网页导航栏设计新潮流归纳" 引用该日志!

  1. 小强
    #1 小强 回复该留言 2009-12-26 19:06:49

    第二个仿Mac的导航栏是我用过的,Xu.hel制作的WordPress主题iStudio上面的!

    diyidu 于 2009-12-26 20:50:00 回复
    是的啊,我随便截图下来的,正好符合。

  2. 真爱左右
    #2 真爱左右 回复该留言 2009-12-26 23:00:06

    导航是挺重要的,比较直观应该是主要的吧,不能半天让人找不到在那里。

    diyidu 于 2009-12-26 23:07:21 回复
    一点儿没错。设计导航的首要目的就是发挥其导向作用。

  3. zhouwin
    #3 zhouwin 回复该留言 2009-12-27 12:37:05

    桶哥什么时候把这些元素弄到模板中来吧。
    TAB切换的那些我喜欢,呵呵。

    diyidu 于 2009-12-27 13:06:25 回复
    恩,有考虑过啊。下个主题争取用上。
    爱好者博客 于 2010-1-17 11:09:47 回复
    期待了,至少不会一个栏目就占一大片地方,切换的话就省了很多空间。

  4. liuzm
    #4 liuzm 回复该留言 2009-12-28 9:23:47

    还是喜欢Mac的导航风格。

    diyidu 于 2009-12-28 10:35:18 回复
    很多人喜欢呵。

  5. 小T
    #5 小T 回复该留言 2009-12-30 16:06:47

    真是不错的总结。

    diyidu 于 2009-12-30 16:15:50 回复
    呵,谢谢鼓励。欢迎。

  6. CT
    #6 CT 回复该留言 2010-1-5 21:11:10

    flash和手绘导航栏是最能发挥创意的地方,我最喜欢手绘导航栏,因为总体来说手绘导航栏质量都很高,不好也不敢拿出来。

    diyidu 于 2010-1-5 21:27:39 回复
    恩,手绘确实是比较个性。

  7. hzhjun
    #7 hzhjun 回复该留言 2010-1-8 13:41:41

    我喜欢mac那样的,简洁但不简单,
    这样的作品才经得起时间和不同人眼光的磨练而愈来愈精炼!

    diyidu 于 2010-1-8 15:25:47 回复
    恩,这倒是。

  8. 极速博客
    #8 极速博客 回复该留言 2010-1-9 10:51:16

    看这些漂亮的导航就羡慕,不知道能否帮我设计个导航?

    diyidu 于 2010-1-9 17:49:34 回复
    可以啊,看你要什么效果。加我的群哦:9073456

  9. John
    #9 John 回复该留言 2010-1-11 10:12:23

    归纳总结得很有新意,拜读!

    diyidu 于 2010-1-11 10:24:14 回复
    欢迎大驾光临啊,多批评。

此楼已盖到第9层了,目前尚未封顶!