语言切换
下载其他产品或移动应用程序的链接
行为召唤链接(我想贡献,我想发布博客)
以上是顶杆中的常见元素。设计时,我们必须根据产品本身的实际情况做出选择。毕竟,将所有这些信息都放在上面是没有现实的。超载信息将增加用户的使用负担,并且注意力将分心。
当然,权衡是指“保留”和“丢弃”,但在UI设计中的“丢弃”更多地是指“隐藏” - 隐藏了一些次要功能。
在隐藏的同时,我们还希望当用户需要时,可以随时随地在任何地方呈现这些隐藏功能。汉堡按钮可以帮助我们实现这一目标。常见的汉堡按钮由三条水平线组成,就像汉堡包一样,带有两层面包和一层肉,因此我们生动地称其为“汉堡包”按钮。
(PS:汉堡按钮最初是由外国设计师使用和命名的。如果是中国设计师发明了它,则可以称为按钮。)
汉堡按钮可以通过隐藏一些较小的信息来释放页面上的空间,这使得顶级栏更加清爽和简洁,并且用户的注意力可以更好地关注这些重要信息。
汉堡按钮在页面导航设计中经常使用,用户熟悉它,因此它不会增加用户的学习成本。设计汉堡包按钮时要注意的最重要的事情是,用户很容易忽略它,因此在设计时,我们应该使用颜色匹配,尺寸和空白空间来正确突出它。一词中,必须清楚地显示汉堡按钮,而不会占用太多空间。
双层菜单
最近,在顶级酒吧设计中,双层菜单的风格在设计师中也越来越流行。因为现在,随着产品功能的不断增加和改进,某些无法通过单层菜单解决的情况正在逐渐出现,也就是说,有太多的内容需要在顶部栏中显示,并且某些特定功能不属于相同的水平。为了更好地处理这种情况,设计师创造性地使用了双层菜单的样式。
例如,上层菜单具有指向社交网络(和),公司徽标,搜索框,购物车和汉堡按钮的链接。较低级别的菜单包括产品类型,业务渠道地址,新闻,与我们联系。在这种情况下,如果此信息在传统的单线菜单中显示,则不可避免地将其放下,从而导致顶级栏过度拥挤。
此外,双层菜单的设计样式非常时尚,可以给用户一种令人耳目一新的感觉。
文本和颜色匹配
在确定在顶部栏上显示什么以及如何显示的是设计样式,我们需要考虑的是。产品的设计样式应基于产品自己的定位,这意味着设计师的作品不应限于视觉呈现,而应了解产品。我不会参加这个,因为我不太了解。
一般而言,顶级条的设计样式包括颜色匹配,文本和图标。因为这些是顶级栏上的三个主要元素,所以图标的使用较少,最常见的是下拉箭头和放大玻璃图标。
首先,让我们谈谈颜色匹配,颜色匹配主要是指背景颜色。一般来说,不要在顶栏中添加太重的背景颜色,请选择光或直接白色。因为过多的颜色会引起用户注意力的注意力。此外,在顶部栏的底部是,当我们设计时,我们将考虑颜色匹配和页面匹配的整体样式。如果顶部栏太重,它将限制设计。如果是白色和光线,就不会关注这种关注。当然,这不是绝对的。一些网站的顶部条上有深色,而某些网站具有与页面内容集成的透明顶部条。
让我们谈谈文本,大多数用户不会逐一阅读该页面上的信息。他们以“扫描”方式阅读它。因此,在顶部栏上的文本设计中要考虑的第一件事是可读性,因此用户可以在短时间内获得此信息。因此,我们的文本必须从背景中突出显示,并且在必要时可以对字体样式进行粗体。
固定顶栏
固定顶栏代表另一个设计思想:无论用户做什么,用户都可以看到顶部栏。这种类型的顶级栏适用于有更多页面内容并要求用户连续下拉和滑动的网站。
这种交互式模式可以提高顶级栏的易用性,但这是基于牺牲一部分页面空间的牺牲,因此使用时我们必须谨慎。
极简主义风格
我一直在上面强调,顶级的酒吧设计应该简洁明了,以便用户可以一目了然地看到它。由于顶级栏是导航系统的一部分,因此是为了防止用户丢失并帮助他们更好地使用产品。最终,用户将您的产品用于您提供的内容或服务,而不是观看酷顶栏。因此,我们不能将购物车放在马上,而是让顶部的酒吧太花哨了,无法分散用户的注意力。
此外,极简主义风格非常适合响应式设计,并且可以在多个设备上追求一致的用户体验。
简单设计的另一个重要优点是,设计师经常遇到临时迭代需求,而领导者突然要求您在此处添加一个按钮并添加文本标签。简单的设计为这种突然的迭代需求提供了操作空间。
总结:
总而言之,网站顶部的导航栏的设计优化是一个复杂而细致的过程,需要设计师在功能和用户体验之间找到完美的平衡。通过简化内容,巧妙地利用隐藏的功能,采用两层菜单设计并专注于响应式布局,我们可以创建一个既漂亮又实用的顶级导航栏,从而为用户提供更便捷且令人愉悦的网站浏览体验。同时,这些设计优化策略还将为网站的品牌建设和长期开发奠定坚实的基础。
导航栏网站优化