改善网站设计中排版的八种方法
排版是网站设计中最重要的元素之一，对品牌和体验的影响可观。根本原因在于，对印刷字体进行全面更改（选择新字体，更改尺寸，增加领先地位）非常复杂且充满了潜在的时间浪费。
但是，您可以对版式进行一些简单的更改，这些更改不会破坏网格，并且可以在短的时间内完成。这是最简单的八个方法。
1、增加色彩对比度
布局文本时，网站设计人员通常会将文本视为视觉设计中的一个块。设计者与文本的关系与用户的文本有很大不同。设计人员将文本定位为形状，用户逐行读取文本。因此设计人员往往低估了对比文字所需的数量。浅灰色文字在美学上很美，但在功能上却毫无用处。文本应能被阅读，并且需要满足台式机上的WCAG AA标准和移动设备上的WCAG AAA标准，或者在任何情况下使用许多环境光源。文字越大，您拥有的余地就越大。应该彻底测试文本的对比度，但是从头开始，白色背景上的18px文本绝对不能比＃595959亮。
2、减少标题间距
绝大多数字体均设计为用作正文文本，大量运行文本多行。制作字体时，为此使用了间距。与运行文本不同，标题趋于简短，并被更多的空白包围——尤其是上方和下方。多余的空格会在视觉上淹没单词形状中的负空格，并迫使字母分开。要进行补偿，请将标题的字母间距和单词间距减少1–5％。
3、松开非单词间距
当我们阅读时，我们的大脑不会逐字母拼出单词；它可以识别单词的形状，甚至单词组的形状。大多数微型打字法都与不破坏这些字形有关。但是，有时候您确实想防止单词形成并允许使用单个字符。松开要作为一系列字符阅读的任何文本的字母间距，例如序列号，跟踪代码和表格数据。
4、使用系统字体作为输入
隐私对于用户来说是一个大问题。作为设计师，您可以做的一切确保用户数据安全的措施，都可以提高网站的用户体验。设置HTML输入的样式以使用系统字体-用户访问网站所使用的操作系统设置的默认字体。这样可以在品牌字体中的品牌数据和用户字体中的用户数据之间创建清晰的界限。以这种方式使用系统字体会鼓励用户感觉自己对数据的所有权，建立信任并增加转换。
5、标记段落一次
文字段落需要以视觉方式指示它们已经开始。通常使用三种方式传达此信息：跟随标题，在段落之前有一个垂直空格，或使第一行缩进。每个段落应使用这些指标之一，并且只能使用一个。由于网站内容的性质和标题对快速扫描读取内容的好处，对于大多数站点，最佳选择是遵循标题和垂直间距的组合。
6、使用原汁原味的风格
出于各种原因，从字体的可用性到积极的优化，站点使用CSS伪造其他样式的情况很普遍。斜体可以倾斜为斜体，粗斜体可以通过使用浏览器的默认值进行伪造，小写字母可以通过将文本设置为大写并减小字体大小来伪造。这些技巧弊大于利，造成变形的字形，打断文本的自然流动。如果您无法部署真正的斜体，粗体和小写字母，请不要伪造它们。寻找其他方法来强调，例如改变颜色。
7、使用正确的引号
撇号，单引号和双引号是特定字符。大多数字体为它们提供一个标志符号，该标志符号与键盘上的快速单引号或双引号键不同。这些引号通常被称为“智能”引号，因为文字处理应用程序通常可以选择“智能”选择使用的字形。使用正确的引号是提供精炼文本的最简单方法之一。
8、正确连字
断字是将单词分成两行。它允许使用不那么极端的参差不齐的文本，这对于与台式机相比可用页面宽度相对较小的移动设备至关重要。Web对正确的断字功能的支持令人惊讶地差，但是它正在逐渐完善，可以用作渐进增强。CSS允许您将连字符设置为无（不带连字符），自动（浏览器自动插入）和手动（在其中使用软连字符指定连字符的显示位置）。在印刷上，可以在任何五个字符或更长的单词中插入连字符。在连字符前面必须至少有两个字符，在连字符后面必须至少有三个字符。您永远不要将三行连续的文本连字符，但是要解决此问题需要JavaScript。您可以通过增加度量来最小化此问题。
但是，您可以对版式进行一些简单的更改，这些更改不会破坏网格，并且可以在短的时间内完成。这是最简单的八个方法。
1、增加色彩对比度
布局文本时，网站设计人员通常会将文本视为视觉设计中的一个块。设计者与文本的关系与用户的文本有很大不同。设计人员将文本定位为形状，用户逐行读取文本。因此设计人员往往低估了对比文字所需的数量。浅灰色文字在美学上很美，但在功能上却毫无用处。文本应能被阅读，并且需要满足台式机上的WCAG AA标准和移动设备上的WCAG AAA标准，或者在任何情况下使用许多环境光源。文字越大，您拥有的余地就越大。应该彻底测试文本的对比度，但是从头开始，白色背景上的18px文本绝对不能比＃595959亮。
2、减少标题间距
绝大多数字体均设计为用作正文文本，大量运行文本多行。制作字体时，为此使用了间距。与运行文本不同，标题趋于简短，并被更多的空白包围——尤其是上方和下方。多余的空格会在视觉上淹没单词形状中的负空格，并迫使字母分开。要进行补偿，请将标题的字母间距和单词间距减少1–5％。
3、松开非单词间距
当我们阅读时，我们的大脑不会逐字母拼出单词；它可以识别单词的形状，甚至单词组的形状。大多数微型打字法都与不破坏这些字形有关。但是，有时候您确实想防止单词形成并允许使用单个字符。松开要作为一系列字符阅读的任何文本的字母间距，例如序列号，跟踪代码和表格数据。
4、使用系统字体作为输入
隐私对于用户来说是一个大问题。作为设计师，您可以做的一切确保用户数据安全的措施，都可以提高网站的用户体验。设置HTML输入的样式以使用系统字体-用户访问网站所使用的操作系统设置的默认字体。这样可以在品牌字体中的品牌数据和用户字体中的用户数据之间创建清晰的界限。以这种方式使用系统字体会鼓励用户感觉自己对数据的所有权，建立信任并增加转换。
5、标记段落一次
文字段落需要以视觉方式指示它们已经开始。通常使用三种方式传达此信息：跟随标题，在段落之前有一个垂直空格，或使第一行缩进。每个段落应使用这些指标之一，并且只能使用一个。由于网站内容的性质和标题对快速扫描读取内容的好处，对于大多数站点，最佳选择是遵循标题和垂直间距的组合。
6、使用原汁原味的风格
出于各种原因，从字体的可用性到积极的优化，站点使用CSS伪造其他样式的情况很普遍。斜体可以倾斜为斜体，粗斜体可以通过使用浏览器的默认值进行伪造，小写字母可以通过将文本设置为大写并减小字体大小来伪造。这些技巧弊大于利，造成变形的字形，打断文本的自然流动。如果您无法部署真正的斜体，粗体和小写字母，请不要伪造它们。寻找其他方法来强调，例如改变颜色。
7、使用正确的引号
撇号，单引号和双引号是特定字符。大多数字体为它们提供一个标志符号，该标志符号与键盘上的快速单引号或双引号键不同。这些引号通常被称为“智能”引号，因为文字处理应用程序通常可以选择“智能”选择使用的字形。使用正确的引号是提供精炼文本的最简单方法之一。
8、正确连字
断字是将单词分成两行。它允许使用不那么极端的参差不齐的文本，这对于与台式机相比可用页面宽度相对较小的移动设备至关重要。Web对正确的断字功能的支持令人惊讶地差，但是它正在逐渐完善，可以用作渐进增强。CSS允许您将连字符设置为无（不带连字符），自动（浏览器自动插入）和手动（在其中使用软连字符指定连字符的显示位置）。在印刷上，可以在任何五个字符或更长的单词中插入连字符。在连字符前面必须至少有两个字符，在连字符后面必须至少有三个字符。您永远不要将三行连续的文本连字符，但是要解决此问题需要JavaScript。您可以通过增加度量来最小化此问题。
相关资讯
阿里云、腾讯云、华为云严选优质服务商
