定义

粘性的头（或者执着的头)是一种常见的模式，当用户向下滚动页面时，网站或应用程序的页眉保持在屏幕上的相同位置。这种模式的一个版本是部分的标题，当用户开始向上滚动时，它(重新)出现在页面顶部。

如果操作得当，粘性标题允许用户快速访问导航、搜索和实用导航元素，而无需滚动到页面顶部。它们增加了标题中元素的可发现性和用户利用它们的机会。

jourture的桌面站点使用包含网站导航，搜索和实用程序导航的粘性标头。标题在用户滚动时保持到位。

然而，如果实现得不好，粘性标题就会令人厌烦、分散注意力并阻碍页面内容。

这里有5个技巧来确保你的粘性头的设计对你的用户有帮助，而不是阻碍。

1.通过保持它的小，最大化内容铬比率

粘性标题会占用屏幕上可以用于内容的空间，所以负责任地使用这些空间是很重要的。考虑到屏幕的小尺寸，这个因素在移动设备上更加重要。你要确保content-to-chrome比率是最大化的，所以你的粘性标题占用最小的空间，仍然提供适当的可读的文本和可点击的目标大小。

在触摸屏设备上，确保所有点击目标最少为1cm × 1cm，所有文字约为16pt(视乎x-height和界面在字体上，适当的最小值可以稍微小一点或大一点)，然后最小化超出这些尺寸的任何额外的垂直高度(当然，同时仍然保持适当的美学考虑)。

在桌面，虽然有相当多的空间来工作，但仍然不建议在标题中使用过多的空像素，只是让徽标尽可能大。同样，从标题元素的可读文本大小开始，并从那里开始最小化垂直高度。

两个移动网站与粘滞标头并排
左：纽约人的粘性标题有13：1的IPhone 11 Pro的内容到铬比，这是一个合理的空间权衡。（注意：此计算不包括浏览器的URL栏或IOS状态栏，两者均以享有像素，但在网站设计师的控制范围之外。）
右:Lollar皮卡有吝啬的2:1 content-to-chrome比率在同一设备上,到一个特别大的半透明的标志头不提供足够的对比与内容(所以我们计数chrome)和不必要的重复的标签栏在页面的底部,也粘。

2.内容对比很重要

要为粘性标题选择合适的背景颜色，请考虑标题和内容之间是否有足够的视觉差异页面上的每一个地方。由于标题会出现在页面上的每个点的顶部，所以它与背景有足够的视觉对比是很重要的，可以被注意到，可读，并与它悬停的内容有明显的区别。任何扩展的子菜单或下拉菜单也应该与背景清晰地分开。

结果，粘性头必须是不透明的颜色，与主要内容区域的背景不同。尽管半透明的粘性标头打算制作更多的页面内容（部分）可见，低对比度这些标题产生的比率使得最难以阅读和频繁地骚扰和分散用户的精彩内容。

带有可见的基于悬停的子菜单的粘性标题，与背景的对比度较低
Imagine learning’s main sticky header (with a black background) has high contrast against the page content (with a beige background), but the submenu for the navigation’s second tier uses the same beige as the page background, blending in. The confusion is amplified by the lack of a border around the submenu.

3.保持动作最小，自然，响应

动画往往是破坏性的,分散注意力的，这对用户来说很烦人，所以只在粘性头文件中尽量使用它。一般来说，最好不要使用动画，只要在用户滚动时保持标题在合适的位置。有两种情况下动画可能是必要的:缩小较大的标题区域，或者部分持久的标题(关于这个主题的更多信息见下面的指南#4)。

虽然通常不推荐一个非常大的页眉区域，但偶尔出于与用户体验无关的考虑(通常源于内部组织政治)，要求在页面顶部使用一个大的logo;当用户滚动时，徽标会缩小，就像下面Michigan.gov的例子一样。这个动画应该是快速、平滑和即时的——头部应该以典型的滚动速度收缩不消失，跳跃或以其他方式爆炸用户。

密歇根州.Gov的粘性标题随着用户滚动而缩小，但是在突然的时尚中脱颖而出，暂时消失，突然再次出现。

黏贴头还应该留在浏览器窗口顶部或侧面的固定位置，而不是在延迟后迅速移动到某个位置(这种模式被称为“跟踪者菜单”)。

古老的设计青年第一名有一个分散注意力的跟踪菜单，在延迟之后随后用夸大的动画随后滚动位置。

4.考虑部分持久的标题

部分地点持久标题在移动站点上最常见，在某些情况下，它兼具了这两方面的优点:在页面上的任何地方都可以轻松访问，但在阅读和向下滚动页面时不会显得突出性。

这种风格适度工作。部分持久的标题假设任何向上滚动表示用户想要访问标题。在许多情况下，这是真的，但在一些情况下，它不是-例如，用户可能只是想要重读前一段。在这种情况下，与部分持久头相关联的动画可能会分散用户的注意力。

这就是为什么这样的动画应该不引人注目，出现得既不太快也不太慢。我们建议感觉就像它被用户手动滚动到视图中，但实际上由用户滚动到几个像素（即，如果用户停止滚动，则标题应继续完全动画。一个粗略的幻灯片300-400ms长会保持那种自然的感觉，不会让人分心。

CB2具有部分持久的标题。向下滚动触发标题以使View的标题为View，并滚动向上触发标题以将重新设置为View。动画的速度类似于用户的自然滚动速度，因此它不会过度分散或突出。用户必须在任一方向上滚动超过几个像素以触发动画，因此它不会感到过于敏感，也不会被不稳定的手触发。

5.考虑是否需要粘性标题

最终需要考虑的是真正需要的粘性标题。最终，通过使用粘性标题，您可以在您网站的每一页上放弃一些屏幕房地产。而且，如果粘性标头对您的用户没有帮助，您对其设计的任何其他优化都是MOIC。通过回答以下问题，对您的粘性标头进行成本效益分析：

  • 您的头部将包含哪些类型的元素？主要导航？公用事业导航？徽标？
  • 这些元素是否可能经常或在会议期间的任何点？

例如，如果您的页面头中有一个登录按钮，那么您的用户是否有可能登录您站点的任何页面?如果你的主要导航类别在标题中，用户是否会在一个会话中从一个类别跳转到下一个类别，或者他们更有可能在整个时间停留在一个类别中?

这些问题的答案取决于网站的类型以及它所支持的任务和内容。

总结

有粘性的标题可以对网站起到积极的补充作用，但前提是它们真正为用户服务。如果粘性标题确实为用户提供了价值，那么确保它尽可能小，它与背景有高对比度，不使用不必要的动画，不模糊内容，不分散用户的注意力。