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

定义

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

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

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

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

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

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

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

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

2.内容对比很重要

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

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

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

动画经常被破坏性，分散注意力的为用户烦恼，令人讨厌的目的是仅对粘性标头使用它。通常，最好不要使用动画，只要用户滚动就会保持标题。有两种情况，其中可能需要动画：缩小大标题区域，或部分持久标题（在下面的指南＃4中的此主题中更多）。

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

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

4.考虑部分持久头

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

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

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

5.考虑是否需要粘头

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

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

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

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

概括

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