为企业用户提供一站式SEO优化服务

科学、稳定、持续、可控

如何设计、使用面包屑?

如何设计面包屑

面包屑连接符的主要样式

  如何设计、使用面包屑?

  综合评估以上样式,并考虑到面包屑的包含关系和指示性,建议使用以下两种连接符:

  如何设计、使用面包屑?

面包屑的位置

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

面包屑的大小

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

  如何设计、使用面包屑?

  上图中的面包屑过于醒目,干扰到了主导航,甚至喧宾夺主。

 

Extension 面包屑设计扩展

带下拉列表的面包屑

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

  如何设计、使用面包屑?

交互式面包屑

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