在网页设计中如何排版

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

一.考虑用户

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

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

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

二.易读性

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

1.高度

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

2.计数器

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

3.宽度

较细的字体一般比较宽的字体更容易辨认。

4.宽比例

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

5.字母间距

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

三.可读性

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

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

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

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

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

2.黄金比例高度

可使用黄金比例的高度。

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

小的计算，能够用--JSBI.COM/TodiDu/1/*

若是你颇有经验，那么你能够手动调整这个结果。固然，这个规则也有例外，若是必要的话，你老是能够打破它。

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

3.文本的间距

太宽的文本间距会致使咱们的眼睛很难找到下一行文本。若是间距太窄，眼睛就会容易从这行误当作下行，常常打破阅读的节奏。

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

4.颜色

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

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

5.留白

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

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

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

6.井井有条

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

结论

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

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

若是你想学习更多关于网页前端设计的技巧，网页排版的知识能够去学习一下《欧美范网页设计实战课程》，若是你没有ps基础能够去学习一下《PS网页前端设计基础》你将会有更多的收获~