应该如何制作响应式导航菜单的五大设计法则(二)

日期:2015-11-19 09:09:08

在上节易迅网络给大家介绍了两种,今天给大家讲解另外三大法则。
三.给导航菜单换换位置
使用下拉菜单来组织复杂内容是一个非常方便和流行的方式。通常,复杂的网站甚至会使用多层次的下拉菜单。在较小的屏幕上,不仅如此,在依赖触摸反应的设备上,下拉菜单要慎用。这里没有悬浮效果,屏幕资源可能非常有限。下面介绍两个案例网站,它们以一种非常实用的方式、成功地在移动网站上使用下拉菜单。
1.坚持使用大家都在用的结构

记住:悬浮***在移动设备上是不工作的。
Microsoft的新网站就是一个典型的例子,如何在小的移动设备上安排复杂的内容。默认情况下,导航菜单根本就不显示,只有当触摸到右上角指定的小图标时,***个内容层才会打开。当触摸到其中一个栏目时,第二个内容层才会逐渐展开,给用户一个非常清晰明了的内容导航。
2.提供清晰和友好的手指操作连接

确保连接是足够大的,以保证不精确的手指大小。
Starbucks网站也是一个成功漂亮的例子,如何在移动设备上高效使用下拉菜单。同样,默认情况下菜单是隐藏在小图标后边的。这样就不会影响其他内容界面。一旦用户需要使用导航来链接网站,他们只需轻轻点击那个小图标,菜单就会打开。要保证不同条目的连接区域是足够大来保证手指触摸面积。一旦某条被选中,菜单即会自动消失。
四.给导航菜单换换位置
另一种使让你的导航菜单适应小屏幕的方式是使用熟悉的结构。你需要确保用这样的方式不被用户混淆,但它可能是适应不同设备的***的方式。1.分布导航网站

有序地提供内容,不要同时显示全部。
Boston Globe网站提供了大量的信息。不仅***个内容层,甚至第二个内容层也包含许多条目。他们的解决方案是尽可能简单地在移动设备上导航用户,所以把导航拆分成两个内容层显示。当用户在***层选中某个条目后,会进入相应网站,然后在这个新网站上面会有新的下拉菜单内容,这些内容是对第二层的详细分类。
2.首先欢迎您的访客

把导航菜单放在网站底部,迫使你的访客先浏览完网站后再决定下一步的走向。
Brickartist.com是一个非常有趣的例子,如何在移动设备上重新布局网站的导航菜单。在桌面版中,有一个非常清晰和突出的导航菜单。然而,在小屏幕的移动设备上,导航菜单被移到网站的底部。这样,访客不得不先看头部和中间内容,然后再决定点击哪个菜单。
五.放弃导航菜单
你也可以***放弃导航菜单。当然,这仅仅是个选择,如果你的网站内容不那么复杂并且访客可以轻松找到相关内容。
1.引导访客
如果内容简单明确,你可能不需要导航菜单。
当用户访问桌面版的Happy Cog网站时,用户有两种访问方式,一个是从导航菜单中选择一个分类进行访问,另外一个是向下滚动来逐步查看不同的内容。在移动设备上,用户只能使用第二种方式。然后针对每个内容分类,再提供更详细的连接。
2.视觉***

使用视觉效果来让用户找到他们的访问方式。
Mobile Web Best Practices的桌面版也显示了一个非常清晰明了的导航菜单。每个分类除了有相应的名称外,还会配上特定的图标。此外,在文本下面会有更清晰的分类图标。在移动设备上,顶部的文字菜单会消失,用户通过使用大的图标来对网站进行导航。该网站使用了两种不同风格的导航,尽管如此,分类清晰、风格与图标相一致,给用户带来了***的视觉效果。


上一篇文章:
下一篇文章: