找到一个适用于所有设备的实用移动导航是响应式网页设计中最困难的挑战之一。在网站桌面版本上效果最好的导航肯定不是移动设备上网站的最佳选择。以下是我在确定网站最佳移动导航之前问自己的一些问题。
导航应该在什么时候从桌面切换到移动设备？
网站有多大？我要处理多少个页面和子页面？
如果导航隐藏在图标下，用户是否能够知道如何找到它？
是否可以删除导航区域中的内容或链接以改善导航？或者应该添加任何内容或链接？例如：搜索表单、电话号码等。
一旦我回答了这些问题，我就可以确定哪种移动导航适合网站。幸运的是，对于移动导航，根据网站的大小、您正在处理的页面数量以及您试图接触的受众，可以采取一些好的方法。以下是一些有用的想法、趋势和对上述问题的回答，供您在构建移动导航时考虑。
让我们先回答我的第一个问题：导航应该在什么时候从桌面 玻利维亚 whatsapp 数据 切换到移动？对我来说，这是最容易回答的问题之一。我希望我的桌面和更大的平板电脑网站非常相似。所以我倾向于为这些 768 像素或更大的设备保留相同的导航布局。这些尺寸也足够大，可以处理大部分内容，所以在这里并不总是需要疯狂地使用响应式 CSS。但是一旦我达到 767 像素的媒体查询，就该切换到移动导航了。这通常会影响您的小型平板电脑、平板手机和移动电话。
从台式电脑到平板电脑再到手机的移动导航
我的下一个问题是：网站有多大？我要处理多少页面和子页面？这也是一个相当容易回答的问题。只需查看您正在处理的页面数量。对我来说，当我只处理几个页面时，我倾向于使用已重新对齐和调整大小的菜单作为文本。但如果网站有很多页面和子页面，那么我通常会将导航隐藏在图标下。最常见的图标是汉堡菜单图标，三条实线。但众所周知，苹果也使用两条实线来表示隐藏菜单，还有其他一些选择。例如箭头或“菜单”作为文本。
重新调整移动导航并调整其大小
最后一个话题也引出了我的第三个问题：如果导航隐藏在图标下，用户是否能够弄清楚如何找到它？这就是为什么我在上面使用汉堡包图标作为示例的原因，因为它已成为网站和应用程序设计中表示隐藏菜单的主要内容。我倾向于在这个话题上与大众保持一致，因为你不希望有人在你的主页上迷路而无处可去。但如果你担心这种情况发生，你可以随时使用放在汉堡包图标旁边的单词“菜单”。或者你甚至可以单独使用“菜单”这个词。
热门移动菜单图标样式
我的最后一组问题比较大：是否可以删除导航区域中的任何内容或链接以改善导航？还是应该添加任何内容或链接？例如：搜索表单、电话号码等。有时，简化移动端的导航很重要。您不想让太多信息淹没整个屏幕。因此，隐藏不必要的页面是很常见的。但添加搜索表单、电话号码或其他页面链接也很常见。因此，您确实需要根据具体情况确定这些。如果删除页面以简化是最佳方向，或者您的网站的站点地图很小，那么我会选择切换/向下滑动菜单。切换/向下滑动菜单会将您的页面内容向下推，以显示内容上方但页面标题下方的菜单链接。全屏或部分屏幕菜单覆盖也是一个不错的选择。这通常是放置在屏幕 60% 或更多的彩色背景上。
如果您希望添加导航，那么我肯定会选择右侧或左侧的切换/推送菜单。切换/推送菜单将内容推到右侧或左侧，并将导航显示在内容的一侧。这两种选择对于包含大量页面和子页面的网站都非常有用。
切换滑动推送响应菜单
响应式菜单示例
下面您将看到来自我们最喜欢的一些公司的实例。希望这些示例能帮助您确定未来网站的最佳导航。
重新对齐和调整大小 移动导航的一个简单方法是重新对齐和调整页面链接的大小。这可以通过使用媒体查询和 CSS 来实现，以使菜单适合不同的媒体和设备尺寸。