响应式网页设计、开放源代码、永久使用、不限域名、不限使用次数

2024年网页设计面包屑是什么(热门4篇)

网页设计面包屑是什么 第1篇

面包屑是一种辅助导航,在页面中不应该起支配作用。面包屑和主导航相比至少要比较小、或不太突出。在确定面包屑大小的时候,一个较很好的方法是,当访问这个页面的时候,它不应该是页面中最醒目的元素。如果第一眼就注意到了面包屑,可能这个设计师做得有点失败。

首先我不是这个行业的权威,仅代表我个人的观点。第一个问题的答案应该是:面包屑区域是直接跳转进入要访问的页面。因为他选择面包屑进行导航,已从另一角度告诉你他正在执行的操作是:“返回”、“离开”的含义,类似于网站逃生舱功能。第二个问题要看你当前页面的header区域是否有一级导航方案了,如果有的话,这个地方再有首页也是一个摆设,并且过多地展示首页也无多大意义,因为人们都了解“www”去的就是你的首页。如果在第一梯队增加返回“首页”的导航,势必会造成你的面包屑深度过大,这也到了第三个问题“面包屑导航要控制在多少个级别为佳”,面包屑导航不要超过4级,3级为佳,如果需要割舍的话,尽量割舍列表页,保留频道页。第4个问题的答案是:如果你的导航没有超过4级的情况下,建议添加一个“正文”、“详细”做为面包屑导航的完美收工。

文中注释

1为什么成为二级导航方案?因为产品线首页不需要导航。例如:首页、资讯首页。

2汉赛尔与格莱特两个人名来自童话小说《格林童话》

3 一级导航方案在logo、header及 “逃生舱”区域会涉及。

4这个符号也暗示了它们的层级关系。

5面包屑只是一个允许用户定位所处位置的辅助导航方案。

标签:

网页设计面包屑是什么 第2篇

通过上面的案例研究以及面包屑的分类,我们可以看到采用面包屑功能的好处:

1.面包屑作为用户寻找路径的一种辅助手段,能方便他们定位和导航。

2.面包屑可以减少的用户返回上一级页面的所需的操作次数。

3.临时性,动态性,占用屏幕空间小,干扰性小。

4.降低网站访问者的总体跳出率。

当用户从别处链接到网页,或者从搜索引擎查找到网页,则面包屑的存在能帮助用户快速了解当前的层级位置,并引导用户查看网站的其余部分,减少了看完直接跳走的用户数量。

网页设计面包屑是什么 第3篇

(1)存在大量的分类目录

例如:购物类网站、分类信息网站。

谋思网首页截图

(2)在一些引导性的流程操作或者软件安装进程中,面包屑也常被用来指示当前以及剩余的操作步骤。

谋思网会员注册流程

(3)层次简单的页面中一般不使用面包屑,但是当面包屑能显著帮助到浏览并提高他们定位能力时,也建议采用面包屑。

相册浏览就是一个典型的例子,结构层次并不复杂,但用户在特定几个页面之间跳转的频率会比较高(如相册首页,相片缩略图页,相片浏览页等),所以面包屑的存在对提高此处的浏览效率是很有帮助的。人人网在2010年9月份之前还保留这一面包屑,但是现在无缘无故取消了,不知道PM们取消的原因是什么,这一点让我很上火。

需要提醒的是面包屑不能替代有效的主导航,它是一个辅助功能[5]。

这一可以称之为“小应用,大效应”的用户体验性设计,国外的资讯门户网站似乎对此不怎么“感冒”,例如、CNN、华尔街日报等。都没有在页面中采用面包屑导航,也可能是由于他们的资讯分类比较喜欢采用二级栏目导航的缘故吧。

CNN资讯标题上面并没有面包屑,而是将twitter和share等分享占据“有利位置”(2011年5月5日抓图)

网页设计面包屑是什么 第4篇

A “breadcrumb” (or “breadcrumb trail”) is a type of secondary navigation scheme that reveals the user’s location in a website or Web application. The term comes from the Hansel and Gretel fairy tale in which the two title children drop breadcrumbs to form a trail back to their home. Just like in the tale, breadcrumbs in real-world applications offer users a way to trace the path back to their original landing point.

——《Breadcrumbs In Web Design: Examples And Best Practices》

猜你喜欢