6个提高 UI 界面高级感的排版实用技巧

前言

UI设计的核心是‘美学’，以前两篇向大家介绍了如何提升审美能力和界面排版，本文将结合自己的工作经验，向大家分享一些UI界面排版设计的技巧，希望能给想要提升排版能力的设计师带来一些帮助与启发。

为什么需要学习排版？

排版是每一个设计师都必须具备的能力，也是UI界面设计中最难的一部分。它以各种形式存在界面中，如：纯文本排版、图文排版等等。是设计师在做设计时接触多的地方，却也是初中级设计师忽视细节最多的地方。好的排版，能快速有效的将界面中的重要信息传递给用户。因此希望能通过本文，能让大家对排版有一个新的认识。

目前运动端主要布局样式有哪些？

关于排版设计，我总结归纳了6个设计技巧（还有许多技巧），当然这些方法不是绝对，但是如果能融合贯通的将这些技巧运用到排版设计中，对界面设计感将有很大的提升。

分别是：

选择合适的字体

对齐原则

亲密性原则

具备呼吸感的力量

合理运用留白

对比的力量

选择合适的字体

同的字体有不同的性格属性，字体选择对界面排版设计具有非常重要的作用。所以我们在做设计时间时，首先需要考虑产品的的属性，目标用户，不同的产品与人群适用于不同的字体。如黑体粗体字醒目突出，适用于画面感强烈，突出强调信息的用途、细体字精致简洁，适用于女性行业、时尚、科技、餐饮等类型内容；宋体、粗体字醒目突出，适用于画面感强烈，突出强调信息的用途等。如下图不同的产品属性使用不同的字体。

最后提醒一下大家，在同一款APP中，最好不要超过两种字体。

对齐原则

在做界面设计时，需要保持界面上的所有元素都存在一种视觉联系，而不是将元素随意摆放在界面上。对齐会让界面排版井然有序，阅读起来会非常流畅。常用的对齐方式有：左对齐、居中对齐、右对齐。

我们做界面设计时，需要根据实际业务场景去选择合适的对齐方式，形成统一的视觉流。

亲密性原则

亲密性就是在设计时将相关的项组织在一起，这些相关的项可被看作成一体的，一组的。从而吸引读者的目光，能够顺畅的理解我们所表达的意思。这样的设计可使使页面变得有条理、阅读逻辑清晰、页面留白变得有组织感。

在做设计时，我们只要充分理解界面中各元素之间的关系，就会合理性的去运用它，掌握它。

具备呼吸感

字体行间距、行间距、行长是我们进行排版设计时，调节最频繁的属性。间距过短，会让用户难以阅，间距过长、会让用户阅读起来比较稀疏，只有创造具备呼吸感的文字排版、才会用户阅读起来保持愉悦的心情。

行间距：行间距本身没有一个标准的数值，在设计时我们通常会根据字体的属性与运用场景去设置（一般而言，很多时候我们在设计时，通常将行间距设置为字体的1.5倍），增加文字的呼吸感。

字间距：字间距指的是文本在横向上的间距。虽然很少有设计师在字间距花费较多的时间，但在文本的阅读上起到非常大的作用。如字间距过于拥挤时，将会降低文本的可读性。

行长：行长是指文本每行的长度，在不同的平台，需要保持不同的文本长度。单行文字如果包含的字数太多，将会导致用户阅读起来感到疲惫。合理的行长会使用户在阅读时很顺畅，反之则会使阅读成为一种负担。

合理运用留白

留白是设计师老生常谈的事情，存在页面布局中的各个元素之间。留白能够突出页面中的主要元素，制造页面的视觉焦点，吸引用户的注意，提升页面的体验感。

留白能够使得元素之间的关系更为清晰，更容易被感知，增加页面的呼吸感，显得更为和谐。

对比的力量

对比的目的是营造视觉感官上的变化，避免页面排版单调，增强视觉效果。合理运用对比原则，能在很大程度上提升页面中文字排版的层次感与设计感，还可以组织信息、清晰层级、在页面上指引读者，并且制造视觉焦点。

大小对比：视觉元素体量之间的差异，能够制作视觉冲突的效果，使页面的视觉层次更为清晰，体量越大则层级越大，也就越突出。

颜色对比：颜色在排版设计中起着很大的作用，能起到点睛之笔。合理运用色彩对比可以有效地突出重点、区分信息，还可以起到装饰画面的作用。

此外常见的对比有：材质对比、形态对比、空间对比等等。

结语

排版是数字时代每个设计师都需要学习和掌握的重要技能，无论你的设计项目是什么样的，这些基本的规则总能给你的设计带来更好的效果。不过这些排版技巧都还只是非常基础的部分，在实际的设计当中，还会涉及到很多更加复杂的排版布局——但是这些基础，始终是最重要的事情。