《分析网站可用性面包屑导航的设计.docx》由会员分享，可在线阅读，更多相关《分析网站可用性面包屑导航的设计.docx（7页珍藏版）》请在课桌文档上搜索。
1、互联网的一些事yiiesh网站面包屑(breadcrumb)设计一、什么是面包屑Aabreadcrumbv(orabreadcrumbtrail,)isatypeofsecondarynavigationschemethatrevealstheuser,slocationinawebsiteorWebapplication.ThetermcomesfromtheHanselandGretelfairytaleinwhichthetwotitlechildrendropbreadcrumbstoformatrailbacktotheirhome.Justlikeinthetale,breadcr
2、umbsinreal-worldapplicationsofferusersawaytotracethepathbacktotheiroriginallandingpoint.BreadcrumbsInWebDesign:ExamplesAndBestPractices译一个“面包屑”(或“面包线索”)是一个类型为二级导航方案1,揭示了网站或网页应用程序中用户的所在位置。这个词来自汉赛尔与格莱特童话故事2中，两个孩子丢下面包屑，形成一条小径回到自己的家。就像在童话，应用面包屑在现实世界的用户供应一种方法来跟踪路径返回到原来的着陆点。在网页设计面包屑：实例和最佳做法面包屑是作为帮助和补充的导航方
3、式(SeCOnclarynavigationscheme)3,它能让用户知道在网站或应用中所处的位置并能便利地回到原先的地点。二、面包屑的现状及分类许多闻名的互联网公司在建站之初就采纳了面包屑导航做为网站产品线的“标准配置”，现在被越来越多的行业网站所认可及采纳。1 .基于用户所在的层级位置(LOCation-based)基于位置的面包屑用于告知用户在当前网站中所在的结构层级。用在具有多级导航中。互联网的一些事新闻网易新闻中心热点新闻正文jxa江苏省委书记报告会遇大学生投诉征地问题2011-05-0512:38:57来源：新华网(T州)有5774人参与手机看痂同泵转发到微博网易新闻中心的面包屑
4、导航案例2 .基于产品的属性(AttribUte-based)这种类型的面包屑常消失在具有大量类别产品和服务的网站中，如电子商务、购物网等。2阿里您好，欢迎来至婀里巴巴睛登录院费注册】口总互联网的T事阿里巴巴示例(所展现公司仅为案例，无其他用途)3 .基于用户的脚印(Path-based)显示用户扫瞄的轨迹，面包屑之间没有明显的层级关系，只是展现用户从那个级别过来的。这种面包屑在一级导航方案不明确的网站适合，其他状况不建议采纳。三、面包屑的好处通过上面的案例讨论以及面包屑的分类，我们可以看到采纳面包屑功能的好处：1 .面包屑作为用户查找路径的一种帮助手段，能便利他们定位和导航。2 .面包屑可以
5、削减的用户返回上一级页面的所需的操作次数。3 .临时性，动态性，占用屏幕空间小，干扰性小。4.降低网站访问者的总体跳出率。当用户从别处链接到网页，或者从搜寻引擎查找到网页，则面包屑的存在能关心用户快速了解当前的层级位置，并引导用户查看网站的其余部分，削减了看完直接跳走的用户数量。四、面包屑的使用前提及设计法律规范1面包屑的使用前提(1)存在大量的分类名目例如：购物类网站、分类信息网站。资房地产用产开发度假地产房户出租更多知识产权互联网的一些事yixieshcom产武装修房产策划物11管理管产开发杯雌家居装修房产函用产请集办公装修商标注册古利申请技术转让技术服势技术合作无形即地理标志耐移密知识产
6、权福号产权电路设计更多创业加盟特许经营项目合作招标投标加盟招商网店代理中介脓势教昌培训机械顶目服费项目玩具项目建筑项目项美容健身餐饮娱乐零售超市创北基金包装项目信息技术展乐休闲旅游项目目抬许经霍医药代理玳具邃锁更多汽摩配件政府招商政府果购更多咨咨询服务有理答询中介服务公司注册询市场调查代理认证工程咨询投资咨调础介给中介代理8?学中介劳务输出公关咨调贸易信息资信认证普理咨询移民中介公旬注册香港公旬跤洲公司贸易咨询心理咨询费信国更多离岸公司劳务申介蝴6中介更多工业设计创意设计展会信息盛装皮革平面设计企股象包装设计服装设计全融保险敦盲培训软件网络家居用品谋思网首页截图(2)在一些引导性的流程操作或者
7、软件安装进程中，面包屑也常被用来指示当前以及剩余的操作步骤。款需找服务上谋思互联网的一些事yiieshi. com迎注册谋思会员包，用写基本信息完募资料注册成功谋思网会员注册流程(3)层次简洁的页面中一般不使用面包屑，但是当面包屑能显著关心到扫瞄并提高他们定位力量时，也建议采纳面包屑。相册扫瞄就是一个典型的例子，结构层次并不简单，但用户在特定几个页面之间跳转的频率会比较高(如相册首页，相片缩略图页，相片扫瞄页等)，所以面包屑的存在对提高此处的扫瞄效率是很有关心的。人人网在2022年9月份之前还保留这一面包屑，但是现在无缘无故取消了，不知道PM们取消的缘由是什么，这一点让我很上火。需要提示的是面
8、包屑不能替代有效的主导航，它是一个帮助功能5。这一可以称之为“小应用，大效应”的用户体验性设计，国外的资讯门户网站好像对此不怎么“感冒，例如yahoo,com、CNN、华尔街日报等。都没有在页面中采纳面包屑导航，也可能是由于他们的资讯分类比较喜爱采纳二级栏目导航的原因吧。OpinionsdividedoverBushsno-showatgroundzeroUH011NCMaf420lt-lMM07(SUT(M07*nMAKE典睡YfCNN资讯标题上面并没有面包屑，而是将twitter和Share等共享占据“有利位置”(2022年5月5日抓图)2面包屑的设计法律规范(1)面包屑的样式最常采纳的面
9、包屑的样式：横向的文字链接，由大于号分开4。这个符号也示意了它们之间的层次关系。依据你的用户的认知及专业水平，在有必要的状况下，可以在面包屑父子级之间增加“下划线”以告知用户“这里是可以点击的”。网的一些事yixieshio贡有同体富埋乐职妓般拿科技因客制多负汽主店户静汽文m石，I少年争议本代登初击疑百四*支Iffli公炎变量才闺晶a新闿中心新浪网面包屑导航的下划线植入产品VI,可以称得上一举两得的设计。当然，网页设计师为了更好地在这个区域施展他们的才华，设计成下面的方式也未尝不行，但是建议网站加载速度慢的产品经理们要将这个意见准时汇报给相应设计人员，究竟面包屑在第一页就加载了。rSiXRev
10、isionsswebdesiBookmarksNetworkTagsSuSeealiwebdesignanddesignbookSiXReViSionSWebdeSigndesignG由“”延长出来的设计样式W Shop iPodiPod AccessoriesPower互联网的一些事AppleUSBPowerAdapterUsethisultracompactandconvenientUSB-basedadaptertochargeyouriPhoneoriPodathome,ontheroad,orwheneveritsnotconnectedtoacomputer.苹果专卖店截图(2)面
11、包屑的位置通常消失在页面的左上或者右上部分，而且主要是在导航下面或内容区的上面。(3)面包屑大小面包屑是一种帮助导航，在页面中不应当起支配作用。面包屑和主导航相比至少要比较小、或不太突出。在确定面包屑大小的时候，一个较很好的方法是，当访问这个页面的时候，它不应当是页面中最醒目的元素。假如第一眼就留意到了面包屑，可能这个设计师做得有点失败。到这里面包屑基本告一段落了，但是假如你是一个严谨产品经理的话，你会有四个疑问在脑海出消失：1.点击导航后是“跳转”页面,还是当前页面替换?2.面包屑导航的第一队列是网站首页，还是该产品线首页?3.面包屑导航要掌握在多少个级别为佳?4.面包屑是终止于当前页面，还
12、是上一级别？首先我不是这个行业的权威，仅代表我个人的观点。第一个问题的答案应当是：面包屑区域是直接跳转进入要访问的页面。由于他选择面包屑进行导航，已从另一角度告知你他正在执行的操作是：“返回”、“离开”的含义，类似于网站逃命舱功能。其次个问题要看你当前页面的header区域是否有一级导航方案了，假如有的话，这个地方再有首页也是一个摆设，并且过多地展现首页也无多大意义，由于人们都了解“www”去的就是你的首页。假如在第一梯队增加返回“首页”的导航，势必会造成你的面包屑深度过大，这也到了第三个问题“面包屑导航要掌握在多少个级别为佳”，面包屑导航不要超过4级，3级为佳，假如需要割舍的话，尽量割舍列表页，保留频道页。第4个问题的答案是：假如你的导航没有超过4级的状况下，建议添加一个“正文”、“具体”做为面包屑导航的完善收工。(作者：远航I860)文中注释1为什么成为二级导航方案？由于产品线首页不需要导航。例如：首页、资讯首页。2汉赛尔与格莱特两个人名来自童话小说格林童话3一级导航方案在IOgo、header及“逃命舱”区域会涉及。4这个符号也示意了它们的层级关系。5面包屑只是一个允许用户定位所处位置的帮助导航方案。参考文献BreadcrumbsInWebDesign:ExamplesAndBestPractices
