UI组件 (ui组件设计)

本文目录导航：

• UI组件——面包屑简介
• 什么是面包屑导航？有什么作用
• 什么是面包屑导航

UI组件——面包屑简介

面包屑门路是导航元素，协助用户了解所在网站位置。

它们以分层方式陈列，显示站点结构，疏导点击外部链接的用户。

正确设计面包屑门路，门路应疏导而非困惑用户。

文本面包屑与按钮面包屑方式不同，前者为繁难链接，后者包裹在按钮内。

面包屑应可见，但不显眼，一直援用用户以后页面。

经常使用可识别符号如V形图标作为分隔符，防止经常使用不相熟符号。

面包屑适用于具备档次结构的网站，对线性结构网站不适用。

面包屑应在页面顶部可见，最常位于全局导航下方。

经常出现分隔线样式为人字形、箭头和斜线，防止经常使用不相熟的符号。

经常使用溢出菜单截断面包屑链接，坚持页面整洁，确保用户可访问暗藏页面。

前一页应为交互式，与以后页面样式不同。

确保蕴含溢出菜单。

第一个链接应指向主页或档次结构的根节点，截断长标签并设置最大宽度。

什么是面包屑导航？有什么作用

面包屑导航望文生义，面包屑挺巧就是琐碎的意思，一点点的状态，这就代表咱们的网站导航中，那些不在主导航上，其余辅佐性琐碎的导航就叫面包屑导航了。

首先咱们来看看面包屑导航的作用：1、让用户了解以后所处位置，以及以后页面在整个网站中的位置。

2、表现了网站的架构层级，能够协助用户极速学习和了解网站内容和组织方式，从而构成很好的位置感3、提供前往各个层级的极速入口，繁难用户操作。

4、Google曾经将面包屑导航整合到搜查结果外面，因此提升面包屑导航每个层级的称号，多经常使用关键字，都可以成功SEO提升。

面包屑门路，关于提高用户体验来说，是很有协助的。

5、繁难用户，面包屑关键用于为用户提供导航一个网站的无所谓方法，经过为一个大型多级网站的一切页面提供面包屑门路，用户可以更容易的定位到上一次性目录，疏导用户通行;6、缩小前往到上一级页面的点击或操作，不用经常使用阅读器的“前往”按钮或网站的关键导航来前往到上一级页面;7、不用经常占用屏幕空间，由于它们理论是水平陈列以及繁难的样式，面包屑门路不会占用页面太多的空间。

这样的好处是，从内容过载方面来说，他们简直没有任何负面影响;8、降落跳出率，面包屑门路会是一个诱惑初次访问者在进入一个页面后去阅读这个网站的十分好的方法。

比如说，一个用户经过谷歌搜查到一个页面，而后看到一个面包屑门路，这将会诱经常使用户点击上一级页面去阅读感兴味的关系主题。

这样，从而，可以降落网站的总体跳出率。

9、无利于网络蜘蛛对网站的抓取，蜘蛛间接沿着那个链走就可以了，很繁难。

10、面包屑无利于网站内链的树立，用面包屑大大参与了网站的外部衔接，提高用户体验。

什么是面包屑导航

面包屑导航（BreadcrumbNavigation）这个概念来自童话故事汉赛尔和格莱特，当汉赛尔和格莱特穿过森林时，不小心迷路了，然而他们发如今沿途走过的中央都撒下了面包屑，让这些面包屑来协助他们找到回家的路，所以，面包屑导航的作用是通知访问者他们目前在网站中的位置以及如何前往。

面包屑导航关于你的站点来说只管不是关键的组成局部，然而笔者以为面包屑导航是一种提高你的站点的友好体验的很好的方式。

面包屑一词起源于驰名的童话故事，故事中汉塞尔和格莱特在森林中迷路了，然而起初他们经过撒在路上的面包屑找到了前途。

那么面包屑导航对你的站点来说有什么作用？面包屑导航关于你的站点来说是一个无所谓的组成局部，普通出如今主导航的上方、题目栏或许页面的顶部。

面包屑位置必定要容易让访客找到，由于搜查引擎只是指引访客到你的站点，面包屑导航可以协助访客知道他们目前在哪里，并且可以带访客到更初级的页面。

面包屑导航可以很好的提高你的站点的可用性、配置性、而且可以很好的显示出站点的档次结构，访客无需启动过多的额外点击就可以抵达其余页面。

在森林中为了防止迷路，有阅历的人会用刀子或许是红绳在经过的道路每隔必定的距离做一个标志，用是防止迷路。

假设以上例子不明确可以去看一个童话故事：《汉赛尔和格格莱特》用户访问一个较大型网站假设没有明晰的导航则有或许“迷路”，从而大大的降落了用户体验度。

网站提升时，岂但要留意基本的细节，用户体验也是极端关键的。

用户体验岂但跟pv间接挂钩，而且虔诚用户的多少也处决与用户体验。

主分类→一级分类→二级分类→三级分类→……→最终内容页面？？这就是一条典型的面包屑导航。

然而普通来讲都是有3层结构组成：首页→栏目页→内容页这也是最基本的三个结构？同时也是缺一无法的。

除了对你的访客有好处，对你的站点来说面包屑导航的作用也是清楚的。

据钻研标明面包屑导航可以提高访客的逗留期间，降落跳出率，提高网站的转换率等有益的结果。

面包屑可以为突出你的关键字，可以经过面包屑导航的锚文本或许指向内页来使你的站点对搜查引擎愈加的友好。

同时面包屑导航可以参与内容的关系性，由于他们是关键词的汇合。

而关于排名，关系性又是一个关键的起因。

如今咱们知道了面包屑导航关于站点的作用，那么咱们经常出现的面包屑导航有哪几种？笔者当天就在下文中冗长的分享三种面包屑导航。

一：基于位置的面包屑导航这种类型是最经常出现的。

这种类型的面包屑导航可以很好的指出以后页面与整个站点的档次结构。

这种面包屑导航可以显示以后页面的前一个页面或许目录的链接。

可以使访客了解自己的位置，以及可以更快的找到自己想要抵达的页面。

可以很好的提高用户的友好体验。

二：基于属性的面包屑导航这种面包屑导航最常出如今电子商务站点。

这种面包屑导航可以很好的指出以后页面内产品的其余属性或许类别。

关于一个产品来说，所具备的属性往往不只要一种，而经过这种面包屑导航可以给生产者一个愈加直观的了解。

下图就是一个开售汽车的电子商务网站，一辆SUV的汽车不只属于2010出产的属性，还有其余诸如多少钱、色彩等属性。

假设用上这种导航可以使访客愈加容易的找到他们所想要的消息。

三：基于门路的面包屑导航这种面包屑导航是最不经常出现到的。

这种面包屑导航和上文所说的童话故事类型很想。

他们可以显示访客在抵达页背地所访问过的网页的链接。

这种面包屑导航不是很受欢迎，由于他们的更能基本上是和行进和前进的按钮是一样的。

面包屑导航的作用1、让用户了解目前所处位置，以及以后页面在整个网站中的位置。

2、表现了网站的架构层级，能够协助用户极速学习和了解网站内容和组织方式，从而构成很好的位置感。

3、提供前往各个层级的极速入口，繁难用户操作。

4、Google曾经将面包屑导航整合到搜查结果外面，因此提升面包屑导航每个层级的称号，多经常使用关键字，都可以成功SEO提升。

面包屑门路，关于提高用户体验来说，是很有协助的。

面包屑导航的适用条件只管目前很多网站都盛行经常使用面包屑导航，然而并不是一切的网站都适用。

合乎上方两个条件的网站才适宜经常使用面包屑导航。

1、层级较深的网站，面包屑导航适宜层级较深的网站，假设只要一级分类的话，经过主导航就可以起到极速定位的作用。

比如“豆瓣网”类型扁平构架的网站就没有经常使用面包屑导航的作用。

2、独立不交叉的网站机构，由于面包屑网站导航门路是线性结构的，因此网站内容必定划分的十清楚晰，且不存在交叉；否则，面包屑导航的门路就不是惟一的，同一分类或许出如今不同的门路中，让用户感到困惑。