网站的导航就如同网站的一个风向标,多用户在网站上想去某个页面就要通过导航选单。如果导航选单设计的不合理或者结构有误,那么一个网站的整体结构就是散乱的,没有逻辑和多用户体验可言的。如果想让网站拥有优秀的多用户体验,良好的转化率,可观的销售额,您需要花费相当的时间去了解您的多用户需求,精心设计网站的内容,寻求可靠而直观有效的内容组织体系,而这些东西的外化体现,就是网站的导航设计。本文以上海 WooCommerce 官网制作为例,来谈谈如何设计网站导航更高效?
什么是导航?
许多人对于网站导航设计的认知并不统一。有人认为,构成网站导航的是网页中的焦点元素,它们让多用户清晰直观地找到他们想要的东西。同样的,还有人认为导航设计是一种方法,引导多用户去寻找网站上最重要的信息,以达到销售或者查询等目的。这些说法都没问题,它们都是导航设计的一部分。
和设计领域的许多东西一样,导航设计并没有一个统一一致的 “官方” 的设计方法,或者说法,每个网站由于其目标、需求、设计手法、 woocommerce 运营等诸多因素导致它们在导航设计上千差万别,但是在最基本的设计思路和组织结构上,导航设计还是有基本的规律和原则,确保组织架构可靠,降低失败的机率。
1 、首先确定信息架构
规划一个大型网站,规划好内容是进行导航设计之前的第一要务。而我们此处所说的信息架构(IA,Information Architecture),是合理的组织信息的展现形式,支撑起网站内容的骨架。信息架构的主要任务是为信息与多用户认知之间构建一座畅通的桥梁。
从更高的位置来看待网站内容有助于信息架构的搭建。更重要的是,您得学会从多用户的角度来看待网站内容。这也就意味著,有的时候您得站在正反两个位置来看待同一个东西,不同视角下您会发现有的内容的呈现方式非常反人类。您可以通过下面的问题来完善整个架构:
·哪些页面是这个网站必不可少的?
·从巨集观架构上来看是否每个页面都有其独立的目的,它们的存在是否影响整体的连续性和可靠性?
·有哪些内容是需要在将来持续提供并更新的?
·网站所需要涉及到的多用户群有哪些?(登入多用户、订阅多用户、广告商等等)
·针对每种多用户,网站所要达成的目标是什么?
思考这些问题能够帮助您更好的完善网站的信息架构,为导航设计做好准备。
2 、保持简单
绝大多数的网站浏览者可能会一致的认同这一点:网站的导航区域要尽可能设计的简单。的确,复杂而拥挤的导航栏设计会严重阻碍网站的整体可用性。
然而,简单的设计还是具有欺骗性的。多用户在随后的操作中会发现复杂的信息被以一种看起来简单的方式包装了起来。这就是信息架构的作用。
以微软的首页为例,网站的导航栏被划分成四个专案,考虑到微软庞大的产品线,这几乎已经被简化到了极致。也正是因此,每个专案的下拉选单都被巧妙地分割成为几段,这样一来,导航的层级就清晰了,多用户可以更快地找到他们想要的东西,而微软也可以将复杂多样的产品和服务,整合到一个看似简单的导航栏里面。
类似迷您站的子页面中,导航栏也沿用了相同的设计。选单的设置乍一看和首页很相似,实际上设计者加入了更多细节,更有针对性的功能和服务。
总的来说,这样的导航栏设计更加易用了,在保持一致的前提下,也具备更好的预测性。考虑到微软的产品体量,产品所需的页面数,微软 WooCommerce 官网的设计很明显是耗费了大量时间迭代开发的产物,殊为不易。 WooCommerce 官网在这样的组织架构之下,不仅让多用户的体验更好了,而且对于微软而言也更加便于管理内容。这不仅保持简单,也简化了复杂。
3 、谨慎选择方向
传统意义上的电脑屏幕方向是横向的,这也使得纵向下拉选单,在很长的一段时间里面成为了导航栏设计的主流方向。这样的设计,平衡且少干扰,从设计的角度上来看是不错的选择。
作为虚拟现实装置制造商的 Oculus,将导航设计成为横向的非常符合他们的装置的自然逻辑。
但是横向的导航并不一定符合所有的网站的需求,这也是为什么您会看到那么多纵向导航的网站,尤其是在 WooCommerce 跨境电商领域。彩色的标签被用来标识不同的品类,纵向的导航设计,与现实世界中的导购图册暗合。这样的导航符合多品类,多内容的信息架构,横向导航用在此处会因为品类和文字内容而产生混乱。
一个良好的垂直方向的导航,要设计好并非易事,尤其是当您的网站内容非常多的时候。 Jack Jones 的网站是一个很好的学习物件。
网站导航中的小图示拥有不错的可读性,简单的形状包含了可观的信息,整齐而有力。每点选一个类别,选单展开,显示子类,逻辑清晰。
规则正在改变
新工艺新技术的不断涌现,使得新的设计趋势和新的挑战源源不断呈现在我们面前。响应式 WooCommerce 独立站网页设计使得桌面上传统的横向导航在移动端呈现的时候,更多是以纵向导航的形式表现出来。导航的设计不再被固定的方案所束缚,多种多样的表现手法都可以产生不俗的效果。但是,设计和测试的迭代方法,最好还是围绕著网站转化率和统计资料来进行。如果您有更多关于 WordPress 网站设计/开发、印刷服务、品牌设计、营销推广、 WordPress APP/WordPress 微信开发、资料业务等相关需求,请登入跨飞独立站 WooCommerce 官网咨询。
作为驱动网站发展的引擎,导航设计的好坏是可预计的,精心布置又简单一致的。