并不简单！网页中为你指路的面包屑到底应当怎

并不简单！网页中为你指路的面包屑到底应当怎

创始词:面包屑是大家熟悉的导航栏工具。它们通常出现在网页的顶部，告诉你你在哪里。它精致、方便、通用、简单。但是即使是那种UI控件也是讲究设计方案的。今天就来说说面包屑吧~

面包屑作为一种辅助的网站导航，可以帮助用户清晰准确地定位自己的网站。这个词的词根来源于童话中跟随面包屑回到自己家中的孩子，而网页中的面包屑是帮助用户找到自己部分的UI控件。

根据面包屑向用户展示自己所处的位置，今天的文章可能会讨论如何设计一个可用的网页面包屑，并根据最佳实践展示面包屑的正确使用。

面包屑导航栏出示易用性

面包屑作为一种视觉效果向导，向用户展示网页的结构分析，因此，面包屑成为用户掌握网站信息内容的有效途径，帮助用户掌握以下难题的答案:

我在哪里？根据所有网站的层次结构，面包屑可以让用户知道他们在哪里。 我能去哪里？面包屑提高了所有网站的可搜索性。面包屑的存在表明了所有网站的结构，用户也可以搞清楚网站的其他部分是什么。 …大量访问合理吗？面包屑显示网站有很多值得探索的内容，促使用户大量访问。相反，面包屑的出现降低了网站的跳出率。

降低实际 *** 作频次

从可用性的角度来说，面包屑减少了用户自动跳转到高层网页的 *** 作次数，从而避免了用户应用电脑浏览器的后退按钮和搜索导航栏查找上级领导网页的复杂交互。

占有室内空间小

这种面包屑式的设计风格在网页上占据的空间非常小空，它的基础全部是连词的形式，通常只有一行。

面包屑不容易给用户产生困惑

这种小巧的设计风格占据了一个不大的房间空，但是它给用户带来的方便和快捷远远超过了很可能出现的问题和困惑。

何时应用面包屑?

是否在网站中应用面包屑取决于网站的结构。看看你的网站地形图或者整体框架图，分析一下面包屑的应用是否可以提高用户在网站内部不同类型和文件目录下导航的便利性:

如果你的网站是多层次的线性结构，分类清晰，组织既定，那么你就应该使用面包屑。比如一个web技术网站，有各种类型的商品，面包屑是很有效的。 当网站没有逻辑清晰的结构分析时，就没有必要应用面包屑。

面包屑的种类

面包屑是根据网站的逻辑结构而存在的导航栏组件。可以根据位置和路径显示，也可以根据属性存在。

根据部位的面包屑

根据网站的面包屑设计方案，一般能反映网站的结构类型。他们立即将网站的结构分析呈现给访问者，包括几个级别(级别一般超过2级)。这种层次化的面包屑对于从外部来源(如百度搜索引擎)来到网站的用户有显著的引导作用。

在下面百思买的网页中，面包屑显示了产品所属网页的层级关联。

根据路径的面包屑

基于路径的面包屑一般被称为“历史时间痕迹”。它所呈现的不是网站结构，而是访问者访问特定网页的详细路径。这种面包屑路径不是静态数据，而是动态的 。根据路径的面包屑有时在一定程度上帮助了用户，但在某些情况下，它仍然让用户感到被蒙蔽了——有些用户在访问网站时过于异想天开，这样的根据路径表面的面包屑 会帮助他们记录，因此他们不必翻阅历史时间或使用电脑浏览器的后退按钮返回到特殊的地方。另外，这种根据路径的面包屑，对于一次性到达特殊地点的用户是没有用的 。

下面是一个基于路径面包屑的导航条的例子及其基本原理:

根据属性的面包屑

这种基于属性的面包屑，在网络科技网站中经常可以找到，商品也经常按照类型和属性组织到不同的根目录中。基于属性的分类更便于用户理解商品与商品之间的关系，并呈现大量不同的访问路径。

像TMLewin的这个网页，面包屑显示的是专门网页匹配的商品，商品是按照某种属性组织的:

层级還是历史时间?

根据具体的工作经验，在大多数情况下，面包屑还是适合分层组织而不是浏览历史。因此，基于位置和属性的面包屑更常见，而基于路径的面包屑相对较少。

面包屑导航栏最佳实践

如果你刚开始设计面包屑导航条，你应该记住以下几点:

1、不必应用面包屑来取代网页页面关键的网站导航

面包屑只是一个辅助的网址导航，并不能代替关键的网址导航。请记住，它是为了更好地方便用户而进行的主要和次要选择，用于快速准确地定位和连接系统软件到其他级别。

2、不必将当页连接加到面包屑中

面包屑的最后一级是今天的网页，这一项不应该在面包屑中添加链接，因为它只有展示精准定位的作用，没有实际意义。

3、应用分节符

在面包屑中，最常用来分隔不同级别的是大于号(>:)，常见的 *** 作方法是“父类型>: 子类型”。分节符的应用自然不仅限于此。有的用箭头符号(→)、书名()和斜线(//)。一般应用哪种分节符，在于一般风格 和室内设计师的爱好。

4、挑选适合的规格和间隔

在设计方案的情况下，要仔细考虑规格和间距尺寸，不同面包屑级别之间要有足够的间距，保证用户能够识别。自然，你不会指望面包屑用太多的页面占据室内空房间。如果面包屑比顶部导航栏大，看起来会很尴尬。

5、不必让它变成视觉效果聚焦点

面包屑本身就是一个辅助导航条。如果使用过度花哨的字体样式和显眼的颜色，会显得反客为主，过分醒目。不应该是用户在整个参观过程中视觉效果的重点。底部的面包屑设计不算低，但是太显眼了，甚至比顶部导航栏更能引起用户的注意。

谷歌的面包屑设计方案并不引人注目，但用户仍然可以很好地应用它。

6、不要在手机端网页页面上应用面包屑

如果你觉得你的移动网页需要面包屑，说明你的移动网页制作有问题:可能是网站太复杂(嵌入层次太深)，结果不适合移动应用场景。为了更好的解决困难，你应该尽量简化整个管理系统，保证面包屑不容易出现在手机上。

总结

面包屑可以让用户更方便快捷地访问所有网站，追溯到上级领导的网页，找到相关产品。对所有的网站结构都更有意义。它的功能并不复杂，关键作用是提高便利性，不要把面包屑复杂化。

注:阅读关于网站基本建设方法的文章，请将场景移至网站建设教程频道栏目。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zz/767559.html