设计师和程序员的爱恨情愁——文字行高惹的祸

之前做设计输出给开发人员标注尺寸时遇到字体行高问题，正好发现一些设计师朋友们也遇到了同样的问题。所以今天和大家分享一些自己的一点小经验，仅供参考，如有疑问或更好的方法，也请大家多交流。

闲话少说，先上演示图：

左侧图一：是我用Photoshop软件做的效果图，右侧图二：是程序猿做出来的网页效果。虽然两个呈现出来的视觉效果差别不是很大（左图高度是456px，右图高度是482px，之间相差了26px）但是我相信作为设计师的大家们一眼就可以看出。

可能有的人觉得这是在鸡蛋里面挑骨头，或者有的人认为有图呈现的视觉段落间距更好些。但是，我们先抛开以上假设的人群（但我并不是不尊重这些人）。只是今天我像阐述的是，什么原因导致了设计师作出的效果和程序猿开发出的效果出现了偏差。 

故事的起因:

射鸡师MM—— 图我做好了，并且标注了尺寸，请查收；

程序猿GG—— 好的，收到！

(5分钟过后)

程序猿GG—— 开发好了，地址：192.168.520.520/demo.html；预览吧；

(5秒钟后)

射鸡师MM—— （挑逗指数1颗星）不对哦，有问题啊！！

程序猿GG—— （战斗指数2颗星）有啥问题～～

射鸡师MM——（挑逗指数2颗星）你再好好看看我给你的设计稿，你的间距比我的大；

程序猿GG—— （战斗指数3颗星）不可能，我都是按照你给的参数做的，一定是你标注的有问题；

……

以上纯属模拟场景，但我相信生活中一定发生过类似的对话 :smiley:

下图是设计师交给程序猿的输出物： 

通过这张图可以看出，文字段落之间的空白间距数值没错啊。而且数值标注的这么清晰，相信程序猿GG也一定不会输入错误的。问题会出在哪呢？？?

不和大家投圈子了，估计大家早就手拿板砖等着想拍我了。

揭晓答案：当当当当～～～

看文章标题就猜到了，无悬念。对，就是文字的行高惹的祸！！！ 

行高是什么？

看图说话更直接：

图片来源于网络，大致的意思就是：

“文字在排版中除了字体本身的大小外，还隐藏着一个看不见的字体行高。它的大小计算方式是一半的行高从文本的中心线向上和一半向下做延伸。”

而我们在设计稿中做的文字排版，在视觉效果后是看不到的。其实稍加观察，还是可以看出来的。只要我们在设计软件内选中文本段落后会看到一个小竖线的小光标。这个竖线光标的高度并未是字体的高度而是要大于字体的。

这里的多行显示，我用了一个段落文本框来显示整个段落的行高之和。大家看看，是不是和上面的图片说描述的是一样的道理。因为行高的大小随着字号的大小变化成正比。

道理明白了，那么问题就来来。如何能让设计稿中的字体之间的间距和开发出来的字体间距是一样的？？？

对于设计师而言

首先，你要了解上面讲的字体是有行高的。（废话，我当然知道来～～）

其实，需要多多少少了解一点在web中的字号，行高是如何显示的。既然我们是UI设计师，最终的设计稿无非就是为网页或者App来呈现出来的。所以，要做到知己知彼百战不殆嘛 :-) 

普及一下：“在网页里面，如果不给字体设置任何大小的话，默认的文本字体大小是（16），而行高是（22）”。

至于为什么？？？目前我无从考证，管它呢，知道就好了，反正在设计中这个值也是会被修改的。

下面是一些网站介绍如何设置更舒服的字号大小：

http://spencermortensen.com/articles/typographic-scale/

https://pearsonified.com/2011/12/golden-ratio-typography.php

知道了这个原理后，那么在设计中如何来做呢。

如果你是Sketch软件用户，恭喜你，你只需要设置好字号大小和行高后，不用关心段落与段落的之间的间距我需要不需要考虑行高问题。利用Sketch的Seasure插件直接输入就好了。软件会帮你计算的。

大家可以看到，左图我用灰色线框模拟了在软件中选中文本的状态，因为是适量软件的原因，不管是单行文本还是多行文本选中时都是有整体的矩形查看，而这个线框正好是设置的行高的高度。

从图中可以看到行高是由紫色线条区域的高度。而并非像一开始我们展示的图片那样。在标注的时候是按照紫色线条之间去做区域分隔。而这样做好的页面一定和最终的设计稿是一样的，因为设计师给出的标尺是已经减去了字体行高的。但是设计师也一定要告诉每一个字号的具体行高是多少。因为这样程序猿会在CSS里面的同一设计这些公共样式的。

讨厌的PS

刚才讲的Sketch软件是很方便操作的。但不所有的设计师都在用Mac电脑或者一些大公司在软件设计方面也会收到正版付费的限制。

在Photoshop软件里面。因为本人大部分还都是在用Sketch软件的。所以对Photoshop是否有像Seasure这样那样的插件还不是很清楚。（假设在PS里面没有吧）

来看之前的一张图片：

PS里面在输入文字后，如果选中这行字的话是没有这行字的外框高度。除非你是用段落文本框。

如果想精准的标注文字之间的间距的话，就需要每一行文字都要点选一下再测量一下高度，文框还好。可以看到整体的外框。那么想“我是单行行高”这个文字的话，点选后没有外框。我们总不能去测量小竖线光标吧。

还好，我们可以用 "Ctrl/Command + T" （自由变换）这样会出来整体的虚线框。在借助辅助线，可以模内出文本框的方式。

即使这样做，细心的同学已经发现了什么问题。之前讲到的：

“文字在排版中除了字体本身的大小外，还隐藏着一个看不见的字体行高。它的大小计算方式是一半的行高从文本的中心线向上和一半向下做延伸。”

而在PS里面的文本段落似乎很任性，行高并非是上下做延伸的。是因为我没设置好其它的参数吗？？？

有同学会认为没必要那么纠结，上下延伸和向下延伸不都差不多的。总数不变就行呗！但是对于一些处女座的设计师来说，即使相差1px都是一种精神上和视觉上的折磨。

问题是存在的，但总还是要解决的。

先说下我最终的解决办法吧（办法很瞜）

1. 要确定每个字号大小以及对应的行高是多少；

2. 无论单行还是多行文字，一律采用段落文本框方式输入。（如果之前设计稿中用的是点文本也不要紧，可以选中文本右键选择转换为段落文本）

3. 假设字号行高是18/26，那么输入完段落文本后，将段落文本的高度设置成26即可。

4. 对于处女座的同学，那就要计算一下了，因为PS的行高不是上下等分的，那么可以借助PS辅助线先上下标好。然后再(26-18)/2=4。在辅助线的帮下，将文字垂直剧中。

另一种方式有些类同，可以用矩形工具先画出文字的高度。多行的话同样画一个累加高度的矩形。这样，不管是点文本还是段落文本都适用。

这样，在标注的时候就可以按照灰色矩形之间的间距标注了。

好麻烦啊～～～似乎开始怀疑人生了（我还是去搬砖吧）

----------------- 华丽的分割线 -----------------

时间关系，先介绍到这儿～～ 虽然上面的方式很落后，主要目的还是让同学们了解到一些行高的问题。

我相信，一定、肯定、以及确定还会有更好更高效的方法来方便的帮助到设计师。

但不管采用什么方式，我们的目标还是一致的。好的设计，是靠用心做好细节、细节、细节（重要的事情说三遍）来决定的。

第一次写这么长的文章，可能有一半的内容跑偏了，还请同学们谅解！！！

欢迎大家踊跃拍砖，这样我好去搬砖-呵呵呵-