|
主题:面包屑导航对于SEO优化的作用 [收藏主题] | 转到: |
面包屑导航是一个很容易理解的概念,但是很多人不明白,下面我给大家讲解一下,一般的网站会有很多页面,面包屑导航可以大大改善用户寻找他们的路径的方法。就可用性而言,面包屑可以减少一个网站的用户返回上一级页面的操作次数,而且他们可以提高网站部分和页面的可查找性。他们还是在网站层次中指示用户所在位置的有效的视觉助手,这使之成为承接页面上下文信息的很棒的根源。 什么是面包屑?面包屑(或称为面包屑路径)是一种显示用户在网站或网络应用中的位置的二级导航方案。这个术语来自于神话故事《奇幻森林历险记》,故事的两个小主人公丢下一条面包屑路径,然后顺着这条路径回到了家中。就像这个故事一样,在现实世界的应用程序中,面包屑为用户提供一种追踪返回最初访问页面的方式。 你通常可以在有大量的按一定等级组织的内容的网站上找到面包屑。你也可以在有多于一个步骤的网络应用上见到它们,这个时候他们的功能类似于进度条。最简化的方式是,面包屑就是水平排列的被大于号" > " 隔开的文本链接;这个符号指示该页面相对于链接到它的页面的深度(级别)。 在本文中,我们将探索面包屑在网站上的用法,并讨论在你自己的网站中应用面包屑路径的一些最佳实践方法。 什么时候使用面包屑?面包屑导航用于大型网站和按分级排列页面的网站。一个典型的案例就是电子商务网站,在这类网站中,大量的产品被按照逻辑分类分组。 你不必在没有逻辑等级或分组的单级网站上使用面包屑。一个决定是否使用面包屑导航的方法是建立一个网站地图或结构图来描述网站的导航结构,然后分析面包屑是否能提高用户在类别内和类别之间的定位能力。 面包屑导航应该作为扩展的额外的功能,而不能替代有效的主要导航菜单。它是一个方便的功能;一个允许用户定位他们在哪里的二级导航方案;一个定位你的网站的可选择的方法。 面包屑的种类面包屑主要分为三类。 基于位置基于位置(Location-based)的面包屑向用户显示他们在网站的哪一个级别页面。它们一般典型的用于有多个级别(一般是多于两级)的导航方案。在下面的例子中(来自于SitePoint,每一个页面的文本链接表示它比它右边的文本链接高一级。 基于特性 基于特性(Attribute-based)的面包屑路径显示一个特定页面的特性。例如,在Newegg,面包屑路径表示在一个特定页面显示的特性内容。 这个页面显示所有拥有由Lian Li制造并有MicroATX微塔式因素的电脑机箱。 基于路径基于路径(Path-based)的面包屑路径显示用户到达特定页面的操作步骤。基于路径的面包屑是动态的,它们显示用户在到达当前页面之前访问过的页面。 使用面包屑的优势这里是一些使用面包屑路径的优势。 方便用户 减少返回到上一级页面的点击或操作 不用常常占用屏幕空间 降低跳出率 使用面包屑路径是一件相当简单的事情,而且在决定使用它们之间只需要很少的指导性考虑。让我们看一些可避免的常见错误。 在你不需要的时候使用面包屑 在上面的例子中,Slicethepie 冒险迫使用户使用太多的导航选择。(1)主导航, (2) 面包屑路径和(3) 次要导航太接近了。这个应用中的面包屑路径不能为用户提供额外的便利,因为下一级页面的次要导航正好在它下面。而且,当点击面包屑的二级链接“Music”时,它将带你到第一个tab“Listen”,这会错误的暗示第一个tab在另外两个tab(“Search”和“Artist hall of fame”)的较高级别。 使用面包屑作为主要导航 在上面的例子中,mefeedia网站没有提供一个浏览视频的主要导航菜单,尽管在页面底部有文字链接导航,在页面的主体部分没有导航菜单,这使得浏览网站的其它部分就比较困难。 如果你直接到达了一个页面——比如说,通过谷歌搜索结果,你可以选择的导航就只有面包屑。或者如果你已经浏览过一个网站页面,然后到达一个没有显示主要导航的页面,你将不得不点击浏览器的“返回”按钮来获取主菜单。 在页面有多级目录的时候使用面包屑 当设计一个面包屑导航方案时,记住几件事情。让我们看看在你处理面包屑的时候可能发生的几个问题。 什么时候应该使用分割链接条目? 其它常用的符号有指向右边的箭头、右直角引号(») 和反斜线(/). 使用哪种符号取决于网站的审美和使用的面包屑类型。比如,对于基于路径的面包屑,链接不必相互之间有等级关系,那么使用“大于”号可能不能正确的传达它们之间的关系。 它应该多大? 在确定你的面包屑的大小的时候,一个服从的很好的凭感觉的方法是,当访问这个页面的时候,它不应该是页面中最醒目的元素。 面包屑放在哪里? 现在我们来讨论一下“谁、什么、什么时候、那个地方、为什么和如何”使用面包屑路径,我们可以看一些实例。在下面的内容中,你会发现一些使用面包屑路径的很棒的网站设计。 1. 典型的基于文本的面包屑Nestle使用了一个文字明显比页面其它部分小的面包屑路径,很有效的让它不太显眼。 为它的基于特性的面包屑路径使用了标准的“大于”号。为产品特性使用了复选框,这样用户可以通过取消选择它们来过滤它们。 2. 用其他符号取代“>” TechRadar UK和 BP使用向右的***角。 PSDTUTS和 Martique使用反斜杠。 Mouse to Minx使用向右的引号来展现页面等级。 Jakob Nielsen’s Alertbox使用向右的箭头。 Target使用冒号来分割。 3. 超越简单的文字链接 面包屑设计的一个当前的趋势是说,“面包屑不用必须是简单的”。在这些设计中,你将看到与总体设计相融合的样式漂亮的面包屑。 Grooveshark Yahoo! TV IDEO Apple Store Coolspotters Devlounge LottaNZB Pixelpoodle guardian.co.uk 4. 多步骤处理面包屑 Statement Tracker使用一个面包屑来指示注册帐号的步骤,就像一个进程指示器一样。 Flickr使用面包屑来指示Flickr之旅中的部分数量。 5. 有子导航的面包屑 这里有一些面包屑路径的例子,当点击或鼠标经过它们的链接时,打开一个列出附加属性或位置的子导航面板。 MarketWatch在你鼠标悬停在一个面包屑链接的时候有一个弹出的子导航。 Profoto有一个独特的面包屑路径:点击面包屑链接时在它下面打开一个区域,从而为用户提供附加的属性来选择。 Cranfield University有一个简单的弹出面包屑,它提供多种功能:为用户指示位置,并作为一种健壮和交互的二级导航。 Lonely Planet也有一个弹出面包屑,你可以从中改变特性选择。 点击一个面包屑链接带你到相关页面,而点击向下的箭头就会打开而外的选项。 MSDN有一个当用户用鼠标滑过一个链接时就打开一个可滚动的子导航列表的面包屑路径。 Wowhead有一个多级子导航系统。 6. 交互式面包屑 Delicious让你移除关键词标签的面包屑路线中的条目来帮助你快速寻找书签。 7. 实验性示例 Booreiland使用一种面包屑样式(breadcrumb-style)的导航方案作为它的主要菜单,这样就允许用户快速理解他们当前在浏览的内容。 AEN UI的用户界面设计师Aen Tan 讨论一种被称为 Tabcrumbs的设计模式,一种整合面包屑和tabs的导航方案。 |
|
支持(88) | 反对(88) 顶端 底部 |
1787474468 发表于:2011/8/3 10:23:40 | 只看该作者 查看该作者主题
沙发
|
|
支持(88) | 反对(86) 顶端 底部 |
lande112233 发表于:2011/8/4 14:58:05 | 只看该作者 查看该作者主题
藤椅
|
|
支持(42) | 反对(26) 顶端 底部 |
支持(11) | 反对(7) 顶端 底部 |
支持(3) | 反对(1) 顶端 底部 |
<上一主题 | 下一主题 > |