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

定义

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

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

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

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

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

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

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

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

2.内容对比很重要

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

因此，粘性标题必须是不透明的颜色，不同于主要内容区域的背景。即使半透明的粘性头部打算更多的页面内容(部分)可见的低对比度由这些标题产生的比例使半可见的内容难以阅读，经常惹恼和分散用户。

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

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

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

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

4.考虑部分持久头

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

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

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

5.考虑是否需要粘头

要考虑的最后一个方面是是否真的需要sticky头。最后，通过使用粘性标题，你在网站的每个页面上都留出了一些屏幕空间。而且，如果粘性标题对用户没有帮助，那么你对其设计的任何其他优化都是毫无意义的。通过回答以下问题，对你的粘性标题进行成本效益分析:

• 标题包含什么类型的元素?主要的导航?实用的导航?一个标志吗?
• 这些元素是否可能经常或在会话期间的任何时刻被需要?

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

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

总结

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