翻译-展示现代导航设计的流行趋势 « 张鑫旭-鑫空间-鑫生活

翻译-展示现代导航设计的流行趋势

by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=549

原文地址：http://www.smashingmagazine.com/2010/01/04/showcase-of-modern-navigation-design-trends/
原作者：Jacob Gube
翻译：张鑫旭

以下为翻译内容——

展示现代导航设计趋势

导航菜单可能是一个网站的最重要组成部分。导航可以说为网站设计师展示他们的创新能力提供了一个很好的窗口，设计师可以用他们的创新能力去创造功能健全又不失视觉效果的导航，这些往往是大多数网站的立命之本。由于其网站在网站中的价值，导航菜单习惯放置在页面的最明显的位置，从而能够对游客的第一印象产生重大影响。

导航菜单必须要设计得突出以吸引用户的注意力。可能都知道这么句谚语——“内容为王”，但是要想获取到这些内容需要导航。在本文中，我们将探讨近期导航设计的一些趋势。我们将共同目睹当今做优秀的网站设计所重现的美学。这里关注的重点是目前引领设计潮流的的可视化设计方向。

您可以阅读下面一些相关的文章：

3-D 导航

最近，我们看到了一种设计趋势，就是设计的元素倾向于更高的一个z轴（层级）；所产生的效果是，这些元素看上去比其他元素更靠近页面。显然，此趋势被普遍应用在导航菜单上。

Delibar
Delibar网站的内容区域就像是两张纸堆叠在一起，通过导航项将他们连接。这里同样有一个细微的JavaScript效果，就是鼠标悬停的时候，菜单项会平滑的上移。

Blue Door Baby网站
The Blue Door Baby 导航栏样式就像是一个丝带横在功能区域的顶部。其菜单项是图片式的文字，且带有内陷文字效果。（学习如何制作内陷文字效果）

Mystery Tin
The Mystery Tin导航菜单为垂直式的。当前激活状态的导航条有一个包裹内容其余边缘的背景。类似的，当鼠标经过菜单项的时候会显示一个小一点的3-D丝带。

psdtowp
该网站的导航菜单栏看上起在一个更高的平面上。另外，鼠标移到菜单项上会显示一个含有此项描述的泡泡对话框。

Harry Bissett
Harry Bissett网站的导航看上去像是离开了这个页面。

Sower of Seeds
Sower of Seeds网站的导航栏看上去就像是环绕包裹着内容区域，使得其对于用户非常醒目。

气球对话框

将菜单项涉及成气球对话框的形状，或是泡泡对话框的形状似乎是另外一个流行的趋势。这是一个不错的脱离传统的矩形菜单的方式。

Alexarts
Alexarts突出了一个城市海滨的背景。导航菜单项是巨大的泡泡对话框，指向了场景的不同元素。经过导航泡泡会有轻微的上移，用以表明这个是可交互的且是当前目标对象。

Bush Theatre
Bush Theatre使用了泡泡思考框代替了泡泡对话框，这常出现在漫画书中用来表示主体思想。

Tienda
这个多彩的插画网站描述了这样一个场景：一个外星人和孩子们连在了一个火箭飞船上。垂直二级菜单创造性地融入了画面中：他们被当做话语从右上角的外星人“说”了出来。

Rob Alan
Rob Alan网站上不规则的气球对话框形成了一个很杰出的外观，此泡泡对话框在主要内容区域打开的一个凹槽，此凹槽从视觉上将导航和主体内容联系在一起。

SproutBox
SproutBox菜单当前激活项以深绿色突出显示。此矩形泡泡对话框的边角是圆形的。当鼠标移至非激活状态的菜单项的时候会显相似形状的泡泡对话框。

Kingpin Social
Kingpin Social的主导航菜单是想不注意到都难，大尺寸，圆角，大填充。其活动菜单项以气球对话框的形式突出显示。

Contrast
The Contrast网站突显了些素描外观的矩形气球对话框。这些气球对话框重复使用，贯穿整个设计，用以表明这些元素都是可点击的（例如边上的”Archives”链接以及有关博客的”Read More”链接）。

Design Spartan
Design Spartan的主导航栏用一个颜色丰富的纹理化的圆角泡泡对话框突显当前页。由于与深色背景相对比，所以会有浮出页面的效果。每个菜单项都有一个不同的颜色，为了让网站每个部分都很容易识别。

Definitely Dubai
Definitely Dubai网站特点就是圆角矩形，投影效果给了其深度。当前活动页用一个白色的圆角的泡泡对话框突出。

Robin James Yu
泡泡对话框通常是圆的，但是Robin James Yu opts却使用矩形。泡泡对话框出现在整个设计上，包括脚部最近tweeter的内容盒子，或是首页比较传统的椭圆的用来说”Hi”的泡泡对话框。

GIANT Creative
给背景下的亮丽色彩以及足够慷慨的尺寸使得GIANT Creative的导航非常显眼，有别于其他的文字。经过某个菜单项会显示泡泡对话框的那个尖角。

Yellow Bird Project
Yellow Bird Project上的导航菜单乍看上去简单且传统，但当你把鼠标移上去，气球的尖端就会显现出来，一个足够简单的技术却让此菜单比之前更有吸引力。

圆角

圆角常被用来软化尖锐的矩形。此趋势已经从按钮迁移到菜单项，菜单项长得按钮的模样意味着用户是可以点击它们的。

Ballpark
Ballpark的导航菜单位于右上位置，使用CSS background文字替换技术，使用的是圆角按钮代替这些文字。

NOSOTROS
NOSTROS网站的圆角按钮分按下和抬起状态，这模仿了真实按钮的功能。另外，使用了JavaScript使得按下和抬起之间的过渡有平滑的动画效果。

New Look Media
New Look Media的蓝色导航按钮在深背景下显得格外的引人注目。

LemonStand
LemonStand的主导航用带有一点坡度的深灰色圆角按钮突出。

MetaLab
圆角且左边带有几何图标在这个流行的网站的菜单栏上显得非常出众。

Vistrac
Vistrac的圆角按钮只能在现代web浏览器中看到效果，例如Firefox, Safari, Google Chrome和Opera，因为开发者使用了陈省身3中的border-radius属性。在其他web浏览器（例如IE8以其以下版本，阻碍了网页设计的发展）下，菜单项就是正常的矩形。

gugafit
gugafit的导航按钮在鼠标经过时显示绿色，当前活动项显示深蓝，且有按下去的效果。

PeepNote
PeepNote有米色的圆角按钮，当前活动项为蓝色。并且使用了CSS3的text-shadow属性在大部分现代浏览器下添加了下阴影效果。

Viljami Salminen
网页设计师Viljami Salimen给他导航菜单当前活动项添加了圆角按钮外观。

导航中的图标

精心设计和高度可视化越发普遍，因为现在的带宽不再令人担心。一年多以前，我们注意到，在视觉效果中，图标越来越多地使用，而且这种趋势仍在继续。图标不仅是视觉效果，而且有利于用户视觉识别。尽管如此，仍因牢记，它必须总是保持尽可能的短，从而尽可能的减少响应页面载入时间。在一般情况下，更重要的额外的视觉线索，用得其所，适度，后者可以帮助用户在扫描过程中，使网页的内容更容易感知和浏览。

Adii Rockstar
Adii Rockstar有一个博客，博客导航被固定在页面的底部。其菜单项被文字上的图标补充，从而形成了美丽的导航组合。另外，文字使用了CSS3的text-shadow属性以形成深度（至少在浏览器中已经实施了当前的草案W3C的CSS 3规范文本模块）。