怎么做好网站导航？网【wǎng】站建设越【yuè】来越多，而互联网交【jiāo】易已经成为目前消费市【shì】场一个简单【dān】快捷，而且让年轻人越【yuè】来越能接受【shòu】的【de】一个消费方式【shì】，但是网站【zhàn】的建【jiàn】设中导航栏的设计也是非常重要【yào】的【de】，优秀的【de】导航设计能够提高网站的【de】易【yì】用性，对实【shí】现电子商【shāng】务网站【zhàn】的高效运作具有实际意义。
怎么做好网站导航
1.文字导航
尽量使用最普通的HTML文字导航，不要使用图片作为导航链接，更不要使用JS生成【chéng】导航系统，也不要用Flash做导【dǎo】航。CSS也【yě】可以设计出【chū】很好的【de】视觉【jiào】效【xiào】果，如【rú】背景【jǐng】、文字颜色【sè】变化【huà】、下【xià】拉菜单【dān】。
最普通的文字链接对【duì】搜索引擎来说时阻【zǔ】力最小的爬行通道。导【dǎo】航系统【tǒng】链接是整个网站【zhàn】收【shōu】录最重要【yào】的【de】内部链接。
2.点击距离及扁平化
良【liáng】好的导航的目标之一是使【shǐ】所【suǒ】有页面与首页【yè】点击距【jù】离越近越好。权【quán】重普通的网【wǎng】站，内页离首页不要超【chāo】过四【sì】五次【cì】。通常在链接结构上使网【wǎng】站尽量扁平【píng】化。
网站导航【háng】系统的【de】安【ān】排对减【jiǎn】少【shǎo】链接【jiē】层次至关重要。主导航中出现【xiàn】的页面【miàn】将处于仅低于首【shǒu】页的层次，所以主导航中页面越多，网站越扁平。但用户体验和页面【miàn】连接总【zǒng】数都不允许主导航中有太多链接。seo人员【yuán】需【xū】要做好平衡【héng】。
3.锚文字包含关键词
导航系统通【tōng】常是分类页面【miàn】获得内【nèi】部链接的最主要来【lái】源，数量巨大，其锚文字对页面相关性有【yǒu】很大【dà】影响，因此【cǐ】分【fèn】类名【míng】称应尽量【liàng】使用【yòng】目标关键词。当【dāng】然也【yě】不能堆积，分【fèn】类【lèi】名称以9-21字为宜。
4.面包屑导航
对用户和搜索引擎来说【shuō】，是判断页面【miàn】在网【wǎng】站整个结构【gòu】中的位置的【de】最好方法。正确【què】使【shǐ】用面包屑【xiè】导航的【de】网站通常【cháng】都是架构清晰的网站，强烈建议使【shǐ】用。
5.避免页脚堆积
随着【zhe】seo被更【gèng】多站长认识，近些年【nián】有一种在页脚堆积富含关键字的分类页面【miàn】链【liàn】接的倾【qīng】向。三四【sì】年前这种做法【fǎ】还有不错的【de】效【xiào】果，但是近来搜索引擎【qíng】比【bǐ】较反感这种做【zuò】法，常常造成某种形式【shì】的【de】惩罚。
网页导航类型
1.全局导航
网页中的导航 每一页都会显示全域导航系统
2.局部导航
局部【bù】导【dǎo】航系统【tǒng】和【hé】其内容 被称为【wéi】“子网站”或“网站中【zhōng】的网站”
3.全局导航+局部导航
很【hěn】多网站会【huì】把全局导航和局【jú】部导航 结合使【shǐ】用 ——巨型菜单
4.情景导航
有节制【zhì】地使情景式导航可以增【zēng】加【jiā】灵活性来弥补现【xiàn】有导航系【xì】统的不【bú】足
它提供了了【le】交【jiāo】叉销售、提升销售、打造品牌和提供顾客【kè】价值【zhí】的真正机【jī】会【huì】
5.辅助导航
不属于网站的层级结【jié】构，但【dàn】是可以提供查找内容【róng】和【hé】完成任务【wù】的辅助方法【fǎ】
网页导航形式
1、顶部导航
顶部【bù】导航【háng】被广泛【fàn】应用在各个领域的网站当【dāng】中，这【zhè】类导航可以一目了然的让用【yòng】户迅速寻找到所【suǒ】需。顶部【bù】导航这样的【de】设计形式保守但目【mù】的性强，可以确保组织结构的可靠和降低用户【hù】寻找【zhǎo】的【de】时间成本。但这类导航有个缺点，首页内容过多需【xū】要【yào】滚屏的【de】时候，用户需要滚【gǔn】动到顶【dǐng】部【bù】再去【qù】切换导航内容【róng】。所以现在很多顶部【bù】设计的导航会做一个【gè】效果，将导航固【gù】定在顶部导航，这【zhè】样减【jiǎn】少【shǎo】了用户的使【shǐ】用成本【běn】。
顶【dǐng】部【bù】导【dǎo】航设计的样式也比较【jiào】多，主要是跟【gēn】logo、登【dēng】陆注册、搜索框搭配组合【hé】成【chéng】多种效果，具体可见下图：
顶部导航【háng】的【de】设计【jì】成熟稳重，比较中规中【zhōng】矩，但【dàn】不容易出现太大的问题，所【suǒ】以使用率也是比【bǐ】较广的。熟悉我的人都【dōu】知道我用蝉知在做网站，下图就是【shì】蝉【chán】知系统后【hòu】台界【jiè】面中头部导航的【de】定【dìng】义，可做多【duō】种组合在前台显【xiǎn】示效【xiào】果。
2、侧边导航
侧【cè】边【biān】栏【lán】导航的设计形式比较多样，也可以有多表现形式，可动可静，可大可小，比较【jiào】个性化。固定的【de】侧边栏导【dǎo】航设【shè】计不是很【hěn】建议，特别是对于宽度【dù】大【dà】的侧边栏导航，这样【yàng】的设计会影响整个网【wǎng】页界【jiè】面的宽度【dù】。设【shè】计师【shī】可以考虑做成侧边栏【lán】以滑动【dòng】方式【shì】展【zhǎn】现，在节约网站空间的同时【shí】也显【xiǎn】得更加简约。
侧边【biān】栏【lán】导航的设计需要【yào】注【zhù】意的是导航栏目的【de】宽【kuān】度问题，若导航栏中字体过长【zhǎng】，在展示上会存【cún】在一定的【de】问【wèn】题，哪【nǎ】怕【pà】做【zuò】成【chéng】滑动【dòng】展示的【de】形式也不能很好的得以解【jiě】决问题。结【jié】构复制【zhì】的网站不适用这类导航，且侧边栏的二【èr】级导航栏目不【bú】也【yě】宜多【duō】，所以这类导航大部分适用于一些设计师【shī】或【huò】个人官网。当然，也有一些结构简单的网【wǎng】站会采用这类导航。
以【yǐ】下这【zhè】个the HOUSE时尚服【fú】饰官网将侧边栏【lán】的【de】内【nèi】容精简做成一个元素放【fàng】在侧边，这样看起来是不突兀的，不会【huì】占用【yòng】空间，相反还起到一定的装【zhuāng】饰作用【yòng】。
3、底部导航
底部【bù】导航应用【yòng】性不是很【hěn】广，比较长出现在【zài】一些活动或个性化【huà】的网站当中。其实底部导【dǎo】航被广泛使【shǐ】用的【de】并不【bú】是在pc端中，而是在移动端。
在pc端中采用【yòng】底部导航的【de】形【xíng】式【shì】，一【yī】般都【dōu】是采【cǎi】用【yòng】固定的方式，这类导航可以减少用户【hù】的使用成【chéng】本，但对于结构复杂的网站，有二【èr】级或【huò】三级导航的网站就不【bú】是很合适。其次，将导航【háng】放置底【dǐ】部，对于用户的使【shǐ】用习惯【guàn】来【lái】说不是特别的好，用户【hù】的眼睛都是从上到下从做往右浏览的，这样的设计【jì】比较挑战用户的【de】使用【yòng】习惯【guàn】。
故【gù】而有很多网站在设计的时候【hòu】首屏导航会放在【zài】底【dǐ】部【bù】，到【dào】第【dì】二屏之后导航就会固【gù】定到顶部，举个【gè】例子：forh健身房体育运动网站【zhàn】。
4、汉堡包式导航
汉堡【bǎo】式导航其实跟【gēn】底部导航一样，比较常【cháng】出现【xiàn】于移动端。但现【xiàn】在【zài】不少的pc端也越来越喜欢【huān】用汉堡【bǎo】包式的导航设计【jì】。这样的设【shè】计比较节约空间，相当于【yú】将导航做成一个隐【yǐn】藏【cáng】式【shì】的设计或是弹【dàn】出式的设【shè】计，具有设计感。
STUDIO JT韩国设【shè】计工作室网站的【de】汉堡包式导航就具有【yǒu】一定的设计【jì】感。
虽【suī】然汉堡包式导航的设计方式可以很多样，也可以【yǐ】很个性【xìng】。但对于一部分用【yòng】户而言，汉堡【bǎo】包式导航其实并不是那么直观，特别是用户对【duì】导【dǎo】航结构【gòu】不清晰的情况【kuàng】下。设计师在【zài】设【shè】计这类【lèi】导航的时候还是要【yào】斟酌下【xià】。
5、滚动式导航
滚动式导航分水平滚动和垂直式滚动。
水平式滚动
水平式滚动就是【shì】内【nèi】容呈【chéng】左右水平方向滚动【dòng】的，当用户【hù】第一次遇到这【zhè】样【yàng】类型网站的时候，体验感会比较差，因为它物【wù】理【lǐ】和【hé】视觉【jiào】运动方向【xiàng】与常规的纵向滚动不同，而且当你使用【yòng】鼠标【biāo】滚轮滚动的时候，它的左【zuǒ】右水平滚动会让用户产生交互【hù】上的错位感，这样的感受其实并不是特【tè】别【bié】友好【hǎo】。所以这样的网站其实【shí】比【bǐ】较【jiào】少见【jiàn】，但也有及【jí】其少部分做【zuò】得好的。
其实为了不让【ràng】用户在水平滚【gǔn】动的【de】体验上太差，在【zài】界面【miàn】设计的时【shí】候可以加入一个向左或向右的箭头指【zhǐ】示，让用户有【yǒu】个【gè】心理暗示，可以减少突兀【wū】感。
垂直式滚动
垂直【zhí】式【shì】的滚动在【zài】html5网页中运用广泛【fàn】，很多【duō】设计【jì】师很【hěn】喜欢用这样的设计，将一些动【dòng】画特【tè】效和垂【chuí】直【zhí】式滚动导航相结【jié】合，可以达到一【yī】种新的视觉效果。一起看看【kàn】DENSO Brand site的官网【wǎng】，里面结合了很多特效。
设计导航前应该做好什么工作
1、准备工作：整理导航结构内容。
网站头部常常包括的内容是：标【biāo】志、导航、搜【sōu】索框【kuàng】、语言、登陆【lù】注册【cè】、口号、400电话这些内容。这么多【duō】内容不可能全【quán】部放置【zhì】在网站【zhàn】当中，所以我们在设【shè】计网站前【qián】需要规划【huá】好这些内【nèi】容，适当的做一些【xiē】取【qǔ】舍。
2、分析网站风格，确定导航的具体风格。
在【zài】确【què】定网站导航的构成【chéng】内容之后【hòu】，我【wǒ】们可【kě】以将【jiāng】这些信息列出，分析网站的整体风格和最佳【jiā】的【de】用户体验，确定好导航的表现形【xíng】式【shì】。
3、设计方案
在确定好导航的表【biǎo】现形式【shì】是【shì】做顶部固定【dìng】导航还是底部【bù】固定导航之后【hòu】，我们需要将确认好的导航内容进行组合【hé】排列设计。选【xuǎn】出最优的【de】一款【kuǎn】设【shè】计【jì】方案。
在设计的过【guò】程【chéng】中，我【wǒ】们【men】需【xū】要遵从用【yòng】户体验为上的设计原则，在保证内容可读的情况下，再【zài】去【qù】保证界【jiè】面设计的最优。
版权所有：深圳市网商在线科技有限公司
友情链接:
