首页 > 知识•资讯 > 大型网站建设导航设计方法。 > 正文

大型网站建设导航设计方法。

2013/4/11 0:00:00 · 稿源:传诚信

对于大多数网站,导航是不是特别具有挑战性。子导航的支持,是一个主要的导航栏上,往往不够。

通常情况下,子导航显示当前页面的父母,兄弟姐妹和子女。持久性的主导航栏显示顶级页面,允许用户将各部分之间。

然而,有一类的网站,这低于传统形式的导航。这是我作为“大型现场”。

什么是一个大型网站?

兆网站通常拥有一个庞大的组织,涵盖范围广泛的服务或产品。该组织还往往支持不同的用户群。

大型网站包括组织机构,如英国广播公司,公司多样化的投资组合,如微软,政府机构,高等教育机构和大型慈善机构运行的许多活动,如世界野生动物基金会。

这些网站:


  • 是非常大的,
  • 很多层次深,
  • 微众多网站和子,
  • 迎合了不少观众,
  • 有多个入口点。


这种规模和复杂性的网站带来了一些独特的航海挑战。

大型网站建设导航所带来的挑战

在我们公司,我们做了很多大型网站的工作,他们可以证明是特别具有挑战性的,尤其是当试图使用传统的导航。

传统导航仪无法支持深度

更深层次的网站,更多的传统导航斗争。导航可以轻松地容纳三个级别,除此之外,发生两件事情之一。无论是导航扩展到更多的屏幕房地产专用导航,而不是内容(问题变得更糟一个大型网站的页面数量之多),或更高的页面在信息架构不再出现在导航点。

在后一种情况下,如果用户是在网站内深处,他们将会失去他们在哪里,因为他们没有看到的网站的结构适合在当前页面的上下文。


图像显示导航称霸页面房地产
虽然传统的导航方法,结合面包屑,可扩展,以适应大型站点,他们这样做的成本日益增加的房地产。较大的版本。


后者的问题,可以部分缓解实现的面包屑。然而,这是不是唯一的问题,与传统的导航。

传统导航仪无法支持多个入口点

传统的导航可以混淆用户进入网站的人通过一个微型网站或款。

考虑参加一所大学的研究生课程的学生。此人可能是在一个特定的学院或学系,比该机构作为一个整体更感兴趣。因此,他们可以很好地进入网站在这一水平,而不是在大学的主页。

另一个例子是一个单身母亲,想知道关于儿童福利。他们更容易到达的好处子网站上比对政府的首页。在这种情况下,用户的工作重点是对他们目前的情况下(即研究生课程或儿童福利)。他们没有兴趣立即在更广泛的大型网站。

不幸的是,传统的小学和中学的导航公开用户这一更广泛的背景下,他们是否想要与否。


大型网站建设导航设计方法。
一段某大学的网页上标有“研究”是否是指整个大学或学校正在查看?大概什么时候出现了两次相同的标签,但两个不同的地方去吗?更大的版本。


为了使事情变得更糟的是,在目前的情况下,其实可以改变用户的感知的导航项目。例如,我们的研究生认为标有“关于我们”的链接是关于学校的问题,或对较大的机构。在一些极端的情况下,你甚至可以找到相同的导航标签被用于当前上下文和更广泛的机构(例如,有关大学和有关学校的信息都可能被贴上“关于我们”在同一页上)。

那么,如何才能解决大型站点的导航问题?

导航解决方案

正如所有的东西,也没有完美的解决方案。不过,也有解决方案,是向前迈进了一步,从导航更适合小网站。这些解决方案的第一个是最彻底。

完全摆脱导航

我第一次听说这种方法的在谈拉斯威克利在2006年做了与传统的导航回 。它拒绝的想法施加导航后,用户结构,而不是让他们通过网站找到自己的路径。

这是通过使每个网页的一个独立的文件和标记用适当的元数据。然后,用户可以通过标签的搜索和导航的组合找不到页面。拉动相关文件的基础上每个页面的相关联的元数据链接也将成为可能。

这种方法有以下几个优点:


  • 它支持无限大小的一个网站。
  • 它非常适用于从深层链接网站的用户。
  • 它允许页面之间的关系变得更加富有活力,轻松容纳页面中添加和删除。


当然,它不是没有挑战。虽然个别路段的网站仍然可以有一个登陆页面(例如,section.acme.com),业务可能奋斗的想法不具有特定的网站管理。更重要的是,这种方法在很大程度上依赖于标签的文档和强大的搜索功能,这两者是很难实现的一个大型网站。

这就是说,它是一个选项,一个不应该被迅速驳回。

网站分割成更小的微型网站

另一种方法是打破大型现场成一些更小,更易于管理的微型网站。这是由英国广播公司的做法。

在BBC不是治疗其网站存在一个单一的实体,而是打破了下来成子网站,如新闻,体育,电视,电台等。每个网站都有自己的导航,从而避免了与大型网站相关的问题。

英国广播公司(BBC)避免脱节的经验,为用户之间移动微型网站的方式是在顶层导航和用户界面,以确保一致性。


大型网站建设导航设计方法。
英国广播公司(BBC)避免一个大型的网站导航和设计语言。较大的版本保持一致,而分裂成一些较小的网站其网站存在。


虽然BBC的微型网站在外观上有所不同,他们使用相同的主导航,版式,布局和模块之类的东西,也有一致的设计语言。这种语言,BBC的全球的体验语言(GEL)网站定义是一致的,足以确保稳定的用户经验,但具有足够的灵活性,以满足不同的受众和题材。

这是一个很好的线条去散步。每个微型网站太不一样了,用户将在UI变化所迷惑。他们太相似,用户将被揭去后,发现该网站并没有一个单一的导航结构。

使用面包屑驱动的方法

第三个解决方案是一个通过Gov.uk。它摒弃了专用导航领域,而是使用页面的内容链接到它的孩子。然后,它使用面包屑,以帮助用户识别他们在哪里内航行层次,并搬回了树,在需要的时候。


大型网站建设导航设计方法。2
Gov.uk几乎完全依赖于面包屑导航。较大的版本。


该方法具有许多优点。一开始,它专用于导航的空间最小化,而在同一时间允许更详细的描述,每一个孩子。在这个意义上说,它是最简单的,最清洁和最容易理解的方法。

这也意味着到移动设备,占45%的Gov.uk的Web流量。

突出的面包屑使用户清楚他们的网站上,同时在页面的导航子页面,使下一步明显。最重要的是,强调内容,而不是导航,吸引我之最。

不幸的是,它也有其缺点。

用户通过完全依靠面包屑和页面链接到儿童,不大的背景下,他们的当前位置。他们不知道当前页面的网站(例如,他们不知道的顶层部分)整体造型的兄弟姐妹。

这不是一个问题,如果用户试图完成一个特定的任务和网站迎合了这一任务将在一个地方,它的所有相关内容。然而,当一个用户是一般研究模式中,或当任务有关的内容分布在多个页面中,这种方法可以证明是令人沮丧的。

无奈的是面包屑导航,需要用户浏览网站的结构所造成的。有没有办法,使各部分之间的跳跃。

幸运的是,有一种混合的方法,它使用面包屑作为主要的导航工具,但与更传统的导航增强。

我的首选解决方案

由BBC体育凝胶之前导航方法的灵感来自于我的首选解决方案。

BBC的水平运行,而是传统的面包屑垂直翻转。在每个面包屑列表的末尾,当前页也显示了它的孩子。当你到达树的底部,导航将继续显示当前页面的兄弟姐妹,而不是其子女。


大型网站建设导航设计方法。3
老BBC体育网站的主要导航工具,使用垂直面包屑。当用户进入一个部分,如足球,其他所有的运动(即兄弟姐妹)将被删除,用户聚焦于被摄对象的手。较大的版本。


分组这种做法在一个地方所有的导航,给用户一个清晰的感觉到自己的位置,并致力于导航的空间减少。然而,它仍然遭受从Gov.uk.的问题

在布莱顿大学工作时,我们提出了BBC体育“的做法,但增加了一个重要的事情。我们建议保持一致的顶级导航栏。虽然这增加了更多的导航到的页面,它为用户提供的网站结构,即时概述。这使得用户需要从多个部分信息(比方说,一个前瞻性的研究课程,以及住宿的学生),在这些部分之间快速跳转。

在许多情况下,这是足以创造一个简单而强大的用户体验。然而,它并没有解决需要能够看到当前页面的兄弟姐妹。

显示兄弟姐妹虽然使用面包屑导航

到目前为止,我曾经考虑过这个问题的两个可能的解决方案。

一个兄弟姐妹经常与对方有关系的假设,它们是同一个故事的一部分,如果你愿意。在此基础上,除了简单的“下一步”和“上一页”按钮(比如你发现许多博客)可能的一个解决方案是不够的。然后,用户可以移动兄弟姐妹之间的单一点击一个按钮。

另一种方法是使每个级别的面包屑导航弹出菜单,从而使该级别的兄弟姐妹。这将使用户跳转到网站的任何级别的任何兄弟和潜在需要一个单独的主导航栏。


大型网站建设导航设计方法。5
通过添加弹出菜单,垂直的面包屑导航,给你的用户快速访问任何级别的任何兄弟的网站更大的版本。


这是否使用面包屑导航垂直或传统横面包屑。

这就是说,我没有测试过这种方法,有的则要关注触摸设备。

需要更多的想法

正如你可以看到,大型网站建设导航问题是一个棘手的,似乎并没有明显的解决方案是一个单一。写这篇文章的主要原因之一是打开一个关于这个问题的讨论,并希望鼓励探索一些替代方法。

作为一个结果,我会很感激你的想法在评论部分的任何例子你已经找到替代导航方法a

  • 相关推荐
  • 大家在看
客户服务
咨询热线

010-62199213

24小时咨询热线

139-1050-5354