网站导航设计:综合型网站导航设计技巧

文章描述:综合型网站导航问题很棘手,看起来也不像只有一个显然的解决方案。一个让我写这篇文章的主要的原因是开放讨论这个话题,并希望能抛砖引出更多替代方案。正是因此,我真心感谢你能在评论中给出一些想法,或你发现的替代性的导航案例。

对于大部分网站,导航并不算是个挑战。一条主导航加条二级导航支撑,通常就足够了。典型的做法是,二级导航显示出父、兄及当前子菜单。常显的主导航条显示最顶层的菜单,允许用户在菜单间切换。

然而,有一类网站让这种传统的导航样式承担有些吃力。这就是我要提的大型网站。

定义大型网站

  一个大型网站由结合了综合服务和产品的典型大型组织所有。这个组织通常也服务各色用户。拥有大型网站的组织,包括BBC这类机构型的,类似微软这种项目多样化的公司型的,政府部门,高等教育类的以及运作多种活动的慈善组织类的,比如世界自然基金会。

  这些网站:庞大,层级多而深,由多个小网站和频道组成,迎合受众众多,许多入口,这种规模级的复杂网站导航颇具挑战。

大型网站上的导航挑战

在我们公司,我们花费了大量工作在这类大型网站上,尤其当我们想使用传统的导航时特费劲儿。

传统的导航无法负担深层级

  传统的导航随着网站层级越深变得越难用。传统导航很容易应付三层;超过的话,问题就会暴露。即便拓展到页面众多的房产类网站导航,他们会更致力于导航多过内容(大型网站里页面太多让问题变得更糟),或更顶层的页面不再出现在导航中。在后者中,如果用户处于网站的深层级页面,他们将搞不清上上下级关系,因为无法看见当前页面在整个网站中的所处位置。

  虽然传统的导航处理结合了面包屑,能够拓展适应综合型网站,但当在房产网站上如此做时,成本却不断升高。

传统导航无法承载多入口

  如果用户经由小网站或网站某菜单页的进入,传统方式的导航将让用户感到困惑。以一个在考虑参加大学研究课题的学生举例。这个人可能对院系详情更感兴趣相比整个学校。因而很容易进入网站的院系层页面,而不是学校的主页。

  另一个例子就是单身妈妈想了解宝宝福利。她们更像是要直达福利的次级频道而不是政府主页。在这种情况下,用户的关注是在当前内容。(如:课题页或儿童福利页)。他们不是立即对这整一个网站感兴趣。

  不幸的是,不论用户是否愿意,传统的一级、二级导航都试图让用户去了解整个网站环境。

  在这个大学页面上,这个“研究菜单是指整个大学的研究呢还是仅是这个学院的研究。当两个同样的菜单出现,并指向不同的地方会怎么样?

  更糟的是,当前上下文实际上能够影响用户对导航内容的理解。比如,一个”关于我们“菜单的链接,这个学生会想这是关于学院的还是关于整个学校的?在某些极端的例子中,你甚至可以发现同样名称的导航同时用于当前内容和更广泛的机构中(就像这个”关于我们“)。

导航解决方案

  如同所有的事物,这里也没有完美的解决方案。但仍然有一些适合于小一点的网站的方案,算作向更完善导航迈出的一步。第一个方案是最激进的。

彻底去掉导航

  似乎是06年时,我第一次在拉斯的关于破除传统导航的演讲中听说这个方法。他拒绝给用户宏伟磅礴的导航,取而代之让用户去通过网站找到自己的路径。

  要使用这种方式,得每个页面成为独立的文档并且标记适当的关键词数据。然后用户就可以发现页面间通过关联检索和标签来导航。 如果关键词数据已与每个页面关联 ,牵引链接来建立文档关系也将可行。

这种做法有几个好处:

支持无限大的网站;
非常适合从一个深链接到达的用户;
它允许页面间的关系更加灵活动态并且能轻松容纳页面增删变动;
当然,这中方法也有自身的局限。网站的独立频道仍应该有一个着陆页(如:section.bbc.com),业务上也会困扰于没有具体的站来运营。更重要的是,这种方法很大程度上依赖于文档标签完善以及强大的搜索功能,这两者都将很难在大型网站中实现。
就是说,这只是一种选择,不要太快拍砖。
把网站拆分成多个小站

  另一个办法是把这个大型网站拆分成多个更小的更容易管理的小站。这是BBC采用的办法。BBC没有存整,而是打破,分散成多个次级站,如新闻、体育、电视、广播等。每个网站都有独立的导航,因而避免了大型网站的导航问题。BBC在界面上采用顶部导航保持一致的办法贯穿,避免用户在各次级站点间切换时感觉脱节。

  BBC拆成了多个小站,以避免网站成为臃肿站,同时导航和设计语言保持一致性。虽然BBC的次级站外观多样,但他们用同样的主导航,拥有一致的设计语言,比如排版、布局和模块。这种语言与BBC全球体验语言定义足够一致,确保稳固的用户体验时又够弹性地适应不同的受众和主题。这是个不错的路线。让每个次级站太不一样,用户被UI的改变所迷惑。让他们太相似,用户又会放弃去发现,原来网站上不是一个导航结构。

面包屑导航

  第三种是被Gov.uk采用的方案。他抛弃了导航的保留地,转而用页面的内容去链接到子内容。然后用面包屑去帮助用户识别他们的导航层级,以及需要时返回上级树。

  Gov.uk几乎仅依赖面包屑来导航。这样做有许多好处。首先它最小化了导航的占地空间,与此同时给予子内容更多的描述。这个层面说,这是最简单、干净、和容易理解的方式。还能很好的迁移至移动设备(占Gov.uk的流量的40%)。

  突出的面包屑让用户对当前所处位置更清楚,在页面里面的到子页面的导航让下一步要干啥显而易见。最重要的是,向我呈现出相比导航更强调内容。

  不过,这种方法也有自身的缺陷,完全依赖面包屑和页面里的子页面链接,用户只有这点关于当前位置的信息。他们会无法感知当前页面的同级和网站的全部模样。(例如他们无法知晓顶层菜单内容)如果用户只是想完成一个特定的任务这将不是问题,而且通过同一位置的全部内容关联起来,网站也满足这个任务需要。

  然而,当用户在做一个综合研究模型或当任务有关的内容已经分散到多个页面时,这种方式就要让人崩溃了。崩溃是由于面包屑导航需要用户菜单层级里上上下下所致。这里没办法在菜单间跳跃。

幸运的是,还有一种混合方案,用面包屑导航做主导航工具,辅以传统导航增强。

我更倾向的方案

  方案灵感来自于GEL出台前的BBC体育站。BBC垂直折叠传统的面包屑,而非水平铺展。在每个面包屑列表尾部,当前页面的子页面也被展示出来。当你到达树的底部时,导航会继续显示当前页面的同级内容而不是子内容。

  老的BBC体育站用垂直的面包屑作为主要的导航工具。当用户进入足球或其他全部运动的菜单。Photo by:i.e. the siblings这种方式把全部导航集中在一个位置,对于当前位置,给予用户清楚的感觉,减少导航的空间占用。但问题还是和Gov.uk一样。

  当在布莱顿大学工作时,我们提议了BBC运动站的方案,但附加一个重要的东西。我们建议常显顶层导航条。虽然这增加了更多的导航给这个页面,但给予用户网站结构的概览。这让需要多部分信息的用户(比如,一个具有前瞻性的学生,既要研究课程又要了解住宿)能够这些菜单间快速跳转。

  在许多的例子中,这足以建立够简单强大的用户体验。然而,这也没能解决需要看到同级页面的需求。

用面包屑导航显示同层级

  到目前为止,对这个问题我考虑了两种可行的解决方案。一种运行于同级互相通常有关联的假设;比如,他们是同个故事的部分。在这个基础上,简单附加“下一个”和“上一个”的按钮(比如在许多博客上可以发现)可能就足够构成个方案。用户因而只需要一个点击就能够在同级内容间切换。

  另一个替代方案是让每层面包屑导航飞出个菜单,从而露出那个选项的同级内容。这将让用户能够在网站的任何平层和跨层间跳转,还可能抛弃分离的单独主导航条的需要。

  通过给垂直面包屑导航增加飞出菜单,让用户能快速进入网站任何层级。不管你用的是垂直或传统的横向面包屑导航,这都能使。我没测试过这个方法,还得考虑下移动设备。

你还可以给出更多点子

  如你所见,综合型网站导航问题很棘手,看起来也不像只有一个显然的解决方案。一个让我写这篇文章的主要的原因是开放讨论这个话题,并希望能抛砖引出更多替代方案。正是因此,我真心感谢你能在评论中给出一些想法,或你发现的替代性的导航案例。

原文地址:smashingmagazine  文章来源:译言网  译者:殊圖

时间: 2024-12-03 14:14:43

网站导航设计:综合型网站导航设计技巧的相关文章

导航是Web网站重要的元素:置顶菜单的设计研究

文章描述:导航是Web网站中最重要的元素. SirsiDynix公司UX/UI设计师Hyrum Denney在Smashing Magazine上发表了一篇文章<Sticky Menus Are Quicker To Navigate>,分享了自己对"置顶菜单"进行的可用性研究成果,及实现技术和相关挑战.CSDN对该文进行了编译,内容如下: 导航是Web网站中最重要的元素之一,大部分设计师都同意这一点.尽管如此,现在的导航并不总是容易使用.通常,用户必须滚动到网站的顶部才能

研究移动网站的导航的重新设计变化和设计要点

文章描述:导航之变-移动网站的导航设计. 导航是互联网网站最重要的组成部分之一,它涉及到产品的信息架构.页面布局和用户交互行为等诸多方面.一个网站用户体验的优劣往往和导航的优劣有密切的联系. 随着移动互联网的发展,越来越多的网站以移动网站的形式移植到手机上.在网站移植过程中,导航的重新设计有什么变化和设计要点呢,本文尝试做出一些研究. 导航的目的 在研究导航之前,我们不妨从导航的使用目的谈起.如果把网站比成一座大厦,那导航可认作是大厦内的指引系统.导航的使用目的归纳起来主要有以下几个方面: 1.

交互设计实例:用导航表现网站的信息结构给用户

文章描述:用面包屑来简化多层的tabs. 一个网站信息结构需要表现给用户看,这样用户才能知道当前是在哪儿,才有可能去猜测某个内容可能会在哪儿.如何表现网站的信息结构给用户呢?用导航. Tabs导航不错!Tabs导航是一种表现形式,可以很直观的表现出当前所在的栏目和与之同级的其他栏目. 用tabs这种形式来表现导航是个很好的办法,也是很常见的.然而,如果一个网站的信息结构很复杂,层级很多,那么就经常会是tabs套tabs套tabs套tabs-四层tabs-我们抽象一下就成了下面这样: 怎么优化过多

交互设计:电子商务网站导航设计

最近在UCDCHINA上看一些电子商务设计的东西,因为手头一个项目就是如此.发现最新一期的话题是"导航设计".我觉得结合最近的一些思考,有很多想法是可以说一说. 说到电子商务的导航, 很多人都会指向2个电子商务网站,淘宝和亚马逊.但是以此来设计电子商务网站的导航,其实是不准确的,因为在不同商品数量级上,淘宝和亚马逊的做法,不一定合适现在的电子商务网站. 1.海量商品的导航 淘宝和亚马逊商品数量众多,据数据显示,淘宝现在有4000万商品,为4000万商品设计导航和为4000个商品设计导航

交互设计探讨:网站导航标签要明晰有效

导航标签彼此互斥.完全穷尽. 导航标签其实就是一种文字表达形式,我们用标签来代表网站上的各种分类信息.比如"联系我们"这个标签,代表的内容通常会包括公司名称.电话.地址.邮箱等信息.它可以是文字,也可以是图片.在英文里被称作"Label",并不同于我们常说的"tag"标签云图. 说简单一点,我们就是要为网站的信息做分类,并为它们起一个通俗易懂的名字.这其实是任何人都可以做的一件事情,所以在导航设计流程中,它的重要性也常常被忽略.在设计产品时,常会

国外优秀的网站设计:创意大导航单页面网站设计

在国外优秀的设计网站中,开始流行一种这样的Web创意设计风格:整站由一个单一页面组成,通过设置锚点的方式,利用JavaScript技术,实现网站内容的滑动导航.这种创意十足的Web设计效果,可以很大程度上给人一种流畅华丽的动画震撼,沉醉于其美妙的操作设计的同时,更为网站设计者的构造灵感而折服,这里就为你搜集了10个创意大导航单页面网站设计. WeBleedDesign Gavin Castleton Two24Studios DesignSpam JP3Design MadeToKill Cla

设计理论:网站导航设计的复杂性

一说到导航每个人都不陌生,如amazon的Tab式导航.网站地图.软件中的菜单导航.索引表等等.导航设计看上去非常的简单:无非是页面上放置一些链接,通过这些链接用户可浏览和使用整个网站.事实并非如此,导航设计是非常复杂和严谨的. 下面我们以网站导航为例粗浅的分析一下导航设计的复杂性: 任务:设计一个网站导航 目标:1.提供给用户方便的网页间跳转的方法          2.能够表达出页面之间.页面与内容之间的关系 分析:人本能的具有空间感.想象一下你现在坐在家中的沙发上看电视,突然有访客,你起身

网站设计之底部导航设计参考

  1.如果网站是数据库形式,建议网站设计底部重复的部分用图片来代替,主要是为了内页的设计减少重复度来考虑,可能大家都清楚,重复的内容越多,相似性就越高,相似度高了就很难被收录. 2.版权设计:版权的形式可以用文字的形式来出现,记得加个您自己网站的链接哦. 3.底部导航栏设计,如果出现了头部的导航,建议底部导航不要再超链接,因为重复的超链接对我们没有权重累积,反而会被误认为是作弊. 4.这里说的是如果您的网站要增加友情链接的栏目,建议做在紧靠近body的部分.那么数序应该是所说的 4.1.2.3

网站分析:设计响应式导航菜单的五大法则

中介交易 SEO诊断 淘宝客 云主机 技术大厅 摘要:本文把目光聚集在更具挑战性的响应式Web设计:响应式导航菜单设计,这里提供了五大法则,让你无论在大屏幕还是小屏幕上都能轻松高效地设计响应式导航菜单. 响应式Web设计(Responsive Web design)的理念是,页面的设计与开发应当根据用户行为以及设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相应的响应和调整.响应式设计允许你在不同的平台上,创建独一无二的用户体验,与此同时,只要最少的维护工作. 已经有不少文章涉及响应式设计,这些文