在网页设计中如何排版

时间：2023-09-30 23:54:01 | 来源：网站运营

时间：2023-09-30 23:54:01 来源：网站运营

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

一.考虑用户

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







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

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

二.易读性

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

1.高度

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







2.计数器

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







3.宽度

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







4.宽比例

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







5.字母间距

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

三.可读性

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

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

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

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







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

2.黄金比例高度

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

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

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

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




（左图为黄金比例的高度）

3.文本的间距

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

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







4.颜色

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







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

5.留白

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

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

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







6.层次分明

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

结论

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

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

如果你想学习更多关于网页前端设计的技巧，网页排版的知识可以去学习一下《欧美范网页设计实战课程》，如果你没有ps基础可以去学习一下《PS网页前端设计基础》这是一套完全免费的教程，你将会有更多的收获~ 如果你喜欢这篇文章或发现它有用，可以打赏，点❤，也可以点击分享它，这样更多的人可以从中受益~