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

做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,动手开始创造一些超棒的作品吧!

低至0.26元/天,
免费下载设计素材!