在网页设计中，排版对于网站与用户之间建立良好的沟通，帮助用户实现自己的目标起着重要的作用。当我们谈到网页是否能与用户建立有效的沟通时，这里通常指的是文本布局的作用：

　　网页中95%以上的信息是文本

　　好的排版让用户更容易阅读，而混乱的排版让用户失去继续浏览的意图。正如奥利弗·赖森斯坦在他的文章《网页设计是95%的印刷术》中所写，排版的目的是优化可读性、访问率、可用性以及与图形的平衡

　　换句话说，优化布局也有助于优化界面。在本文中，我们提供了一组规则，这些规则将帮助您提高文本内容的可读性和可读性。

　　1.不要使用太多字体

　　建议在网站布局中不要超过三种字体类型，否则网站会显得松散和不专业。太多的字体不仅会导致这个问题，而且太多的字体大小也会破坏网页的布局。

　　一般来说，将字体系列的数量限制在最低限度(2个是多个，1个通常就足够了)，整个网站都遵循同样的原则。如果使用多个字体，请确保两个字体协调。以下面的字体组合为例。佐治亚州和威尔达那州相辅相成，相对和谐。与对巴斯克维尔的影响相比，会有明显的冲突感。非线性冲击明显超过巴斯克维尔的视觉冲击。

　　在中英文排版中，建议使用标准的中文字体，英文、数字和字符使用标准的英文字体。以下图为例，看看能不能比较一下美。

　　2.尝试使用标准字体

　　Google Web字体或typekit中有很多有趣的字体，中国的“字体库”中也有字体嵌入服务。对于国内设计师来说，痛苦的是中文字体会非常大，一个字体会移动几兆和十兆，因此用户会增加浏览网站的加载时间;相反，26个英文字母和数百个K数字标点符号在网页中很容易使用。

　　尽量选择标准字体(近年来，网站通常使用思源、平房的粗体字体，英文可以使用Arial、Calibri或其他屏幕上容易阅读的常用粗体字。如果没有特别的概念指导，尽量避免使用衬线字体，如宋体)

　　不是每个用户都能在终端上看到相同的字体，这意味着用户可能看不到您选择的适当字体。

　　用户更熟悉标准字体，因此阅读速度更快

　　特殊的和少量的字体可以做成。SVG格式的嵌入到web中供使用的材料

　　好的字体设计允许用户更多地关注内容本身而不是字体类型。

　　3.限制文本行的长度

　　文本可读性的关键是确保每行中的字符数。不是设计师定义文本的宽度，而是用户的可读性。

　　太宽-会使单行文字太长，读者的眼睛很难集中在文字上。由于长时间阅读容易连读，在一大段文字中很难找到正确的行。

　　太短-会使用户的眼睛经常回到下一行文字，会打破读者的阅读节奏，长时间阅读会造成视觉疲劳。太短也容易向读者发出信号，使读者在阅读当前行之前跳到下一行，并可能忽略潜在的重要单词和句子。

　　以谷歌和百度为例。我们可以看到

　　对于移动设备，每行应为30-40个字符(半角)，显示的具体字数取决于屏幕、文本宽度和不同分辨率的字体大小。设计原则是保证用户能顺利阅读文字，文字不能太小或太大。以IOS(手机)为例，文本的最小字体大小不能小于24px，对于用户来说太小，无法阅读。比如百度，可以作为参考。

　　4.选择具有多个字号和良好显示效果的字体

　　用户将通过具有不同屏幕分辨率的终端设备访问您的网站。大多数用户界面需要不同大小的文本(标题、副标题、文本、注释等)。选择一种能够在不同屏幕分辨率的设备上运行良好的字体，以确保其不同大小的字体具有较高的可读性和可用性，这一点也非常重要。

　　近两年来，无论是流行的思源粗体还是平房字体都是不错的选择。当然，我认为汉仪旗黑色在家族字体数量、字体质量、屏幕显示和纸张打印等方面都不逊于前两种字体。参与字体设计的设计师都表示，思源粗体还是一种比较粗糙的字体。

　　此外，为了确保它们在屏幕上清晰可见，请尽量避免使用衬线，即使它们很漂亮。

　　5.使用识别度高的字体

　　在选择英文字体时，有些字体的个别字母容易混淆，特别是“I”和“L”(如下图所示)，以及字距。使用较小字体(如上图)时，许多中文字体会粘在一起，不易区分;因此，在选择字体类型时，请检查您选择使用的字体，确保不会给用户和产品造成不必要的损失。

　　6.避免在界面的大部分使用大写字母

　　不要对所有文本使用大写字母，强迫用户阅读大写字母、大写字母、有特殊意义的缩写等，只是大量的大写字母会比小写字母严重降低用户的阅读效率和阅读乐趣。

　　7.将行距控制在字体的1.5-2倍之间

　　在文本排版中，另一个特殊术语用来表示行之间的距离：行距(或行高)。为了保证文本的可读性和可读性，使文本形成线性阅读体验，将行距控制在字号(中文字体)的1.5-2倍之间。建议使用英文字体的默认行距，或根据默认行距进行微调。

　　8.适当的颜色对比度

　　一般来说，尽量避免对文本和背景使用相同或相似的颜色。文本越明显，用户扫描和阅读的速度就越快。当然，也要学会通过文本颜色、大小和背景的颜色关系来控制视觉层次。

　　小文本与背景的对比度至少为背景的4.5:1

　　大文本(14px/18px以上)应与背景保持3:1以上的对比度

　　灰色通常用作辅助色。根据之前的项目经验，有必要共享一组灰色、灰色和层次结构，并清楚地区分我一直使用的信息级别

　　9.避免将文本染成红色或绿色

　　色盲和色弱是我必须照顾的一些用户，特别是男性(其中8%是色盲)。建议使用其他方式区分重要信息(如下划线、粗体等)，而不是颜色。避免使用红色和绿色作为单独的消息。因为红绿色盲是色盲中最常见的一种。(现在想一想，那些因为红绿色盲而不能拿到驾照的童鞋，是否恨那些每分钟都要制定红绿灯规则的人。当然，这只是个玩笑。交通灯的使用是因为光学的物理通信，这里没有解释。)

　　虽然在我们的日常生活中，我们总是用这种方式告诉用户，绿色意味着正确的操作，红色意味着错误的操作。反思一下我们是否考虑过色盲用户的操作和体验。或许我们可以考虑用另一种方式来表达对与错?

　　10.避免文本闪烁

　　闪烁的文本或内容可能会让一些用户感到不舒服，这可能会分散或惹恼普通用户的注意力。

　　尽管在网页设计中还有很多事情需要注意，最后，我想和大家分享一个观点，排版在网页设计中是非常重要的。正确的排版可以让你的网站焕然一新，而糟糕的排版会分散用户的注意力，倾向于关注他们的感受，而不是他们的内容。排版的关键是使信息层次清晰，便于用户阅读，并确保文本可读。文字排版不应增加使用者的认知整合，以达到尊重内容和使用者的目的。

TAG：

上一篇： 网页设计中色彩搭配的六大原则

下一篇： 网页设计新创意!能吸引用户的表达方式