学排版设计：如何科学提高UI界面文本易读性，提升设计质感？

将基础知识学起来！怎样进行科学提升？UI界面在手机端的设计相较于网页设计而言，要求是更为精致细腻的，每一个元素的挑选都是更为审慎的，不但要美观，而且还要实用。用户对于手机端文本排版设计的体验要求也是更高的，要使得用户能够满足于手机上面的文本排版设计，这对于UI设计师来讲极具挑战性！

针对UI设计师而言，排版设计属于基本功范畴，出色的手机排版设计，并非会致使用户出现视疲劳，而是能够让用户以轻松的方式获取信息，达成人机间的有效互动。那么，怎样以科学的方式提升ui界面的文本 易读性呢?海口达内引领大家去学习基础知识。

金蝶云之家视觉设计师丁珍讲过，艺术是没有依据能够遵循的，然而文字排版却是存在依据可以遵循的。下面针对排版里的字体样式、留白大小、对齐方式、与色彩对比度这四个要素，简略说一说怎样在科学层面提高移动端文本的易读性，进而提升设计其质感。

在做文字排版之前，我们得去做一项基础工作，这项工作就是要明确设计目标，这可是设计的前提，所有的ui设计都必定得在这个前提状况之下展开进行的。要是想要透过页面把信息传递给用户，那就需要明确设计目标才能够对设计去进行调整的。不然的话，设计它所存在的意义可就完全不存在了。小编给大家弄一些数值参考，实际项目是要依据具体情况来开展进行的。

1，字体大小

一种设计趋势是，字体大小能够凸显内容、区分层级，并且这也是ios11的设计思路之一。那么，怎样去选择字体大小，才可以达到比较好的效果呢?

按照material design的设定，方块字主标题的大小被确定为24sp，方块字内容文字的大小被确定为15sp，24除以15的结果等于1.6，该数值接近黄金比例，airbnb的主标题与内容文字的比例同样接近黄金比例。

海口达内提醒大家留意一个误区，实际上，黄金比例的字号对比于移动端是个适宜突出主题的比例，是个“美”的比例，然而并不一定是适合阅读的比例。一个以阅读为主的页面，在字号选择上或许需要较小的比例。要是你在字号的选择方面欠缺信心，也能够借助一些工具来辅助选择，比如Modular Scale，它涵盖了历史上最为令人满意的几种比例关系，经由这个比例来匹配，起码能够确保不出差错。

2，文字留白

在版面里留出有空余的空间，把留白处理好能让文本视觉流变得平顺，进而提升阅读的舒适性。就一篇文章来讲，留白从较小到较大依次有文字当中的空白，文字跟文字之间存在的空白，行与行之间所拥有的空白，段与段之间出现的空白，留白面积的大小同样要依照这个顺序 。

3，进行行间距设定：此情况对视线从前行末尾移至下行开头有着直接影响，倘若过高，会致使视线分散，易于游离，要是过小，便容易影响视线移动，使得用户难以找到正在阅读的那一行；海口达内向大家提供一种普遍获得认可的做法：把行高设定为1.5em - 2.0em，基于这个前提，字体样式、大小以及行宽对于行间距设定同样会产生一定影响。

4，段间距

各个段落之间，是需要存在一定的距离的，要是这段距离过小的话，同样会对视线的移动造成影响，而要是距离过大，就容易致使上下文的联系变得松散。普遍的做法同样是把段间距加以设定为2.0em 。

5，对齐方式

文本的对齐方式有四种，分别是左对齐，居中对齐，右对齐以及两端对齐。对于UI设计而言，移动端文本主要运用左对齐以及两端对齐 。

海口达内介绍下这般的两种方式，左对齐，其代表应用有为简书、有知乎。这般的对齐方式易于致使右端留白过量，致使整体视觉失衡，不过好的一点在于，不会破坏文字自身的起伏以及韵律，能够确保较好的阅读体验；两端对齐，其代表应用有为微信读书、有微信公众号。这般的对齐方式能够确保段落文字整齐一致，成为规整的块状，然而却打破了文字与字间空白所形成的韵律，在大量运用英文的情境之下，阅读起来不见得舒适。

6，对比度

文本对比度对页面优质与否起着决定作用，对比度要是过于强烈或者过于微弱，那都是不利于阅读的，在Material Design里推荐的文本对比度是7:1，其最小值是为4.5:1，。

7，作品的排版风格指南

具有规范极其关键，要去拟定明晰的排版风格指南，以此来对 ui 设计师团队所设计出的文字予以规范，要是设计不存在一个清晰的排版风格规范，那做出来的页面就会各式各样，极其不协调。

最后，文字排版虽是个小小的数值，可这般微小对一个页面而言会有极大影响，会波及你的设计整体效果。所以，身为一位优秀的UI设计师，对工作担负责任，对页面的功能进行细节化准备都是不可或缺的。唯有做好每一个细节，方可设计出一个饱含设计质感的界面。

处于不败之地是因学习，适应互联网 + 大数据时代高速发展靠 IT 学习，海口达内引领一同步入新的高薪阶层，去做更具价值之事 。

继续浏览有关 UI设计排版设计 的文章