有粘性的标题:让它们变得更好的5种方法

定义

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

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

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

这里有5个小贴士，可以确保您的粘性标题的设计有助于而不是阻碍您的用户。

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

粘性标题本质上会占用屏幕上可用于内容的空间，因此负责任地使用该空间非常重要。考虑到屏幕尺寸较小，这一因素在移动设备上更为重要。您希望确保铬含量比是最大化的，所以你的粘性标题占用最小的空间，仍然提供适当的可读的文本和可点击的目标大小。

在触摸屏设备上，确保所有打击目标最小为1cm×1cm，所有文本约为16pt（取决于x高度和文本的整体显著性）信纸在字体上，适当的最小值可以稍微小一点或大一点)，然后最小化超出这些尺寸的任何额外的垂直高度(当然，同时仍然保持适当的美学考虑)。

在桌面上，虽然有相当多的空间可供使用，但仍然不建议在标题中使用过多的空像素，而只是使徽标尽可能大。再次，从标题元素的可读文本大小开始，并将垂直高度降至最低。

2.内容对比很重要

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

因此，粘性标题必须是不透明的颜色，与主要内容区域的背景不同更多的在（部分）可见的页面内容中低对比度这些标题所产生的比率使得半可见的内容难以阅读，并且经常会让用户感到烦恼和分心。

3.保持运动量最小、自然、灵敏

动画通常是破坏性的，分散注意力的，并且对用户来说很烦人，所以尽量不要在粘性标题中使用它。一般来说，最好不要使用动画，只要在用户滚动时将标题保持在原位即可。有两种情况可能需要动画：缩小较大的标题区域，或部分保留标题（有关此主题的更多信息，请参见下面的准则4）.

虽然通常不建议使用非常大的页眉区域，但偶尔也会考虑与用户体验无关的因素（通常植根于内部组织政治），要求在页面顶部使用大徽标；当用户滚动时，徽标会缩小，如下面的Michigan.gov示例所示。这个动画应该是快速、平滑和即时的-标题应该以大致典型的滚动速度收缩，并且应该不消失，跳跃或以其他方式惊吓用户。

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

4、考虑部分持久性标题

部分地持久性标题最常见于移动站点，在某些情况下，它提供了两个方面的最佳效果：一个可以从页面上的任何位置轻松访问的标题，但在阅读和向下滚动页面时保持低调。

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

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

5、考虑是否需要粘性头

最后一个要考虑的问题是粘性头是否真的需要。最后，通过使用一个粘性的标题，你可以在你的网站的每一页上分发一些屏幕上的不动产。如果粘性页眉对你的用户没有帮助，你对它的设计的任何其他优化都是毫无意义的。回答以下问题：

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

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

这些问题的答案将因网站类型及其支持的任务和内容而异。

总结

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