四个步骤实现层级清晰的导航栏

Posted 2022-12-15 OneAPM官方技术

【编者按】本文作者为 Wes McDowell，主要介绍通过四个步骤实现层级清晰的导航栏，进而提高网站的转化率。文章系国内 ITOM 管理平台 OneAPM 编译呈现。

精心规划的导航策略可以成就一个网站，反之，则可能毁了一个。规划得好，网站访客就会顺着你安排的路径走下去，要么购买你的商品、成为你的潜在客户，要么填完网站咨询表单。

规划得不好，访客们就会在网站上随意游荡。他们有可能达成你的目的，也可能不会。何必冒险呢？

出色的用户体验是不应该如此随意地对待客户转化问题的——我们应当手把手地指导用户，给出能吸引他们注意的、明确的提示。这样，他们才能找到自己想找的东西，同时你也能获得自己想要的东西——客户转化。

在本文中，笔者将向你介绍一个简单的、提升转化率的策略，它适用于所有网站。

只要使用得当，你交付的网站不仅美观大方，还能帮客户实现他们的商业目标。

也就是说，你是他们的大英雄。

第一步：着陆页策略

我们知道对2016年的网络营销来说，每个网站都应当配有着陆页，这是转化策略的一部分。如果你打算重新设计你的网站，这一步并不要求你删掉已有的页面，而是增加一些内容。

你需要建立一个信息齐全的页面，这个页面应当囊括了刺激转化所需的所有内容。着陆页的数量不定，取决于具体的业务和目标。为了简便，我们用私人作品网站为例。

假设你提供网页设计和商标设计两种服务，那么在你的作品网站上，除了简单的作品集页面，还应当建立两个全新的着陆页——每一个着陆页对应一种业务。在各个着陆页上，你可以放上重点作品、有说服力的销售文案、服务特点列表、客户推荐信、以及清晰的行为召唤（CTA）按钮。

着陆页存在的原因是：客户无需在不同页面之间来回切换，而可以在一个页面上看到所有信息。如此一来，你的销售漏斗将更加成功，同时，因为省去了切换环节，客户也不会再半途放弃。

第二步：重点放在可以“生利”的页面

除了着陆页以外，是否还需要一些别的页面来刺激转化？例如一个专门放客户推荐信的页面？或者是其他服务项目的介绍？

如果你觉得需要的话，那么你有以下几种选择：

相关链接

在着陆页的正文中插入链接，可以有效地引导客户走向预设的方向。假设你的着陆页上有一些案例分析，那么可以在案例的下方加入相关链接，引导客户前往查看更多案例。

精简的标题导航栏

另一个方案是，做一个精简的标题导航栏，指向两三个最常用的页面。还是以作品网站为例，你可以把那两个着陆页都放到标题导航栏里，这样访客就可以在不同服务之间来回切换。

理想状态下，标题栏应当是“静止的”，即使用户滚动页面，标题栏仍会保持原位。

第三步：弱化其它内容

你听说过“选择疲劳”吗？它的意思是，当人们面临太多选择时，往往更不可能采取任何行动。有个著名的果酱试验阐释了这一概念。

研究人员在一家食品店的小货架上放了五种果酱。路过的人们会停下来看一眼，其中大部分人会购买一种果酱。之后，研究人员不断增加果酱的品种，直至三十种之多。人们还是会停下看看，折服于如此之多的选择，然后就走开了。

我们不想这种情况出现在网站上。如果导航栏有太多的选择，访客们就没有一条清晰的路径，于是干脆离开。我们可以这样解决这个问题：

所有其它页面的链接都不应出现在主要选项中。 我们可以把它们放在次级导航中。

你可以随意处理次级导航。既可以把它们放在不那么重要的位置，（例如页脚上方，）或者把它们放在一个会自动隐藏的侧边栏菜单中，访客可以点击菜单按钮来访问。

是的，我知道这个问题是用户体验专家们争论的焦点。有很多人非常讨厌隐藏式导航，认为它为用户的使用创造了一个障碍。但是请记住：你的着陆页以及主要的导航项，应当足以刺激转化了。次级页面只是为那些想要寻找它们的访客而准备的。

消除了那些不重要的选项，（或者至少弱化了它们），访客们将会拥有一条更为清晰的路径。从任何角度来说，这都是不错的用户体验。

第四步：设置你的CTA（行为召唤）按钮

清晰、明确的CTA代表着网站的所有目的。

还是以作品网站为例，假设你的最终目标是让潜在客户填写一份表格，定下一个咨询时间。一旦想清楚了这一点，你一定会想把这个链接放在最显眼的地方。

除了放在着陆页的正文位置，笔者建议还可以在标题导航栏再放一个。

但是，为了使它有别于其他导航选项，你可以把它做成一个按钮。这样更具视觉冲击。如果它的颜色是亮丽的流行色系，那突出效果将更佳。

整体效果

一旦完成了上述步骤，你就完成了层次清晰的导航设计，你的导航就会变得非常有层级：

1. 最重要的：CTA按钮

2. 第二重要的：主导航栏选项

3. 不太重要的：隐藏的或弱化的次级导航选项

一旦建立了这样的层级关系，由于突出了CTA，并且辅以其他的主要导航选项，网站的转化率将会全面提升。

其他的那些对于转化帮助不大的元素都可以隐藏起来，以免访客分心。

总结

作为一名网页设计师，我们的首要任务就是帮助客户最大化他们的营销工具——网站——可能带来的优势。当我们的网站拥有一条明晰的路径，直通更高的转化率，就能够促成客户的成功。这种附加价值往往会让我们从其他设计师中脱颖而出，进而找到更优质、愿意投入更多经费的客户。

网站的美观固然重要，但毕竟，能带来更高的转化率，才是决胜的大必杀。

本文系 OneAPM 工程师编译整理。OneAPM Browser Insight 是一个基于真实用户的 Web 前端性能监控平台，能帮助大家定位网站性能瓶颈，实现网站加速效果可视化；支持浏览器、微信、App 浏览 html 和 HTML5 页面。想阅读更多技术文章，请访问 OneAPM 官方技术博客。

本文转自 OneAPM 官方博客

原文地址：https://www.sitepoint.com/how-to-boost-conversions-with-prioritized-navigation/