智能(néng)手机的移动网页设计布局反复挑战设计师。 设备上的可(kě)用(yòng)空间必须以有(yǒu)意义的方式使用(yòng)-主要用(yòng)于内容。 因此，最好在不占用(yòng)空间的情况下进行导航，同时仍然易于查找。 今天提供有(yǒu)关在移动Web设计中放置导航的建议。

1.经典：带有(yǒu)汉堡图标的滑入式导航

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

  2.带有(yǒu)“更多(duō)”按钮的灵活导航

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

  3.文(wén)字图标组合导航

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

  4.全屏导航

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