Navigation menu

0755-8219-8877
  • Contact us
  • 0755-8219 8877
  • 深圳市罗湖区人民南路国际商业大厦20楼(地铁1号线国贸站E出口既是)

    szniego@126.com


    © 2007-2020 All Rights Reserved.
  • 策略型高端网站设计公司

    Strategic advanced website design company

    View More
  • 拥有这些导航将会让你的移动网页设计更受人欢迎

    时间:2020-06-06  作者:Angle  来源:尼高品牌网络

    智能手机的移动网页设计的布局一次又一次地对设计师提出了挑战。设备上的可用空间必须以有意义的方式使用—主要用于内容。因此最好是导航根本不占用空间,同时仍然易于查找。本期尼高网站设计公司Angle将为大家提供了将导航放置在移动网页设计中的位置的建议。


    移动网页设计


    1、经典:带有汉堡图标的滑入式导航
    关于使用汉堡包图标进行了广泛的讨论。我们的总编辑也不是粉丝。可用性专家喜欢批评导航被完全隐藏,并且仅通过图标显示。这样即使必要的导航元素也可以放置在视口之外。尽管如此,汉堡图标已经确立了自己在移动网页设计中的标准,尤其是与滑入式导航结合使用时。在大多数情况下,此图标位于左上角,而导航则向右滑动到视口中。甚至Google的Material Design也使用此版本的导航。到现在为止,它是如此的广泛以至于使用起来不再是非常出色了。但是你可以确保你网站的每个访问者都能找到导航。你可以选择这款经典的产品,因为尽管它可能不如预期,但大家现在都知道。


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


    3、文本图标组合导航
    将有意义的图标添加到导航的单个菜单项是一种流行的设计方法。借助大量的免费图标字体和字体集,你几乎可以找到适合自己的符号。如果你的导航范围不是那么广泛,则可以将图标留在移动视图上,而无需使用菜单文本。但是你应该确保每个符号都有足够的空间,并清楚地表示它所代表的含义。如果你的图标甚至有点含糊不清或难以理解,则不要采用这种方法。


    4、全屏导航

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


    以上就是Angle为大家整理的四中类型导航可以让你的移动网页设计更受人欢迎,汉堡图标和滑入式导航是导航中真正的经典之作。但是还有很多其他变体。必须始终考虑菜单项的数量以及网站的复杂性,这一点很重要。


    相关案例

    OTHER CASE