卓慧新闻

网页设计面包屑到底该如何运用

信息来源:卓慧科技 发布时间:2017-11-30 9:07:54 浏览次数:0

网页设计面包屑到底该如何运用?作为一种辅佐导航系统,面包屑能够帮忙用户清楚的定位到自己地址网站的方位。这个词源自于神话中跟着面包屑回到自己家的孩子,而网页中的面包屑也是帮忙用户找到自己方位的UI控件。

面包屑通过途径展现奉告用户他们地址的方位,而今天的这篇文章将会评论一个可用的网页面包屑应当怎样规划,通过最佳实践展现面包屑的正确用法。

面包屑导航供应可用性

作为一种视觉指引,面包屑为用户提示出网页的层次结构,也正是因此,面包屑成为了用户了解网站布景信息的重要途径,帮忙用户了解下列问题的答案:

·我在哪里?根据整个网站的层次,面包屑能让用户知道他们地址的方位。

·我还能去哪里?面包屑提升了整个网站的可查找性,面包屑的存在提示了整个网站的结构,用户也随之理解网站还有哪些其他的部分。

·是否应当阅览更多?面包屑提示出网站有更多值得探究的内容,鼓动用户阅览更多。反过来,面包屑的出现降低了网站的跳出率。

减少操作次数

从可用性的角度上来看,面包屑减少了用户跳转到高层级页面的操作数,这样避免了用户运用阅览器的回来按钮和翻找导航寻找上级页面的凌乱交互。

占用空间小

面包屑这种规划元素在页面上占用的空间恰当小,它根本都是以带链接的文本的方法存在的,而且一般只需一行。

面包屑不会给用户带来困扰

这个小小的规划元素占有的空间不大,但是给用户带来的方便远远大于可能带来的问题和困扰。

什么时分运用面包屑?

是否要在网站中运用面包屑,首要取决于网站的结构。看看你的网站地图或许整体的结构图,剖析运用面包屑能否前进用户在网站内部不同类别、目录下导航是否便当:

·当你的网站内具有分类清楚、安排清晰的多层次线性结构的时分,你应当运用面包屑。比如一个具有品种繁复产品的电子商务网站,面包屑就恰当有用。

·当网站不具备逻辑清楚的层次结构的时分,就不要运用面包屑。

面包屑的类型

面包屑是根据网站的逻辑结构而存在的导航组件,它能够根据方位、途径来展现,也能够根据特色而存在。

根据方位的面包屑

根据方位的面包屑规划一般都能很好的反映网站的结构特征。它们直接将网站的层次结构展现在访客面前,其间包括多个层级(级别一般超越2层)。这种层级展现性的面包屑关于从外部来历(比如搜索引擎)进入网站的用户而言,具有显着的指引性作用。

在下面 BestBuy 的页面中,面包屑将产品地址页面的层级联络展现了出来。

根据途径的面包屑

根据途径的面包屑一般也被称为“前史脚印”,它展现出来的并非是网站结构,而是访客抵达特定页面的无缺途径。这种面包屑途径并非是静态的,而是动态生成的。根据途径的面包屑有时分会对用户有所帮忙,但是有的时分仍是会让用户感到威逼——有的用户阅览网站的时分阅览途径过于天马行空,这种根据途径的面包屑会帮忙他们记载,无需翻看前史,也不无需运用阅览器的回来按钮来回来特定方位。其他,这种根据途径的面包屑关于一次就抵达特定方位的用户而言毫无用处。

下面就是运用根据途径面包屑来导航的案例和原理阐明:

根据特色的面包屑

这类根据特色的面包屑常见于电子商务类网站,产品常常根据类别和特色而安排到不同的子目录中,根据特色的分类让用户更简略了解产品和产品之间的联络,供应了更多不同的阅览途径。

就像 TM Lewin 的这个页面,面包屑展现出的是特定页面对应产品,而产品是依照某个特色来安排的:

层级仍是前史?

根据实践经验,绝大多数的情况下,面包屑仍是合适展现层级安排而非阅览前史。因此,根据方位和特色的面包屑运用更加广泛,根据途径的面包屑相对稀有的多。

面包屑导航最佳实践