Contact

0574-27729591
city@city-design.cn

Address

中国·宁波·江北望山路26号
博瑞大厦607-608

WeChat
menu

网站中导航的面包屑如何设计

2016-08-22
我们在网页中经常可以见到一些面包屑导航,它们往往出现在页面内容的上方,通过路径展示告知用户他们所处的位置。它小巧,方便,常见,且简单,作为视觉指引,面包屑如何设计也是大有讲究的。

首先来看看面包屑导航究竟具有哪些作用?根据整个网站的层次,面包屑能让用户知道他们目前所处的位置,同时提升了整个网站的可查找性,面包屑的存在揭示了整个网站的结构,用户也随之明白网站还有哪些其他的部分,降低了网站的跳出率。

减少操作次数。从可用性的角度上来看,面包屑减少了用户跳转到高层级页面的操作数,这样避免了用户使用浏览器的返回按钮和翻找导航寻找上级页面的复杂交互。
占用空间小。面包屑这种设计元素在页面上占用的空间相当小,它基本都是以带链接的文本的形式存在的,并且通常只有一行。
面包屑不会给用户带来困扰。这个小小的设计元素占据的空间不大,但是给用户带来的便捷远远大于可能带来的问题和困扰。

既然面包屑有这么多的功能,那什么时候使用面包屑?是否要在网站中使用面包屑,主要取决于网站的结构。看看你的网站地图或者整体的结构图,分析使用面包屑能否提高用户在网站内部不同类别、目录下导航是否方便:当你的网站内拥有分类明晰、组织明确的多层次线性结构的时候,你应当使用面包屑。比如一个拥有种类繁多产品的电子商务网站,面包屑就相当有用。当网站不具备逻辑清晰的层次结构的时候,就不需要使用面包屑。

我们应该怎样来设计面包屑呢,或者需要注意哪些事项?

1、不要使用面包屑来替代网页主要的导航系统。面包屑只是一个辅助导航系统,它无法替代主要的导航系统。请记住,它是仅仅是为了用户方便的次要选项,用来抵达其他层级的快速定位链接系统。
2、不要将当前页链接加到面包屑中。面包屑的最后一个层级是当前的页面,而这一项在面包屑中是不应该加上链接的,因为它只起到展示定位的作用,没有任何意义。
3、使用分隔符。在面包屑中,用来分隔不同层级最常见的是大于符号(>),常见的使用方法是“父类别 > 子类别”。当然,分隔符的使用并不拘泥于这一种,有使用箭头(→)的,还有使用书名号(»)的,也有使用斜杠(//)的。使用哪种分隔符通常取决于整体风格和设计师的喜好。
4、选择合适的尺寸和间距。在设计的时候应当仔细考虑尺寸和间隔大小,不同的面包屑层级之间应当有足够的间距,确保用户能够识别。当然你也不希望面包屑占据页面太多的空间,如果面包屑比顶部导航还要大,看起来就非常尴尬了。
5、不要让它成为视觉焦点。面包屑本身是一个辅助导航,如果使用过于花哨的字体和醒目的色彩,会使得它显得喧宾夺主,过于抓人眼球。它不应该是浏览过程中用户的视觉焦点。
最后移动端网站并不适合使用面包屑。

面包屑让用户可更加便捷地浏览整个网站,回溯到上级页面,寻找相关的产品,它对于整个网站结构是有意义的。它的功能并不复杂,增加易用性是它的主要作用,所以千万不要将面包屑复杂化。

宁波网站设计 城池设计:http://www.city-design.cn/News/871.html
相关新闻
work案 例
about关 于

联系我们

Tel

0574—2772 9591
158 2427 9580

很遗憾,您现在使用的是低版本的浏览器,为了更好的浏览体验,建议使用Chrome(谷歌浏览器)访问我们的网站。