可以说,排版是UI设计中最难的部分。在这篇文章中,我会教你一些实用的技巧,你可以在你的项目中使用。

一.考虑用户

我们应该记住,除了美学,我们还有用户。

file

你需要使用的字体要灵活。你的字体应该提供粗细不同的宽度。注意这些方面是很重要的,好的排版对读者来说是“透明”的,但坏的就会让人从显示器上“尖叫”出来。

了解什么字体是让人最易读的,整体看起来最简洁大方的,我们就应该选择什么样的字体来排版。

二.易读性

易读性是衡量在一个特定字体中区分一个字母和另一个字母的方式。它是微型字体,专注于字体、字母和细节。自然,这是最重要的因素之一。并非所有字体都是以可辨认性作为主要设计功能而创建的。最常见的问题是没有区分大写字母L和小写字母l。你需要避免这种字体,因为人们在小的显示器上阅读时会遇到问题。

1.高度

我们读的95%的字母都是小写字母。大写字母和小写字母之间的字母比例越大,字体越容易辨认。

file

2.计数器

字母也需要有空间。例如,看“O”“U”“D”。这些空间被计数器和排版专业人士认为,在计数器中能帮助我们更容易识别字母。

file

3.宽度

较细的字体通常比较宽的字体更容易辨认。

file

4.宽比例

字母的宽度与其高度的关系称为比例。 最佳笔划宽度约为高度的18%。

file

5.字母间距

没有计算字母间距的最终方法,但大多数时候,你所需要的字母间距越大,文本大小越大。字体将显得过于开放,需要手动调整间距。对于UI设计,它通常适用于页眉。

file

三.可读性

可读性是关于整体阅读的体验。我们如何容易地扫描文本布局,区分标题,副标题,段落和块。它的宏观排版,是使文本更具视觉吸引力,以使其更令人鼓舞的阅读。这是一种关于对比、色彩、大小、构图和小细节的艺术,可以给读者带来更好的阅读体验。

1.有衬线字体与无衬线字体

历史告诉我们,衬线更容易辨认。他们在印刷中使用了很长一段时间,他们真的提高阅读经验的大块文本。衬线允许眼睛在文本上更容易地流动。

但是这有几个没有衬线的设计是可读的,当前的视觉设计状态更喜欢简单的字母表单。在网络上,特别是在手机上,我们看到的是更多的没有衬线的设计,这样的设计使人看起来更简洁。

file

当然这也取决于你的项目和用户。例如,在媒体上,因为大部分时间你会读很长的文本。有衬线这是一个很好的设计方法。

2.黄金比例高度

可以使用黄金比例的高度。

把你的文字大小乘以1.618,你就能得到完美的线条高度。

小的计算,可以用--HTTP://JSBI.COM/TodiDu/1/*

如果你很有经验,那么你可以手动调整这个结果。当然,这个规则也有例外,如果必要的话,你总是可以打破它。

file (左图为黄金比例的高度)

3.文本的间距

太宽的文本间距会导致我们的眼睛很难找到下一行文本。如果间距太窄,眼睛就会容易从这行误看成下行,经常打破阅读的节奏。

为了激励读者,让他们参与,你的文本行应该在50到75个字符之间。

file

4.颜色

给大家分享一个颜色的窍门,使用颜色时尽量不要使用纯灰色或者纯黑色的,当然这也要取决于你的项目的需求。也可以在这选择你喜欢的颜色:

file

它将比使用普通的#CCC更具吸引力和独特性。让你的视觉效果更好。

5.留白

这是一个重要的话题,有许多书籍和杂志,要涉及到排版时,都需要记住这一点:

留白的基本作用是减少文本访问者一次看到的数量。

这使得我们的布局更具可扫描性,它不会使我们的内容超载。留空间引导我们的眼睛通过布局,创造秩序,优雅的感觉。

file

6.层次分明

层次结构定义了读者如何读取内容。它告诉我们如何区分标题和副标题和正文。我们可以通过使用不同的对比度、文本大小、间距等来实现这一点。这是一个重要的技巧,需要掌握,以达到良好的可读性。

file

结论

学习排版是一个重要的旅程,技能不是来自于阅读中的文章,而是来自学习和实践。所以需要你去多多的练习,去创造一些很棒的东西!

“艺术的伟大不在于发现什么是共同的,而在于什么是独特的。”(Isaac Basvenis)辛格(1904—1991)

如果你喜欢这篇文章或发现它有用,可以打赏,点❤,也可以点击分享它,这样更多的人可以从中受益~
如果你想学习更多关于网页设计,网页排版的知识可以去学习一下《欧美范网页设计实战课程》,你将会有更多的收获~