定义

粘性标题(或持久的标题)在用户向下滚动页面时,是一种常见的模式,用于将网站或应用程序中的网站或应用程序保持在屏幕上的同一个位置。这种模式的版本是部分粘性标题,它一旦用户开始滚动,就会出现在页面顶部。

正确完成后,粘性标头允许用户快速访问导航,搜索和实用程序导航元素,而无需向前滚动到页面顶部。它们增加了标题中元素的可发现性,并且用户将利用它们的可能性。

Accenture的桌面站点使用一个包含站点导航、搜索和实用程序导航的粘性标题。当用户滚动时,标题保持不变。

然而,当实施糟糕时,粘性标头令人讨厌,分散注意力和阻碍页面内容。

以下是5个提示,以确保您的粘性标头的设计有助于,而不是阻碍您的用户。

1.通过保持它来最大化内容到镀铬比率

粘性标题本质上占用可用于内容的屏幕上的空间,因此您负责任地使用该空间很重要。考虑到屏幕尺寸的小尺寸,这个因素在移动设备上更重要。你想确保内容到镀铬比率最大化,因此您的粘性标头仍然需要最小的空间,仍然提供适当可读的文本和可追加的目标大小。

在触摸屏设备上,确保点击目标距离最低1cm×1厘米,所有文本约为16pt(取决于x高度和整体独特性信纸在字体中,适当的最小最小可能略小或更大),然后最小化超出这些大小的额外垂直高度(同时仍然保持适当的审美考虑因素)。

在桌面上,虽然有很多更多的工作空间,但仍然不建议在标题的过度空像素中欣赏过多的空像素,只需使徽标尽可能大。同样,从头元素开始以可读文本大小,并最大限度地减少那里的垂直高度。

两个移动网站的粘性标题并排
左图:《纽约客》的粘性标题在iPhone11Pro上的内容与chrome的比例为13:1,这是一个合理的空间权衡。(注意:此计算不包括浏览器的URL栏或iOS状态栏,两者都是像素,但不受网站设计者的控制。)
右:LOLLAR拾音器在同一设备上具有误区2:1内容到铬比率,具有过度大的半透明徽标标题,不提供足够的对比对内容(因此我们计算为Chrome)和不必要的重复标签栏在页面底部也粘稠。

2.与内容对比很重要

要为粘性标头选择适当的背景颜色,请考虑页眉和内容之间是否存在足够的视觉差异在页面上的各处。由于标题将出现在页面上的每个点之上,因此重要的是,它具有足够的视觉对比,背景是明显的,可读的,并且明确地区别于它在它悬停在其上方的内容。任何扩展的子菜单或下拉机也应清楚地与背景分开。

因此,粘性标题必须是不透明的颜色,与主要内容区域的背景不同。即使半透明的粘头更多的在页面内容(部分)可见的情况下对比度这些标题所产生的比率使得半可见的内容很难阅读,并且经常会惹恼和分散用户的注意力。

具有可见悬停的子菜单的粘性标头与背景具有低对比度
想象一下,learning的主粘性标题(黑色背景)与页面内容(米色背景)的对比度很高,但导航第二层的子菜单使用与页面背景相同的米色,混合在一起。由于子菜单周围没有边框,这种混乱被放大了。

三。保持运动量最小、自然、灵敏

动画片经常被破坏性,分散注意力为用户烦恼,旨在仅限于粘性标头的最低限度。通常,最好不要使用动画,只要用户滚动就会保持标题。有两种情况,其中可能需要动画:缩小大标题区域,或部分持久的标题(在下面的指南#4中的此主题上更多)。

虽然通常不建议一个非常大的标题区域,但偶尔会考虑与UX(并且通常植根于内部组织政治)授权页面顶部的大型徽标;当用户滚动如下面的密歇根州,徽标时,徽标缩小。这个动画应该快速,平滑,即时 - 标题应以大致典型的滚动速度缩小,应该是不消失,跳转或以其他方式惊吓用户。

密歇根州政府的粘滞标题会随着用户滚动而缩小,但会以一种突然的方式缩小,消失一会儿,然后突然出现。

粘性标头也应保持在浏览器窗口顶部或侧面的固定点,而不是在延迟之后踏上位置(称为“跟踪菜单”的模式)。

旧的设计年轻人的第一名有一个令人分心的跟踪者菜单,在用户的滚动位置后面有一个夸张的动画。

4考虑部分持久的头

部分持久标题最常见于移动站点上,并且在某些情况下,提供两个世界上最好的:一个可以从页面的任何地方轻松访问的标题,但在您读取并滚动页面时保持不引人注目。

这种风格还算不错。部分持久头文件假定任何滚动是用户想要访问标题的指示。在许多情况下,这将是真的,但在某些情况下,例如,用户可能只是想重读前一段。在这种情况下,与部分持久标题相关联的动画可以分散用户的分散。

这就是为什么这样的动画应该不引人注目,并且既不太快也不会太慢。我们建议它感觉就像用户手动将其滚动到视图中一样,但实际上是由用户向上滚动几个像素触发的(即,如果用户停止向上滚动,则标题应继续在视图中完全动画化)。动画中的幻灯片300–400ms长将保持自然的感觉,而不会分散注意力。

CB2有一个部分持久的报头。向下滚动会触发标题,使其脱离视图,向上滚动会触发标题,使其返回视图。动画的速度类似于用户的自然滚动速度,因此不会过于分散注意力或突出。用户必须在任一方向上滚动超过几个像素才能触发动画,这样就不会感觉过于敏感,也不太可能被不稳定的手意外触发。

5考虑是否需要一个粘性头

要考虑的最后一个方面是,是否真的需要粘性头。最终,通过使用粘性标题,你可以在网站的每一个页面上展示一些屏幕内容。而且,如果粘性头对您的用户没有帮助,那么您对其设计所做的任何其他优化都是没有意义的。通过回答以下问题,对您的粘性标题进行成本效益分析:

  • 标题将包含哪些类型的元素?主导航?实用程序导航?一个标志?
  • 这些要素是否可能经常需要或在会议期间的任何时候需要?

例如,如果登录按钮位于标题中,您的用户可能会在您网站的任何页面上登录吗?如果您的主要导航类别在标题中,用户将用户从一个类别跳转到一个会话期间,或者它们更有可能留在整个时间的单一类别中吗?

此类问题的答案将根据网站类型和支持的任务和内容而有所不同。

概括

粘性标头可以是网站的积极添加,但只有他们真正为您的用户提供目的。如果粘性标头确实为用户提供价值,那么确保它与合理可能的一样小,它与背景具有高对比度,不使用无偿动画,不模糊内容,并不会分散用户的注意力。