用户体验

网站面包屑(breadcrumb)设计

2 面包屑的设计规范

(1)面包屑的样式

最常采用的面包屑的样式:横向的文字链接,由大于号“>”分开[4]。这个符号也暗示了它们之间的层次关系。根据你的用户的认知及专业水平,在有必要的情况下,可以在面包屑父子级之间增加“下划线”以告诉用户“这里是可以点击的”。

新浪网面包屑导航的下划线植入产品VI,可以称得上一举两得的设计。

当然,网页设计师为了更好地在这个区域施展他们的才华,设计成下面的方式也未尝不可,但是建议网站加载速度慢的产品经理们要将这个意见及时汇报给相应设计人员,毕竟面包屑在第一页就加载了。

由“>”延伸出来的设计样式

苹果专卖店截图

(2)面包屑的位置

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

(3)面包屑大小

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

到这里面包屑基本告一段落了,但是如果你是一个严谨产品经理的话,你会有四个疑问在脑海出闪现:1.点击导航后是“跳转”页面,还是当前页面替 换?2.面包屑导航的第一队列是网站首页,还是该产品线首页?3.面包屑导航要控制在多少个级别为佳?4.面包屑是终止于当前页面,还是上一级别?

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

来源:以用户为中心的产品设计 http://www.ixuqiu.com

——————————————————————————————-

文中注释

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

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

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

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

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

参考文献
《Breadcrumbs In Web Design: Examples And Best Practices》
http://www.smashingmagazine.com/2009/03/17/breadcrumbs-in-web-design-examples-and-best-practices-2/

希望看到您的想法,请您发表评论x