滁州高端响应式网站设计

响应式网页设计、开放源代码、永久使用、不限域名、不限使用次数

建站案例

网站面包屑是什么?

什么是面包屑?

面包屑是一个网站或者app中为用户指引其所处位置的第二导航系统,俗称:“面包屑导航”。和童话故事里的一样,浏览者能够了解这个网站的层级结构,并且便于浏览高层级的内容。

面包屑也被当作一种有效的视觉救援,指引用户在网站层级中所处的位置。以上这些特性使得用户通过面包屑导航获取到一大部分承上启下的信息资源,并且帮助用户找到以下问题的答案:

我在哪儿?面包屑导航提醒浏览者他当前处于整个网站层级中具体位置。

我能去到哪里?面包屑导航能够提高用户对网站的章节和页面的搜寻能力,比起只是放置一个菜单,放置一排面包屑导航更容易让人理解网站的结构。

我将去哪里?面包屑导航能将内容进行关联,并且促进浏览(比如电商网站的用户可能进到一个商品详情页之后,发现这个商品并不是自己想要的,这个时候用户可能有意愿浏览同类的商品),同时,又反过来降低了整个网站的跳出率

面包屑的故事:

面包屑导航(BreadcrumbNavigation)这个概念来自《格林童话》中的一则寓言故事,当汉赛尔和格莱特穿过森林时,不小心迷路了,但是他们发现在沿途走过的地方都撒下了面包屑,让这些面包屑来帮助他们找到回家的路。

添加面包屑的好处:

1、减少操作次数

就可用性而言,面包屑可以减少用户为达到一个更高的层级页面所必经的操作步骤。用户可用面包屑替代使用浏览器的“返回”按钮或网站的初始化导航。

2、占用最少空间

这是一种不需要占用多大空间的紧凑机制,因为它只是一些带水平下划线的文本链接。其好处是不会造成负面的页面过载。

3、没有用户受面包屑的困扰

人们会忽视这个小设计元素,但他们从来没有觉得面包屑难以理解或难以操作。

什么样的系统适合适用面包屑?

面包屑的应用很广泛,移动app、信息网页、后台系统等,当我们停留在系统中迷茫,找不到方向的时候,内心一定希望有一个面包屑告诉我们:“你在这里” 。这个声音很重要!

很多网站的用户使用体验调查报告都得出一个相同的结论:超过3次点击还没有找到需要的信息,访客就此离开网站的可能性非常大。而面包屑可以为访客做一个优秀的导游,避免用户流失。

哪些系统不需要面包屑?

系统的设计足够扁平化,通过其他方式完全能表达用户的位置,系统层级关系简单的时候是没有必要使用面包屑的。

添加面包屑导航的注意事项:

1、不要把面包屑用来替代网站的原始导航

面包屑导航应当被当作一种附加功能,而不应该用来替代有效的主导航菜单。记住它只是一个方便的功能;一种次级导航策略;一种可供选择的网站导航方式;

2、别在面包屑导航的当前页面加链接

面包屑导航的最后一项(当前用户位置)是可显示也可不显示的,但是需要确定的是它不可点击。因为当用户已经处于这个页面时,就没有理由给面包屑导航中的当前页面加上跳转链接。  

3、使用分隔符

大多数面包屑导航都是用大于号“>”来作为链接与链接之间的分隔符。尤其是当“>”符号被用作表示层级分隔时,它表示 父级类别>子级类别。另外还有一些符号也可以表征排序从左至右,比如(→)、(»)、(/)。可以根据网站的视觉风格和面包屑道行的类型来进行选择;

4、选择合适的尺寸和边距

在设计时认真思考一下目标尺寸和边距。在不同面包屑之间应当留有足够的间隙,否则用户体验会很不好,觉得不好用,并且你并不希望你的面包屑在页面中占主导地位,因为它将会相对减弱你主导航菜单。  

5、别让它称为设计的焦点

你不应该使用花哨的字体或明亮的颜色,因为这些会破坏你使用面包屑导航的初衷。在设计面包屑导航大小尺寸和风格时应当遵循的一个原则是:它不应当成为页面上用户一眼就关注到的东西。面包屑导航不能太夺人眼球了,可能分散用户在主内容和主导航上的注意力。



相关文章