重新认识组件-面包屑导航

什么是面包屑导航

面包屑导航是网页设计中极为常见的一种设计方法,我们经常使用面包屑导航来作为网页导航框架中的辅助手段,来帮助用户感知自己所处位置,快速移动到自己需要的位置中去。

面包屑导航的作用

  • 告知用户其在网页中所处的位置,帮助其更好的理解整个网站的结构
  • 快速移动,面包屑因为其组合了多级的页面。所以,用户可以通过面包屑来达到在网页各个页面之间快速移动的目标

面包屑分类

面包屑导航大致可以分为三类

  • 基于位置
  • 基于属性
  • 基于路径

这些属性定义在百度百科中均可以查阅到,并不是什么很深奥的内容。总结来讲,我们平时最经常用的面包屑是基于位置的,即面包屑中展示的都是网页页面,从而来帮助用户可以理解其所处的位置。
而基于属性的则是最常见与电商网站,像天猫的面包屑导航就是这样,显示的是商品类目的信息,使得用户可以理解自己当前查看的品牌在商品类目中的属性

76BFC665-E844-4446-BA4C-A0A1B9C88C78.png

至于最后的基于路径导航,则是对于用户浏览网页的路径的一个记录,这种面包屑导航很少见,也很无用。如果我们根据用户的浏览路径来创建面包屑的话,对于用户没有任何意义,就像是一个无限长的后退键而已

一些网页中面包屑导航的应用案例

  • 百度网盘
0D889514-3CF6-4594-8234-3C3CD3807E96.png
  • 天猫商城 筛选条件和面包屑的结合
76BFC665-E844-4446-BA4C-A0A1B9C88C78.png
  • 百度糯米 面包屑中加上切换选择,方便用户快速在上一级页面的各个模块中跳转
9477495B-EDC4-4876-987E-9AE21B7DE91E.png

一些关于面包屑导航的思考

  • 为什么现在很多网站很少使用面包屑导航了?是不是有什么导航方式的出现替代了面包屑?

因为只有存在页面模块众多,层级深的网站设计中才会使用到面包屑导航这种设计手段。所以,我们可以看到,最经常使用面包屑导航的网站都是诸如:淘宝,百度糯米,携程 。这些网站都是由诸多网页构成的庞大集合体。路径众多,层级很深。这个时候使用面包屑导航可以一定程度上帮助用户理解自己当前所处位置。

但是,随着时间不断的发展,网页从门户时代发展到现如今。不断的细分化导致一个网站本身的信息容量就是有限的,并且相对扁平的。尤其是针对内容型产品来说,如果层级深的话,则是天生的降低用户点击率。 故而,因为现在网页本身的精细化和信息的扁平化。面包屑导航就逐渐失去了其存在的必要性

  • 面包屑是否能够充当页面标题?

这个问题在公司设计的一个项目中有涉及到,当时最初稿的设计中,页面中同时存在面包屑和标题。但是面包屑的最后一级就是标题名称。这样是在信息上有重复,最后,我们尝试采用了将面包屑和标题在视觉上做统一的方法。成了如下的模样:


WX20161215-134824.png

但是,现在再次回首来考量当初的设计,这种将面包屑和标题结合在一起的设计有一些不太合适的地方

  • 将面包屑放在标题的位置并且拥有和标题同样大小的字体,这样会会挤占掉页面 标题附件的位置,而这里常常是用来放诸如状态,提示之类的文字信息的最佳位置。
  • 将面包屑和标题设计成同一个,必须是在于页面层级并不是十分深的情况下,否则页面将容纳不下这么长的文字
  • 页面标题阅读性不如之前,根据现在的设计,标题是处于面包屑条的最右侧的,也就是标题不会处于页面的左上角,从视觉线上来说。这样会影响标题的阅读。

现在看来,这些都是可能会有的坑。而且,将面包屑这种辅助导航手段在视觉上做的这么突出,也有可能对于用户造成困扰。总而言之,在我看来,这种将面包屑和标题合起来的设计至少有点过度设计的意味。

  • 是否有什么更好的方法来取代面包屑导航?

前面讲到过,面包屑导航存在的目的就是为了告知用户其所处的位置,帮助其理解网站结构。那么,如果是处于这种目的。那么,面包屑这种展示出用户所经历各个层级的信息的设计手段,就是最好用的方式。

但是,其实有一些别的方式,可以使得告知用户其所处位置的动作更加的自然。

  • 变体的面包屑
WX20161215-134926.png

这种设计,通过将一个个页面视为卡片,进入新的页面时,就像一个新的卡片堆叠在原先的卡片上,这样,用户可以更好的理解页面与页面之间的层级关系。这是一种更好的帮助用户达成认知的设计手段

  • 动效的帮助
    动效的应用在移动端已经十分的成熟了,我们平时可以看到许许多多十分酷炫的动效设计,其中可以看到很多类似堆叠,扩展的效果。并且,在Google出的 Material Design 的设计理念中,强调了Z轴的概念。
    那么,我们是否可以在网页中也引用这种设计理念,通过堆叠,扩展等动效手段,和Z轴所赋予的深度,来让用户天然就形成对于页面之间关系的感知
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 160,504评论 4 365
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,898评论 1 300
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 110,218评论 0 248
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,322评论 0 214
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,693评论 3 290
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,812评论 1 223
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 32,010评论 2 315
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,747评论 0 204
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,476评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,700评论 2 251
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,190评论 1 262
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,541评论 3 258
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,206评论 3 240
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,129评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,903评论 0 199
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,894评论 2 283
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,748评论 2 274

推荐阅读更多精彩内容

  • 作者:Nick Babich 翻译:ITsCrystal 编辑:风口上的猪毛 面包屑是一个网站或者app中为用户...
    ITsCrystal阅读 7,178评论 2 33
  • 最近的项目中,纠结了一下面包屑的使用。于是研究了一下这个“古老”的控件 什么是面包屑导航 网页上让用户感知,当前页...
    德川亮阅读 5,954评论 3 26
  • 面包屑导航:面包屑是作为辅助和补充的导航方式,网页上让用户感知当前页面所在的层级位置并能方便地回到原先的地点,或者...
    2c5994723157阅读 1,308评论 0 5
  • What? 什么是面包屑 面包屑是作为辅助和补充的导航方式(secondary navigation scheme...
    乡下的产品汪阅读 878评论 0 0
  • -面包屑是什么? 对于面包屑这个说法,相信有些人还是对于这个概念有点模糊;看以下几个图片,相信大家就知道何为面包屑...
    alive6阅读 6,484评论 0 2