让你的移动网站设计更受人欢迎

智能手机的移动网页设计布局反复挑战设计师。 设备上的可用空间必须以有意义的方式使用-主要用于内容。 因此，最好在不占用空间的情况下进行导航，同时仍然易于查找。 在本期中，睿思网站设计公司将提供有关在移动Web设计中放置导航的建议。

1.经典：带有汉堡图标的滑入式导航

  关于使用汉堡包图标的讨论很多。 我们的总编辑也不是粉丝。 可用性专家喜欢批评导航是完全隐藏的，只能通过图标显示。 这样，即使是必要的导航元素也可以放置在视口之外。 尽管如此，“汉堡包”图标已成为移动Web设计的标准，特别是与滑入式导航结合使用时。 在大多数情况下，此图标位于左上角，导航会向右滑动到视口中。 甚至Google的Material Design也使用此版本的导航。 到目前为止，它是如此广泛，以至于不再适合使用。 但是您可以确保您网站的每个访问者都能找到导航。 您可以选择此经典产品，因为尽管它可能不符合预期，但现在大家都知道了。

  2.带有“更多”按钮的灵活导航

  那些不想从视口中隐藏整个导航的人一定会喜欢以下导航。 这是经典的水平导航，菜单项按优先级排序，无论如何应该如此。 第一个菜单项是最重要的。 其他项目按降序列出。 因为尤其是在大型网站中，不可能所有菜单项都适合导航，因此您只需要隐藏所有不合适的内容，然后在导航末尾添加“更多”按钮即可。 这之后是一个包含所有其余导航链接的下拉菜单。 优点是不会隐藏整个导航。 将显示所有合适的内容。 通常，将显示所有最重要的菜单项。 这种灵活的导航是完全可见和完全隐藏的结合。

  3.文字图标组合导航

  将有意义的图标添加到单个菜单项以进行导航是一种流行的设计方法。 借助大量免费的图标字体和字体集，您几乎可以找到适合您的符号。 如果导航的范围不那么广，则可以在不使用菜单文本的情况下将图标保留在移动视图中。 但是，您应该确保每个符号都有足够的空间，并清楚地表明其代表的含义。 如果您的图标甚至有点模棱两可或难以理解，请不要使用此方法。

  4.全屏导航

  由于导航是网站的重要组成部分，因此许多人在网站的设计和动画制作上投入了大量精力。 即使只能通过汉堡包图标访问导航，也请不要小心。 因此，许多网页设计师在整个显示器中显示导航，而不是简单地滑入菜单。 由于这些全屏外观，菜单项倾向于以复杂的动画显示或以其他方式隐藏。 各个菜单项通常以大文本显示。 根据屏幕的大小，还会显示指向社交网络的其他链接或联系表。 因此，如果您不喜欢经典的滑入式导航，则可以尝试使用多种菜单项进行全屏导航。 在这里，对您的创造力的唯一限制是显示尺寸。

以上是睿思为您组织的四种导航类型，以使您的移动网页设计更加流行。 汉堡包图标和滑入式导航是导航的真正经典之作。 但是还有许多其他变体。 必须始终考虑菜单项的数量和网站的复杂性，这一点很重要。