前端设计师如何提高UI界面中的阅读性

阅读体验是ui设计中必不可少的一项，良好的设计应该都是可读的设计，如果信息都无法正常而清晰的传达，那么设计就失去了意义。设计的可读性和排版设计息息相关，这也就跟设计师的设计功底息息相关。下面简单介绍文字影响UI界面阅读性的几种情况。

文字大小

文字的大小无论在ui界面或者网页当中任何一个地方，都起到一定的作用。而文字作为设计的一个组成部分，阅读性就必须得到保证。那么，如何去选择字体的大小能达到比较好的效果呢？

在网页中，我们常见的文字大小一般是14px、16px，最小的字体一般是12px的。标题类的字体大小一般都在18px以上。我一般给客户做网站，正文一般会选择14px的字体，标题类的会采用22px加粗的一个字体。有一些特殊的界面设计上，标题可能要求更大，字体也要细一些的，这些需要单独做变化。网页中字体的大小尽可能的选用偶数，如果是奇数的话，字体显示出来的边缘会有一些毛边，不利于阅读。

在ui界面当中，在字体大小的选择上需要多斟酌一下，正文的自号大小和标题的大小应该有所区分，可以在黄金比例的字号上稍微找寻一个适合阅读的字号比例。在苹果6的界面下，我们常见到的标题大都是34px的，部分的app的界面系统在部分标题下会使用到36px。这里再补充一点，无论什么系统，在UI界面中标题或正文的字体一定要选用偶数，因为在开发界面的时候，字号大小换算是要除以二的。



对字号的选择如果还拿捏不准的话，还选择一些工具来进行辅助选择，比如Modular Scale（链接打不开看这：http://www.modularscale.com），可以借鉴下里面的字体比例。

字体的选择

都知道字体有宋体、黑体、楷体、手写体等多种字体形式，不同的字体表达的情感诉求是不一样的，这些外形不一样的字体也会造成阅读性的易难程度。
字体样式对易读性和快速浏览非常重要，所以我们可以先来了解下ui界面下如何选择字体。

1）iOS系统中用的字体是苹果官方字体系列。
苹果官方系列字体以SF和SF Compact 两套字体为主。SF和SF Compact 分别又命名为Text和Display两个子字体系列。Text 系列字体用于小文本显示，而Display 系列字体用于较大的字体显示。


2）Android的默认字体是Roboto和Noto系列。
Roboto系列字体有6种字样：Thin、Light、Regular、Medium、Bold 和 Black。
Noto系列字体有7种字样：Thin, Light、DemiLight、Regular、Medium、Bold 和 Black。


 知道了这两个系统的字体，我们在设计界面的时候就可以有针对性的对文字做更深入的研究和设计，尽可能的提高界面的阅读性。
 

文字的字间距

调整文字字间距的情况比较少见，但是特殊情况下是会做相对应调整的。都知道，字和字之间是有间距的，我们打出来的字体都是有默认的固有间距。通常情况下默认的固有间距是不需要我们去调整的，只有在特殊情况下才需要对字间距做相对应的调整。

大标题因为字号比较大，在一些特定的界面上，大标题的字间距会被缩小。这个调整是细微的，可能我们都没察觉。那也侧面说明调整过的字间距还是合适我们眼睛阅读的。

 

文字的行间距

行间距需要调整的地方就比较多。在整个段落中，每行的字符数对于整体的可读性起着主要作用。如果文字段落非常宽，阅读性则差。文字设计得太密集也不行，会给读者的眼睛带来压力，造成混乱。所以段落的行间距在设计的时候就需要留心。

行间距设置可选择在字体大小的120%到145%之间，这个比例是我个人觉得比较合适舒服的，大家可以试试。

 

文字的段间距

段落与段落之间需要有一定的距离，如果段落间距离过小，同样影响视线的移动，过大则容易导致上下文的联系变得松散。段间距比较常见的设置为2.0em。

 

文字的颜色和对比度

文字颜色与相应背景也至关重要。如果在绿色背景上写绿色文字，就难以阅读了。设计师选择浅色字深色背景，或是深色字浅色背景，都是有原因的。对比使得字符容易阅读。
​

文中提及的关于文字设计来提高UI界面的可读性，说白了其实不过是选择什么字体设定什么参数，但恰恰有可能是你看似一个不重要的数值，而导致整个界面的阅读性丢失。当用户打开阅读性差的界面，可能不过几秒就会关闭，这对产品来说是相当大的损失。所以说到底，前端设计师们在设计这些界面的时候，一样要认真对比，保证界面优美的情况下还能有效的阅读。