9点提示帮你设计更好的文本层次结构

每个网站建设项目都需要一个文本元素的系统和层次结构。想想看你是怎样在整个的网页设计中使用的文本文字的——标题，正文，导航元素等等。

但是，如何创建合适的层次结构，以便可以让每个文本元素顺利的和下一个对接？今天，我们将逐步介绍如何构建一个可用于几乎任何设计项目的排版层次体系（我们会将提示与排版优秀的例子组合说明，以帮助你更直观的看到效果以及收集一些灵感）。

1.从舒适的副本主体开始

在网页设计的开始阶段，你可能在标题上就想要一个很库的效果，但事实上，开始的地方实际上应该在中间的主体内容位置。你首先要为主体的内容文本选择一个舒适的字体，大小和间距。

这么做是有原因的——最主要的其实是因为这是你设计中主要的文本内容。无论你是建立网站还是制作宣传册，这个概念是一样的。根据Baymard研究所的数据，主体内容理想的可读性规则是在每行（或多列）之间介于50到60个字符之间。该指南还可以帮助你设置一个可读取的文本比例，并记录不同类型的字体，以帮助你确认最好的搭配效果。

2.设置比例

一旦你知道主体内容的设计外观以后，你可以在设计中为所有其他的文本元素设置一个比例。忽略某些次要的文本块很容易，你只需要列出项目中各种文字内容不同的作用以及用途就行。

· 主体内容；

· 大标题；

· 小标题；

· 说明；

· 引用；

· 导航元素；

· 底部信息；

· 法律文本或免责声明。

现在，创建一个适当的缩放比例，你可以指定每个元素的字体，大小范围和使用情况（这也将在后续的CSS样式中构建你用于工作文档的网站或样式文件）。有多种方法可以规范你的尺度比例，但是个人觉得百分比可以是一个很好的起点。你还可以根据基准网格或通过视觉的舒适程度来建立比例。

以下可以是一个简单比例应用开始：

· 主体内容尺寸大小；

· 大标题延用主体大小的220%；

· 小标题延用主体大小的150%；

· 导航元素延用主体大小的80%；

· 底部/法律文本信息延用主体大小的80%。

3.考虑最大至最小值，以及从上到下顺序

这个规则就非常简单了：最大和最重要的文本应该在顶部，当你向下阅读页面或屏幕的时候，其他的文本内容应该逐级减小比例。

不过，这并不是说你不能随着时间的推移和一些设计的精巧度来破坏这个规则，但它始终是设计文本层次结构的起点（谁真的要滚动到标题的网页的末尾，然后回到顶部开始阅读呢？）。

4.制定空间的使用规则

与字体大小一样重要的是如何利用它们之间的空间来提升整体网页设计的视觉效果。确定空间的因素包括间距（或行高），缩进（或不）和对齐等。

考虑到缩放文本所使用的刻度的间距比例。画布的尺寸在这里也很重要。尺寸更大的画布通过严格的间距可以比小尺寸的更具可读性。

就像字体大小一样，对于整个设计框架应该预先设置间距规则。一致，干净的间距虽然对于整体的网页设计来说是一个小东西，但是对整体的设计来说却起着至关重要的作用。

5.设定粗体和斜体的应用规则

尽管粗体和斜体不是不同类型的元素和大小，但它们在使用上很重要（想象一下，如果每一个字都是粗体的话，设计会是什么样子）。

所以，针对粗体和斜体的应用规范指南就显得尤为重要了。不是看尺寸或空间，而是要更多的考虑语境。 使用规范可以限定只用特殊单词或短语（或特定的单词或短语）才能做这种处理。滥用粗体和斜体是一个常见的错误，所以，当你在使用它的时候对整体的网站设计存在疑问时，不要使用它。

6.创建一个“Z”型文本区

通过科学的研究我们发现，常见的阅读模式类似Z的形状。无论你是从左到右还是从右到左（翻转Z）的语言设计，用户将从一个角落读取到最后一行，然后再重新回到起始角落和重复图案中的线条。

所以在屏幕上放置文本元素时，你可以使用这种习惯的阅读方式。“Z”型设计也是为什么大多数品牌将标志放在左上角的原因之一——这是眼睛阅读或浏览时的第一视觉点。

7.考虑视觉重量

当在屏幕上浏览涉及到多大的文本元素时，尺寸并不是唯一的考虑因素。视觉重量同样也很重要，这可能会影响你创建排版尺度的方式。

8.创建强调

有一些单词或语句相较于页面中其他的你会想要让其更突出一点。通过在文字中添加符合强调元素可以使它脱颖而出，而不必调整实际的大小或字体。

常见的主调包括：

· 颜色；

· 下划线；

· 突出；

· 在文本中添加按钮或形状；

· 简单的动效；

· 根据其他类型的相同大小做对应的变化。

在任何类型的层次结构中添加强调元素的好处在于，它是一个立即可被关注的焦点。这些元素应尽可能少地用于设计中以强调那些最大影响和关键的要素。

9.使用“眼睛测试”

最后，每个规则都有一个例外（或两个）。这就是为什么我们需要“眼睛测试”，只需看一下屏幕上的比例。文字的外观和感觉如何？是否有逻辑性？是否能够被用户容易的阅读？

如果你以任何的方式都感觉不到网页设计上的主体内容以及强调的信息时，请考虑做适当的调整。根据你使用的字体和设计中的其他元素（从图片到颜色到对比度），尺度也将需要你重新调整一下。这不仅仅是一个起点，当你不确定你想做什么。

你也可以请不同的人对你的设计进行查看。创建一个或两个具有不同层次结构的版本，以查看哪个版本获得最佳响应。网站设计是一种视觉艺术，使用“眼睛测试”是一个不精确但相当可靠的选项。

总结

一旦为网站建设项目设置层次结构以后，你可以做的最好的事情就是记录它。在为接下来整体项目的推进建立标准规范或创建样式文件。

对于较大规模的设计或品牌规划，请将尺寸和规格书写在样式指南中。创建层次结构需要在后端进行一些工作，随着后续项目的推进，有更规范的指南可以使项目完成更快，更简单，更不用说更一致。

图文来自：design shack 

由深圳网站建设公司-Clh翻译编辑整理