可以说,排版是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基础可以去学习一下你将会有更多的收获~想要这些网页前端设计资料可以在评论区留言扣1或私信给我哦!