网页设计理论:面包屑设计

先谈一下面包屑的由来:
 
      很久很久以前,在大森林的边上住着一个贫穷的樵夫,他妻子和两个孩子与他相依为命。他的儿子名叫汉赛尔,女儿名叫格莱特。后来樵夫的妻子去世了,他又给孩子们娶了一个后母。后母计划把两个孩子带到森林的深处,然后趁他们睡着的时候跑掉。汉赛尔无意中知道了后母的计划,于是偷偷地把一块面包藏在了口袋里。
 
      在去森林的路上,汉赛尔悄悄地捏碎了他的面包,并不时地停下脚步,把碎面包屑撒在路上。后母顺利地趁孩子们睡着的时候溜掉了,汉赛尔和格莱特醒来已是一片漆黑。汉赛尔安慰他的妹妹说:“等月亮一出来,我们就看得见我撒在地上的面包屑了,它一定会指给我们回家的路。”但是当月亮升起来时,他们在地上却怎么也找不到一点面包屑了,原来它们都被那些在树林里、田野上飞来飞去的鸟儿一点点地啄食了。
 
这是《格林童话》中所描述的与面包屑有关的故事。不知道从哪一天开始,汉赛尔的面包屑开始悄悄地出现在某个网站的导航位置上,然后迅速地撒遍了全世界,变成了今天大家所熟知的“面包屑导航”。
 
再了解一下面包屑导航的定义:

维基百科上关于面包屑的定义,把Websites那部分解释一下就是这样:
 
       面包屑通常水平地出现在页面顶部,一般会位于标题或页头的下方。它们提供给用户返回之前任何一个页面的链接(这些链接也是能到达当前页面的路径),在层级架构中通常是这个页面的父级页面。
 
       面包屑提供给用户回溯到网站首页或入口页面的一条快速路径,它们绝大部分看起来就像这样:首页→分类页→次级分类页
 
以下是英文摘录:
Breadcrumbs typically appear horizontally across the top of a webpage, usually below any title bars or headers. They provide links back to each previous page that the user navigated through in order to get to the current page, for hierarchical structures usually the parent pages of the current one. Breadcrumbs provide a trail for the user to follow back to the starting/entry point of a website. They may look something like this:
Home page → Section page → Subsection page
 
其次说说面包屑的作用:
 
一是:提供了多路径的交互方式,方便用户跳转到其它页面;
二是:从一个侧面展示了该信息集合的信息结构和集合方式。
三是:“面包屑”信息结构对于网站的SEO也有着大的好处,它可以更多的强调网站关键字,扩大关键字的范围,优化网站的SEO。
 
面包屑包含三种:
 
1、  定位面包屑路径
 
        面包屑路径中最常见的一种。当前页面路径在商城有唯一的位置。
 
        基于位置(Location-based)的面包屑向用户显示他们在网站的哪一个级别页面。它们一般典型的用于有多个级别(一般是多于两级)的导航方案。在下面的例子中(来自于SitePoint),每一个页面的文本链接表示它比它右边的文本链接高一级。
 
举例:http://www.sitepoint.com/article/introducing-joomla/
 

            A  表明当前在网站内的位置。

            B  提供指向先前访问过的页面(或网站)和其他区域的捷径。

本质上,它是网站结构的线性表示。Web上的定位面包屑路径所展示的不是导航的历史,而是在整个网站中某个固定的位置。就是说,不管用户是如何到达location 页面,面包屑路径都是一样的。
 
 
2、   路线面包屑路径

        路线面包屑是动态的。当前页面路径是根据用户的点击产生的。
        根据到达方式的不同,特定页面上的面包屑路径也不同。基于路径(Path-based)的面包屑路径显示用户到达特定页面的操作步骤,它们显示用户在到达当前页面之前访问过的页面。
 
举例:http://www.epicurious.com/旧版  qzone旧版路径
 
 
3、  属性面包屑路径
 
       当前页面可以通过N条路径找到。
       属性面包屑是描述一个页面的方式,不是它在网站中的位置,也不是访问的路径,而是它在某种元数据方案中的位置,这种方案往往是主题层级的。
基于特性(Attribute-based)的面包屑路径显示一个特定页面的特性。
 
举例:
A、在Newegg,面包屑路径表示在一个特定页面显示的特性内容。
这个页面显示所有拥有由Lian Li制造并有MicroATX微塔式因素的电脑机箱。

 
B、amazon ,面包屑表达的是物品所属类别,并允许点击类别名称访问上级的类别。整条路径提供了最低一级的页面。也就是说提供了多条通往结点页面的情况。
 
很多数据来自网络和其他各位的心得。

 
 
很多数据来自网络和其他各位的心得。

时间: 2024-11-02 09:18:20

网页设计理论:面包屑设计的相关文章

网页设计技巧之面包屑设计

What? 什么是面包屑 面包屑是作为辅助和补充的导航方式(secondary navigation scheme),它能让用户知道在网站或应用中所处的位置并能方便地回到原先的地点. 最常见的面包屑的样式是:横向的文字链接,由大于号">"分开,这个符号也暗示了它们的层级关系. [ 面包屑的分类] 1.基于用户所在的层级位置.(Location-based) 基于位置的面包屑用于告知用户在当前网站中所在的结构层级.用在具有多级导航(通常具有2级以上导航)的网站中. 2.基于产品的属

分面面包屑设计技巧:设计分面搜索界面技巧

文章描述:分面面包屑在我看来是下一代查找界面中最直观的关键控件,充分整合了分面搜索和浏览功能.我希望这篇文章能够协助大家设计分面搜索界面,也希望大家帮助宣传分面面包屑设计,帮助我们把灵活的一体化搜索普及到实践中. 译者注:搜索的关键是让用户更加容易的找到所需的信息,我发现该文精心的为用户创造了一个灵活的解决方法,交互形式不在拘泥于固有的设计原则,更多是从实际情况出发,创造更适合的交互控件. 翻译了这篇文章跟大家共享,若大家发现任何错误,欢迎随时给予纠正. 原文地址:faceted-finding

面包屑设计:以用户还是以SEO为中心?

当我们分析一个网站可用性的时候,必定会考虑到面包屑.对于用户来说,面包屑几乎是一个"透明"的玩意儿,有谁会仔细观察那些页面左上方的导航链接呢?是的,没人在意,但却也没有人离得开它. 面包屑,就是在任何一个页面,都能清楚的知道让访问者明白他所在的具体位置的网站 GPS 定位系统,而面包屑导航对于大型网站和按分级排列页面的网站,更是不可或缺.就凭这一点,我们要介绍一下关于面包屑的一些核心内容: 一.面包屑的类型 一般来说,面包屑设计主要分为三种类型(作者坚持推荐第一种类型,因为后面两种类型

设计理论:网站首页设计需要突出主题思想

网页制作Webjx文章简介:设计网站首页的技巧总结. 首页设计,需开宗明义突出主题 开宗明义,无论是对于一篇文章.一场会议或一部专题片,还是对于一个网站来说,都是必不可少的.那么能为一个网站开宗明义的地方(标签)就是Title(标题)和Description(描述.副标题),而能够为Title和 Description提供进一步诠释的就是网站的首页. 展示哪些信息 页面的重要性是建立在它所呈现信息的基础之上,反过来说,页面要向用户展示哪些信息是决定其重要与否的首要指标.在网站页面中,网站标题.副

用户体验设计理论:用户体验设计的方方面面

我们常说的用户体验亦称作:背景调查,以客为本的设计.聚焦用户设计.移情设计.可用性.可用性工程.可用性测试.用户经验(UXD)设计.用户-友好设计. 以用户为中心的设计基础 以用户为中心的设计有个核心前提:最好的设计产品和服务源于对潜在用户的需求的了解.在设计最初,设计师积极与终端用户交流收集见解,以此推动设计的进展,并贯彻到整个设计过程. 用户为中心的设计方式可以得到新的见解,这对所有的设计项目都是有益的,尤其是对新产品新服务:在实行进一步改进现有的产品和服务时显得更为的需要.了解用户体验能引

设计理论:用户体验设计与浏览器

浏览器的出现互联网的出现是人类信息交流方式的一次划时代的革命,在这场革命中有两个技术对互联网的发展起到了决定性的作用:一个技术带来的人类信息交换方式的改变,人们普遍的使用电子邮件时信息交流方式:另一个技术则是由伯纳斯-李和安德里森带来的网络使用方式的改变,人们普遍的使用万维网和网络浏览器. 网络浏览器的出现,不仅使超文本文件格式的优点得到了充分的发挥,而且也使对互联网用户的技术要求降到了最低点.不用任何电脑方面的知识,不用经过任何训练,只要用一个小小的鼠标,就可以操作.正是浏览器的使用,才使得每

设计理论:手机交互设计初体验

一晃半年没有更新了,实在是对不起观众.没有借口,只有道歉,90度鞠躬(持续30秒)-- 这半年在调整工作内容,从互联网网页的交互设计逐步转向手机上的交互设计,才不惘做无线业务系统的交互设计师.手机上的交互设计细分下来也有 WAP1.0.WAP2.0.手机终端软件三块,其中以手机终端软件最为复杂,其复杂程度不亚于桌面软件,不同的平台,不同的手机硬件造就了一个终端软件 N个版本的局面,各版本有不同的环境又要有品牌的一致性,这对设计师有比较全面的要求. 之前简单的研究了一下我手机(Nokia5300/

设计理论:网站导航设计的复杂性

一说到导航每个人都不陌生,如amazon的Tab式导航.网站地图.软件中的菜单导航.索引表等等.导航设计看上去非常的简单:无非是页面上放置一些链接,通过这些链接用户可浏览和使用整个网站.事实并非如此,导航设计是非常复杂和严谨的. 下面我们以网站导航为例粗浅的分析一下导航设计的复杂性: 任务:设计一个网站导航 目标:1.提供给用户方便的网页间跳转的方法          2.能够表达出页面之间.页面与内容之间的关系 分析:人本能的具有空间感.想象一下你现在坐在家中的沙发上看电视,突然有访客,你起身

设计理论:实例展示设计海报全攻略(2)

上文: 如何设计海报 I 译者的话:在上一篇文章中,我们介绍了海报设计的一些基础,并涉及了如何使海报显得协调等各种原则,其中包括对象关联.颜色搭配.重复.对称.不对称.数值等的构成手法.在本篇文章中,我们将继续介绍在海报设计中会应用到的其它一些设计技巧.同时我们以一个具体的设计项目为例,阐述在设计一张海报的整个过程中,我们还有哪些注意的地方,希望对你在以后的创作有所启发. 创造节奏 音乐通过一组音符的重复或变化而产生旋律.当我们聆听音乐时,我们总不知不觉在留意每个音符的变化.如果旋律优美,那每当