吃掉那个面包屑导航

近期的网页设计工作中涉及到不同导航的一系列需求,面包屑导航已于两年前听说它,当时并未有深入了解,整理编辑这篇文章是想对工作思考总结的形式对于导航的一些理解的重新认知,以便于将理解到的导航交互设计更好得应用在工作中,发挥一个导航的使命。

(设计师就是帮助产品找到合适的表达方式,匹配用户的审美及使用习惯。)

本篇主要想从以下几个方面阐述

1.面包屑导航的由来

2.结合案例分析面包屑导航的作用

3.面包屑导航的正确使用方式

4.面包屑导航的未来

----------------

面包屑导航的由来

面包屑导航(英语:Breadcrumb Trail)是在用户界面中的一种导航辅助。它是用户一个在程序或文件中确定和转移他们位置的一种方法。告诉访问者目前的位置及返回的路径。面包屑这个词来自糖果屋这个童话故事。故事里的两个小朋友通过在地上撒面包屑的方式试图找回家的路。

面包屑导航的分类

· 基于位置的面包屑导航(最常见),快速定位当前所在位置及网站内部结构

· 基于属性的面包屑导航,对于一个产品所属的属性不只一种,添加当前条件下搜索的功能给消费者有一个更加直观的了解

· 基于路径的面包屑导航(最不常见),展示了用户访问的完整轨迹。这种面包屑导航通常是动态生成的。有时候它们会有帮助,但是多数情况下它们会让用户感到困惑。用户通常会在各个页面之间跳来跳去,这时候记录下来的路径就会非常复杂,还不如浏览器的“返回”按钮更加实用。而且,对于从外部直接访问的用户来说基于路径的面包屑导航就完全没用了。


2005年7月,微软宣布 Windows Vista 为这款新操作系统的名字。Eclipse 编辑器中显示当前文件的路径(面包屑栏)。

2014年6月 发布Dolphin 5.0 简易的文件管理器,但功能丰富,致力于可用性,可拆分多个窗口每个窗口可设置(和记忆)视图属性。

Krusader是一种先进的正统的文件管理器KDE和在Unix世界其他桌面。


面包屑导航的作用

· 用户了解当前所处位置及所在层级在整个网站中位置;①关键字语言简明易懂点击,②是否可点击在视觉上做区分便于用户理解,③大疆商城的面包屑导航采用无干扰的展现方式,并匹配界面整体风格

· 替代返回按钮,提供各个层级的快速入口,优化用户体验;京东商城并在导航中做出可选更多提示,提供不同层级的返回入口外,以更快速度选择同类相关信息快速定位获取查询结果

· 有利于百度蜘蛛对网站的抓取,优化搜索引擎;友链和外链是优化搜索引擎的方式之一,做好层级清晰的链接,面包屑导航链接结构引导蜘蛛爬取栏目页

· 面包屑有利于网站内链的建设,增加网站下内部连接


面包屑导航的正确使用方式

· 适用于层级包含较深的产品适用(大型电商类和内容类)

· 关键字展示简明易懂,并且是包含关系

(❌错误展示,需包含关系并非平行)

· 视觉层级上不需占用更大空间,适合无干扰式设计

· 不要使用在移动端使用面包屑导航

· 一级页面不使用面包屑导航

面包屑导航的表达形式及位置

常见形式:“>”、“ | ”、“/”、“> 的演变”

头部左对齐(最为常见)

头部右对齐

底部左对齐

面包屑导航的未来

面包屑导航会被取代吗?会是哪种方式?

下图是苹果官网2015年与2019年首页导航截图,对于分类少内容进行返回首页再选择的方式,优化展示信息,内容层级,让主要信息已直观方式完美展现在用户面前

近期网页的设计在面包屑导航处有的思考与相关信息的梳理,快速定位与跳转是交互设计中较友好的展示形式之一,并有利于网站的SEO(搜索引擎优化)。

抓住了细节就抓住了排名,抓住了细节就抓住了用户。

嗯,期待下一次思考更新

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,287评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,346评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,277评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,132评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,147评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,106评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,019评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,862评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,301评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,521评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,682评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,405评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,996评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,651评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,803评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,674评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,563评论 2 352

推荐阅读更多精彩内容