< 面包屑是咱们熟知的一种导航工具，它们往往出当初页面内容的上方，告诉你所处的位置。它玲珑，便利，常见，且简单。可是即便是这样的UI控件，在设计上同样是有讲究的，今天就来聊聊面包屑吧！
作为一种帮助导航体系，面包屑可能帮助用户清楚的定位到自己所在网站的位置。这个词源自于童话中随着面包屑回到自己家的孩子，而网页中的面包屑也是帮助用户找到自己位置的UI控件。
面包屑通过途径展示告诉用户他们所处的位置，而今天的这篇文章将会探讨一个可用的网页面包屑应当如何设计，通过幻想实际展示面包屑的正确用法。
面包屑导航供给可用性
作为一种视觉指引，面包屑为用户揭示出网页的品位结构，也恰是因此，面包屑成为了用户理解网站背景信息的重要途径，帮助用户理解下列问题的谜底：
·我在哪里？依据全部网站的品位，面包屑能让用户晓得他们所处的位置。
·我还能去哪里？面包屑晋升了全部网站的可查找性，面包屑的存在揭示了全部网站的结构，用户也随之明白网站还有哪些其余的局部。
·是否应当浏览更多？面包屑揭示出网站有更多值得摸索的内容，激励用户浏览更多。反过来，面包屑的呈现降落了网站的跳出率。
减少操作次数
从可用性的角度上来看，面包屑减少了用户跳转到高层级页面的操作数，这样避免了用户利用浏览器的返回按钮跟翻找导航寻找上级页面的庞杂交互。
占用空间小
面包屑这种设计元素在页面上占用的空间相称小，它基本都是以带链接的文本的情势存在的，并且通常只有一行。
面包屑不会给用户带来困扰
这个小小的设计元素盘踞的空间不大，然而给用户带来的便捷远弘远于可能带来的问题跟困扰。
什么时候利用面包屑？
是否要在网站中利用面包屑，重要取决于网站的结构。看看你的网站舆图或者整体的结构图，剖析利用面包屑是否进步用户在网站内部不同类别、目录下导航是否便利：
·当你的网站内领有分类清楚、组织明白的多品位线性结构的时候，你应当利用面包屑。比方一个领有品种繁多产品的电子商务网站，面包屑就相称有用。·当网站不具备逻辑清楚的品位结构的时候，就不要利用面包屑。
面包屑导航幻想实际
当你开端设计面包屑导航的时候，应当谨记下面的事件：
1、不要利用面包屑来调换网页重要的导航体系
面包屑只是一个帮助导航体系，它无奈调换重要的导航体系。网址建设前期准备包括了前期网站定位、内容差异化、页面沟通等战略性调研，这些确立后，再去注册域名、租用空间、网站风格设计、网站代码制作五个部分，这个过程需要网站策划人员、美术设计人员、WEB程序员共同完成。请记住，它是仅仅是为了用户便利的次要选项，用来到达其余层级的疾速定位链接体系。
2、不要将当前页链接加到面包屑中
面包屑的后一个层级是当前的页面，而这一项在面包屑中是不应当加上链接的，因为它只起到展示定位的作用，不任何意思。
3、利用分隔符
在面包屑中，用来分隔不同层级常见的是大于符号(>)，常见的利用方法是“父类别>子类别”。网址建设前期准备包括了前期网站定位、内容差异化、页面沟通等战略性调研，这些确立后，再去注册域名、租用空间、网站风格设计、网站代码制作五个部分，这个过程需要网站策划人员、美术设计人员、WEB程序员共同完成。当然，分隔符的利用并不拘泥于这一种，有利用箭头(→)的，还有利用书名号()的，也有利用斜杠(//)的。利用哪种分隔符通常取决于整体作风跟设计师的喜好。
4、抉择适合的尺寸跟间距
在设计的时候应当细心考虑尺寸跟间隔大小，不同的面包屑层级之间应当有足够的间距，确保用户可能识别。当然你也不盼望面包屑盘踞页面太多的空间，假如面包屑比顶部导航还要大，看起来就十分为难了。
5、不要让它成为视觉焦点
面包屑自身是一个帮助导航，假如利用过于花哨的字体跟醒目标色彩，会使得它显得喧宾夺主，过于抓人眼球。它不应当是浏览进程中用户的视觉焦点。下面的面包屑设计并不差，然而它太过于醒目，甚至比顶部导航还能引起用户留神力。
6、不要在挪动端页面上利用面包屑
假如你觉得自己的挪动端页面上要利用面包屑的话，那就象征着你的挪动端网页设计呈现问题了：可能是网站太庞杂(嵌套层级过深)，而这样一来，就不合乎挪动真个利用处景了。为理解决问题，你应当试图简化全部体系，确保面包屑不会出当初手机上。