当前位置:首页 >  站长 >  建站经验 >  正文

面包屑导航还能怎么设计?试试这几个新思路

 2020-10-14 10:06  来源: Clip设计夹   我来投稿   瓜霸霸的个人主页 撤稿纠错

  短视频,自媒体,达人种草一站服务

大家好,我是Clippp。今天为大家带来的文章是「面包屑」 导航。面包屑实用的地方在于可以让用户更快地访问上级页面,无需借助浏览器的返回按钮或顶级导航栏。

2020年的第34篇分享

面包屑作为一种辅助和补充的导航方式,能让用户知道在网站或应用中所处的位置并允许用户快速访问要查找的路径。

相较于桌面端网页,今天移动端网页的尺寸都变得很小,面包屑导航需要怎样设计才能更好的满足手机端用户的需求呢? 一起来看看这份研究体验吧~

面包屑导航不完整的原因

将完整的面包屑路径放到移动端界面中有一定的挑战性,但应该避免的一种情况是不提供任何面包屑导航。 例如L.L.Bean的产品页上没有任何面包屑,移动端和桌面站点都应该免这种情况。

移动端和桌面端的测试都表明面包屑导航帮助用户了解所处的位置,为他们提供清晰的内容层级导向。 在测试期间观察到的另一个问题是为了缩短面包屑路径,从导航中删除一些内容层级。

当面包屑导航路径不完整时,会增加用户做出错误决策的风险,因为他们不知道呈现的导航并不代表完整的站点结构。

避免面包屑路径过长的两种方法

许多站点由于层级太多导致无法在产品页面上显示完整的面包屑导航,经过测试有两种方法可以避免路径过长。

避免过度分类

过于细致或重复的分类会额外增加面包屑导航的长度。 比如H&M的产品页将衣服的类别划分的过于繁琐,甚至在导航中出现了重复的内容,超过50%的电商网站都存在过度分类的问题。

取消显示主页和产品页的导航路径

在移动端取消显示面包屑的主页和产品页是缩短导航路径的合理方法,因为在大多数网站中,我们点击网站logo就可以跳转到主页。产品页往往展示的内容比较多,取消显示可以显著缩短导航路径并减少页面顶部的混乱。

例如在惠普的产品页中,主页和产品页的标题都出现在面包屑中,造成页面上的导航路径非常长。

而American Eagle取消显示了主页和当前页,整个导航简洁明了,使用过程中也没有受到任何影响。

如何实现长面包屑路径?

考虑到移动端界面的尺寸较小,如果经过必要的调整和删减,面包屑的路径仍然很长怎么办?有没有什么方法能实现长路径导航的显示?

左右滑动

将面包屑导航设计成水平滑动的形式,既节省了空间,同时能让用户访问完整的导航结构。

需要注意的是,如果支持滑动要确保用户很清晰这种交互方式。 例如在Hayneedle页面中,面包屑导航未完全显示,而是显示一半来引导用户滑动。

双行显示

对于层级结构较浅的站点,将面包屑导航分成两行显示也是一个可行的选择。但是这种方法需要谨慎使用,要确保各个面包屑元素的尺寸和间距足够大。

如果面包屑的尺寸太小,会增加用户误操作的风险。此外,将面包屑分两行显示会增加页面顶部的压力从而导致页面混乱,增大被忽略的可能性。

省略中间级

在面包屑导航中使用省略号来代替中间级可以有效节省屏幕的空间。在REI页面中,左图用省略号代替中间层级,点击后隐藏的层级会显示出来(右图)。

这种形式会将大量工作转移到用户身上,如果没有合理的交互引导,可能会导致用户忽略点击面包屑导航。

总结

实现长路径导航后,为了让面包屑导航易于识别,它的设计形式应该与页面上其他元素做出区分:

导航周围要留有足够的空间;

默认情况下导航会有分隔符或者下划线。

最后为了大家方便,帮大家整理了50+优秀的面包屑导航案例。

后台回复:面包屑即可获取!

— The End —

原文:baymard.com/blog/implementing-mobile-hierarchy-breadcrumb

作者:Edward Scott

译者:Clippp(文章翻译已获得作者的正式授权)

本文来自于公众号:Clip设计夹(ID:ClipppDesign),作者Clippp,授权A5创业网转载。

申请创业报道,分享创业好点子。点击此处,共同探讨创业新机遇!

作者: 瓜霸霸    /    文章:3875篇

相关文章

  • 什么是面包屑导航,它对SEO的影响有哪些?

    什么是面包屑导航,它对SEO的影响有哪些?总结:面包屑导航是SEO优化的重要组成部分,但有的时候也可以打破常规,另辟蹊径,比如:利用面包屑导航做自定义内容的相关推荐。

  • 网站如何正确使用面包屑导航?

    当网站的子页面分类较多的情况下,一般都会选择使用面包屑导航作为页面的辅助和补充,有效帮助用户在网站中快速找到返回的路径,尤其体现在电商网站上,运用最为广泛,用户可以在众多产品类型中确定自己的位置以及找到目标产品,在一定程度上提高了用户体验。网站使用面包屑导航虽然有它的优势所在,但并不是所有的页面都适

  • 什么是面包屑导航?

    在网站建设和SEO中,面包屑导航的作用就是告诉访问者他们目前在网站中的位置以及如何返回。关于面包屑导航的由来是源于一则童话故事的一个词语:汉泽尔和格蕾特尔两个人在穿过森林是,为了避免找不到回家的路,他们在沿途走过的地方都会撒下面包屑以便于根据这些面包屑找到回家的路。典型的面包屑导航如同:网站首页—频

  • 网站设计中面包屑导航条的使用和设计

    网站设计:面包屑是作为辅助和补充的导航方式,它能让用户知道在网站或应用中所处的位置并能方便地回到原先的地点。很多网站建设公司在建站之初就采用了面包屑导航做为网站产品线的标准配置,现在被越来越多的行业网站所认可及采用。一、面包屑导航的基础:1.基于用户所在的层级位置。基于位置的面包屑用于告知用户在当前

  • 电子商务网站设计分析:面包屑导航

    网站中的面包屑导航(BreadcrumbNavigation)导航是一种作为辅助和补充的导航方式,它能帮助用户明确当下所在的网站内位置,并快捷返回之前的路径。面包屑的由来出自一个童话,两个孩子为了不在森林里迷路,于是沿途洒下了面包屑作为标记,帮助自己能够原路返回。通过这个故事我们可以看出,之所以被称

热门排行

信息推荐

扫一扫关注最新创业资讯