网站建设中面包屑导航的设计及使用

作为一种辅助导航系统，面包屑能够帮助用户清晰的定位到自己所在网站的位置。这个词源自于童话中跟着面包屑回到自己家的孩子，而网页中的面包屑也是帮助用户找到自己位置的UI控件。面包屑导航小巧，方便，常见，且简单。可是即便是这样的UI控件，在设计上同样是有讲究的，今天我们就来聊一聊网页设计中的面包屑设计！

是否要在网站中使用面包屑，主要取决于网站的结构。看看你的网站地图或者整体的结构图，分析使用面包屑能否提高用户在网站内部不同类别、目录下导航是否方便：
当网站内拥有分类明晰、组织明确的多层次线性结构的时候，你应当使用面包屑。比如一个拥有种类繁多产品的电子商务网站，面包屑就相当有用。当网站不具备逻辑清晰的层次结构的时候，就不要使用面包屑。
当设计面包屑导航的时候，应当谨记下面的事情：
1、不要使用面包屑来替代网页主要的导航系统
面包屑只是一个辅助导航系统，它无法替代主要的导航系统。请记住，它是仅仅是为了用户方便的次要选项，用来抵达其他层级的快速定位链接系统。
2、不要将当前页链接加到面包屑中
面包屑的最后一个层级是当前的页面，而这一项在面包屑中是不应该加上链接的，因为它只起到展示定位的作用，没有任何意义。
3、使用分隔符
在面包屑中，用来分隔不同层级最常见的是大于符号(>)，常见的使用方法是“父类别>子类别”。当然，分隔符的使用并不拘泥于这一种，有使用箭头(→)的，还有使用书名号(»)的，也有使用斜杠(//)的。使用哪种分隔符通常取决于整体风格和设计师的喜好。
4、选择合适的尺寸和间距
在设计的时候应当仔细考虑尺寸和间隔大小，不同的面包屑层级之间应当有足够的间距，确保用户能够识别。当然你也不希望面包屑占据页面太多的空间，如果面包屑比顶部导航还要大，看起来就非常尴尬了。
5、不要让它成为视觉焦点
面包屑本身是一个辅助导航，如果使用过于花哨的字体和醒目的色彩，会使得它显得喧宾夺主，过于抓人眼球。它不应该是浏览过程中用户的视觉焦点。下面的面包屑设计并不差，但是它太过于醒目，甚至比顶部导航还能引起用户注意力。
6、不要在移动端页面上使用面包屑
如果你觉得自己的移动端页面上要使用面包屑的话，那就意味着你的移动端网页设计出现问题了：可能是网站太复杂(嵌套层级过深)，而这样一来，就不符合移动端的使用场景了。为了解决问题，你应当试图简化整个体系，确保面包屑不会出现在手机上。

分享文章：网站建设中面包屑导航的设计及使用
分享路径：https://www.cdcxhl.com/news45/186445.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有网站建设、面包屑导航等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联