移动网页设计：导航的正确位置

智能手机的移动网页布局设计一次又一次地给设计者提出了挑战。设备上可用的小空间必须以有意义的方式使用——主要用于内容。因此，最好导航完全不占用空间，同时仍然容易和直观地找到。下面的示例向您展示了在移动网页设计中将导航放置在何处的建议。

经典：带有汉堡图标的滑动导航

关于汉堡图标的使用进行了广泛的讨论。我们的总编辑也不是粉丝。可用性专家喜欢批评导航是完全隐藏的，并且只通过图标显示。通过这种方式，甚至基本的导航元素也被放置在viewport之外。

路

尽管如此，汉堡图标已经确立了自己作为移动网页设计的标准，尤其是结合了滑动导航。这里，大多数时候，图标放在左上角，导航滑向右边，进入viewport。

甚至Google的设计也使用这个版本的导航。到目前为止，它已经非常普及，使用起来已经不那么出色了。但是，您可以确保每个访问您的网站的访问者都会找到导航。你不能错用这个经典，因为虽然它可能是次等的，每个人都知道了。

“More”按钮的灵活导航

那些不想把整个导航隐藏在viewport之外的人肯定会享受下面的导航。这是一个经典的水平导航，菜单项按优先级排序——不管怎样，它应该是这样。第一个菜单项是最重要的。其他项目按重要性递减。

路

由于，尤其是对于广泛的网站，不可能所有的菜单项都适合导航，所以您只需隐藏所有不适合的内容，并在导航的末尾添加一个“更多”按钮。其后，有一个下拉菜单，包含导航的所有剩余链接。

优点是不隐藏整个导航。所有合适的东西都显示出来。通常，所有最重要的菜单项都会显示。这种灵活的导航混合了完全可见和完全隐藏。

文本-图标组合导航

向导航的单个菜单项添加有意义的图标是一种流行的设计方法。多亏了大量的免费图标字体和集合，您将找到适合任何东西的符号。

路

如果您的导航不那么广泛，那么在移动视图中将图标留给自己就可以了，放弃菜单文本。但是，您应该确保每个符号都有足够的空间，并且要非常清楚地说明它代表什么。

如果您的图标甚至有点模糊，或者无法理解，则不应该采用这种方法。

全屏导航

由于导航是网站的重要组成部分，所以很多人都投入了大量的精力来设计和动画。即使导航只能通过汉堡图标访问，也不必谨慎。

路

因此，许多网页设计者给他们的导航整个显示，而不是一个简单的幻灯片菜单。有了这些全屏显示，菜单项往往显示复杂的动画，或以其他方式隐藏的。

单个菜单项通常以大文本显示。根据屏幕大小，还会显示到社交网络或联系方式的额外链接。

所以，如果你厌倦了经典的幻灯片导航，你可以尝试一个全屏的菜单项目。在这里，唯一限制你的创造力的是显示器的大小。

没有导航条也好

在重新考虑将导航放置在何处之前，一些设计人员直接完全牺牲了导航。

路

这也是一个有吸引力的方法，虽然它不适用于每个网站。例如，您可以通过滑动手势来访问各个页面，而不是传统的菜单。或者您可以将整个登陆页面转换为导航页面。这允许您为链接配备有意义的标题、图像和图标。

当然，这对于复杂、广泛的网站来说并不适用。通常，导航不仅对于到达单个页面至关重要。它也是一种定位方法，向用户显示他现在所在的位置。

结论

毫无疑问，汉堡图标和滑入式导航在导航中是真正的经典。然而，还有很多其他的变体。始终考虑菜单项的数量以及网站的复杂性是很重要的。

顺便说一下，没有理由不去寻找一种完全不同的方法来实现导航的设计和功能。