最近因为项目关系,一直在跟网页设计,发现了一个很有意思的导航——面包屑导航,一度是每一个一线SEO优化人需要掌握的,曾经也是风靡一时,如今却有衰败之势,在很多界面中逐渐看不到它的身影。我想好好了解下这个有意思的导航,于是翻阅了一些文献,了解到它居然起源于一个童话故事。这是一个后母虐前妻孩子的故事。一个贫穷的樵夫再娶,后母计划把俩孩子丢到森林深处,然后趁其不备偷跑掉,好巧不巧被汉塞尔听到,于是偷藏面包,边走边撒捏碎的面包,然后他们回到家过上幸福快乐的生活并没有,但这不重要,重要的是给了我们一个启发。
面包屑可以做路标指引,而且还不会占用太多空间,引导访问者在目前的网站中所处的位置并引导其顺利返回,实乃高端辅助。
1.大型电商内容页(基于路径+属性的面包屑导航),例如:天猫
优点:
让用户直观的了解自己所在的位置,并且便于用户返回上级,减少返回的操作次数,是向用户展示产品类型,层级一目了然,让用户短时间快速了解网站的组织方式,并能在第一时间进行反应做出操作。
缺点:
用词方面有要求,高度提炼归类。各分类层级太过接近,概念模糊会产生歧义,命名时最好避开近义词和平级词,且一不小心容易喧宾夺主,与主导航重复。
2.政府相关及新闻网站(基于位置的面包屑导航),例如:搜狐网
优点:对于这类中规中矩的网站模式,直观的定位,上下级所属关系明显,让用户直观了解当前页在整个网站的位置,更有利于用户操作,占空间小,干扰性小。
缺点:当用户层级少分类少的情况,面包屑就相当鸡肋,冗余累赘。
3.操作系统(基于路径的面包屑导航),例如:百度网盘
没错,各类文件管理器的导航就是面包屑导航,也许你觉得这个不需要设计,那么看看下面的百度网盘导航,依然是面包屑导航。非常直观,无论是上翻还是进入下一文件夹都很是顺手,很好用。
一个不可操作的进度展示块条,未完成为灰色部分完成的为彩色部分。
优点:向用户展示这个任务的全部流程,展示任务已经完成的进度,当前的流程点,以及让用户清楚的明白下一步是什么。
缺点:网页端多为静态,就对界面美化的要求比较高,并且导致进程概念被削弱,甚至会产生用户焦虑。
2.复合面包屑导航,包含筛选项和搜索框
面包屑总的来说它分为三类:定位,层级区分和操作路径和浏览历史(这一块外文有描述,但很遗憾我并未找到案例)。它的作用其实也不少:
1.利于SEO优化
2.精准定位,方便前后级跳转,减少不必要操作
3.体现当前架构层级
4.占比小,干扰性小,作为次级导航做好了辅助的角色
其实面包屑最开始很长一段时间应用于移动端,但为提高用户体验,做到短小精悍,面包屑已经退出移动端的舞台,至于网页端,面包屑也慢慢在演变,信息层级扁平化,增加了广度却减少了纵向的深度,层级复杂度降低。
由此猜想:不久后面包屑会不会彻底退出导航的舞台还是继续精简优化,成为更高效有用的变种面包屑谁都无法预料,提高用户体验,一切皆可能。