返回
教育头条
UI设计5个排版实用技巧 让你的UI更高级
关于排版在UI设计中的重要性，就不再强调了，那么下面，我将分享5个实用性较强的排版优化技巧。
1、强化层次结构来提升UI的清晰度
将必要的文本内容集合起来，重新组织，有意识地梳理视觉层次结构，要让用户能够清晰地感知到内容。对于信息层级，通常会按照标题、副标题、正文、引用说明等常见的文本元素构成。
而清晰的文本层次结构，是依托于符合文本本身所属层次的响应的样式，这样才能确保可读性。大标题应当突出，正文应当清晰明了，副标题起到的是对标题的辅助说明作用，所以应当适当缩小，这样一来，文本元素之前的大小关系，位置关系都更加清晰了。
一个经验法则是，通过修改字号大小的加倍和减半来快速理清相互关系。比如，如标题字使用了 32px，那么正文字体使用 16 px 来创建这个对比度。
在更加复杂多变的使用场景中，普通正文标题使用正文的2倍字号，标题中需要突出显示话，那么可以使用正文的3倍字号，而在特别的专题或者需要着重强调说明的场景之下，使用正文的4倍字号来呈现。
2、有意识地创造具有呼吸感的排版
字间距、行高、行长是在进行排版的时候，常调整的属性。缺少足够的间距，可能会让文本难以阅读，但是间接过多，可能会让用户在阅读的时候感到稀疏难受。
3、根据内容来选取字体
在选取文本字体的时候，需要考虑到潜在读者的体验。不同的字体能够给界面和体验带来截然不同的体验，字体的选择能够影响用户对于界面的第1印象。
注：英文字体通常不会有很大的选择空间，在这方面中日韩三国在文本字体上，存在的问题明显会更多一些。不过在移动端 APP 上，不少应用可以选择非系统默认的第三方字体，而在网页上，要实现起来会麻烦很多，所以通常只会调用本地的字体。正确的字体选择，能够在信息和视觉两个层面给用户传递信息，错误的选择会导致误解和混乱的结果。
4、使用同一字体家族
如果你在不同字体的搭配上，并没有足够丰富的经验，那么使用同一字体族的字体来进行设计，总是安全的选择。通常，一个字体族是为一个明确的目标来设计的。它们有着更为统一的、富有凝聚力的外观，在设计使用过程中，会更加便捷。
使用字体族的另外一个好处在于，它可以更快适配不同文本元素在排版上的需求，你可以更快地通过调整字体大小、粗细、文字大小、色彩来制造相应的对比，呈现不同的视觉效果。另外，同一字体族当中，通常会附带有相应的斜体、等宽字体等等，这可以应对一些相对特殊的需求，而不用手工去修改。
5、尽可能使用左对齐来提高可读性
在世界上绝大多数的国家和地区，所使用的文字排版都是从左到右的（比如语就是反过来的），阅读顺序是自上而下的。这决定了左对齐是确保可读性的重要基准。
左对齐给人的双眼提供了一个扫读时候的基准位置，在大量、长时间阅读的过程在，极大地减小了阅读压力——而居中对齐则明显做不到这一点。另外，还要额外注意一点，就是要避免在段落的一行只有一个字，单字成行在排版中叫「寡字」，这是需要避免的。
1、强化层次结构来提升UI的清晰度
将必要的文本内容集合起来，重新组织，有意识地梳理视觉层次结构，要让用户能够清晰地感知到内容。对于信息层级，通常会按照标题、副标题、正文、引用说明等常见的文本元素构成。
而清晰的文本层次结构，是依托于符合文本本身所属层次的响应的样式，这样才能确保可读性。大标题应当突出，正文应当清晰明了，副标题起到的是对标题的辅助说明作用，所以应当适当缩小，这样一来，文本元素之前的大小关系，位置关系都更加清晰了。
一个经验法则是，通过修改字号大小的加倍和减半来快速理清相互关系。比如，如标题字使用了 32px，那么正文字体使用 16 px 来创建这个对比度。
在更加复杂多变的使用场景中，普通正文标题使用正文的2倍字号，标题中需要突出显示话，那么可以使用正文的3倍字号，而在特别的专题或者需要着重强调说明的场景之下，使用正文的4倍字号来呈现。
2、有意识地创造具有呼吸感的排版
字间距、行高、行长是在进行排版的时候，常调整的属性。缺少足够的间距，可能会让文本难以阅读，但是间接过多，可能会让用户在阅读的时候感到稀疏难受。
3、根据内容来选取字体
在选取文本字体的时候，需要考虑到潜在读者的体验。不同的字体能够给界面和体验带来截然不同的体验，字体的选择能够影响用户对于界面的第1印象。
注：英文字体通常不会有很大的选择空间，在这方面中日韩三国在文本字体上，存在的问题明显会更多一些。不过在移动端 APP 上，不少应用可以选择非系统默认的第三方字体，而在网页上，要实现起来会麻烦很多，所以通常只会调用本地的字体。正确的字体选择，能够在信息和视觉两个层面给用户传递信息，错误的选择会导致误解和混乱的结果。
4、使用同一字体家族
如果你在不同字体的搭配上，并没有足够丰富的经验，那么使用同一字体族的字体来进行设计，总是安全的选择。通常，一个字体族是为一个明确的目标来设计的。它们有着更为统一的、富有凝聚力的外观，在设计使用过程中，会更加便捷。
使用字体族的另外一个好处在于，它可以更快适配不同文本元素在排版上的需求，你可以更快地通过调整字体大小、粗细、文字大小、色彩来制造相应的对比，呈现不同的视觉效果。另外，同一字体族当中，通常会附带有相应的斜体、等宽字体等等，这可以应对一些相对特殊的需求，而不用手工去修改。
5、尽可能使用左对齐来提高可读性
在世界上绝大多数的国家和地区，所使用的文字排版都是从左到右的（比如语就是反过来的），阅读顺序是自上而下的。这决定了左对齐是确保可读性的重要基准。
左对齐给人的双眼提供了一个扫读时候的基准位置，在大量、长时间阅读的过程在，极大地减小了阅读压力——而居中对齐则明显做不到这一点。另外，还要额外注意一点，就是要避免在段落的一行只有一个字，单字成行在排版中叫「寡字」，这是需要避免的。
以上内容为教育宝【王敏】编辑整理的内容，我已开通官方个人微信号（18560125702）。选UI设计课程，不焦虑！就让我来帮助你，就像帮助我自己，如果需要获得帮助，建议您加加我微信，可以十分便捷的和我充分互动交流，我会为您提供答疑指导等一条龙学习服务！返回教育宝头条
【免责声明】本文仅代表作者本人观点，与教育宝无关。教育宝对文中陈述、观点判断保持中立，不对所包含内容的准确性、可靠性或完整性提供任何保证。请读者仅作参考，特此声明！
