【怎么调整段落位置从小到大排列】如何科学地提高文本可读性？

排版设计是ui设计师的基本功。但是可能是因为太基本了，很多设计师直接忽略了它的存在，最终实现往往不理想。也许因为这些细节，手里的产品总是看起来那么糟糕。尤其是重视阅读体验的部分页面，所有的细节都可能成为致命的伤害。

艺术是没有根据的，但文字排版是有根据的。以下是排版的字体样式、空格大小、对齐方式、颜色对比四个要素，简要说明如何科学地提高移动端文本的可读性，提高设计质感。(找到设计依据后，面对产品经理的质疑，更有了回去的欲望。哈哈哈)

大前提：明确设计目标

所有设计都必须在此前提下进行。下面提到的数字只是参考，更重要的是，我想通过页面传达给用户的信息来明确设计目标，从而调整设计。否则，设计的意义就不存在了。

字体大小

通过字体大小强调内容，区分级别是设计趋势，也是ios11的设计理念之一。那么，如何选择字体的大小，才能得到更好的结果呢？

Material design相对块主要标题和内容文字的大小分别设置为24sp和15sp，24/15=1.6，接近黄金比例。Airbnb的主要标题和内容文字的比例也接近黄金比例。

实际上黄金比例的大小对比是移动端适合突出主题的比例，是“美”的比例，但不一定适合阅读。以阅读为主的页面可能需要较小的比例来选择大小。如果您对大小选择没有信心，可以使用Modular Scale(Adobe排版主管Tim Brown制作的工具)等工具来包含历史上最令人满意的比例关系。符合这个比率至少不会产生错误。

文字留白

“空白”在版面上留下了可用空间，处理好空白可以使文本视觉流动流畅，提高阅读舒适度。对于一篇文章，从小到大的空格字符中的空格、字符和字符之间的空格、行和行之间的空格、段和段之间的空格、空格的大小也要遵循此顺序。

行距设置：行距设置会直接影响将视线从上一行的末端移动到下一行的起点。行距太高，视线分散，很容易逃脱。行间距太小会影响视线的移动，所以找不到正在阅读的行。通常，建议将行高设置为1.5em-2.0em。在此基础上，字体样式、大小和线宽也会影响行距设置。

段落间距设置：段落和段落之间需要一定的距离，如果这个距离太小，还会影响视线的移动，如果太大，上下文连接很容易松动。通常，将分段间隔设置为2.0em也是很常见的。

对齐方式

文本对齐主要有四种：左对齐、居中对齐、右对齐和两端对齐。通常，移动结束文本的对齐方式主要使用左对齐或两端对齐。这里简要说明了这两种排序的优缺点。

左对齐：应用主要是“豆瓣、简书、知乎”。左对齐容易导致右端太空和整体视觉不平衡，但这种对齐不会破坏文字本身的起伏和节奏，从而确保更好的阅读体验。

两端对齐：表示应用程序是“微信阅读，部分微信公众号”。两端对齐保证段落文字整齐、有规律地聚集在一起，但如果打破了文字和字母之间空格之间形成的韵律，阅读起来可能会不方便。(特别是在英语使用较多的情况下)

对比度

一个优秀的页面需要足够的文本对比度。对于阅读的内容，如果对比太强烈，太弱，对阅读不好。在material design中推

荐的文本对比度为7:1，最小值为4.5:1。

前段时间我在产品的某个不知名的角落发现了这样一个页面，看起来不是十分舒适，文字和背景的颜色对比度太低。

于是我开始探索有什么方法可以去科学地衡量这个对比度，而不是单纯凭靠感觉。最近终于发现有许多网站可以对色彩对比度进行检查。我用其中一个网站对这个页面进行了测试，可以看到它的文字对比度是3.96:1，除非加大字重，否则它就是不合格的。（所以，设计师的眼睛就是雪亮的啊）

制定你的排版风格指南

说了这么多，其实最重要的还是规范。制定一个团队中每个设计师都信服并且遵循的排版风格指南，来标准化团队设计师的文字。如果设计仅仅凭靠感觉，团队中每个设计师会有不同的感觉，最后做出来的页面也有五花八门的“感觉”，这是很可怕的。

图片来自网络

最后，优秀的设计还离不开设计师负责到底的精神。前文所提到的大小、间距、对比度，在前端和产品经理的眼里只是一个数值，他们并不知道一个数值的微小区别对一个页面来说会有多大的影响，可能会因为种种因素调整你的设计。所以，设计师必须用一丝不苟的精神对你的页面负责到底，这样才能最终产出一个充满设计质感界面。

作者：丁珍，云之家用户体验部视觉设计师。只想安安静静做个野生的我。

本文来源于人人都是产品经理合作媒体@金蝶云之家体验中心（微信ID：UXD-Cloudhub），作者@丁珍

题图来自PEXELS，基于CC0协议