文字是UI设计中最重要的信息传递元素，文字的排版看似容易其实并不简单，因为文字的属性众多，比如字号、字间距、行高、段落等等。
下面我们从根上去认识文字，对文字中能够影响排版间距的属性，一一解析，并且了解开发逻辑，正确与他们对接。
字体设计师，为了能满足文字行间距的合理展示，通常会给字体设定一定的行高。
也就是因为字体的行高，让UI设计师对文字与其他元素的间距设定，有不同的见解。
认同A方案合理的设计师，理由是文字最好设置一定的行高，不然折行时视觉上没有行间距，很拥挤，不得不再设置行高，最终30px的间距还是有间隙。
两者的表述都对，但也确实都有一定的弊端，下面给大家介绍两个解决方案。
第一种：
然后页面中，接下来所有的间距设定，都得是这个数值的倍数。（这点后面会详细讲解）
下图所示，设计思路上想呈现一个30px的统一间距，那就可以减去一个最小栅格数值。
这种方式也是我一直以来用的方法，好处就是没有打破间距设定的原则。
唯一有点不完美的地方就是，实际距离有时还会有一点小误差，但其实在视觉上也完全可以忽略掉了。
第二种方式就是精益求精，不考虑间距的栅格系统原则，算出字号与行高的间隙，间距上准确减去，保证没有一丁点的误差。
上图案例中，字号36px，行高44px，文字上下的间隙就是4px。
这种方式有一个小小的弊端，就是开发感受不到间距的规则，最终设计验收时可能会耗费更多的时间。
另外有一种情况，就不能刻意去追求文字的视觉对齐，除非是平面设计，因为开发的逻辑也不会去支持这样做。
2. 开发对接-关于行高（重点内容）
UI设计师在设计验收iOS端时，可能会遇到这样的问题，设计与开发都用了同样的间距参数，但最终呈现的间距还是不一样。
比如在Sketch软件中42号字的苹方字体默认行高是59，但是iOS开发软件中默认是52。
根据我的调研，iOS开发工程师，若不是特殊情况，基本不会去改默认行高参数。
上图中可以得出，字号越大，设计默认行高与iOS开发默认行高差距越大。
iOS开发字号默认行高有一定的规律，随着字号的增加，行高会在字号基础上+4、+6、+8、+10以偶数递增。
用字号除10后乘以2，再加上字号，就是iOS开发的默认行高，公式如下：
这款插件是专门针对iOS字体行高修复，使其与开发默认行高保持一致。
安卓系统 Material Design 使用的字体，中文是思源黑体，英文是Roboto。
比如小米手机MIUI系统中英文都使用Misans字体，所以安卓文字行高没有一个标准。
思源黑体行高默认和字号大小一样，Roboto行高接近苹方字体行高。
字体修复后使用经验：
当在设计中，确定这些文字字号后，做一次行高的修复，然后把这些文字创建成字符样式，每次用时从字符样式库里面选择即可。
3. 文字-段落
一个回车键的间距，就是一行字的行高，通常这个间距都比较大，就算设计风格需要这么大的间距，那一定也要手动去设置段落。
为什么是≥1.5倍？原因是文字的行间距，一般大于1.5倍视觉上是比较舒适，例如字号是30，那行高设置为45，形成1.5倍的间距。
字间距是字与字之间的间距，默认一般为0不做设定，特殊设计风格以外。
出现这种参差不齐的情况，确实不那么美观，但在UI设计中实属正常。
5. 文字-字号
字号越大说明级别越高，级别越高从信息层级上来讲，就需要较大的间距来呈现。
二、如何定义间距？
定义合理的间距其实非常有学问，打开京东、淘宝你会发现元素之间的间距非常紧凑，打开爱彼迎、蔚来又会发现元素之间较为宽松，这是为什么？
在UI设计中，间距的设定一般会选择一个最小栅格基数，如4、5、6、8等数值，之后页面中，所有的间距都要以，最小栅格基数的倍数呈现。
淘宝的设计，据我所知用的是5的基数，爱彼迎用的是8的基数，从这点来看，基本可以得出一个结论，使用越小的数值基数，设计呈现通常就会越紧凑。
我目前负责的产品最小栅格基数是6，设计上常用间距大概有6个，完全能够满足大多数设计场景所需。
另外，一个产品中模块众多，难免会出现一些特殊情况，所以肯定不能限定死只可以用那几个间距。
案例解析：
上图中，首先要给各个元素分类，比如主标题和副标题是一类内容；标签是一类内容；价格是一类内容；“找相似”按钮又是一类内容。
具体多近呢？可以根据商品卡片在页面中的外边距，来进行分析定义。
产品的外边距是根据设计语言，产品定位，产品内容多少等来定义，常见的边距有20、24、30、36、48、60等。（大概就是这个范围内）
使用常规外边距，比如我们的案例中，使用30px就是常规外边距，内容区域要适当小于或等于外边距，这样视觉上体现的是统一性。
间距小到多少，还是那个理念，可以直观感受到比内边距小即可为止，不能过小。
案例中设置的是一个栅格单位6px，再加上文字的行间隙，视觉上大概就是15px的间距，就是内边距的一半。
通常第一选择就是，视觉距离与内边距30px，保证统一。
接下来是价格，对于一个商品卡片设计，价格是需要着重突出体现的。
案例的商品卡片，设计风格价格颜色规范是黑色，所以颜色不能改变。
间距上与标签设置30px的间距，加上文字的行高，视觉上的间距，会成为卡片中最大的间距留白，从而起到突出的作用。
另外强调一下，统一性固然重要，但设计的核心是为需求目标服务，所以，这时候统一性的优先级是次于需求目标的。
三、最后
#专栏作家#
本文原创发布于人人都是产品经理。未经许可，禁止转载。
题图来自 Unsplash，基于CC0协议。
