快收藏！古希腊掌管网站导航的终极指南！！！（第三弹）

Hellohello，各位小伙伴们周一好哦！今天我们继续来分享一下关于网站导航设计的内容吧！今天是最后一弹啦！主要内容集中于优秀的网站导航示例展示以及网站导航的最优实践方法。感兴趣的小伙伴们不要忘记点赞分享哦~网站导航示例现在，您知道创建网站导航没有“正确”的方法。只要您的网站导航能让访问者找到他们正在寻找的信息并鼓励他们采取行动，它就是成功的。让我们看看下面一些导航栏示例 和更多可以做到这一点的示例。1.Propa BeautyPropa Beauty 有一个极简主义的水平导航栏，旨在促进销售或将访客转化为会员。其徽标位于左侧。中间是其产品存档页面的链接。右侧有三个图标，分别代表搜索框、会员登录页面链接和购物车链接。

2.NWPNWP 是另一个带有水平导航栏的电子商务网站。然而，与 Propa Beauty 不同，NWP 的导航栏是一个组合菜单。当页面加载时，您只能看到主要导航链接。但是，如果您将鼠标悬停在“商店”上，就会出现一个下拉菜单，列出您可以在网站上购买的不同服装子类别。

3.The Shade RoomShade Room 也使用了两种样式的导航菜单。在页面顶部，您会看到一个标准的水平标题。请注意，此标题右侧有一个汉堡按钮。如果您单击此按钮，右侧会出现一个辅助导航界面。它的作用类似于灯箱弹出窗口，可阻挡部分内容并使其余背景变暗，并包含更多可用于浏览网站的导航链接。

4.Patagonia为了容纳其庞大的商品目录，Patagonia 在其网站上实施了一个大型菜单。当用户将鼠标悬停在水平导航栏中的“商店”项目上时，左侧面板上会出现一个巨大的链接列表，供您浏览任何您可能想要浏览的内容。

5.Briogeo与巴塔哥尼亚一样，Briogeo.com 的网站导航以水平导航菜单为中心，根据鼠标悬停在哪个项目上，会显示不同的导航选项。主“全部购买”项目（如下图所示）显示一个大型菜单，其中包含网站范围的链接，以及用于展示其系列的图片。

6.X（原 Twitter）X具有标准导航类型之一——垂直侧边栏菜单——但略有不同。它不是简单地显示文本导航项，而是在每个项旁边都包含图标。还请注意战略性的颜色使用。主页图标突出显示，因为这是我所在的页面。导航栏中唯一的其他颜色亮点是 CTA 按钮。

7.Olivier Gillaizeau创意总监 Olivier Gillaizeau 的作品集网站有一个引人注目的垂直侧边栏菜单，可在时间轴上显示他的项目。当您将鼠标悬停在其中一个导航项目上时，会显示该项目的视频预览。点击导航项目将带您进入一个页面，其中包含有关该项目的更多信息和视觉效果。

8.Pipcorn到目前为止，我们主要讨论了导航菜单的功能，但调整样式也可以带来令人愉悦的用户体验。以 Pipcorn 的网站为例——它的水平导航显示了进一步的下拉菜单，这些下拉菜单扩展到从不同角度展示其产品线的类别。拥有多个入口点——同时保持设计的有趣和简单——绝对是一项壮举。

9.GXVE beautyGXVE beauty 网站导航的优势在于其简洁性。字体干净，设计简约，但它确实为访客提供了他们想要的一切。如果您想购买特定商品，可以点击“商店”页面并展开。然后，您可以再次展开页面，从而选择更深入的内容。

10.Paloma此网站导航是一个很好的提醒，您可以为您的网站注入适量的趣味性，只要它与您的其他品牌同步即可。当您将鼠标悬停在每个页面上时，这家创意机构会利用动画菜单讲述其品牌故事。

11.Living CorporateLiving Corporate 的网站导航因其独特性而备受好评。当您进入网站时，看不到菜单 — 但当您点击页面顶部时，菜单会展开。当您将鼠标悬停在不同页面上时，会弹出图片和视频，以及图形鼠标，我们很欣赏这个有趣的细节。

12.Lyft Lyft 的导航栏针对不同的目标用户群体，在网站上提供不同的用户体验。查看每个类别，您可以看到相应的页面都包含用户开始使用 Lyft 所需的所有信息。这种简单的设计可以根据用户需求提供更具凝聚力的体验，并且摩擦点也更少。

13.Unseen Studio 最后但同样重要的一点是，让我们深入了解是什么让 Unseen Studio 成为我们最喜欢的网站导航示例之一。菜单隐藏在右上角，当您单击它时，它会漂亮地展开。我们喜欢文本对比度、所选颜色及其与背景图像的配合方式，以及添加联系信息和社交链接。

现在我已经分享了一些我最喜欢的导航栏示例，您可以理解这些网站为何如此出色。但是，仅仅模仿这些网站的做法还不够 - 您还需要考虑一些最佳实践。网站导航最佳实践始终如一。              适合各种屏幕尺寸的设计。              让最重要的信息易于访问。              添加面包屑。网站导航的黄金法则是什么？不要让人思考。从这些网站导航示例中可以看出，导航越明显越好。遵循这些网站导航最佳实践，让用户在浏览您的网站时不会感到沮丧或困惑。1.保持一致一致性是关键，网站导航设计也不例外。这是网站导航的一项关键最佳实践，因为它可以成就或破坏用户体验。在格式化和设计导航界面时要保持一致。这一切都是为了与访问者当前的知识和期望保持一致。例如，想象一下，如果您的主页链接是黑色的，当用户将鼠标悬停在链接上时会出现下划线，访问者会有什么感觉。然后，当他们查看“联系”页面时，链接是蓝色的，没有下划线。这很令人困惑，对吧？相反，您的链接在每个网站页面上都应该具有相同的样式。否则，访问者将不知道哪些文本是超链接，哪些不在导航菜单中。

请注意，Madewell 的主导航菜单和子导航菜单具有一致的链接样式。主导航菜单中的文本（尤其是粗体和图形箭头的使用）清楚地表明了您处于哪个类别。然后，下面的菜单提供了您需要的上下文。专业提示：您的导航菜单必须便于视障人士阅读，因此请考虑使用高对比度颜色作为文本和背景。这也有助于引导其他用户按照类别或子类别浏览菜单。2.针对每种屏幕尺寸进行设计2022 年第四季度，移动设备占全球网站流量的 59% 以上，因此，无论屏幕大小，您的网站和导航针对所有屏幕进行优化变得越来越重要。而且，根据 Shopify 的数据，45% 的美国网络流量将发生在移动设备上 — 因此优先考虑移动设备至关重要。是的，这延伸到您的网站导航菜单。在设计菜单时，我们鼓励您首先考虑移动设备。从最小的屏幕尺寸开始，您必须优先考虑哪些链接最重要，应将其包含在主导航中以及按什么顺序排列。这也是优先排序的一个很好的练习。您还必须确定哪些导航功能（例如汉堡按钮）在移动设备上是必需的，以及它们如何融入您的桌面设计。这将帮助您转向针对更大屏幕尺寸进行设计，并清楚地了解哪些页面和导航功能最重要。Tips：无论是在大型桌面屏幕还是小型移动设备上浏览，网站都必须适应以提供最佳用户体验。安排菜单时请记住这一点。尝试在各种屏幕尺寸下显示菜单。确保汉堡菜单清晰可见且易于访问，并且长菜单不会占用太多空间。请记住，响应式网站设计会根据屏幕尺寸修改其布局。3. 让最重要的信息易于获取您熟悉三次点击规则吗？从本质上讲，这个概念表明，每个网站导航结构都应该使用户能够在三次点击内访问网站的任何页面并找到所需内容。尽管这一概念在网页设计领域根深蒂固，但它在很大程度上已被否定。一项研究发现，用户在点击 3 次后放弃任务的可能性并不比点击 12 次后更大。下图显示，一些用户在点击 25 次后仍继续尝试寻找他们想要的内容。

虽然这个规则可能并不准确，但它的基础教会了我们一个重要的原则。你确实希望限制访问者访问关键信息或完成网站上的任务所需的努力。计算点击次数只是一种过于肤浅的指标。因此，我们鼓励您花时间规划您的网站，建立清晰的路径，减少页面加载时间，并消除用户旅程中的其他摩擦点。了解客户需求的一个好方法是设身处地为他们着想。了解他们访问您网站的原因；例如，他们可能希望查看您的产品或服务页面以获取有关您公司的更多信息。这就是为什么在主导航上提供指向这些网站的链接至关重要。Tips：我的建议是突出“主页”、“关于我们”、“博客”、“联系方式”和“产品或服务”，但你应该看看哪种方式最适合你的具体情况。你可以使用 Google Analytics 和热图跟踪来分析结果，确定哪些方式有效，并进行必要的更改以优化用户体验和结果。4.添加面包屑导航如果你需要一个面包屑导航的例子，想想汉塞尔和格莱特的童话故事。当两人穿过树林时，孩子们会扔下面包屑，这样他们就能找到回家的路。同样，通过面包屑导航，访问者可以直观地看到他们在网站结构中的位置。然后，他们只需单击一下即可返回到其他页面。最好的一点是，它不会占用您网站的太多空间。此辅助导航栏通常由文本链接组成，这些链接由“大于”符号 (>) 分隔，并放置在标题下方。以下面的百思买 (Best Buy) 为例。如果您正在浏览 PC 笔记本电脑并意识到想要一台平板电脑，则可以使用面包屑导航返回所需的页面。您无需在搜索框中重新开始新的查询，只需单击面包屑导航菜单中的“计算机和平板电脑”链接即可。再次强调，这里的目的是减少摩擦并改善用户体验。

Tips：您还可以使用适当的搜索词和标签来帮助用户找到他们所在的位置。例如，在撰写有关食物的文章时，您可以在特定子类别下添加有关食谱的标签。例如，您可以将鸡肉皮卡塔、鸡肉馅饼和其他食谱放在鸡肉子类别下。为获得更直观的效果，您可以使用箭头或其他图形。如果网站内容很多，状态栏是一种让用户知道他们在页面上的位置的简单方法。设计您的网站导航当您设计网站导航时，您必须仔细考虑您的访问者和网站目标。请记住：屏幕另一端的人也需要浏览您的网站，而他们这样做的能力会极大地影响他们留下来的意愿。此外，搜索引擎机器人也可以从强大的网站导航设计中受益。OK啊小伙伴们，我们今天的内容暂时先到这里，明天见啦！！感兴趣的小伙伴们不要忘记点赞关注和收藏哦！我们明天见啦~

ps：有需要国区谷歌苹果无限额收款结汇的小伙伴可以在公众号Livy说结汇后台dd我！！祝大家天天开心，万事顺意！！！