Design System & Application - Chapter 5 文本布局 Text Layout

文本布局 往往是在 UI 设计中被忽视的一个点，在大多数 UI 界面中，这一部分都显得平平无奇，没有进行任何的优化。

实际上，文本是 UI 设计中的一个非常重要的因素，尤其在 B 端产品中，它更是尤为重要（在 C 端中一样重要，只是个别 工具类 的应用中文字相对较少）。

我们对文本布局进行了大量的细节处理，这是为了 使我们 UI 的文本部分更具有层次感，从细节上提升文本的阅读效率和体验。它也作为一个重要的优化点，大量出现在我们的设计中。

本篇将从小到大依次对比较有代表性的结构进行说明。

---

Part 1

数值 - Number

信息系统最核心的资源就是 数据（Data），其中 数值 的比例是最高的（相对而言）。为了更方便的阅读和比较，我们对其做了一些设计。

等宽字体 是我们的第一个要求，在单独出现的时候，它不具备明显的优势。但是在进行比较时，它的优势显而易见。依赖其每个数字都等宽的特性，我们只需要先关注数值的 整体长度，就可以判断出谁多谁少（在相同的格式下）。

千位分隔符 是我们在处理数值时明确要求添加的，它用于辅助数值阅读。这是依据西方的习惯而设置的，但是也是目前很多场合都在使用的一种具有广泛性的辅助阅读方式。