如何在界面设计中进行文字排版？

做ui设计的朋友们，你们一定在设计中碰到排版的吧，根据我的经验，排版是UI设计中最难的部分。它们存在于各种形式并与我们相处了很长的时间。还好我们有许多规则、实践方式与理论可以帮助那些比较难跟上的人。在这篇文章中，我将给你几个实用的提示和技巧让你可以在项目设计中使用。

超越理论的实际案例

虽然排版是一个非常吸引人的主题，但我不会用太理论的东西来烦你。也不会解析字母和连字等等关系，以下我们将直接进入练习。

想想使用者

我们应该记住美学之外我们还有使用者。你正在设计的应用不仅运行在iPhone X上，而是有更多不同的设备…

所以你使用的字体必须灵活。你的字体应该提供各种粗细变化、在特殊符号中的宽度范围，它也必须要渲染地非常好。必须要注意这些方面，确保你的用户不会因你的无知而受苦。好的排版对观看者来说是“没有感觉”的，而不好的排版呈现在屏幕中则会感到非常可怕。

了解是什么原因让字母可读性更高，可以让我们更好的去反省我们应该为我们的界面选择什么样的字体。

一、易辨性(Legibility)

易辨性是我们可以多轻易在一个字体中区分两个字母。这是非常专注在字体、字母与细节的细微排版。当然，这也是最重要的因素之一。不是所有的字体当初被设计出来都是都是容易阅读的。最常见的问题是大写的字母“I”和小写的“L”之间没什么区别。你必须避免这种字体，因为如果使用者在小屏幕上阅读可能会出问题。

X高(X-height)

我们读的字母有95％是小写字母。大小写字母之间比例上越大的字体可读性更高。

字腔(Counters)

我们的字母中还有许多空白。例如看看o、u、d。这些空间被称为字腔，排版专家相信这个空间越大可以帮助我们更容易分辨这个字母。

粗细(Weight)

细的字体通常比较粗的类型的字体更易辨认。粗细和字腔有关，必须考虑到不能去修改文字的形状。

哪一个更容易阅读？

最佳文字笔划粗细约为x-height的18％。

宽比例(Wide Proportion)

字符的宽度相较于它的高度被称为比例。一般来说，比起压缩过的字母，你会想要较宽的字母，因为它有更好的易读性。

第一眼的差别是很微小的

字距(Letter spacing)

没有一个根本的方式来计算字母的间距，但大多数时候越大的文字大小需要更小的字距。字型有时显得太开所以你必须要手动调整间距。对UI设计来说它通常出现在标题时。

再说一次，其实差异非常微小

二、易读性(Readability)

易读性关乎于整体的阅读体验。我们可以轻松扫视文字编排、区分标题、副标题、段落和区块。这样的宏观排版使文字更具视觉吸引力，也令人更想去阅读。这真的是一门艺术，利用对比、颜色、大小、构图和微小的细节成就更好的阅读体验。

衬线字(Serif)对上非衬线字(Sans Serif)

历史告诉我们衬线字更易于辨识。他们在传统印刷中使用了很长的时间，同时也真的提高了大型区块文字的阅读体验。衬线字让我们的视线更容易穿梭于文字间。

但这个原则在网页和手机上则是不一样的。其实有些无衬线字体也是很容易阅读的，且目前视觉设计来说更喜欢简单无装饰的字体。在网页浏览特别是手机上，我们其实可以看到更多的无衬线字体。而且萤幕显示器并不是一张纸，通常我们不会在网络上阅读很长的文章，而在app中更是如此。

在twitter中没有半个衬线字，但在Medium中有衬线字却很合理

但这一切都取决于你的项目内容，以及用户会如何使用您的内容。例如在Medium上我们使用的是衬线字，因为大多数时候你会在Medium上读很长的文章，所以这是一个不错的设计方法。

行高(Line height)

当讲到行距时我非常建议使用黄金比例。

将你的字母大小乘以1.618，你将会得到完美的行高。

如果你是有经验的老手的话，你可以手动调整这个结果。当然，这个规则也有例外，如果必要的话你随时可以打破这个规格。

都是微小的差别，但却大大影响我们的可读性

文字区块的宽度

这就像我们在走在薄冰上。太宽的对于文字区块会让我们的眼睛很难找到下一行文字。但如果太窄的话，眼睛将需要从一条线跳到另一条线，这样会经常打破阅读节奏。我们的潜意识在跳至下一行时会充满活力(只要它不那么频繁)。

为了激励读者并让他们持续阅读，你的每行文字长度应该有50到75个字符。

颜色

这当然取决于你的项目，但在这里我想分享一个技巧。用下面的方式选择你的主要颜色来取代纯灰色(或黑色)：

看粉红三角形的区块

这样会比使用常见的#CCC更独特且更有吸引力。这些小细节将会让你的视觉体验更好。

留白空间

这在满多的书籍和出版物中是一个满大的议题，但是当涉及到排版的话你需要记住这一点：

留白的基本作用是减少让阅读者一次看到这么多数量的文字

这让我们的版面布局更容易快速扫视，并且不会让我们的内容负担太重。白色的空间引导我们的眼睛穿梭在布局中并且创造规则、精细和优雅的感觉。

层级(Hierarchy)

层级关系定义了我们如何阅读内容。它告诉我们如何区分标题、副标题和正文。我们可以透过使用不同的对比度、文字大小、内间距、外间距等来实现这一点。我们必须掌握这一个重要的技巧以获得良好的可读性。

注意细节，日期的颜色和描述的颜色不同，但是一开始很难看出区别。

分隔器(Separators)

将内容分成几个部分的好方法是使用分隔器。目前最流行的是简单的一条线。它是个微小的方式但仍在可读性方面发挥重要的作用。

另一种方式是现在非常流行的卡片式设计。这个方式当内容不相关的时候使用真的很棒。对于常常用大拇指使用手机来说非常的棒，而且也让我们方便扫视整个布局。

重复和节奏

这是UI设计中最耗时的部分。任何重复的元素可以提供一致性，重复的部分可以是位置、文字大小、颜色、内距、外距，一些规则的使用等等。例如我通常让内距/外距的大小为5，所以它看起来会更一致(这是我的规则之一)，「重复」将产生「节奏」。

三、结论

学习排版技巧可以比作是一个迷人的旅程，而且当你的的技能开始进步之后，结果是让人非常满意的。这个技能不是从阅读本篇文章就能获得，而是需要不断学习和不断的动手练习。所以打开你的Sketch或者Photoshop，动手开始创造一些超棒的作品吧！