首页 理论教育 设计水平栏导航的注意事项与解决方案

设计水平栏导航的注意事项与解决方案

时间:2023-06-01 理论教育 版权反馈
【摘要】:图3-14顶部水平栏导航设计模式有时伴随着下拉菜单,当鼠标移到某个项上时弹出它下面的二级子导航项。它们通常需要更多的标签、图片资源以及CSS,具体根据标签的视觉复杂度而定。同时飞出式菜单导航和下拉菜单导航可能使导航在移动设备上非常难用,所以要确保移动样式表处理了这种情况。导航栏目内容应该能够精准地引导用户,迅速找到目标内容。

设计水平栏导航的注意事项与解决方案

(一)首页中常用网页导航的位置和特点

1.顶部水平栏导航

顶部水平栏导航是当前两种流行的网站导航菜单设计模式之一。它最常用于网站的主导航菜单,且通常放在网站所有页面的网站头的直接上方或直接下方,如图3-14所示。

图3-14

顶部水平栏导航设计模式有时伴随着下拉菜单,当鼠标移到某个项上时弹出它下面的二级子导航项。

(1)顶部水平栏导航的一般特征。导航项是文字链接,有按钮形状,或者选项卡形状。水平栏导航通常直接放在邻近网站LOGO的地方。

(2)顶部水平栏导航的缺点。顶部水平栏导航最大的缺点就是它限制了在不采用子级导航的情况下可以包含的链接数。对于只有几个页面或类别的网站来说,这不是什么问题,但是对于有非常复杂的信息结构且有很多模块组成的网站来说,如果没有子导航项,就不是一个完美的主导航菜单选择。

(3)何时使用顶部水平栏导航。顶部水平栏导航对于只需要在主要导航中显示5~12个导航项的网站来说是非常好的。这也是单列布局网站的主导航的唯一选择(除了通常用于二级导航系统的底部导航之外)。当它与下拉子导航结合时,这种设计模式可以支持更多的链接。

2.竖直/侧边栏导航

竖直/侧边栏导航的导航项被排列在一个单列,一项在一项的上面。它经常在左上角的列上,在主内容区之前——根据一份针对从左到右习惯用户的导航模式的可用性研究,左边的竖直导航栏比右边的竖直导航表现要好。竖直/侧边栏导航设计模式随处可见,几乎存在于各类网站上。这有可能是因为竖直/侧边导航是当前非常通用的模式之一,可以适应数量很多的链接,如图3-15所示。

图3-15

它可以与子导航菜单一起使用,也可以单独使用。它很容易用于包含很多链接的网站主导航。竖直侧边栏导航可以集成在几乎任何种类的多列布局中。

(1)竖直/侧边栏导航的一般特征:

①文字链接作为导航项很普遍(包含或不包含图标);

②很少使用选项卡(除了堆叠标签导航模式之外);

③竖直导航菜单经常含有很多链接。

(2)竖直/侧边栏导航的缺点:因为可以处理很多链接,当竖直菜单太长时可能使用户厌烦。尝试限制引入的链接数,可以使用飞出式子导航菜单以提供网站的更多信息。同时考虑将链接分放在直观的类别当中,以帮助用户很快地找到感兴趣的链接。

(3)何时使用竖直/侧边栏导航?竖直导航适用于几乎所有种类的网站,尤其适合有一堆主导航链接的网站。

3.选项卡导航

选项卡导航可以随意设计成任何你想要的样式,从逼真的、有手感的标签到圆滑的标签,以及简单的方边标签等。它存在于各种各样的网站里,并且可以纳入任何视觉效果,如图3-16所示。

图3-16

选项卡比起其他类别的导航有一个明显的优势:它们对用户有积极的心理效应。人们通常把导航与选项卡关联在一起,因为他们曾经在笔记本或资料夹里看见选项卡,并且把它们与切换到两个新的章节联系在一起。这个真实世界的暗喻使得选项卡导航非常直观。

(1)选项卡导航的一般特征:①样子和功能都类似真实世界的选项卡(就像在文件夹、笔记本等中看到的一样);②一般是水平方向的但有时是竖直的(堆叠标签)。

(2)选项卡导航的缺点:选项卡最大的缺点是它比简单的顶部水平栏更难设计。它们通常需要更多的标签、图片资源以及CSS,具体根据标签的视觉复杂度而定。选项卡的另一个缺点是它们也不太适用于链接很多的情况,除非它们竖直地排列(即使这样,如果太多它们还是看起来很不合适)。(www.xing528.com)

(3)何时使用选项卡导航?选项卡也适合几乎任何主导航,虽然它们在可以显示的链接上有限制,尤其在水平方向的情况下。将它们用于拥有不同风格子导航的主导航的较大型网站是个不错的选项。

4.飞出式菜单导航和下拉菜单导航

飞出式菜单导航(与竖直/侧边栏导航一起使用)和下拉菜单导航(一般与顶部水平栏导航一起使用)是构建良好导航系统的好方法,它使得网站整体上看起来很整洁,而且使得深层章节很容易被访问,如图3-17所示。

图3-17

它们通常结合水平、竖直或是选项卡导航一起使用,作为网站主导航系统的一部分。

(1)飞出式菜单导航和下拉菜单导航的一般特征:①用于多级信息结构;②使用JavaScript和CSS来隐藏和显示菜单;③显示在菜单中的链接是主菜单项的子项;④菜单通常在鼠标悬停在上面时被激活,而有时候也可能是在鼠标点击时激活。

(2)飞出式菜单和下拉菜单导航的缺点:

除非在主导航链接边上放置一些标志(通常是箭头图标),不然访客可能不知道那里有包含子导航项的下拉或飞出式菜单,因此使这些标志很明显是非常重要的。同时飞出式菜单导航和下拉菜单导航可能使导航在移动设备上非常难用,所以要确保移动样式表处理了这种情况。

(3)何时使用飞出式菜单和下拉菜单导航?如果想在视觉上隐藏很大的或很复杂的导航层次,飞出式菜单导航和下拉菜单导航是很好的选择,因为它让用户决定他们想看见什么,以及什么时候可以看见它们。它们可以用来在不弄乱网页的情况下按需显示很大数量的链接。它们还可以用来显示子页面和局部导航,并且不需要用户首先单击打开新的页面。

5.页脚导航

页脚导航通常用于次要导航,并且可能包含了主导航中没有的链接,或是包含简化的网站地图链接,如图3-18所示。

图3-18

访客通常在主导航找不到他们要找的东西时会去查看页脚导航。

(1)页脚导航的一般特征:①页脚导航通常用于放置其他地方都没有的导航项;②通常使用文字链接,偶尔带有图标;③通常链接指向不是那么关键的页面。

(2)页脚导航的缺点:如果页面很长,没有人愿意仅仅为了导航而滚动到页面底部。对于较长的页面,页脚导航最好作为重复链接和简要的网站地图的地方。它不适合作为主导航形式。

(3)何时使用页脚导航:绝大多数网站都有这样那样的页脚导航,即使它只是重复其他地方的链接。应考虑什么放在这里有用,以及访客可能最想找什么。

(二)网页导航的栏目内容设计

多姿多彩的导航方式可以满足用户浏览时视觉上的感官体验和操作上的交互体验,但在导航栏目内容的设计上,不应只是网站内容的简单分类,而应该是体现网站独特的风格和理念。导航栏目内容应该能够精准地引导用户,迅速找到目标内容。例如:

(1)淘宝商城以“品牌”“特色”作为内容标题,突出“淘”的特色;

(2)当当网主导航采用中规中矩的商品类别做栏目内容,下方增加水平栏副导航按特色服务进行分类;

(3)亚马逊干脆取消顶部水平栏导航,只使用左侧竖直飞出式菜单导航,顶部水平栏导航的位置被搜索栏的大片空白占据,方便目的性强的直接用户,体现网站特色;

(4)凡客则使用与当当网类似的方式,主导航采用特色热销商品,副导航使用总体的商品类别。

大多数网站使用不止一种导航设计模式。例如,一个网站可能会用顶部水平栏导航作为主导航系统,并使用竖直/侧边栏导航系统来辅助它,同时还用页脚导航来做冗余,增加页面的便利度。当选择的导航系统基于导航设计模式时,必须选择支持的信息结构以及网站特性的方案。导航是网站设计的重要部分,它的效果必须有坚实的基础。

免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。

我要反馈