Home > Design > 导航栏设计趋势
2009December . 17th

导航栏设计趋势

前言

今天在一国外网站看到一篇08年的文章,讲的是网站导航栏的设计趋势,写得相当全面,而且其中一些趋势到现在还是很新潮的,翻译一下,有删改。

正文

导航是网站设计中最重要的元素。由于用户很难在没有导航的情况下去浏览一个网站里的内容,因此一个设置合理的导航栏能令访客浏览到更多感兴趣的内容。
这篇文章将展示关于网页导航栏设计最近的一些趋势和一些新潮的导航栏效果。

1.描述型导航栏

描述型导航栏
导航栏最重要的任务是明确指向网站各个部分的内容,但这些内容很难通过一两个关键字来表述清楚,因此采用描述行导航栏可以让访客在点击之前就了解到自己将能看到一些什么内容。
由于这种导航跟访客的感觉是:有一个向导在做现场解说,因此相对于只有关键字的“无声导航”,有人将描述型导航成为“有声导航”。

2.Mac风格仍然流行

苹果风格导航栏
苹果公司的产品经常能引起新的潮流,而且众多跟风者也热衷于山寨苹果的设计,网站导航栏也不能幸免。但客观地说,苹果那种质感强烈的简洁设计已经风行很多年了,但丝毫没有过时的趋势。
在复刻的同时,设计师们也衍生出许多带有Mac元素的设计。
Mac风格导航栏 - 1
强烈的Mac质感
Mac风格导航栏 - 2
绿色的Mac风格导航栏

3.吸引眼球的图标

图标型导航栏 - 1
导航栏设计的一个重要趋势是:图标应用得越来越频繁了。
为了使导航更加显眼,设计师通常通过漂亮的图标来装饰导航栏。在这里,选用的图标图标应该能清晰地辨认,并且能清晰地表达该分类的内容。而不是用更大的图标来吸引眼球。
图标型导航栏 - 2
也有把图标嵌入到文字里的

4.竖排的Tab

竖排Tab导航栏
在很多人的第一印象里,Tab标签一般都是横排的。但一些聪明的网页设计师打破了这个死循环,做出了竖排Tab的效果。吸引了很多人的眼球。
但竖排的导航也有几个明显的缺点:1.网页需要有足够的长度来显示全部的分类;2.看这个导航的时候需要滚动页面;3.文本比较难阅读,没人的脑袋是歪向一边的。

5.手绘风格

手绘导航栏
自从全球掀起博客大潮以后,展示个性成为了这个时代的一个趋势。很多绘画爱好者通过手绘来制作自己的个人网站。

6.暗示设计

暗示式导航设计
和第一条的描述不同,暗示设计一般不用明文来描述分类里的内容,而通过色彩或者图形来提示浏览者。不过浏览者没有足够的领悟能力的话,很难察觉到这一点。
如上图的按月存档导航,设计师为各个月份设置的代表色,温暖的月份用偏红的暖色调表示,寒冷的月份用偏蓝的冷色调表示。但如果浏览者身处令一个半球的话会怎么想呢?

后记

导航栏的设计是不能乱来的,每一步都需要经过深思熟虑,一个不能吸引点击的导航栏在网页上是一个累赘。
原文链接:Navigation Menus: Trends and Examples

  1. 2009December . 17th - 6:26 PM

    哈哈,抢到沙发啊了

  2. 2009December . 17th - 7:14 PM

    外国人的长的是好看点啊

  3. 2009December . 17th - 7:14 PM

    我坐板凳吧,不过怎么都是英文版 啊

  4. 2009December . 17th - 8:01 PM

    难道韩国风格没落了吗?

  5. 2009December . 17th - 8:40 PM

    都很有用,尤其是mac风格的,现在超喜欢那种质感的设计。

  6. 2009December . 17th - 9:06 PM

    我爱苹果的风格。。

  7. 2009December . 17th - 10:02 PM

    最喜欢第三个,带有图标的导航栏(结合sprites效果比较好)

  8. 2009December . 17th - 10:34 PM

    博主的博客做的不错,不知道网站做的怎么样啊,有时间换个链接啊

  9. 2009December . 18th - 12:34 AM

    虽然我不用mac,但是很喜欢那种风格

  10. 2009December . 18th - 1:09 PM

    看来我的属于非主流风格……汗……

  11. 2009December . 18th - 1:41 PM

    有的真的很好看。。。

  12. 2009December . 18th - 1:41 PM

    支持下。。

  13. 2009December . 18th - 2:02 PM

    那哥们你的风格呢?

  14. 2009December . 19th - 11:55 AM

    我的风格是没有风格,呵呵。

  15. 2009December . 20th - 1:35 PM

    @尤Q
    因为原文是英文的
    @卢松松
    最近几年韩国风格的确沉了很多,估计是韩国做的模板太精致了,不如“大”的潮流吧
    @Jutoy
    不算非主流啊,是最普遍的导航设计了
    @一天一歌
    大众式,最普通了,哈哈
    @LAONB
    错了,应该是牛B风格

  16. 2009December . 20th - 6:04 PM

    真是不错,现在都还是主流

  17. 2009December . 20th - 6:48 PM

    @bolo
    真的吗,哈哈。

  18. 2010January . 12th - 2:08 PM

    用色彩表示月份真不错

  19. 2010October . 11th - 9:38 AM

    老外对这些使用体验研究得细,因内的高手们没有作品欣赏一下?

  20. 2011July . 8th - 7:52 PM

    很有用,收藏了

Subscriber selector

Close