大家好，我是Clippp。今天的文章是“导航”设计。如何在顶部导航和侧面导航之间做出合理的选择？两种不同的设计方式可以带来完全不同的体验效果。

我们先了解一下项目的背景。Conduiraonline是一个在线教育平台，为准备考试的用户提供有用的工具和资源。这个平台目前有一个侧面导航栏，有11个选项。

后来由于平台的变化，主要导航选项减少为三个——主页、实习和课程。导航数量减少，团队面临新的问题：是保持侧导航的设计风格，还是切换到顶部导航的风格？

为了做出最合理的选择，我们需要回答三个基本问题。

飞行员飞行有多少种选择？

选择导航时回答这个问题很重要。这里介绍的一个有趣的交互概念叫做视觉固定：注意力总是在同一个地方。

在顶部导航中，视觉定点通常只适用于一个选项。但是，侧面导航上的单个视觉固定点可以同时容纳两个选项。

结果很明显。与顶部导航相比，用户可以在一次视觉观察中查看和感知侧面导航上更多的菜单选项。当然，顶部导航也有自己的优势，赋予每个菜单项自己的权重，而不是让它们的重要性被其他选项分散。

对于有过滤选项或二级菜单的电商网站，视觉固定的概念起着非常重要的作用。因为在这些情况下，我们希望用户可以在单个视觉点上选择尽可能多的。

提示：这里的选择只看界面上有多少选项。如果主导航不超过5个菜单项，只需要使用顶部导航，可以更好地掌控用户在整个平台上的体验旅程。

主导航和选项优先级是什么关系？

用户在浏览网页或应用时会有各种浏览顺序，其中之一就是“F模式”。看起来是这样的：

f型布局的特点是集中在页面的顶部和左侧：

用户首先以水平移动的方式浏览内容区域，这条移动线构成f型布局的顶栏；

接下来，用户扫描页面左侧的垂直线，进行第二次水平浏览。随着路径变得越来越长，每次读取覆盖的区域越来越短，构成了f型布局下方的部分；

最后，用户通过垂直移动浏览整个页面的内容。

这种模式的含义是，同一页上的第一行文本比后面的几行文本受到更多的关注；每一行文字左边的几个字比下面的字更容易让人接受。

因此，顶部导航中最左边的选项比其他选项具有更大的视觉权重，因为它位于主视觉区域，并且具有更高的优先级。

侧面导航采用垂直移动，是用户浏览网页的自然方向，但选项的优先级是一个限制。当选项的优先级相同时，可以使用侧面导航，这样用户就可以完整地浏览列表，确定什么对他们来说是重要的。

是否考虑使用二次导航？

如果是这样的话，我们可以考虑使用以下两种设计风格：水平导航——，在页面顶部设置一个主导航，在主导航下方设置二级导航，进一步区分内容。

摘要

顶部导航和侧面导航的选择，其实取决于以上三个基本问题。

此外，由于当前设备的屏幕尺寸更大，许多设计趋势转向侧面导航，因为它看起来更干净，并优化了更多的屏幕空间。最后，导航的选择归结为两点：

主导航中包含的选项数量；

您是希望用户根据优先级浏览项目，还是根据自己的喜好直观地浏览和选择项目。

来源：微信官方账号：剪辑设计剪辑(ID:ClipppDesign)