很多人对网站导航设计的理解并不统一。有人认为,导航是网页中的焦点元素,帮助用户清晰直观地找到想要的内容。也有人认为,导航是一种方法,引导用户发现网站上最重要的信息,从而实现销售或查询等目的。这些说法都没问题,它们都属于导航设计的一部分。
和设计领域的许多事物一样,导航设计并没有一个统一的“官方”方法。每个网站由于目标、需求、设计手法、运营方式的不同,导航设计也千差万别。不过,在基本的设计思路和组织结构上,导航设计还是有规律和原则可循的,遵循这些原则可以确保架构可靠,降低失败的概率。
1. 首先确定信息架构
规划一个大型网站,梳理好内容是进行导航设计之前的第一要务。这里所说的信息架构,是指合理组织信息的展现形式,搭建起网站内容的骨架。信息架构的核心任务,是在信息与用户认知之间构建一座畅通的桥梁。
从更高的角度看待网站内容,有助于搭建信息架构。更重要的是,要学会从用户的角度来看待网站内容。这也就意味着,有时候你需要站在正反两个位置来审视同一个东西,不同视角下你可能会发现某些内容的呈现方式非常反人类。你可以通过以下几个问题来完善整个架构:
哪些页面是这个网站必不可少的?
从宏观架构来看,每个页面是否有其独立的目的?它们的存在是否影响整体的连续性和可靠性?
有哪些内容需要在将来持续提供并更新?
网站涉及的用户群有哪些?(如登录用户、订阅用户、广告商等)
针对每种用户,网站需要达成的目标是什么?
思考这些问题,能够帮助你更好地完善网站的信息架构,为导航设计做好准备。
2. 保持简单
绝大多数网站浏览者都会认同一点:网站的导航区域要尽可能设计得简单。复杂而拥挤的导航栏会严重阻碍网站的整体可用性。
然而,简单的设计有时具有欺骗性。用户在操作中会发现,复杂的信息被以一种看起来简单的方式包装了起来——这正是信息架构的作用。
以微软的首页为例,网站的导航栏被划分成四个项目。考虑到微软庞大的产品线,这几乎已经简化到了极致。也正是因此,每个项目的下拉菜单都被巧妙地分割成若干段,导航的层级变得清晰,用户可以更快地找到想要的内容,而微软也能将复杂多样的产品和服务整合到一个看似简单的导航栏中。
在类似迷你站的子页面中,导航栏也沿用了相同的设计。菜单的设置乍一看和首页很相似,实际上设计者加入了更多细节和更有针对性的功能与服务。这样的导航栏设计更加易用,在保持一致性的前提下,也具备了更好的可预测性。考虑到微软的产品体量和所需页面数量,其官网的设计显然是耗费了大量时间迭代开发的成果。在这样的组织架构下,不仅用户体验更好,对微软而言也更加便于内容管理。既保持了简洁,又简化了复杂。
3. 谨慎选择方向
传统意义上电脑屏幕的方向是横向的,这也使得纵向下拉菜单在很长一段时间里成为导航栏设计的主流方向。这种设计平衡且干扰少,从设计角度来看是不错的选择。
虚拟现实设备制造商Oculus将导航设计成横向的,非常符合其设备的自然逻辑。
但横向导航并不一定适合所有网站的需求,这也是为什么你会看到很多纵向导航的网站,尤其是在电商领域。彩色的标签被用来标识不同的品类,纵向导航与现实世界中的导购图册不谋而合。这种导航适合多品类、多内容的信息架构,横向导航在这种情况下容易因品类和文字内容过多而产生混乱。
设计一个良好的垂直导航并非易事,尤其是当网站内容非常多的时候。Jack Jones的网站是一个值得学习的好例子。其导航中的小图标拥有不错的可读性,简单的形状包含了可观的信息,整齐而有力。每点击一个类别,菜单展开显示子类,逻辑清晰。
此外,你还可以在Squarepusher的网站上看到相对不同寻常的纵向菜单设计。导航被设计成标签页,访客可以通过滚动切换,这是一种更为线性的导航栏设计。