UI文字排版可以先分四步：按信息用途选择字体与字重，让同类文字沿同一条基线对齐，使用真实内容调整行距，再用留白区分信息组。商品标题、价格和规格说明不应只靠字号大小排出主次，还要让用户看懂哪些内容属于同一件商品。可以在Pixso 的 UI 设计画布中并排摆出宽屏与窄屏，比较同一份中文内容的阅读顺序。
什么是文本排版
文本排版是对字体、字重、字号、行距、字距、缩进与文本位置进行安排，让内容形成清楚的阅读顺序。在界面中，还需要考虑容器宽度、动态内容和不同屏幕上的换行。字体本身的造型设计与文本排版有关，但不是同一项工作。
UI设计中文字排版的4个技巧
-
选择合适的字体
不同的字体能够给用户带来截然不同的体验，字体的选择能够影响用户对于界面的第一印象。所以我们在做设计时，首先需要考虑产品的属性、目标用户，不同的产品与人群适用于不同的字体。
标题可用较明显的字重建立层级，正文则优先保证长时间阅读时字形清楚。细字重不是某类性别或行业的专属风格：在小字号、浅色背景或低对比度环境下，过细笔画容易难以辨认。先用项目中的中文、数字、英文和标点试排，再决定字体。
（来源：Pixso社区梦想之家页面设计）
-
文字排版四大原则
亲密性、对齐、重复和对比是常用的版式设计原则，也适用于UI文字排版。它们分别帮助组织相关信息、建立阅读起点、维持一致性和突出差异，不是某款工具独有的方法。
原则一：亲密性
根据亲密的原则来组织复杂的信息，安排好它们之间的间距与主次，这样就可以大大提高界面设计的可读性。
（来源：Pixso社区插画风界面设计练习）
原则二：对齐
对齐为视线提供稳定起点。连续阅读的中文正文通常适合左对齐；价格等需要纵向比较的数字可在同一列右对齐。居中适合短标题或短提示，但不能把所有元素都强行居中，也不要求同一竖线上的元素采取同一种文本对齐方式。
•左对齐的排版：给人的双眼提供了一个扫读时候的基准位置，在页面中显得非常规整、简洁。特别是有大量文字需要长时间阅读的时候，左对齐能极大地减小阅读压力。而对于只有一行显示的大标题，可以根据版面进行灵活调整。
•居中对齐：短标题可围绕视觉中心排列；一旦正文有多行，每一行起点不断变化会增加扫读负担。可保留标题居中、正文左对齐，但让两者共享容器宽度和明确间距。
（来源：Pixso社区Ant Design设计规范引导）
原则三：重复
设计元素要学会复用，让设计更有统一性和一致性，强化用户的使用印象，同时也有利于设计师提高效率。可以复用的元素有很多：字体、颜色、留白、符号、版式、线条......
对于团队而言，使用一款资源可共享和复用的设计工具同样很重要。Pixso支持自建团队云端组件库，帮助设计师建立统一的设计规范。库内组件拖拽即可使用，减少重复设计。在Pixso中，颜色、文本样式、图层样式不仅可以一键保存为资源，还可搭配起来重复添加为组件资源。
重复的是相同语义的样式规则，不是要求所有文字都长得一样。标题、正文、价格与提示应各有稳定样式；同一种颜色也可以通过字重、大小和位置形成层级，不必为了“有对比”给每段换一种颜色。
原则四：对比
对比会让页面更具吸引力，避免元素太过相似。同时拉开视觉层级，制造焦点,让用户顺利的接受重要信息。常见对比设计有：大小对比、颜色对比、疏密对比、文字和留白对比、虚实对比，粗细对比等。例如：文字字体大小的对比，能让用户感受到最重要的信息。
-
控制字行间距
UI设计师在排版时，有时候会因为文本内容过长，而版式又受限，会选择去压缩字符间距的方式来达到控制文本长度的目的。其实这是一个容易被忽略的错误，因为字间距过于拥挤会降低文字的可读性。
把长商品名放进去，而不是一直用短占位字
例如，把“轻薄外套”换成“女士轻薄防晒长袖外套·通勤与户外两用”。标题允许两行时，价格应随标题下移，而不是继续固定在第一行下方；标题需截断时，要有能查看完整名称的位置。原价、促销价和“起”字属于同一价格语义，不能在窄屏里被拆散到相距很远的地方。
再把规格说明换成“浅灰色 / XL / 预售，预计下周发货”。先区分规格与履约说明，再决定是同一段还是两个信息组。重要限制不要依赖更浅更小的文字藏在末尾。把这两份长文案放进同一张商品卡，才会暴露标题、价格和说明之间的真实挤压。
行高决定一行文字所占的垂直空间，需要同时看字体、字号、文本宽度与内容密度。可从字号的约1.5至1.8倍开始试排中文正文，再用连续三至五行的真实段落比较；这只是起点，不是所有界面必须遵循的数值。空间不足时，先删去重复说明或调整容器，不要直接把行距压到文字上下相撞。
-
合理运用留白
设计的时候要学会留白，留白的作用就是制造视觉焦点，突显我们设计的重要内容，吸引用户的注意力。而留白能够让用户尽快的寻找到所需要的信息，提高用户体验。版式设计中的留白，不是大面积使用白色，也不等于刻意留出空白，而是通过对版面空间的合理疏密分配，让画面具有层次感和透气性，让主体信息得到有效突出，同时增强页面设计品质感。
留白要区分组内关系与组间关系
商品名与副标题联系紧密，通常采用较小间距；价格与配送说明虽然在同一卡片里，承担不同判断，可用稍大的间距或分组。若每两行的距离都相同，用户只能逐字阅读才能看出结构。不要用空格或多个空行推开元素，使用容器间距管理后，内容增减时关系才更稳定。
在原尺寸预览窄屏，再让同事只看三秒钟，说出商品名、价格和发货条件。若他说出的顺序与业务重点不同，先改字重和分组，而不是把所有字号一起加大。信息密度高的后台界面也可以使用同样的判断，只是优先级应换成任务中的字段与操作。
排版是数字时代每个UI设计师都需要学习和掌握的重要技能。不过这些排版技巧都还只是非常基础的部分，在实际的设计当中，还会涉及到很多更加复杂的排版布局。好的文字排版，能快速有效的将界面中的重要信息传递给用户。如果能融会贯通地将这些技巧运用到排版设计中，对界面设计感将有很大的提升。
把标题、价格和说明设为可复用的文本样式，再为商品卡设置布局关系。自动布局可以帮助管理内容变化后的间距，但前提是文字容器、尺寸规则和层级已设置正确。把短标题替换为长标题、删除一行说明，再看卡片能否保持清楚的阅读顺序。
