网站导航制作方法

zxh5566  2017-03-12 20:00   Hits: 

    网站导航是什么?浏览者来说,导航是内容的目录。这就好像把网站比作是一本书,看过了目录(导航),大致会知道网站内容是否有阅读的价值,或者说哪个部分是我们想要阅读的。导航系统作
 
为网站信息储备的核心构架,展示出了网站的规模、储备方式、查阅方式等“基础设施”。与此同时,导航又比不上“书目”那般井井有条,叙述完整。因为导航只显示信息的类别,而不是列表。如果
 
想要知道此信息是否真的有阅读的必要,只能进入栏目中,查看列表。
 
    与客户探讨网站的建设时,通常也会把网站建设中的导航设计作为重点讨论的项目之一。如果客户对导航无头绪或杂乱无章,即是他们对网站建设没有概念。一一旦确立了导航项目,一切都会迎刃
 
而解。
 
    尽管信息分类是决定导航项目的主要因素,但建设者的需求(目的)也会对规划导航系统产生重大的影响。把优势项目提到导航条的第一、二位,或利用有别于普通导航条的设计形式,可以进销售
 
、树立形象等方面,起到良好的推动作用。
 
   以海尔集团的网站为例:主导航:海尔在全球;服务中心;产品世界;海尔播报;人才中心;海尔科技;关于海尔;特殊项目:网上商城;海尔俱乐部一般企业通常把“关于我们”放在第一个导航位
 
置,而海尔公司的网站却把“关于海尔”放在倒数的位置上。同时,我们还能从导航首位的““海尔在全球”中,感受到海尔公司驰名海外的知名度、指名度、美誉度和集团的气魄。
 
    一般情况下,导航是信息内容的核心项目。。当需要把处于树型结构低层级位置的信息,提高级别时,要谨慎考虑如何处理低层级信息导航项与高层级信息导航项之间的关系,或许需要利用不同设
 
计形式进行区分。信息层级混乱,将直接影响阅读网站的便捷度。“网上商城”和“海尔俱乐部”是网民常用的两个重要专区,把它们从导航条中独立出来,可使其有别于其他栏目。醒目的形式表示推
 
荐,方便经常来访的用户识别与点击。如果把这两个导航按钮混入主导航中,则会大大减弱对这两个栏目的主推力度,特色栏目很可能就此埋没了。
 
    面对结构复杂的信息内容,有可能需要衍生成多类导航的形式。导航条之间或许存在有上下级关系,或是同级不同类的情况。设计师将根据多导航间的关联性,尽量使页面设计为合理地运用多导航
 
系统而服务。
 
网站导航的形式
 
1.纯文字,在功能上文字导航就已经完成了任务。但从美化页面的角度来说,纯文字导航是远远满足不了人们的需求的,如很重要,它的风格将对页面整堡垦格产生极大地影响。如Primeiavia所拥有的
纯文字导航,看起来仅仅是把文字摆放在页面上这么简单,却能使人感受到页面气氛的朴素与清爽。特别强调一点,纯文字导航并不等于没有设计。即使“选择字体”这样的细小环节,都会对风格及页
面的其他设计环节产生影响。中文字体没有上千种也要有几百种,而英文字体更加丰富,导航字体的选择也是视觉设计的一部分。如果选择了常用的字体,还可以像Szewo.com这般,做一些美术加工。看似简单的效果,能使页面精致许多。
 
   2.文字+装饰,比较起纯文字式导航设计“文字+装饰”更能现出网络传播的灵活性趣味性,它不仅可以通过装饰表述出各栏目的信息特征,还可以通过导航条的装饰效果、整个导航的占用面积大小等
方面,对页面风格及整体网站形式设计做出强有力的补充。lue是一家提供设计服务的公司,创作团队很有实力。网站的背景色彩显得有些厚重,用于反衬正中的信息区。尽管页面格局并不复杂,但当你
接触之后便会发现,对一个设计公司的科移Glue的内容已经很丰富了,编排也颇有他的特色。
 
   Glue的导航是由“装饰图标+文字”组成的。正在阅读的栏目,装饰图标是彩色的,其他的栏目图标则是Glue的标志“X”,而且是黑白的。在如此细小的环节上,突出了导航的灵活性,创作的细致程
度和企业识别的统一效果。
 
关于网站统一识别设计的创作,Glue会是一个很好的可借鉴的实例。创作者在任何地方都尽量做到标志“X”的突出,细节也尽可能的围绕“X”来创作。公司的标志不仅仅体现在导航上,还出现在团队
介绍栏目中的成员形象插图的衬衫上,以及顶部的背景插图等地方,韩国Flash动画系列Pucca十分出名,它的俱乐部网站在格局、导航站在格局、导航、动态效果上都十分出。进入首页,观察到页面被
分为三列,左右两列属于导航系统,只有中间作为信卿右两列属于导航系统,只有中间作为信息区。鼠标停时,会出现一个小动画,而且不同导航项目的悬停动画都不同,它能吸引浏览者把所有的导航项
目都点击一遍,并能在导航动画上寻找到阅览网站的乐趣。
 
Flash导航被广泛地应用在各类信息内容的网站里,这样做不仅可以增加页面设计的灵活性和信息处理的趣味性,更重要的是,可以传达出一定的信息特征。所谓信息特征,就是把栏目信息的特性通过插图或动画诠释出来,这不仅有效地利用了导航动画的优势,而且起到了了更好地传达信息的作用。上图来自Templatetuning.com商业模板网站的2725号模板。导航由文字+装饰组成,鼠标悬停时,文字下方的装饰会改变动画效果,与此同时,文字上方将出现一个表达本栏目意义的动画。#2725的设计是以一个商务类的企业为参照而创作的,从它的页面版式和色彩分布可以看出设计师做一番精心的安排,尝试在导航中;中表达栏目信息,对网站的文化传播很有帮助。再一例,如上图,这是Templatetuning.com的模板#6620,主题是摄影作品展示网站。页面风格典雅,导航采用竖向排列。竖排导航的页面显得十分与众不同,由于过于独特,所以很少出现在商业站点中。#6620的导航除了竖排的特点外,当鼠标悬停时,导航区域还会浮现出不断运动的插图动画,只要鼠标一直悬停在导航区域上,动画就不会停止。
上一篇:浅谈网站制作中网站内容安排
下一篇:设计简单易用的网站导航