SEARCH
新闻资讯

网站知识库

网页设计中的面包屑实例和做法.

2020/4/12 11:04:08

网站上有许多的网页,面包屑导航可以大大提升用户使用的方法找到本身的方法解决。在可用性方面,面包屑数量削减网站的访问者,以获得更高级别的页面必须要采取的举措,并提升网站的部分和页面的可查找性。这也是一种有用的视觉救济,透露表现用户在该网站的条理结构的位置,使其成为一个巨大的登陆页面的上下文信息来源。

什么是面包屑?
一个“面包屑”(或“面包屑导航”)是一种辅助导航计划的网站或Web应用程序中表现用户的位置。一词来源于Hansel和Gretel童话在这两个题目的儿童辍学面包屑形成了一条回到本身的家乡。就像在故事中,面包屑在实际世界的应用中为用户提供了一种方式来跟踪路径返回到原来的着陆点。

交互式示例1。
面包屑上Delicious.com

您通常可以找到网站有大量的内容,以分层方法组织的面包屑。你也可以看到他们的Web应用程序中有多个步骤,它们的功能类似一个进度条。在其最简单的情势中,面包屑是水平布置的“大于”符号(>)分隔的文本链接;符号透露表现该页面相对水平它旁边的页面的链接。

在这篇文章中,我们将探究使用面包屑在网站上讨论的一些最佳做法应用到本身的网站欣赏路径。

你应该在什么时候使用面包屑?
使用面包屑导航的大型网站和分层排列 的网站页面。一个良好的方案是电子商务网站,在种类繁多的产品分为逻辑分类。

没有逻辑等级或分组的单级网站,您应不使用面包屑。一个巨大的方法来确定,假如一个网站将受益于面包屑导航是建立一个网站地图或图网站的导航结构,然后分析,是否面包屑会提升用户的内部和类别之间的导航能力。

面包屑导航应该被视为一个额外的功能,而不应庖代有用的主导航菜单。这是一个方便的功能; 辅助导航方案,许可用户建立他们在哪里的另一种方法来欣赏你的网站。

面包屑的类型
重要有三种类型的面包屑。

基于位置的
基于位置的面包屑的用户,他们是在网站的条理结构。它们通常被用于有多个级别(通常是两个以上的水平)的导航方案。在下面的例子(来自SitePoint),每一个笔墨链接是高于在它的右边是一个级别的页面。

例如基于位置的面包屑。

基于属性的
属性为基础的欣赏路径表现一个特定页面的属性。例如,在新蛋,面包屑小径表现一个特定的页面上表现的项目的属性:

例如,基于属性的面包屑。

此页面表现所有计算机的属性,正在生产的连李有一个MicroATX的小塔的外形。

基于路径的
路径为基础的欣赏路径向用户展示他们已经采取的步骤,到达一个特定的页面。基于路径的面包屑是动态的,由于它们表现之前到达当前页面上的用户访问过的网页。

使用面包屑的益处
这里只是一些使用面包屑导航的益处。

方便用户
面包屑重要是用来给用户欣赏一个网站的辅助手段。提供一个大型的多级网站的所有网页上的面包屑导航,用户可以更方便地欣赏到更高级别的类别。

削减返回到更高级别的页面,
而不是使用欣赏器的“返回”按钮或网站的主导航返回到一个更高条理的页面的点击或举措,用较少的点击数,用户如今可以使用面包屑。

通常不养猪的屏幕空间,
由于他们通常水平为导向,明晓畅白风格,欣赏路径不会占用很大的空间在页面上。做的益处是,他们几乎没有负面影响的内容过载,超过任何底片,假如使用得当。

降低跳出率的
欣赏路径可以是一个巨大的方法来吸引首次细读的网站后,查看登陆页面的访客。例如,假设用户通过谷歌搜索到一个页面,看到一个面包屑的线索,可能会吸引到更高级别的页面,用户点击查看相干主题的利益。这反过来,降低了团体的网站跳出率。

在面包屑导航实施的误区
使用欣赏路径是一个相称简单的事情,有一些引导原则考虑,才决定他们在网站上实施。让我们来看看,以避免一些惯用的错误。

使用面包屑时,你并不必须要
在实施面包屑的一个惯用的错误是使用他们没有任何益处。

使用面包屑,当你不必须要它。

另外,在上述的例子中,Slicethepie风险压服性的用户提供太多的导航选项。(1)主导航,面包屑导航(2)和(3)辅助导航是特别很是接近的。在此应用程序中的面包屑导航为用户提供了方便,由于没有添加辅助导航较低级别的页面位于它下面的。此外,单击上的面包屑导航(“音乐”)第二级链接将带您回到第一个选项卡(“听”),其中错误地认为,第一个选项卡是在一个更高的水平比其他两个(“搜索“和”艺术家名人堂“)。

作为重要的导航欣赏路径
如前所述,使用面包屑导航作为一个可选的救济。

使用面包屑作为重要的导航/

在上面的例子中,mefeedia不提供一个观看影片的主导航菜单。虽然有笔墨的脚注部分中的链接导航,导航菜单在身体的页面,很难欣赏到该网站的其他部分。

使用面包屑路径作为主导航 - 例如2。

假如你直接到达一个视频网页上 - 比方说,例如,通过谷歌搜索效果 - 唯一的导航选项,则可能是面包屑导航。或者,假如你已经被欣赏一个网站的网页,并达到一个页面不表现主导航菜单,你必须按“返回”按钮,在您的欣赏器,进入主菜单。

使用面包屑网页时,有多个类别,
欣赏路径有一个线性的结构,因此,使用他们的将是困难的,假如你的网页不能被归类成划一的类别。决定是否使用面包屑,在很大程度上取决于你如何设计你的网站的条理结构。当较低级别的页面(或可以)在一个以上的父类,面包屑的痕迹是无效的,不正确的和用户感到疑心。

面包屑导航的设计注重事项
当设计一个面包屑导航计划,要考虑几件事情。让我们来看看一些可能出现的问题,当你的工作与面包屑。

应使用单独的链接项目
的普遍接受和星散欣赏路径中的超链接是最容易识别的符号“大于”符号(>)。通常情况下,“>”符号是用来透露表现条理结构,在父类的格式>儿童类。

大于符号分隔的文本链接的例子。

使用的其它符号的箭头指向精确的,精确的角度引号(“)和斜线(/)。

另一种条理星散器的例子。

的选择取决于美学的网站和使用的痕迹的类型。例如,对于基于路径的面包屑了该书不肯定有一个分层之间的相互关系,使用一个“大于”符号可能无法正确地传达他们的关系。

它应该是多大?
你不盼望你的面包屑主宰的页面。一个面包屑导航功能只是作为一种辅助手段,用户(方便),其大小应传达给用户,因此应该至少是较小的,或不太凸起,比主导航菜单。

一个很好的大小的面包屑导航的一个例子。

您的面包屑导航的大小时要遵循的一个很好的经验法则是,它不应该是捉住用户的注重,当到达一个页面上的第一个项目。

应该在哪里面包屑的位置?
主导航菜单欣赏路径通常表现在下面的页面的上半部分,假如使用一个水平的菜单布局。

面包屑展示
如今,我们已经讨论了谁,什么,何时,何地,为何,hows的欣赏路径,我们应该看看一些活生生的实例。在下面的章节中,你会发现巨大的网站,使用欣赏路径的几个例子。


如没特殊注明,文章均为成都网站建设公司唯赛网络原创,转载请注明来自http://www.weseo.cn/News/knowledge_675_11895.html

Contact

ADD:成都市青羊区光华东三路西环广场6楼

TEL:028-64232097

Wechat

微信二维码