网页布局与配色实战
上QQ阅读APP看书,第一时间看更新

3.4 网站导航设计

网站的导航机制是网站内容架构的体现,网站导航是否合理是网站易用性评价的重要指标之一。网站的导航机制一般包括全局导航、辅助导航、站点地图等体现网站结构的因素。正确的网站导航要做到便于用户的理解和使用,让用户对网站形成正确的空间感和方向感,不管进入网站的哪一页,都很清楚自己所在的位置。

3.4.1 导航设计的基本要求

一个网站导航设计对提供丰富友好的用户体验有至关重要的作用,简单直观的导航不仅能提高网站易用性,而且在用户找到所要的信息后,有助于提高用户转化率。导航设计在整个网站的设计中地位举足轻重。导航有许多方式,常见的有导航图、按钮、图符、关键字、标签、序号等多种形式。在设计中要注意以下基本要求。

图3-12 明确的网站导航

  • 明确性:无论采用哪种导航策略,导航的设计应该明确,让使用者能一目了然。具体表现为:能让浏览者明确网站的主要服务范围;能让浏览者清楚了解自己所处的位置等。只有明确的导航才能真正发挥“引导”的作用,引导浏览者找到所需的信息。图3-12所示为明确的网站导航。
  • 可理解性:导航对于用户应是易于理解的。在表达形式上,要使用清楚简捷的按钮、图像或文本,要避免使用无效字句。
  • 完整性:完整性是要求网站所提供的导航具体、完整,可以让用户获得整个网站范围内的领域性导航,能涉及网站中全部的信息及其关系。
  • 咨询性:导航应提供用户咨询信息,它如同一个问询处、咨询部,当用户有需要的时候,能够为使用者提供导航。
  • 易用性:导航系统应该容易进入,同时也要容易退出当前页面,或让使用者以简单的方式跳转到想要去的页面。
  • 动态性:导航信息可以说是一种引导,动态的引导能更好地解决用户的具体问题。及时、动态地解决使用者的问题,是一个好导航必须具备的特点。

考虑到以上这些导航设计的要求,才能保证导航策略的有效,发挥出导航策略应有的作用。

3.4.2 全局导航的基础要素

图3-13 网站的全局导航

全局导航又称主导航,它是出现在网站每个页面上的一组通用的导航元素,以一致的外观出现在网站的每个页面,扮演着对用户最基本访问的方向性指引。

对于大型电子商务网站来说,全局导航还应当包括搜索与购买两大要素,以方便用户在任意页面均能进行产品搜索与购物。图3-13所示为购物网站的全局导航。

指点迷津

一般企业的全局导航必须包括以下3个基本设计要素。

  • 站点Logo:网站中的Logo必须添加回首页的链接。
  • 回首页:每个全局导航的左边位置应该出现回首页的提示及链接。
  • 全站基础栏目(一级栏目)。

3.4.3 导航设计注意要点

在设计导航时最佳导航方式是采用文本链接方式,但不少网站,尤其是娱乐休闲类网站,为了表现网站的独特风格,在全局导航条上使用Flash或图片等作为导航。以下是一些常见的导航设计注意事项。

  • 导航使用的简单性。导航的使用必须得尽可能地简单,避免使用下拉或弹出式菜单导航,如果没办法一定得用,那么菜单的层次不要超过两层。
  • 不要采用“很酷”的表现技巧。如把导航隐藏起来,只有当鼠标停留在相应位置时才会出现,这样虽然看起来很酷,但是浏览者更喜欢可以直接看到的选择。
  • 目前很多网站喜欢使用图片或Flash来做网站的导航,从视觉角度上讲这样做更别致、更醒目,但是它对提高网站易用性没有好处。
  • 注意超链接颜色与单纯叙述文字的颜色呈现。HTML允许设计者特别标明单纯叙述文字与超链接的颜色,以便丰富网页的色彩呈现。如果网站充满知识性的信息,欲传达给访问者,建议将网页内的文字与超链接颜色设计成较干净素雅的色调,会较有利于阅读。
  • 应该让浏览者知道当前网页的位置,例如通过辅助导航的“首页>新闻频道>新闻标题”对所在网页位置进行文字说明,同时配合导航的高亮颜色,可以达到视觉直观指示的效果。
  • 测试所有的超链接与导航按钮的真实可行性。网站制作完成发布后,第一件该做的事是逐一测试每一页的超链接与每一个导航按钮的真实可行性,彻底检验有没有失败的链接。
  • 导航内容必须清晰。导航的目录或主题种类必须得清晰,不要让用户感到困惑,而且如果有需要突出主要网页的区域,则应该与一般网页在视觉上有所区别。
  • 准确的导航文字描述。用户在点击导航链接前对他们所找的东西有一个大概的了解,链接上的文字必须能准确描述链接所到达的网页内容。

3.4.4 让按钮更易点击

图3-14 按钮更容易点击

按钮是网站界面中伴随着用户点击行为的特殊图片,按钮在设计上有较高的要求。按钮设计的基本要求是要达到“点击暗示”效果,凹凸感、阴影效果、水晶效果等均是这一原则的网络体现。同时,按钮中的可点击范围最好是整个按钮,而不仅限于按钮图片上的文本区。图3-14所示的网站的按钮设计就非常漂亮,易于点击。

指点迷津

可以通过以下几点来设计按钮,让它更易被点击。

  • 按钮颜色与背景颜色有一定的对比度。
  • 按钮有浮起感,可点击范围够大,包括整个按钮。
  • 按钮文字提示明确,如果没有文字,确信所使用的图形按钮是约定俗成、容易被用户理解的图片。
  • 对顾客转化起重要作用的按钮用色应突出一点,尺寸大一点。