界面设计基本包含了：文字排版，图片制作，平面设计，三维立体设计，静态无声图文，动态有声影像等，其中文字排版是不可或缺的一部分，今天我们主要是讲解字体排版问题，现在我们就跟着UI老师一起来看看：在界面设计中，中英文字体如何进行合理的排版？

1. 字体样式不要过多

不管是平面设计还是界面设计，我们在设计中的字体样式都不要超过3种，不然太多的类型尺寸和样式会破坏布局，让用户无法准确获取信息。

通常情况下网页设计和APP设计中文字样式选择不超过两种，一种一般就足够了。如果您使用多个字体，请确保字体系基于字符宽度互补。

如图：左边组的字体相对就比较和谐，而右边字体的粗细对比太明显，则显得轻重比例很不和谐了。

 2. 尝试使用标准字体

比如，在windows系统下，网页设计字体尽量选择系统内嵌的标准字体微软雅黑和Arial；在app设计中，iOS字体选择苹方和fs字体等等。

3. 限制线长度

如果你想要让用户从你的文字中快速获取信息，你应该考虑适当的文字长度。

如果每行文字太短，视线频繁的换行，会打破读者的节奏。如果一行文字太长，用户的眼睛将很难专注于文本，引起阅读疲劳。

对于移动设备，您的英文内容应该每行30-40个字符 。

以下是在移动设备上查看的两个网站的示例。第一个使用每行50-75个字符（打印和桌面的每行最佳字符数），而第二个使用最佳30-40个字符。

中文内容每行在20个文字左右，最为合理。

4. 选择各种尺寸的字体

确保您选择的字体在较小的屏幕上清晰可辨！下图中上方为网页设计常用字体大小，下方为移动端设计常用字体大小。

5. 使用容易分辨的字体

英文字体中注意区别”i”和“l”。

 中文字体中尽量选择黑体

6. 避免英文全部大写

英文全部大写容易导致用户不易阅读，从而影响用户获取信息的速度。

7. 合理间距

英文行间距一般是字符高度的30%，以便良好的可读性。

中文行距我们通常设置为字符高度的150%，如下图中间文字

段落之间的间距可以比行间距提高20%，留白可以为用户提供消化内容的时间。

下图左：几乎重叠的文字。右：良好的间距有助于可读性。

8. 确保您有足够的颜色对比度

不要对文本和背景使用相同或相似的颜色。文本越明显，用户能够扫描和阅读的速度越快。

这些文本行不符合颜色对比度建议，难以根据背景颜色进行阅读

这些文本行符合颜色对比度建议，并且易于阅读背景颜色

我们通常归纳成：深色背景使用浅色字，浅色背景使用深色字，有颜色的背景可以使用白色字。

9. 避免将文字着色为红色或绿色

建议使用除颜色以外的其他线索来区分重要信息。也避免单独使用红色和绿色来传达信息，避免有色盲用户无法顺利阅读的情况。所以在我们设计当中可以考虑使用图标来提示用户。

 10. 避免使用闪烁的文字

闪烁或闪烁的内容可能会使一些敏感人群发疯，特别是互补色内容呈现闪烁状态，对于一般使用者来说，这可能是令人讨厌或分心的。

本文为源码时代UI老师原创，转载请标明出处（www.itsource.cn）