网页端导航栏

作者: 冯傻大粗 | 来源:发表于2018-01-21 16:51 被阅读17次

双层菜单

双层菜单的样式在近来的顶部栏设计中也愈发受到设计师的青睐。因为现在随着产品功能的不断增加与完善,渐渐出现了一些单层菜单无法解决的情况,那就是顶部栏需要展示的内容过多,而且某些特定功能不属于同一层级。为了更好的应对这类情况,设计师们创造性的使用双层菜单这种样式。

image

以上面的网站为例,上层的菜单有社交网络的链接(Facebook,Instagram和Twitter),企业logo,搜索框,购物车和汉堡按钮。下层的菜单有产品种类,营业网点地址,新闻,关于我们和联系我们。在这种情况下,如果将这些信息以传统的单行菜单展示,势必会放不下,造成顶部栏的过度拥挤。

此外双层菜单这种设计样式很新潮,可以给用户耳目一新的感觉。

固定型顶部栏

固定顶部栏代表着另一种设计思路:无论用户进行何种操作,顶部栏对用户来说都是可见的。这类的顶部栏适用于页面内容比较多需要用户不断下拉滑动的网站。

image

这种交互模式可以很好的提升顶部栏的易用性,但是这是建立在牺牲一部分页面空间的基础上换来的,所以我们在使用的时候一定要谨慎。

极简风格

在上面我一直强调顶部栏设计要简洁明了,要让用户一眼就能看明白。因为顶部栏属于导航体系的一部分,是为了避免用户迷路,帮助他们更好的使用产品。归根结底用户使用你的产品是为了你提供的内容或服务,而不是来看狂拽酷炫的顶部栏。所以我们不能本末倒置,将顶部栏做的过于花哨,进而分散用户的注意力。

此外极简风格很适合响应式设计,可以在多设备上追求一致的用户体验。

简约设计的另一大优点就是,设计师会经常遇到临时的迭代需求,领导突然让你在这里加一个按钮那里加一个文字标签,简约设计为这种突然的迭代需求提供了操作空间。

相关文章

  • 网页端导航栏

    双层菜单 双层菜单的样式在近来的顶部栏设计中也愈发受到设计师的青睐。因为现在随着产品功能的不断增加与完善,渐渐出现...

  • 爬虫入门02作业

    网页结构分析 上面两个界面分别是评论栏,以及相关文章栏。再做进一步的拆分 顶部导航栏分为: 网页logo 导航栏 ...

  • Tailwind Navbar

    导航栏 PC导航栏仿Airbnb导航条 PC导航条添加图标 PC导航条上图下字 移动端导航条

  • 导航栏制作

    今天和大家分享一下网页导航栏的制作 网页导航栏是网页的开头部分,今天就教大家如何简单的实现这一效果。 效果图 首先...

  • js 悬停出现div,移走消失,悬停在div中不消失

    网页导航栏效果,鼠标放到名称上悬停div

  • 网站界面设计基础

    一、网页界面的构成 网页包括:网站logo,导航栏,banner,内容栏,版尾。 logo的大小标准:88*31普...

  • JS实现侧边栏显示隐藏

    网页中侧边栏是一个重要的排版位置,尤其是侧边导航栏用的最多。在一些窄屏的侧边导航栏中,控制侧边导航栏的显示与隐藏可...

  • 网页制作-导航栏

    注意点 实际开发中,不会直接用链接a,而是使用li包含链接(li+a)的做法 意义 li+a 语义更加清晰,一看就...

  • vue bootstarp 左侧导航栏可收缩,移动端适配成滑入画

    左右布局,支持左侧导航栏固定可收缩,鼠标移动可触发伸展,左侧导航栏手风琴模式,支持移动端适配,小屏左侧导航栏会变成...

  • 实现滑动页面导航栏固定在网页顶部

    导航栏固定在网页顶部 *{ margin: 0; padding:...

网友评论

    本文标题:网页端导航栏

    本文链接:https://www.haomeiwen.com/subject/gfuhbxtx.html