设计网站导航就像为房屋打下基础。无论基础的外观多么好,未能正确地计划基础都可能使建筑物面临倒塌的风险。如果您想从网站获得的最佳销售或转化中受益,则需要花时间计划受众如何与您的内容进行互动,并找出最直观的组织和表示方式。
永远记住,如果您误解了这一部分,就有可能疏远很大一部分受众。
什么是导航?
浏览导航有多种方法。您可以说这是您网站上的焦点元素,它使您的客户可以找到他们想要的东西而不会感到困惑或不必要的点击。同样,您可能会争辩说,这是一种将客户轻轻地引导到您网站上最重要的信息以产生销售或查询的方法。
两者都有。
导航设计与设计中的许多其他事情一样:没有公认的“正确方法”来做。每个网站都有自己的挑战,可以通过多种方式来应对。好消息是,有一些思考和组织内容的方法可以最大程度地减少失败的风险。
70percentpure的站点具有垂直和水平导航功能。
1)首先确定您的IA
规划大型网站的内容是一项基本任务,必须在设计导航之前完成。此概述(也称为IA(信息体系结构))的概述,理解和操作内容是构成网站可用性的基础。在(或代替)正确设计IA之前设计导航就像在排版页面之前创建书索引。这不是一个好主意。
在IA上工作时,具有自然观的能力会有所帮助。更重要的是,您必须能够从用户的角度看内容。有时,这意味着违背客户自己对内容进行分类的方式–因此,请做好抵抗的准备。
您可以要求自己准备一些方案,并向客户证明其合理性:
- 该网站需要哪些页面?
- 每个页面在更广泛的方案中是否都有目的,并且内容是否细分为明智的,相关的块?
- 将来添加内容时必须考虑哪些限制?
- 您与哪些用户组合作?(例如,登录/注销,订阅类型,广告客户等)
- 每种用户的主要目标是什么?
回答以上所有问题,并了解您的内容与用户之间的关系是良好导航设计的基础。
2)吻:保持简单,有时
曾经使用过网站的每个人都可以同意:导航区域应尽可能简单。让用户不知所措,而导航中却不乏文字,这是一个坏主意,它将严重阻碍您网站的整体可用性。
彭博的简单导航掩盖了其网站上信息的复杂性。
但是,简单性可能具有欺骗性。深入研究,您可能会发现实际上相当复杂的内容已经以一种简单的方式巧妙地打包了。这是IA的行动。
以微软的主页为例。考虑到他们的产品范围,他们的主导航只有四个项目,听起来还不够。但是,将下拉列表非常巧妙地分为几部分,并且以一种可以快速,轻松地找到所需内容的方式进行显示。
子页面就像迷你站点一样,遵循相同的导航格式。菜单的感觉和行为相同,但是会随着您进入站点的深入而调整以提供更多详细信息。
它易于使用,可预测且一致。考虑到他们的产品范围和网站上的页面数,这绝非易事,并且显然是许多小时反复开发的产物。不仅感觉像他们的产品之一(使访客放心),而且还以对客户和Microsoft本身都有利的方式来组织内容。
3)仔细选择方向
鉴于传统上以横向格式使用计算机屏幕,因此水平导航非常有意义。从设计的角度来看,在很多时候,它只会感觉更加平衡,更少干扰并且易于放置。
如果VR头戴设备制造商Oculus不通过水平菜单谈论其虚拟景观,那将是愚蠢的。它不仅带有一个很好的隐喻,而且还允许用户通过向下滚动页面来深入研究其内容。
但是,水平菜单并不能在每种情况下增加价值,这就是为什么您会看到很多垂直导航的原因,尤其是在电子商务中。它带有彩色标签的回声,可帮助您在物理目录中查找产品,并避免在文本和选项过多的情况下弄乱水平条。
好的垂直导航绝非易事,特别是如果您有很多产品。这就是为什么我喜欢Jack Jones的作品。
文字旁边的图标确实有助于提高可读性。简单的形状令人惊讶地具有交流性,并有助于使导航区域保持整洁。单击类别,菜单将展开以显示子选项,再次以非常容易的方式显示。
在Squarepusher的网站上可以找到垂直菜单的更多用法。在这里,导航就像标签一样,位于主要内容的侧面,用户可以轻松滚动并单击。这是一种更加线性的方法,呼应了Squarepusher轨道的顺序性质。
规则正在改变
服装网站设计上的所有事物一样,新技术,技术,设备和趋势也带来了自己的挑战和创新。响应式网页设计意味着传统的水平导航现在也变成了垂直导航(在较小的屏幕上)。视差技术会根据您在页面上的位置,使导航区域像潮水一样潮起潮落。
没有创建完美站点导航的单一方法。但是设计和测试的迭代方法(最好可以访问您网站的统计信息和转化数据)可能会产生最佳结果。
作为驱动网站的引擎,您的导航应该是可预测的,简单的,一致的且位置适当的。