粘性标头：5种方式让他们更好

定义

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

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

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

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

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

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

在触屏设备上，确保所有利用目标最少为1cm × 1cm，所有文字约为16pt(视乎x-height和字形在字体中，适当的最小最小可能略小或更大），然后最小化超出这些大小的额外垂直高度（同时仍然保持适当的审美考虑因素）。

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

2.与内容对比很重要

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

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

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

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

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

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

4.考虑部分持久头

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

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

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

5.考虑是否需要粘头

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

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

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

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

总结

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