起航学习网

基础知识学起来!如何科学提高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学习更能让我们适应互联网+大数据时代的高速发展，海口达内带你一同走进新的高薪阶层，做更有价值的事。

文章出自：http://qh.itpxw.cn/qgtk/202066462.html

文章标题：如何实现完美的界面文字排版设计，看完学到了

免责声明：本站文章均由入驻起航学习网的会员所发或者网络转载，所述观点仅代表作者本人，不代表起航学习网立场。如有侵权或者其他问题，请联系举报，必删。侵权投诉