网页设计导航栏需要注意的问题

网页设计导航栏需要注意的问题

抓住能传达主要讯息的字眼当做超连结的锚点(anchor)，可有效地控制住超连结的字串长度，避免字串过长或过短，而不利于读者的阅读或点取。下面介绍网页设计导航栏需要注意的问题，希望可以为您带来帮助。

注意超连结颜色与单纯叙述文字的颜色呈现

WWW的语言—HTML允许Webpage设计者特别标明单纯叙述文字与超连结的颜色，以便丰富Webpage的色彩呈现。如果您的网站充满知识性的信息，欲传达给访问者，建议您将网页内的文字与超连结颜色，设计成较干净素雅的色调，会较有利于阅读∶纯粹的叙述文字采用较暗、较深的颜色来呈现(如∶黑色、墨绿色、暗褐色)，超连结文字则以较鲜明抢眼的色彩来强调(如∶亮黄色、翠绿色、鲜橘色)，至于探访过的超连结则采用较低于原超连结亮度的颜色做呈现。

测试所有的超连结与导览按钮的真实可行性

Webpage上线之后，第一件该做的事，是逐一测试每一页的每一个超连结与每一个导览按钮的真实可行性。彻底检验有没有失败的link无法连结到该连结的Webpage，却反而冒出“FileNotFound”的错误讯号出来。这是一个负责任、够水准的Webpage设计者对自己的作品应有的基本品质要求。

如果您果真有那么多的超连结必须提供给读者，不如将这些超连结以条列的方式，一笔一笔清楚地列在一选单页或目录页上，既不防碍走文的顺畅，又呈现一目了然的导览连结。

让超连结的字串长短适中且走文自然

抓住能传达主要讯息的字眼当做超连结的锚点(anchor)，可有效地控制住超连结的字串长度，避免字串过长(如∶整行、整句都是锚点字串)或过短(如∶仅一个字当做锚点)，而不利于读者的阅读或点取。

当导览按钮连结到目前此页时

各Webpage若重复使用同一组的导览按钮，无可避免地会产生某一导览按钮连结到目前此页的情形。为达成界面设计的一致性，并没有绝对的必要性拿掉此导览按钮，但Webpage设计者可让此按钮不再具有超连结的功能;或将此按钮的彩度、亮度降低(如∶深绿色变成淡绿色，亮红色变成暗红色)，使读者可清楚地意识到∶这个暗设下来的导览按钮不再具有超连结的功能。

分析、说明您提供的bookmarks或coollinks

常常看到热心的Webpage设计者条列了精心收集的bookmarks或coollinks，以分享读者个人遨游WWW的美好经验。但多数Webpage设计者就只提供一大串links，并不分门别类，也不加以分析、说明为什么这个link好，值得推荐?那个link的主要内容精彩之处?又在哪?提供您的bookmarks或coollinks是一大善举，但未加以分析、说明，却变得功亏一篑。多花几分钟，将您提供的bookmarks或coollinks稍加分类、注解，可提供读者清晰的概念与无限的方便，也使您的站台的导览系统更加周全完善。未加以说明、注解的coollinks，其实一点也不cool。老实说，任何人都可以到Yahoo轻易地找到上百上千的links。您若未对这些推荐的links加以个人独特的评论、介绍，读者又何劳偏得到您的站台去找索引呢?任何一个分类索引或搜寻引擎都绝对比您条列的links还要更完备齐全。

网页设计中导航栏须知的事项

1、千万不要太花哨，它属于功能物件，喧宾夺主就不好了。

2、导航不多的情况下，通常是一排，横竖都可以，其实栏目超过6个就可以考虑用两排。

3、导航栏目很多的情况，也可以多排，甚至不规则地多排(一排个数不同，或长度不同)。商业设计或门户站点通常都会有很多频道，设计起来，就要考虑横向双排。使用竖排，会占用太大空间。多排排版时要考虑导航条的直观和美观。

4、为了更好地进行网站优化，导航的锚文本中可以考虑包含关键词。但这里注意的是包含关键词，不是不要堆砌关键字，2-4个字就足够了。

5、通常内容不多的情况下，可能无所谓栏目，站点就包括了导航的具体内容。

6、导航层次的设计。好的导航层次最多不会超过四层，以三层为最佳。但在百度收录过程中，比较注重首页，与首页越近的网页最容易被收录。所以，在设计过程中，一定要在网站规模与用户体验中做好平衡。

7、双排导航未必要挨在一起，可以自由一些，如：上排有导航栏，图片分隔开后则另起一排。

8、图片式导航，很漂亮，占用页面空间比较大。如每一个图像就是一个点击热点。

9、内容很丰富的站点，可以考虑使用快捷导航，即Frame框架快捷导航，是因为不管你进入哪个页面都可以快速跳跃到另外的栏目，不会失去方向。

10、利用DHTML、JS、动态隐藏层等技术实现的多变化的导航，都有浏览器的支持问题。建议大家不用。另外，不是所有的网站都有导航的。大家可根据自己情况而定。

网站导航栏设计时有哪些因素需要注意

导航栏，也叫菜单栏，是一个网站的重要组成部分。它不仅联系着网站外部，同时也联系着网站内部的各个页面。导航栏存在的目的是为了让用户能够更加便捷精准的到达网站内的某一页面，所以也可以看作是整个网站的中心部分。所以导航栏的设计十分重要，如果导航栏的设计比较糟糕，那么用户想必也无法获得好的使用体验，这是十分容易导致跳出率增高的因素，同时，如果一个网站的导航栏设计的不合理，也是一个不应该出现的错误。

在导航栏的设计上，很多网站都会选择进行一些“别出心裁”的构造，但事实上，对于这种功能性非常强的部分，我们非常不建议过分的注重技巧而忽视用户的使用体验，这样不但不会得到用户的肯定，反而会起到相反的作用。但同时，一些过于死板的导航栏设计，虽然能够让用户在使用时非常方便，但也不可避免地会带给用户一种“千篇一律”的感觉，所以导航栏在设计时，还是需要站长多下些功夫的。

除了首页，其他页面也可以放置导航栏

一个很明显的误区就是，很多网站只在首页放置导航栏。用户在浏览网站的首页时，可以轻松的通过导航栏到达他们想要浏览的页面——这说明导航栏的设计是较为成功的，但是一旦到达二级页面，导航就变得模糊起来，以致用户在浏览完本页之后一定要返回主页才能够进行下一步浏览。

事实上，很多用户并没有点击浏览器“后退”按钮的习惯，尽管这个功能十分强大并且方便，所以当用户置身于一个陌生的网站中时，每一次都要通过重新打开主页的方式来搜索自己感兴趣的内容，非常容易产生厌倦。

而这个问题其实非常容易解决，只需要在每一级页面都加入导航栏就可以，这并不是什么困难的工作，而且也会有效的提升用户的使用体验，为什么不尝试一下呢?

导航栏图标设计标准

随着互联网技术的发展，很多网站都致力于在网站中增加很多“炫技”的成分，这种行为的出发点本身是没错的，因为这样可以为用户带来新鲜感，但是要注意，这种技术不一定适用于网站的每一个环节，比如导航栏。

有很多网站设计出了悬浮式导航、椭圆形导航甚至动态导航，诚然，这体现出了设计师的设计灵感，但它不一定讨喜。因为导航栏是一个十分注重功能性的存在，它的设计初衷更应该偏向于如何让用户更加轻松的使用，而不是如何做的更加炫酷。甚至，这可能会让一些思想保守的用户产生厌烦的心理。

所以在大多数时候，导航栏的设计还是在可控制的范围之内尽量保守为主，至少要符合标准，字体过大过小或者奇形怪状的设计，有时可能是为了更加贴合网站的主题风格，但不可否认的是，这也会在很大程度上给用户的使用带来麻烦。

导航栏的数量需要注意

根据业内经验的分析，一个网站内的导航栏数量尽量不要超过7个。这也是为了突显导航栏作用的一个做法，作为导航栏，更应该起到的作用时将更有价值的信息传递给用户，而不是把所有东西都放进导航栏，这样反而体现不出重点在哪里。

最后还要提一下导航栏的位置，虽然绝大部分网站都是将它放在顶部——这无疑是正确的做法，但仍然有少数网站选择了一些奇怪的位置放置导航栏，这样对于提升用户体验并没有太大的帮助，反而可能会起到反作用。在设计导航栏时一定要明确：创新精神是值得肯定的，但是创新不代表可以随心所欲，作为服务于用户的网站，一切的设计都要以如何让用户的使用更加轻松和顺心为中心，导航栏更是如此，如果只是为了炫耀自身的技术而做出一些让用户的使用变得更加麻烦的创新，那么这种创新就是为了创新而创新，我们并不提倡这种做法。

原著作者: 好推建站，原创不易，转载时必须以链接形式注明作者和原始出处及本声明。

导航栏设计技巧

1、超大菜单栏

即使许多设计师不喜欢这样的设计，但是对于许多客户而言，它依然是一个客户反响很好的设计方案。但是这样的设计对于用户可能还是有一些困扰，并且没有提供真正有用的功能。

只有极少数的电商类网站能够真正适合使用超大导航栏的，因为他们确实需要足够的空间来承载大量的导航栏目。不过过大的导航栏可能还是存在一些可用性问题的。

通常，超大的导航栏存在的主要原因在于，导航栏项目很多难以缩减。这真是一个艰难的决定。对于网站的运营者而言需要仔细考量这件事情，或者通过搜集来的数据来做设计决策的论据。对于特定的内容，许多用户还是倾向于使用搜索来获取，这是毋庸置疑的。

2、加入显眼的搜索框

用户常常使用搜索来筛选信息，更快更直接地获取重要的信息，所以，搜索框应该突出展示。它应该出现在每个页面上，应该和主导航栏一起存在，应该够大也易于访问。

强大的搜索引擎是让用户留存的重要影响因素，当搜索引擎的可用性较差的时候，网站的可访问性会受到影响。网站的页面一次展示的内容是相当有限的，一旦用户在页面中无法直接获取想要的内容，下一步就是考虑借助搜索引擎来达成目标了。

用户对于搜索的需求是刚性的，不要试图打破这种客观存在的规律，尽量让搜索融入到主导航当中来吧。(确保输入框足够大，可以输入，并且足以一次显示常见的搜索内容)

3、限制导航内条目数量

作为设计师，你需要预测用户经常访问的内容，将最重要、最常用到的条目置于导航栏当中。值得一提的是，几乎每个网站的导航中都会包含搜索、关于我们、首页，而电商类网站则通常会包含购物车、购买的按钮。

但是无论如何，永远将最关键、最重要的导航类目让用户看到，才是导航所应该做到的事情，换句话来说，就是关键内容驱动导航分类。

4、更聪明的导航机制

好的导航设计，能让用户能在页面和页面之间合理快速切换，网站不同的内容和功能之间是有一定的自然逻辑的，这个自然逻辑可以作为导航设计的一个重要参考。

在这个用户体验高度个性化的时代，网页导航的玩法可以更加多样。以Amazon 为例，当你登录了之后，会发现导航开始围绕着你的信息进行了调整，导航栏从通用的条目变为更贴近你的个人情况的样式，其中包括最近的购买记录，信用额度和Amazon 的服务信息等。

5、正确地排布导航内的条目

导航内的元素的排布顺序和条目内容同样重要。导航栏两头的条目是最引人注意的，并且也通常是用户点击最多的，所以作为设计者，你需要特别注意这些条目的设计。

对于这一点，还有不少科学研究和理论支持。比如，序列位置效应指的就是人会更容易记住列表的开头和结尾的条目。新近效应说的是用户更容易记住最新看到的条目，而首位效应说的是，相比于列表中间的内容，用户更容易记住列表开头的几个条目。