常常被纯美的结构设计介面招揽，呢困惑自己为什么做不下那般的效用？黏性副标题，操作介面的小诀窍此次硬生生告诉你！

一、黏性副标题

黏性副标题（或长久副标题）是结构设计行业一种常用副标题商业模式，用作在采用者向上慢速网页时将中文网站或插件的副标题维持在萤幕上的同一个边线。

这种副标题商业模式的另一个版是部分黏性副标题，除非采用者开始向上慢速，它就会重新出现在网页顶端。

假如采用得宜，黏性副标题能让采用者自动更新导航系统、搜寻流程导航系统原素，而无须向上慢速到网页顶端。它增加了副标题中原素的可发现性以及采用者利用它的机会。

Accenture 的图形介面公交站点采用包涵公交站点导航系统、搜寻和流程库导航系统的黏性副标题。当采用者慢速时，副标题维持原地。

但是，假如实施失当，黏性副标题会难以启齿、零散目光并妨碍网页文档。

5个Tips，让你的黏性副标题结构设计能真正协助到采用者，不许他们烦躁。

1. 维持较细体积，最轻化文档与插件的比率

黏性副标题这类会挤占萤幕上可用作文档的内部空间，因此充分运用内部空间非常重要。有鉴于萤幕体积较细，这一因素在终端电子设备上变得更重要。

想保证文档与插件的比率最轻化，以期黏性副标题挤占最多的内部空间，而且仍提供适度的复本文档和可点选的最终目标。

在触屏电子设备上，保证大部份点选最终目标最轻为 1cm × 1 cm，大部份文档约为 16pt（依赖于x-度和手写体中手写体的总体开放性），同时依然维持适度的后现代结构设计。

在图形介面上，虽然有更多的内部空间能采用，假如只是为了使LOGO尽量大一些，依然不建议在副标题中采用过多的空画素。

同样，从副标题原素的复本文档大小开始，从那里最轻化垂直度。

左：纽约客的黏性副标题在 iPhone 11 Pro 上，文档与副标题的比率为 13:1，这是一个合理的内部空间权衡。（注意：这个计算不包括插件的 URL 栏或 iOS 状态栏，两者都消耗画素，但不在中文网站结构设计者的控制范围内。）

右：Lollar Pickups 的文档与插件的比率仅为 2:1在同一个台电子设备上，带有过大的半透明LOGO副标题，无法与文档形成足够的对比度，并且网页底部不必要的重复标签栏也很碍事。

2. 文档对比很重要

为黏性副标题选择合适的背景颜色，需要考虑网页上各处的副标题和文档之间是否有足够的视觉差异。

由于副标题将出现在网页上每个点的顶端，因此它与背景具有足够的视觉对比以使其醒目、复本并且要使悬停在其上的文档进行清楚地区分。任何展开的子菜单或下拉菜单也应与背景清楚地分开。

因此，黏性副标题必须是不透明的颜色，与主要文档区域的背景不同。

尽管半透明的黏性副标题旨在使更多的网页文档可见，但这些副标题导致的低对比度使半可见的文档难以阅读，并且经常零散采用者的目光。

3. 维持动作最轻、自然和反应灵敏

动画对于采用者来说通常具有破坏性、容易零散目光，所以尽量不要将它用作黏性副标题。在采用者慢速时简单地将副标题维持在适度的边线。

有两种情况可能需要动画：

虽然通常不建议采用非常大的副标题区域，但偶尔会考虑与采用者体验，要求在网页顶端采用大LOGO；当采用者慢速时，LOGO会缩小，就像下面的 Michigan.gov 示例一样。

这个动画应该是快速、流畅和即时的。副标题应该以典型的慢速速度缩小，并且不应该消失、跳跃或以其他方式惊吓到采用者。

当采用者慢速鼠标时，Michigan.gov 的黏性副标题会缩小，但会以突然的方式缩小，消失片刻，然后突然重新出现。

黏性副标题也应该留在插件窗口顶端或侧面的固定边线，而不是在延迟后快速定位（这种商业模式称为“跟踪者菜单”）。

4. 考虑部分长久的副标题

部分长久的副标题最常出现在终端中文网站上，在某些情况下，它提供了两全其美的优点：能从网页上的任何边线轻松访问的副标题，但在阅读和向上慢速网页时会不太明显。

这种风格效用一般。部分长久的副标题假定任何的向上慢速都表明采用者想访问副标题。

在许多情况下这是对的，但在某些情况下则不然——例如，采用者可能只是想重读前一段。在这种情况下，与部分长久标题相关联的动画可能会零散采用者的目光。

这就是为什么动画应该不显眼，既不能太早也不能太慢。感觉像是由采用者手动慢速到视图中，但实际上是由采用者向上慢速几个画素触发的，即假如采用者停止向上慢速，副标题应继续完全以动画形式进入视图。约300-400毫秒长的滑入动画将保留这种自然的感觉，且不零散目光。

CB2 有一个部分长久的标头。向上慢速会触发副标题以动画方式移出视图，向上慢速会触发副标题以动画方式返回视图。

动画的速度类似于采用者的自然慢速速度，因此不会过于零散目光或突兀。采用者必须在任一方向慢速多个画素才能触发动画，因此不会感觉过于敏感，也不太可能被不稳定的手意外触发。

5. 考虑是否需要一个黏性副标题

要考虑的最后一个方面是黏性副标题是否真的需要。

最终，通过采用黏性副标题，能在中文网站的每个网页上放弃一些萤幕内部空间。而且，假如黏性副标题对你的采用者没有协助，那么您对其结构设计所做的任何其他优化都没有实际意义。

例如，假如您的副标题中有一个登录按钮，您的采用者是否可能会登录您中文网站的任何网页？

假如您的主要导航系统类别在副标题中，采用者会在一次会话期间从一个类别跳到下一个类别，还是更有可能他们整个时间都停留在一个类别中？

此类问题的答案将因公交站点类型及其支持的任务和文档而异。

二、介面排版

精美的网页及操作介面能让我们一下就注意到，但是我们通常很难说出为什么这些结构设计看起来那么舒适。接下来分析三种采用者操作介面并讨论使它具有招揽力的视觉结构设计原则。

1. 排版和间距

第一个例子来自Medium.com。这种结构设计利用网格、空白和排版系统来创造舒适而美丽的阅读体验。

Medium 的结构设计很简单，但很有招揽力。周到的排版系统、间距和一致的左对齐使采用者易于阅读，同时附加信息显示在视觉上有凝聚力的侧边栏中。

该结构设计采用 3 列网格。每个文档原素都与网格线对齐。左侧边栏中的图标之间采用一致的填充单位（垂直空白分隔原素），而双重相同单位用作分隔分组。小写字母区分了WRITTEN BY 的副标题，超宽敞的前导使结构设计感觉通风且易于采用。

1）对齐到网格

首先，有一个列网格（上图中的粉红色线）。列网格提供对象对齐的垂直锚定线。

由于侧边栏文档与最左边的网格线左对齐，所以结构设计看起来很清晰，侧边栏文档很容易浏览。文章文档也与列网格线左对齐。在你的结构设计中，设置一个列网格并使不同网页和原素的对齐方式维持一致。

2）排版差异

Medium 采用同一个手写体系列中的不同手写体样式（小写字母、粗体、斜体、下划线）和颜色的细微变化（黑色与灰色）来区分不同类型的文档。

虽然太多的多样性会破坏一致性并使结构设计看起来很随意，但 Medium 的变体是一致且有目的的。

例如，WRITTEN BY中的小写字母表示它是一个节副标题。根据经验，确定排版系统并将你的结构设计限制在 1-2 种手写体；采用相同的类型变体即斜体、粗体、字母。

3）字距调整和跟踪调整

结构设计师要考虑手写体之间由于其特殊形状而产生的尴尬间距。字距调整通常应用作较大的文字类型，如副标题，其中空格更明显。

间隙通常出现在形成一个角度的字母周围，如 W、Y、V 或 T。虽然大多数手写体系列会自动调整字距调整，但也要考虑手动调整大副标题或字母之间的明显间距。

总的来说，这些结构设计细节使结构设计美观，同时实现了网页的主要目的——易于阅读。

2. 层次结构和颜色

第二个例子来自维生素公司Ritual.com。这种结构设计采用层次结构、颜色和图像来创造有招揽力的视觉体验。

Ritual 的结构设计利用比率和颜色来创建网页层次结构

此结构设计以 3 条锚线为中心文档。每个产品的副标题、图像、描述和按钮都以其中一行为中心。调色板是有限的——由原蓝色和黄色制成。这种类型的调色板允许文档（蓝色）和号召性用语（黄色）之间形成鲜明对比。

1）精致调色板

仅限于两种基本颜色：蓝色和黄色，经典互补色。

所选择的特定蓝色和黄色有助于提高结构设计的招揽力——黄色不太亮，蓝色足够暗，能在白色背景上阅读。

假如黄色和蓝色是主要颜色（青色和荧光笔黄色），那么结构设计看起来更像是 90年代初期的中文网站结构设计。

在为你的结构设计选择色调时，请切换不同的颜色，看看哪些颜色搭配起来看起来不错。远离荧光色，从原色稍微调整颜色将会优化你的颜色选择。例如，上面的萤幕截图已被更改（如下）以展示。

这张经过修改的图像不仅让结构设计看起来不那么精致，而且黄色按钮变得更难阅读。

我们喜欢采用Adobe Color来获得调色板灵感。假如你喜欢另一个中文网站上的颜色，请试着找出为什么——是特定的颜色组合、色调还是饱和度？

通过将调色板限制为几种颜色，能将重点放在结构设计上，因为要考虑的原素很少，所以干扰更少。该结构设计将创造更强大的品牌代表性。

清晰的视觉层次，视觉层次结构引导眼睛并指示重要的网页原素。

在这个例子中，眼睛首先招揽到最大的排版原素大副标题。然后我们的目光转移到黄色图像和添加到购物车按钮上。

副标题中的混合排版处理：“Essential for women ”，是为了强调产品的重要性以及它是为女性定制的事实。

在您自己的结构设计中，混合类型处理时，请务必：

① 在一个副标题中最多采用两种不同的手写体处理方式

对最重要的词采用粗体或下划线，对次要的词采用斜体。少即是多——例如，假如“women”也有下划线，结构设计就会变得随意。它将与“Essential”的大胆处理竞争并破坏阅读等级。

② 维持网页样式一致

由于“Essential”在此副标题中以粗体显示，因此应在“Essential for man ”类别登录网页上以粗体显示。阅读副标题后，我们的目光转移到大型产品图片和黄色的“添加到购物车”按钮上。

③ 采用高质量的图像

图像能为产品描述添加有价值的信息。照片的直接风格，没有多余的杂乱来零散产品目光，也会影响总体视觉结构设计。

图像背景与产品的背景无缝融合，使网页看起来很精致。结构设计中的照片应该协助采用者直观地理解产品或概念，而不仅仅是装饰。

为了提升结构设计美感，能让图像将它们的背景颜色与其周围内部空间的背景颜色相匹配来融入结构设计的其余部分。

3. 一致性

第三个例子来自Spotify终端插件。这种结构设计有效地利用了视觉处理的一致性，在整个插件中创造了一个有凝聚力的聆听体验。

Spotify 插件采用自定义图稿、颜色和间距的一致性来创建凝聚力，同时维持插件多个区域的清晰度。

视觉一致性是 Spotify 精美外观的主要贡献者。有对齐、排版和填充的一致性，以及流派艺术作品的一致性。这种一致性的一个例外是流行播放列表和下方图块（中间萤幕）之间的间距，这与Classic Rock和下方图块（右萤幕）之间的间距不匹配。理想情况下，这两个地方的间距也应该维持一致。间距清楚地建立了分组，而颜色区分流派。

1）一致的视觉处理

当视觉原素不一致或零星采用时，结构设计将看起来很不专业且缺乏修饰。在Spotify 中，许多视觉原素在插件的不同区域维持一致。

例如，每个类别的名称（例如，搜寻萤幕上的流行、摇滚）在每个图块上的边线相同。磁贴中的图像（即专辑封面）始终在右侧，从磁贴上渗出。这些细节使总体结构设计感觉有凝聚力。

在你的结构设计中，应该致力于创建一个视觉系统。例如，使网页周围的原素间距相同或相同单位的倍数。

例如，假如副标题和正文之间的基本间距为 5px，则能采用 2 个基本间距单位来分隔不同的部分，等等。

2）创建分组的内部空间

相似原素周围的间距有助于建立组。在我们的示例中，流派（流行和摇滚）中的文档块之间的最轻内部空间表示它属于同一个目录。

在结构设计中创建分组时，副标题与其文档之间采用更少的内部空间，并在组之间采用更多内部空间。

三、总结

黏性副标题是中文网站的积极补充，但前提是它真正需要为采用者提供服务。

假如黏性副标题确实为采用者提供了价值，那么请保证其尽量小，与背景具有高对比度，不采用无意义的动画，不模糊文档，并且不会零散采用者的目光。

结构设计不是偶然的。结构设计中的每一个决定都应该有意识地输出，最好有视觉结构设计系统的支持。虽然没有什么能解释结构设计是否好看，但遵循一些原则会增加它的可能性：

正是这些结构设计原则的应用共同使结构设计变得美观并有助于提供有用的体验。

原文链接：

本文由 @Kiki 授权发布于人人都是产品经理。未经许可，禁止转载。

题图来自Unsplash，基于CC0协议