欢迎光临济南诺商信息有限责任公司章丘分站官方网站! 400-089-6678

站内搜索

联系信息

公司:济南诺商信息技术有限责任公司

电话:400-089-6678

手机:18615207130;13255311026

地址:济南市高新区新泺大街1666号齐盛广场2号楼14F

您现在所在的位置: 首页>新闻资讯 > 常见问题 >

网站建设中的面包屑设计大家了解吗?

来源:http://www.sjkhdkf.com/ 日期:2020-06-28

对于具有大量页面的web设计,例如电子商务平台,面包屑可以帮助用户导航和提高他们的web设计体验。济南网站建设公司面包屑可以帮助访问者减少努力,以达到更高层次的页面。
  1. 什么是面包屑?
  面包屑这个词来源于童话故事《Hansel and Gretel》,故事中两个孩子用面包屑组成了一条回家的路。在数字世界中,面包屑为您的站点的用户提供了追溯到原始登录站点的能力。因此,在外行人的语言,“面包屑”是导航的辅助,帮助您的用户快速通过您的网站/应用程序。
  面包屑是一个水平排列的文本链接,通常由符号上方的(>)分隔,引导您浏览页面的层次结构。
  当然,面包屑是很好的,但不是对所有的网站,它应该避免从单一层的网站。一个内容丰富的网站需要一些“面包屑”,通常可以在电子商务平台网站或web应用程序中找到一些步骤。您可以简单地绘制一个网站的架构图,并进一步分析它,以确定它是否需要一个面包屑轨迹。
  与此功能同样重要的是,要记住它是一个附加功能,应该将其视为主导航菜单。当然,主要方面是设计一艘大型船舶时主要考虑的问题。尽管如此,像面包屑路径这样的小事情对你的访客有一个无缝的体验同样重要。
  好的,我们将深入研究面包屑设计,但在此之前,让我们看看为什么要使用它。
  2. 为什么要用面包屑?
  面包屑是一种有效的视觉辅助,因为它们表明了用户在站点层次结构中的位置。因此,这使得用户很容易理解他们在哪里,以及他们可以导航到哪里。
  除了用户视图,breadcrumb对seo也非常有用,因为它很容易通过你的网站和你的弹跳率大幅下降。
  此外,您希望更小化用户操作的数量,并为它们提供无缝体验。一项研究表明,使用面包屑导航的用户完成网站任务的速度比不使用的用户快得多。
  3.面包屑的种类:
  在我们深入研究面包屑设计之前,这里有几种类型的面包屑是你应该知道的。
  1.路径:
  顾名思义,基于路径的crumb显示用户到当前页面的路径。这种类型的crumb提供了类似于前进和后退按钮的功能,所以它是更少使用的。
  2.地点:
  基于位置的面包屑指示当前页面在站点层次结构中的位置。
  3.属性:
  基于属性的面包屑根据网站的属性或类别对用户进行引导,这种类型的面包屑在电子商务平台上更常用。
  因为面包屑几乎不占任何空间,而且不会伤害用户,所以尝试一下也没有害处,对吗?你确定要在设计中加入面包屑吗?以下是设计面包屑时需要记住的一些基本内容!
  4. 面包屑设计基础:
  1.不是主导航:
  需要考虑的基本问题是,导航条不是主要的导航;它是一个次要的功能,仅仅支持用户的导航。你的主页不需要面包屑。用户的旅程从主页开始,所以它需要它。
  2.链接是正确的:
  不要使用用户的/当前页面作为链接。因为您的用户已经在那个页面上了,所以他们不需要相同的链接。相反,如果它指向不同的页面或相同的页面,用户可能会感到困惑。
  3.不要太eye-catchy:
  我们一直重复面包屑不是主要元素。因此,它们不应该被设计成一种吸引任何注意的方式。简单地说,他们不应该是你设计的。过于引人注目的设计会分散访问者对主导航的注意力。
  4.风格是正确的:
  应该对这个元素进行样式设置和大小调整,使其与页面的其他部分完全匹配。它应该是你的用户在访问你的网站时注意到的件事。不要让你的设计过于突兀或难以找到。
  5.位置是关键:
  这是正确的。你的主导航应该在页面的顶部,因为面包屑是次要导航,它应该在你的主导航之下,但是在页面内容之上。
  6.安排跟踪:
  开始是正确的,因为主页是起点,所以你应该从这里开始。
  提供到主页的链接具有链接和锚定的效果,使用户更容易使用。
  更终的目标应该是用一种自然的方式将这些链接粘合在一起。它应该是无缝的。谷歌是更好的例子之一,因为谷歌产品有足够的内容。
  7.让它熟悉的:
  因为在你的网站的每个页面上都有面包屑,确保它们以相同的方式放置并占据相似的空间。
  8.所有关于符号:
  传统上,面包屑通常与一些文本符号一起放置,如正斜杠或右箭头括号(>)。这些方法之所以有效,是因为它们已经使用了几十年,并且为用户所熟悉。但不要害怕尝试。你总是可以定制你的面包屑,并提出一个新的设计。
  大于符号(>)是用于分隔链接的常用符号。高于符号有助于表示层次结构。例如,父类>子类。
  就像向右的箭头(→)一样,引号(?)符号,如和斜杠(/)也可以用作分隔符。它们的符号使用户更容易理解使用的层次结构是箭头。选择取决于网站的美学价值和面包屑的类型。建议使用箭头而不是斜线作为分隔符。
  9.显示必要的路径:
  始终显示整个路径,在使用它时,确保显示整个路径,以避免任何类型的混淆。让你的用户知道他们在你的网站上的位置。
  高亮显示更后一项,由于文本将会突出显示,用户将更容易知道他们在站点设计的层次结构中的位置。
  在breadcrumb中使用全页标题是一个聪明的想法,可以帮助用户准确地理解每个超链接的位置。更改标题会引起进一步的混乱。
  10.使用椭圆:
  如果很长一段时间或者其他什么事情阻碍了你,你可以考虑使用椭圆(…)删除标题。省略号是一个三个点的标点符号,当您想要从引用的文本中删除某些内容时可以使用它。
  将页面URL和面包屑架构放在一起是很重要的。如果不是,用户可能会得到不一致的消息,从这两个网址和面包屑,并可能混淆。
  11.考虑可读性:
  当涉及到内容时,可读性是一个基本因素。尽量不要忽视它。克里斯蒂安·霍尔斯特表示,如果文字太长,用户的眼睛很难聚焦。这条线的长度使人很难分辨它的起点和终点。此外,大段文字会使你很难继续阅读正确的行。短行也是如此。非常短的行会给用户带来很大的压力。他们可能会在通读当前行之前跳到下一行,漏掉一些可能很重要的内容。可能的?rd页面是个好主意。
  正如我们上面所建议的,把你的文本放在页面的三分之一是一个好主意,即使是折叠或展开的面包屑。
  当你感觉太多的时候,把面包屑折叠起来。只需确保您为用户提供了一个遍历整个路径的选项。可单击的省略号是一个很好的实践。
  我们希望我们已经涵盖了所有的基础,所以你可以开始在你的网站设计面包屑。这是如何使你的访客停留在你的网站上更长的时间和更有效率。假设你的网站上有很多内容,如果使用得当,这个简单的功能会很有趣。设计的这个方面是增强用户体验和可用性的众多特性之一。这是济南网站建设公司网站设计的更基本的方面,你需要考虑,以获得更大的这个程序!
首页 案例 电话 置顶