排版|粘性标题？界面设计？诀窍都在这里了( 二 ) kube|业务|华为云|原生|数字化

这种风格效果一般。部分持久的标题假定任何的向上滚动都表明用户想要访问标题。
在许多情况下这是对的，但在某些情况下则不然——例如，用户可能只是想重读前一段。在这种情况下，与部分持久标题相关联的动画可能会分散用户的注意力。
这就是为什么动画应该不显眼，既不能太早也不能太慢。感觉像是由用户手动滚动到视图中，但实际上是由用户向上滚动几个像素触发的，即如果用户停止向上滚动，标题应继续完全以动画形式进入视图。大约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。这种设计使用层次结构、颜色和图像来创造有吸引力的视觉体验。