10个排版技巧让你的网站逼格满满

时间：2023-09-05 13:00:02 | 来源：网站运营

时间：2023-09-05 13:00:02 来源：网站运营

10个排版技巧让你的网站逼格满满：作者：Nick Babich 翻译：桥豆麻袋



沟通在设计中起着至关重要的作用------它在网站和用户之间建立了清晰的的联系并且帮助你们的用户完成他们的目标。当我们讨论网页设计内容中的沟通时，往往就是在强调文本的作用。排版在这个过程中是非常重要的：

超过95%的网页信息都来自文字信息

好的排版让阅读不费力，而不好的排版用户可能会直接放弃阅读。就像Oliver Reichenstein在他的文章中所说的“网页设计的95%都是排版”

最好的排版就是具有最佳的易读性，易理解性和可用性，总体上与图片的平衡性。

换句话说：最好的排版也是最佳的用户界面。在这片文章里，我将会提供一系列的方法去帮助你提升文字的可读性和易读性。

译者注：可读性和易读性经常被混淆。可读性通常用来形容某种书面语言阅读和理解的容易程度——它关乎这种语言本身的难度，而非其外观。 影响可读性的因素包括词句的长度，以及非常用词的出现频度。与之相是排印文对，易读性描述的本阅读时的轻松和舒适程度。它和语言内容无关，却与文本印刷或显示的尺寸和外观联系密切。

1.保证最少量的引用字体

网站设计中超过3种字体会令界面看起来无组织感和不专业。要记住过多的字体样式和参差不齐的字体大小会破坏你的界面的严谨性。


为了避免出现这种情况，去限制字体样式到最少的程度是很重要的

总之，限制好字体数量，（两种已经足够，通常一种就够用了）并且始终使用相同的字体。如果你使用超过一种字体，那就尽量保证字体之间会基于字母宽度相互协调。举一个字体联系的例子：Georgia和Verdana之间的联系是使用相似的字重从而去创造一种和谐的关系。另外一组Baskerville和Impact，粗字体的Impact就极大的夺去了他的衬线体搭档的光彩。


确保字体之间基于字母的字重相互协调

2.试着去使用标准字体

字体嵌入服务（像Google Web Fonts和Typekit）有很多的有趣的字体可以让你的设计变得更时尚，新鲜和超乎想象。他们也都非常好用。比如Google：


1.选择任何一个字体比如Open Sans

2.生成代码然后粘贴到你的HTML的头文件中

3.完成！

所以，有什么问题么？

额。。这样做还是会有两个问题的：

• 不是每一个人都能够获得相同的那个字体。这就意味着，你选择的漂亮的字体在你的访客那里呈现的可能是另外的一种样子
  
  
• 用户对标准字体更加熟悉而且会因为使用常规字体而提高阅读效率
  
  

除非你的网站有非常强烈的需求要去自定义一种新字体，比如为了品牌的目的或者去创造一种身临其境的感觉，当然通常最好的方式还是是坚持使用系统字体。系统字体诸如：Arial, Calibri，Trebuchet,等等。记住好的排版让读者沉浸其中，而并不是字体本身。

3.限制每一行的长度

每一行的字数保持一定的数量是加强可读性的关键。不应该让你的设计被文字宽度所限制，应该让易读性被优先考虑。以下是Baymard Institute为提高可读性和适当的行长度的建议：

“如果想得到一个好的阅读体验，每一行的字母数量在60个左右是比较合适的。每一行保持正确数量的字母数是文章具有可读性的关键。”

如果一行特别短，眼睛就要一直来回看，便打乱了阅读的节奏。如果一行文字太长，用户的眼睛又会要有很长的时间关注在文字上。


对于移动设备而言，每行字母应当保持在30-40个左右。下面就是网页在两个手机上显示的例子。第一个使用了50-75个字母每行（电脑上使用的每行容纳的最佳字母数量形式），而第二幅图就使用的是在手机上显示每行30-40个字母的形式。


在网站设计中，你可以通过限制你的文字块的宽度，或者像素来保证最佳的每行字母数量的设计

4.各种的字号中使用同一种是最好的方式

用户访问你的网站时使用的是不同的分辨率和解析度的设备。很多的界面要求文字元素使用不同的大小（按钮复制，领域标签，段落开头，等等）以多种尺寸和字重来表现信息的时候，只选择一种字体来提高可读性和易用性是非常重要的。



一定要让你的字体在很小的屏幕中也能够很好的展示出来！

尽量避免使用手写体，例如Vivaldi(下面的例子中的)：虽然他们很漂亮，但是真的很难读。


在小分辨率的屏幕上真的是很难阅读

5.使用具有字母区分度的字体

很多字体中有一些相似的字母很容易让人迷惑，特别是”i”和“L”（就像下面的例子），并且还有的有很窄的字母间距，就像当一个“r”和“n”在一起就像一个”m”.所以当你选择你的字体的时候，你要把那些文字检查无误，让他们不会给你的用户造成困扰。

6.避免全大写

所有的大写字母----不是非常重视阅读的情况下是可以接受的（比如缩写或者是logo），但是如果你的信息涉及到阅读的需求了，那就不能强迫你的用户去读全大写的内容。就像Miles Tinker在他的里程碑式的工作中提到的，文字的易读性，跟小写字母排版相比，全大写排版几乎完全忽略了对于浏览和阅读速度的追求。


全部大写段落是不好的。而且在加粗之后还是很难阅读。你读着感觉舒服吗？

7.不要留较小的行间距

在排版中，我们有一个专有名词来表达行与行之间的间距--leading（或者行高）。你可以通过增加行高，而增加两行文字之间的距离，总体上以屏幕的实际使用面积为交换来提高可读性。有个准则就是，行高应该高于文字高度的30%才能提供好的阅读体验。

好的留白提高可读性

Dmitry Fadeyev的一个已经被证实的结论指出，恰当的使用段落之间的留白空间能够提高20%对文章的理解度。使用留白的技能有赖于为你的用户提供可辨识的内容并且摈弃掉无关的细节。


左边：过度拥挤的排版 右边：合理的空间提升可读性

8.确保有效的色彩对比

不要用和背景相似的文字颜色。文字越清晰，读者看的越快。W3C要求主体文字和图片文字的对比度比例如下：

• 小的文字应该至少和背景保持对比度为4.5：1的比例
  
  
• 大的文字（14点粗体/18点常规题和以上）应该和背景保持至少3：1 的对比度
  
  

这两行的文字都没有匹配到对比度要求导致很难阅读



这两行文字对应到了文字背景对比度要求所以很容易阅读


一旦你选择好了你的颜色，使用主要的的设备去给一些真实使用者测试是非常必要的。如果测试中出现了阅读上的任何的问题，你就可以确定你的用户将会遇到同样的问题。

9.避免使用红色或者绿色作为文字颜色

色盲是一个共同的话题特别是他们中占多数的男性（8%的男性是色盲），所以应当使用一些额外的颜色去区分重要信息。并且避免只使用红色和绿色去传递信息，因为红绿色盲在色盲患者中占大多数。

10.避免是用闪烁的文字

内容闪光或者闪烁容易引起敏感的人癫痫病发作。不仅如此，可能还会对用户造成打扰或者让其分心。

结论

排版是一个大的问题。正确的文字排版选择会让你的网站给人眼前一亮和优雅精致感觉。另一方面，坏的排版选择，容易分散用户的注意，并且让他们将注意力转移到了自己身上。让文字排版可读，易理解和易读是非常重要的。

排版存在于值得光荣的内容中

排版应该为他的内容没有为读者增加认知负担而感到光荣。