如何设计网页正文

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

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

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

豆瓣

百度知道

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

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

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

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

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

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

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

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

以上介绍的这些都是关于如何设计好网页正文的一些基本知识，设计前，我们需要先了解我们用户浏览网页的习惯，然后结合我们的产品目标、设计目标，设计整体页面架构，以及合理的组织网页内容，然后再通过一些设计策略，向用户清晰的传递出我们网页正文的视觉层次，引导用户按照我们既定的浏览路径，舒适的浏览网页正文，只有当我们制定的设计策略能让用户在寻找和使用信息时以最少的投入获得最大的利益时，我们的设计才有价值。

作者：代希刚，腾讯交互设计师。

来源：微信号公众号“UXXX”（ID：iamuxdesign）

文章作者系 @代希刚 授权发布于人人都是产品经理，未经作者许可，禁止转载。

（编辑：惠州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!