无论你是做网页还是App设计，文字内容总是能占到整个版面将近60%的区域。因此理解字体与排版对UI设计师来说非常关键。文字排版的好坏，直接影响着版面的视觉传达效果。Pixso认为，文字排版设计是增强视觉传达效果，提高作品的诉求力的重要方式。
什么是文本排版
文本排版，又称“文字设计”，是一种涉及对字体、字号、缩进、行间距、字符间距进行设计、安排等方法来进行排版的一种工艺。在数码技术普及之前，文本排版是一项专业的工作。数码时代的来临使字体排印不像从前仅由排字印刷方面的技术工人完成，而更被图形艺术家、艺术指导、文书人员广泛使用。
UI设计中文字排版的4个技巧
-
选择合适的字体
不同的字体能够给用户带来截然不同的体验，字体的选择能够影响用户对于界面的第一印象。所以我们在做设计时，首先需要考虑产品的的属性、目标用户，不同的产品与人群适用于不同的字体。
例如，黑体、粗体的字体醒目突出，更适用于强烈的画面感，便于突出强调信息的用途。而细体字精致简洁，更适用于女性行业、时尚、科技、餐饮等类型内容。
（来源：Pixso社区梦想之家页面设计）
-
文字排版四大原则
一个优秀的排版要考虑到用户的阅读习惯和设计美感，帮助用户区分重点、提升可读性。对此，Pixso提出UI设计中的文字排版应该遵循亲密性、对齐、重复、对比四大原则。
原则一：亲密性
根据亲密的原则来组织复杂的信息，安排好它们之间的间距与主次，这样就可以大大提高界面设计的可读性。
（来源：Pixso社区插画风界面设计练习）
原则二：对齐
对齐是UI版式设计中最重要的原则之一，对齐可以建立一种整齐的外观，带给用户舒服、一致性的浏览体验。基于从上到下，从左到右的阅读习惯，应用在界面设计中。一般是左对齐、居中对齐和右对齐，同时，同一竖线上的元素要保持居中对齐。
•左对齐的排版：给人的双眼提供了一个扫读时候的基准位置，在页面中显得非常规整、简洁。特别是有大量文字需要长时间阅读的时候，左对齐能极大地减小阅读压力。而对于只有一行显示的大标题，可以根据版面进行灵活调整。
•居中对齐：如果一定要用居中对齐，那么将整段的文字看作一个整体，整体再进行左对齐或者右对齐。这样依然可以保持画面的统一性和协调性。
（来源：Pixso社区Ant Design设计规范引导）
原则三：重复
设计元素要学会复用，让设计更有统一性和一致性，强化用户的使用印象，同时也有利于设计师提高效率。可以复用的元素有很多：字体、颜色、留白、符号、版式、线条......
对于团队而言，使用一款资源可共享和复用的设计工具同样很重要。Pixso支持自建团队云端组件库，帮助设计师建立统一的设计规范。库内组件拖拽即可使用，减少重复设计。在Pixso中，颜色、文本样式、图层样式不仅可以一键保存为资源，还可搭配起来重复添加为组件资源。
但也要注意，一个元素不要太多地进行重复。比如你一个页面全部用一个颜色的文字或色块，会很难找到重点在哪里，要学会变换着使用重复这一原则。
原则四：对比
对比会让页面更具吸引力，避免元素太过相似。同时拉开视觉层级，制造焦点,让用户顺利的接受重要信息。常见对比设计有：大小对比、颜色对比、疏密对比、文字和留白对比、虚实对比，粗细对比等。例如：文字字体大小的对比，能让用户感受到最重要的信息。
-
控制字行间距
UI设计师在排版时，有时候会因为文本内容过长，而版式又受限，会选择去压缩字符间距的方式来达到控制文本长度的目的。其实这是一个容易被忽略的错误，因为字间距过于拥挤会降低文字的可读性。
行间距是行与行的间距，行间距通常伴随着字体大小而变化。默认行间距会稍大于字体的大小，通常这样看起来会比较的拥挤。在正文中，将行高设置成字号的1.6~1.8倍，将会是比较舒服的，如果版面紧张，可以适当设成1.2~1.5倍。
-
合理运用留白
设计的时候要学会留白，留白的作用就是制造视觉焦点，突显我们设计的重要内容，吸引用户的注意力。而留白能够让用户尽快的寻找到所需要的信息，提高用户体验。版式设计中的留白，不是大面积使用白色，也不等于刻意留出空白，而是通过对版面空间的合理疏密分配，让画面具有层次感和透气性，让主体信息得到有效突出，同时增强页面设计品质感。
排版是数字时代每个UI设计师都需要学习和掌握的重要技能。不过这些排版技巧都还只是非常基础的部分，在实际的设计当中，还会涉及到很多更加复杂的排版布局。好的文字排版，能快速有效的将界面中的重要信息传递给用户。如果能融合贯通的将这些技巧运用到排版设计中，对界面设计感将有很大的提升。
正如Pixso设计师说的“UI设计师除了要知道基础的文字排版技巧外，一款的好设计工具在排版、布局上也能起到很大的促进作用！”Pixso对比传统设计软件，具备在线设计、实时协作、一键交付、原生中文与设计资源丰富等优势。同时，Pixso具有自动布局功能，当版面内调整某一元素时，其他元素会相应变化，始终保持排版状态。赶快打开Pixso去使用自动布局功能吧！
