网页的导航制作 第1篇
双层菜单的样式在近来的顶部栏设计中也愈发受到设计师的青睐。因为随着产品功能的不断增加与完善,渐渐出现了一些单层菜单无法解决的情况,那就是顶部栏需要展示的内容过多,而且某些特定功能不属于同一层级。为了更好的应对这类情况,设计师们创造性的使用双层菜单这种样式。
以上面的网站为例,上层的菜单有社交网络的链接(Facebook,Instagram和Twitter),企业logo,搜索框,购物车和汉堡按钮。下层的菜单有产品种类,营业网点地址,新闻,关于我们和联系我们。
在这种情况下,如果将这些信息以传统的单行菜单展示,势必会放不下,造成顶部栏的过度拥挤。
网页的导航制作 第2篇
从APP转换到小程序时,要注意调整APP的顶部导航栏的位置以及搜索框的大小,避免被Titlebar遮挡,如下图:
上图中,豌豆公主的顶部导航栏整体下移,并且减小了搜索框的高度,提高屏幕的利用率。
网页的导航制作 第3篇
顶部区域很小,导航中的内容很多,怎么办?当然要通过内容的取舍完成导航设计。
取舍意味着保留和舍弃,在交互设计中舍弃不代表不要某些内容,而是隐藏一些内容,在用户发起交互后再显示。这样的隐藏,体现了按需查看的原则,当用户需要时再展现在用户面前。
汉堡导航就是这种典型思路的导航模式。
常见的汉堡导航由三条水平线条构成,像两层面包一层肉的汉堡包,所以我们形象的称之为汉堡导航。
汉堡导航通过将一些次要的信息隐藏来节约界面的使用空间,使顶部区域更加清爽简洁,用户注意力可以更好的集中在重要的信息上。
汉堡导航在web界面导航设计中使用频繁,用户很熟悉这种导航模式,不会额外增加用户的学习成本。
汉堡导航设计时需要注意的是汉堡按钮很容易被用户忽视,所以在设计的时候要通过按钮形式的设计来适当的引导用户。也就是说,汉堡按钮设计要做到清晰展示,又不占据太大空间。
=============