浅析用户体验：有效文字排版

本篇文章主要针对UI中的文字排版问题进行分析，无论是网站还是移动设备中，文字信息占用户信息摄入量的最大部分。因此，字体排版的质量直接影响整体用户界面和用户体验的质量。

在文章中主要分析7种排版方式，如何使用达到最佳的阅读性

1.字体

设计中定义的字体是中文和英文以及其他字符的一组设计特征。例如常用的苹方字体和微软雅黑，其中一款字体系列包含多种字体形态以及重度，以苹方字体为例形态上常见的为SC（简体）、HK（港体）、繁体（TC），字重上为常规（Regular）、极细体（UItralight）、纤细体（Thin）、细体（Light）、中黑体（Medium）、中粗体（Semibold），（这里注意下在开发的库里只有常规和中黑，如果需要其他字重需要单独安装对应的字体包）

有效的阅读性

• 保证可读性：首先不考虑排版的情况下要保证字体的正常阅读，一般对长段落、正文等大篇文本使用常规字体不加任何修饰，能够保证用户的正常阅读

• 限制字体的样式：常规场景下无论是模块内的文字还是文章内的文字在样式上不建议使用3种以上，超过3种会丢失一定的信息层级，影响用户阅读性，这里的样式包过大小、颜色、形态，均不建议超过3种

• 标题字体品牌化：不同的字体可以引起信任、现代、传统等感觉，最常见的在一些高端产品的网页设计中会使用衬线字体来增加网页的调性，对用户传达出尊贵、奢侈的信息，同样标题字体也可以融入品牌元素（形状、色彩）进行装饰增加页面的层级结构和视觉效果

2.对比度

利用对比度能够有效的提升页面的信息层级，排版的对比可以通过大小、重量、颜色和样式的变化以及不同的字体来实现

• 使用强烈的对比来突出标题、重要信息和按钮，字体大小和字重或颜色的明显差异有助于区分各种重要的元素模块，两个需要区分层级的文字信息建议使用相差一个梯度大小进行使用（一梯度4px）
  
  

• 限制使用对比关系。页面中越多元素下需要突出的信息效果往往是最简单，只需要通过简单的字体、字重、色彩进行区分，当有不同权重的信息层级时则可以通过展示形态去进行区

3.颜色

颜色是一个复杂的设计元素，它支持整体用户界面的功能和美感。在排版设计中，颜色对于对比度方面起到较大的作用

• 限制颜色：如果对色彩把控不熟练，可以使用单色、或色相环互补色方法达到一定的视觉协调性。

• 借鉴：如果对色彩掌握不熟练想要丰富的页面，这里推荐几个链接，可以从链接里直接复用色彩板使用，创建成功调色板的最有效方法是从其他视觉设计中汲取灵感——在 UI 及其他方面

渐变调色： https://webgradients.com/?ref=uigarage
纯色画板： https://colorhunt.co/palettes/popular

渐变画板： https://mycolor.space/?hex=%2331CCD7&sub=1

• 使用颜色在不同的文本元素类型之间创建对比，在文本元素（例如标题、副标题、表单、段落和按钮）之间创建差异化的样式，增强视觉层级

• 黑色：黑色在设计中比较特殊，如果需要可以突出某个层级时当使用黑色是并不太符合预期，当然在正文中以及大篇幅段落时还是建议使用黑色，黑色符合用户阅读习惯以及不容易产生视觉疲劳，当然如果需要用黑色区分层级，建议使用灰度阶梯进行，避免出现信息结构混乱

4.对齐

对齐是界面元素沿“不可见”线的空间组织，它有助于在构图中实现秩序、凝聚力和清晰度，文本可以在包含它的文本框中与左对齐、右对齐和居中对齐，同样，文本和界面元素也可以水平对齐，左对齐、右对齐或居中对齐，相对于彼此或已建立的网格系统的“不可见”线。垂直对齐也是如此，其中元素与顶部、底部和中心对齐相互对齐，以建立不同水平部分之间的关系和区别。

• 左对齐：对文章类或大篇幅段落使用“常规”的左对齐方式，左对齐文本更易于阅读，生物学上它为眼睛提供了一条“垂直线”，可以在阅读连续行时进行切换，同时符合用户阅读习惯（特殊场景下可以使用右对齐）

• 居中对齐：适用于需要刻意突出的标题内容以及元素等，常规情况下居中对齐的段落文案很少使用，因为不符合用户阅读习惯，没有垂直锚点的中心文本对齐会使长段落更难阅读

• 元素对齐：不管是垂直还是水平，将文本框与图像和插图等相关元素对齐，有助于眼睛在垂直和水平部分之间建立关系

5.层级

排版层级刻意通过字体粗细、大小和颜色来传达页面内容的重要性，同时也可以对文字特殊处理通过变形手法提升层级的同时增加美观，例如模块标题，字体层级也可以通过颜色进一步放大，以在不同级别的信息之间创建对比和区别

• 提前梳理将在设计中使用的所有文本类型。如各种标题、子标题、段落、引号、按钮的相对重要性将帮助更系统地处理字体层次结构并成功指定字体级别。

• 使用标准层级结构，提前制定设计字号梯度如 H0 到 H6 的标题，在设计时按照规范直接调取使用达到设计的一致性

• 适配方面，随着各种设备的屏幕尺寸变化，字体层次结构也会发生变化，不管在大小屏幕下要提前预知到是否会出现显示上的问题
  
  

6.一致性

一致性决定着一个UI页面在排版上是否统一合格，所有元素是否能够达到应有的目标，取决于它们在整个界面中的一致使用，一致的字体、粗细、大小和颜色，以及一致地使用对比度、对齐方式和空白，都有助于用户更轻松地熟悉和界面功能，同时，一致性不仅对于阅读体验很重要，而且对于页面整体的美观、严谨也起到很大的作用

• 像上面说的除了要建立字体梯度，色彩梯度同样也是相当重要，两者搭配运用才能实现更佳的排版

• 在团队配合中，一个产品的一致性容易出现问题，如果页面一致性出现问题时，就需要进行细节走查，各个设计师是否严格按照设计规范进行设计，是否与设计规范有出入，当然如果没有设计规范的时候就需要根据产品调性归纳整理规范，便于后续设计

7.空白

空白或负空间是一个看似简单的概念，但在进行运用时，他能够决定我们的页面的可读性是否合格，在文本元素中，空白区域是由文字的行高组成的，文本之间行间距和单个字符之间的字间距决定着用户阅读性，此外，可以通过利用接近法则形成元素的分组，空白的数量可以传达不同元素（段落、图像、按钮）之间有联动的视觉关系

• 行高：不同产品所适用的行高不相同，如在文章类产品中行高通常适用1.5以上的倍数（字体*1.5=行高），而在一些功能性产品中则需要使用较少的行高保证页面的屏效率，常用的字体行高倍数1.2、1.3、1.4、1.5

• 对较大的字体和较短的文本字符串（例如标题）使用的行高相对于段落较低

• 在中英文混合的文字上，占比区域也不同，通常英文和数字的行高等于文字时，他们的视觉占比会相对中文更小，在设计时需要对数字英文特殊处理，使中文和数字英文视觉上更加协调。

• 当相关的文本元素放置得更近时，用户会把他当做成一个分组，在设计时需要去计算好行高一集间距问题，避免在信息理解上出现问题，影响产品可读性