当我们聊设计的时候，可读性是我们最常提及的话题。良好的设计应该都是可读的设计，如果信息都无法正常而清晰的传达，那么设计就失去了意义。

设计的可读性和排版设计息息相关，与此同时，对比度的控制也是其中的核心。想要提升内容的可读性，让内容以更加顺畅、更符合逻辑的形式呈现在用户面前，你需要借助对比度来表达，让用户真正顺畅的理解。

色彩对比

前景的文字需要和背景有着明显的对比，它需要能够吸引用户的眼球。

创建色彩对比的方法有很多，最流行的做法是在白色或者浅色的背景上使用黑色或者深色的文字。这种设计由来已久，经久不衰的理由是它确实非常有用。当然，将两种颜色倒置过来，也一样有用。

但是，在实际的设计过程中，情形复杂多变。文字和背景的配色往往受到多种因素的影响，这个时候需要多加尝试，反思文字在背景的映衬下是否能够被用户清晰的看到，尤其是在视频和图片之上追加文字排版的时候。

为了降低背景多变的色彩对于文字的视觉影响，一个比较靠谱的方案是在图片和视频上覆盖上一个半透明的有色图层，来“统一”色调，让文本的可读性更好。设计师可以通过调整这个有色图层的透明度、明度和色调来控制和文字的对比度，这样一来，背景图片和视频中的内容对于文字的影响可以降到最低。

另外一个方案，是将文字和图片、视频分开排布，这样就不会牺牲两者的信息表现力，唯一的问题是需要提供双倍的展示空间，并且需要选取合理的排版布局。

文本样式的对比

不同风格样式的文字能够借助差异，吸引用户的注意力。有趣而让人着迷的字体越来越多，比如手写衬线字体 Le Farfalle 就是如此。

单个字体本身的优秀设计是很不错，但是两种不同字体的对比带来的反差，更能吸引用户。

不过，不同字体的搭配是非常讲究的，因为风格不搭的不恰当谁家常常会让用户感到震惊。可以选择一些具有相同特征的不同字体，用户不会为之感到突兀，这些字体最好拥有相同的x高度(小写字母x的高度)，在弧度和倾斜角度上非常接近。这些“和而不同”的字体能让文本内容看起来一致而有差异，有趣而不枯燥。

大小尺寸对比

超大的字体和超小的字体所构成的视觉差常常能够让用户惊叹。

当字体大到一定程度的时候，就能带来足够的视觉冲击，如果搭配上很小的字体构成对比，那么这种视觉冲击会显得更加引人瞩目。虽然超小的字体单独使用也能形成类似的效果，但是相比超大字体要困难的多。

字体的大小差异，很容易被用户注意到，超大的字体能够在你的整个设计当中形成视觉焦点。在文章排版中，正文字体使用正常大小，标题和副标题使用超大字体(副标题会相对小一些)，这样的设计会让文章排版的轻重缓急清晰地呈现出来。

对齐模式

谈到可读性的时候，对齐其实也个无法回避的话题。而在排版中，不同的对齐模式也是能构成对比的。

通常，在对齐的设计上有两种常规思路：

·正文和标题采用不同的对齐模式，构成对比

·在全部排版中沿用相同的对齐模式

从某种意义上来说，两种思路都是对的。选取那种思路，主要取决于文本、标题和其他设计元素之间的关系。如果采用相同的对齐方式，能否保证标题和正文之间有明显对比、能否从背景和其他元素中脱颖而出?文本的行间距、字体大小、和其他元素之间的距离能否构成良好的视觉差?

在谈到UI中的对齐问题的时候，最直观的模型是一段文本和按钮之间的关系。排版中，文本元素和按钮之间的对齐模式应该是怎样的?这个问题很有意思，许多设计师倾向于让文本和按钮纵向排列，居中对齐，但是网站的其他元素搭配进来的时候，又往往不会居中对齐。所以，对齐方式，是由元素本身的属性来决定，根据整个设计，合理搭配。

长文本内容

对于包含大量文本内容的网站而言，正文部分的内容排版就显得相当重要了。如果文本内容都是无缝的呈现出来的话，用户很可能因为没有层次而无法抓住重要信息。

所以，网页中大量的文本信息，应该考虑下列因素：

·文本块的区域和大小

·每行文字的长度和高度

·项目编号和列表

·字符的粗体和斜体

·色彩

所有的这些属性都能将文本中特定的关键词、信息甚至语气同其他的内容区分开来，它们会成为文本中重要的锚点，将和总要的信息通过这种差异和对比，推送到用户面前。

在较长的文本区块中(尤其是博客和长文中)使用不同的样式来区分不同类型的内容，这样做可以明显降低用户阅读的疲劳度。将长内容分解为更易于阅读的部分，用户才更容易买单。

保持一致

一致性几乎是所有设计领域都遵循的原则，无论你在首页或者标题、正文中是如何运用对比的，最好将它延伸到整个设计规范当中去。

尽量使用相同的色彩，一样的样式，统一的字体，如果设计无法保证一致性，会让用户在界面中感到迷惑。确保用户到哪个地方都会觉得他们在你的网站或者APP当中。

Ntgrate 这个网站就很好的贯彻了一致性的设计。背景统一使用了菱形的栅格，而文本则统一使用白底黑字的卡片来承载，同时网站中的大图则是置于背景和文本而卡片之间。

结语

对比度是让设计项目在视觉上更具吸引力的重要工具，它让排版布局更加富有层次结构，高对比度的设计让内容的可读性有明显的提升，而这也是设计可用性达标的最基本条件。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 网站结构中的树形和扁平树形类型对比怎样

  从seo的角度来看，扁平的树形结构相对于标准的树形结构层次更浅一些，所以内页更容易获得首页的权重，这样内页会更有利于排名。 从方便管理来看，扁平的树形结构显然不利于网站页面的管理，而去建立清晰的树形结构更适合大型网站。

• 网站及时做好死链的处理的意义和好处是什么

  在网站SEO优化中出现死链接是不可避免的，对于很多刚做SEO优化的站长来说看到这些死链接都是非常头疼的，那么在网站SEO优化中死链及时处理有哪些好处呢？

• 十个搜索页面设计技巧，助你提升用户体验

  现在搜索引擎也越来越注重网站的用户体验，因此要提升网站的流量以及排名，提升网站的体验很关键。其中网站页面搜索是很多人容易忽视的问题，其实做好搜索优化对于提升用户体验是有很大帮助的，下面是小编整理的十个搜索结果页面优化的技巧，大家可以参考一下。

• 做好网站运营有技巧，有哪些思路要把握

  怎么做好网站运营？网站只开发不运营是不行的，该怎么才能运营好一个网站呢？为什么投入了大量的时间和经历却运营失败呢？下面我们就来看看运营网站的五种思考

• 聊一聊网站关键词提炼和优化的技巧

  网站关键词优化就是把网站里面的关键词进行选词和排版大优化达到优化网站排名的效果。每个做网站的人都希望自己的网站关键词排名靠前，这样也就更容易将网站内容展现在给用户，因此做好网站关键词优化是很必要的。那么网站关键词怎么优化呢？