如何设计网页正文(2)

留白不一定代表要用白色，在实际设计中，我们将留白称之为“负空间”，它除了用白色以外，还可以是背景，指的是“未使用的区域”，内容与内容之间的间隙。在页面空间中，将图形、文字、图片等元素通过合理的布局，展示一个较好的空间关系，提供了布局上的平衡，留白区域的环绕与陪衬，良好的衬托出中心区域的表现。

留白分类：

宏观负空间：不同内容块之间的空间微观负空间：一个内容块内不同文字或图片之间的空间

某域名网站

Medium

合理的内容布局，以及易于阅读的字间距，段间距，页边距，能够让用户更舒适的阅读你的网页正文，如上图，Medium的网页可以很轻松的指引用户去寻找他想找的内容，而另一张图的网页元素过多，用户的注意力很容易分散，太多东西挤在一起，用户会不知所措并忽略大部分内容。

对齐

通过上文介绍的用户常见浏览轨迹，了解到用户浏览网页时，一般很自然的沿着左侧边缘浏览文本，如果左侧边缘不齐，会增加用户浏览和寻找信息的难度，尽可能的保持文本左对齐以符合自然的浏览行为。

Google搜索结果页

左对齐文本比较方便用户浏览，左边缘与上下间距的一致性，用户可以自然地下意识去寻找下一行或下一个词语。

数字

文本中的数字，相比于其中的文字，会格外的吸引眼球，用户在阅读的过程中，对于数字会比较敏感，一般文本中的数字代表着数据和事实，这些可能正是用户想要寻找的内容。此外，数字也因为形状的不同而在文本中会比较显眼。

网页正文中数字的设计一般遵从如下几点原则：

用阿拉伯数字写，而非文字（如35，不是三十五）。十亿以下的大数用阿拉伯数字表示。2,000,00比二十万的写法要好。两万亿比2,000,000,000,000的写法好，大多数人数不过来这么多零。作为折中，有些情况将数字写成阿拉伯数字+文字的结构会比较好，如350亿（不是三百五十亿或35,000,000,000）。不能代表确切事实的数字用文字表示（只是表达估计或者想法，则应该用文字表示数量级，比如“中国有接近两千万人将成为光棍”）。图片

图片可以吸引和引导注意力，人们非常习惯面部图片和定向信号。在网页中放置一张有人脸的图片，则用户的注意力很容易被吸引到图片及周围。而且如果图片中的人物视线指向某个方向，则用户的视线也会追随其注视的内容，这一原理适用于指向性提示，如将行动号召或slogan放置在人物视线望去的方向，可大大吸引用户的注意力。

摸着你的良心告诉我，上面哪个Banner图更吸引你的注意力。

用户浏览网页时，会跟随网页图片中的人物视线方向，移动浏览视线，将重要内容放置在此，可大大提高用户的注意力。

字体与排版

文字排版需要考虑文字辨识度和页面易读性。好的网页正文排版，应该让设计毫无痕迹，用户很自然的关注内容，而不是设计本身。影响文字阅读舒适性的因素主要有字体、字体大小、行距、行长、颜色等。

字体

关于字体的选择，衬线字体与无衬线字体都没有关系，一般可辨性都差不多。但在一些特定的场景、字号下，某种特定字体可能会更合适，比如说，在大量文本的场景下，如果使用小字号，如12号字的话，宋体的可辨性会好于微软雅黑，且读起来轻松，不容易产生疲劳。而Slogan或者Title之类的需要醒目的标识适合使用非衬线体，如黑体、雅黑等字体，容易吸引用户注意力。

第一个表格字体是微软雅黑，第二个表格字体是宋体，对比来看，在小字号的字体上，宋体的辨识性会好于微软雅黑。

字号

网页正文使用的字号大小，也与该网站的定位、品牌及目标用户有关，一般正文字体大小采用12-14号字。举个栗子：

豆瓣

百度知道

豆瓣正文使用的是12号字，百度知道正文使用的是14号字。从视觉上看，豆瓣的整体字号偏小，虽然用户阅读起来会容易产生疲劳，但小号字传递给人的感受很精致，符合豆瓣用户群体的文艺气息，所以它的的目标用户普遍都还是接受的。如果将豆瓣正文字号换成14号，如右图，就会显得有些粗糙，不够精致细腻了。不同产品面对不同的用户群体，百度知道的用户群体覆盖全年龄段，需要以阅读的清晰度为主要考虑点。

行距

行距是影响可辨性的一个重要因素，字体越大，行距越大，行长越长，行距越大。一般行距是字体大小的1-1.5倍时，阅读最有效。

过窄的行距，容易出现跳行，而过宽的行距会让文字失去延续性，影响阅读。

行长

行长不宜过长，也不宜过短。过长的话，用户视线移动距离长，很难注意到段落起点和终点，阅读比较困难。而过短的话，眼睛需要不停来回扫视，破坏阅读节奏。因此，需要设定一个合适的行字数，提高文字的易读性。

为了让用户在阅读过程中，能够舒适的从一行换到下一行，需要在一行的结尾与下一行的开始之间保持一个合适的角度，行距应该随着行长的增加而增加。

文字与背景颜色

文字和背景颜色的合理搭配，合适的对比可以提高文字的清晰度，增强可读性，一般浅色背景下的深色文本比其他形式更容易阅读，深色背景下的浅色文本会使阅读速度明显减慢。

如上图对比来看，浅色背景下的深色文本会比深色背景下的浅色文本更容易阅读。

必须要保证文字与背景有足够强的对比度，确保文字能够让用户清晰阅读，如上图，如果文字与背景颜色对比度过低的话，文字的可读性会很差，用户阅读起来吃力。

总结

编辑：cherlee