NEWS

网站设计:面包屑设计

2024-09-14

在网站设计中,面包屑设计是一种非常实用且重要的导航方式。What? 什么是面包屑

  面包屑是作为辅佐和补充的导航方式(secondary navigation scheme),它能让用户知道在网站或运用中地点的方位并能方便地回到原先的地点。 常见的面包屑的款式是:横向的文字链接,由大于号“>”分隔,这个符号也暗示了它们的层级联系。

【 面包屑的分类】

  1.根据用户地点的层级方位。(Location-based)

  根据方位的面包屑用于告知用户在当时网站中地点的结构层级。用在具有多级导航(一般具有2级以上导航)的网站中。

2.根据产品的属性。(Attribute-based)

  这种类型的面包屑常出现在具有很多类别产品和服务的网站中,如电子商务网站,网上教育服务等。

3.根据用户的足迹。(Path-based)

  显示用户阅读的轨迹,面包屑之间没有明显的层级联系。


Why? 为什么运用面包屑(面包屑的优点)

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

  2.面包屑能够削减的用户回来上一级页面的所需的操作次数。

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

  4.降低网站访问者的整体跳出率。(当用户从别处链接到网页,或者从搜索引擎查找到网页,则面包屑的存在能协助用户快速了解当时的层级方位,并引导用户查看网站的其余部分。削减了看完直接跳走的用户数量。)


When? 何时运用面包屑

  1. 存在很多的分级内容的网站中。

  大型的电子商务网站是典型的比如,里面有很多的产品分别归属于不同的大类别及细分类别。

2. 在一些引导性的网络运用或者软件装置进程中,面包屑也常被用来指示当时以及剩余的操作步骤。类似于进程条的变种。

  3. 层次简单的页面中一般不运用面包屑,可是当面包屑能显著协助到阅读并提高他们定位能力时,也主张选用面包屑。

  相册阅读就是一个典型的比如,结构层次并不复杂,但用户在特定几个页面之间跳转的频率会比较高(如相册首页,相片缩略图页,相片阅读页等),所以面包屑的存在对提高此处的阅读效率是很有协助的。

留意点:面包屑不能替代有效的主导航,它是一个辅佐功用;一个答应用户定位他们在哪里的辅佐导航方案。


How? 怎么设计面包屑

【面包屑的方位】

  一般出现在页面的左上或者右上部分,而且主要是在导航下面或者内容区的上面。

【面包屑的巨细】

  面包屑是一种辅佐导航,在页面中不该该起分配效果。面包屑和主导航比较至少要比较小、或不太杰出。在确定面包屑巨细的时候,一个较很好的方法是,当访问这个页面的时候,它不该该是页面中夺目的元素。如果第一眼就留意到了面包屑,可能就需要再弱化一点。

【带下拉列表的面包屑】

  香港yahoo,淘宝网等网站的面包屑中有下拉列表,能够方便用户快速跳转到同类或其他类别的新闻和产品。


交互式面包屑】

  Delicious中的tag分组已面包屑的形式出现在网页头部,按前文提到的面包屑分类此处属于一种“根据用户足迹”(Path-based)的面包屑。记录了用户阅读tag分组的次序。一起这些面包屑还能够被及时“干掉”,方便了对内容的管理,真是别出心裁的设计。


【回顾总结】

  是否还记得关于面包屑的3W+H+E?通过合理的设计和运用,可以提高网站的用户体验,增强用户对网站的信任感和满意度。