在實(shí)際開(kāi)發(fā)過(guò)程中，字體上遇到的問(wèn)題是最多，也是最難以解決的。不知道小伙伴在驗(yàn)收的時(shí)候會(huì)不會(huì)遇到這樣的情況，開(kāi)發(fā)明明是按照設(shè)計(jì)圖上的字體和間距來(lái)的，可跟設(shè)計(jì)稿的間距還是有差異，這是為什么呢？今天和大家分享一下，文字怎么搭建和使用，如何正確的設(shè)置文字做出正確的設(shè)計(jì)，且符合項(xiàng)目開(kāi)發(fā)的實(shí)際需要。

一、排版屬性

1. 行高

行高是一行文本垂直方向的高度，這個(gè)高度和字高無(wú)關(guān)，文字內(nèi)容默認(rèn)處于這個(gè)高度的水平居中位置，如下圖所示。

在一般的UI軟件中，我們可以發(fā)現(xiàn)通常默認(rèn)行高一定比字號(hào)本身更大，例如字號(hào)為 12dp的文字行高為17dp，導(dǎo)致文本區(qū)域高度大于實(shí)際的字高。這是一個(gè)正常現(xiàn)象，因?yàn)槿绻懈吆臀淖滞呋蚋。敲丛诙嘈形谋緺顟B(tài)下就無(wú)法正常顯示。

2. 行間距

在 Sketch、XD 等軟件中沒(méi)有包含的屬性需要引起我們重視，那就是“行間距”。

行間距是一個(gè)獨(dú)立于行高之外的屬性，在一些復(fù)雜的設(shè)計(jì)、排版軟件中會(huì)出現(xiàn)，以及iOS、Android 等前端語(yǔ)言中也有提供這個(gè)屬性，它是造成我們標(biāo)注與實(shí)際開(kāi)發(fā)過(guò)程出錯(cuò)的罪魁禍?zhǔn)住?/span>

無(wú)論是設(shè)計(jì)過(guò)程中，或者設(shè)計(jì)標(biāo)注文件中，都要拋棄掉任何有關(guān)行間距的概念，雖然 iOS 使用行間距可以實(shí)現(xiàn)，但是實(shí)現(xiàn)的效果和設(shè)計(jì)稿是有出入的。因?yàn)樵O(shè)計(jì)稿中我們只能使用行高，所以在一個(gè)文本區(qū)域中，它的上下兩側(cè)都有行高增加的空白區(qū)域，但是實(shí)現(xiàn)過(guò)程里面沒(méi)有這一截間距，導(dǎo)致實(shí)際文本區(qū)域和上方元素的距離效果有偏差。

3. 其他

除了行高、行間距，還有段間距、對(duì)齊方式、字間距等排版樣式，但對(duì)開(kāi)發(fā)的影響不大，設(shè)計(jì)的小伙伴應(yīng)該都懂，所以這里不過(guò)多講解。

二、文字行高適配

目前文字行高間距的標(biāo)注方法有3種。

1. 自己手動(dòng)標(biāo)注行高

有部分設(shè)計(jì)設(shè)計(jì)師用原始方法來(lái)標(biāo)注文字，即用文字最低點(diǎn)和最高點(diǎn)作為行高就行標(biāo)注，如下圖，標(biāo)注從下面文字“麗麗”的開(kāi)始測(cè)量到下面灰色文字的最高點(diǎn)“阿卓”結(jié)束。在這種情況下，開(kāi)發(fā)人員還原出來(lái)的效果和設(shè)計(jì)稿有一定的差距，需要調(diào)試很多遍才能達(dá)到想要的效果。

（錯(cuò)誤的方式）

2. 使用sketch默認(rèn)的行高

使用sketch默認(rèn)的行高進(jìn)行標(biāo)注，這是UI設(shè)計(jì)師常見(jiàn)的操作習(xí)慣，但在驗(yàn)收開(kāi)發(fā)版本還原度的時(shí)候，還是發(fā)現(xiàn)與設(shè)計(jì)稿標(biāo)注的間距不一樣。

（錯(cuò)誤的方式）

這是為什么呢？因?yàn)椴煌淖中卧诟叨壬隙紩?huì)產(chǎn)生微小的差異，無(wú)論是使用原始方法或是使用sketch默認(rèn)行高去標(biāo)注文字，它都與前端在編輯文字的軟件里的字體默認(rèn)行高不一致。

3. 手動(dòng)修改sketch行高為開(kāi)發(fā)環(huán)境下的默認(rèn)行高

手動(dòng)修改文字行高，把sketch文字行高與前端默認(rèn)行高修改成一致，從而給出準(zhǔn)確的文字間距。這種方式雖會(huì)花費(fèi)不少時(shí)間，但也最精確，你可以據(jù)此設(shè)置出最美觀(guān)合理的間距，而不用擔(dān)心上線(xiàn)稿的還原度問(wèn)題。

下圖是iOS的Xcode以及Android文字編輯器對(duì)應(yīng)下默認(rèn)的行高。

最便捷的方法：手動(dòng)調(diào)整sketch里的字體的默認(rèn)行高并形成樣式。這樣規(guī)范好設(shè)計(jì)能更好的讓開(kāi)發(fā)人員還原設(shè)計(jì)稿，也便于我們后期的頁(yè)面校對(duì)和調(diào)整。

這時(shí)眼尖的朋友可能會(huì)發(fā)現(xiàn)，Android和iOS開(kāi)發(fā)的文字編輯器默認(rèn)的行高也不一樣啊，難道我們要出2套設(shè)計(jì)標(biāo)注文件嗎？雖然不可否認(rèn)的是，最理想狀態(tài)當(dāng)然是設(shè)計(jì)師出2套設(shè)計(jì)稿，但在職場(chǎng)打滾過(guò)的設(shè)計(jì)師都會(huì)知道，多數(shù)產(chǎn)品都是處于快速迭代的過(guò)程，出2套設(shè)計(jì)稿花費(fèi)的時(shí)間成本過(guò)高，并不符合實(shí)際情況。

對(duì)于這點(diǎn)，比較建議大家可以嘗試把ios和安卓都設(shè)置成一樣的行高，針對(duì)特殊頁(yè)面再單獨(dú)做標(biāo)注調(diào)整。

總而言之，具體使用哪種方法去做文字的標(biāo)注，要根據(jù)自己的項(xiàng)目具體情況具體分析。

總結(jié)

由于開(kāi)發(fā)環(huán)境下文字上下是有padding高度的，設(shè)計(jì)師需要手動(dòng)修改sketch行高為開(kāi)發(fā)環(huán)境下的默認(rèn)行高。

以上就是個(gè)人的小小的經(jīng)驗(yàn)，希望可以給大家一些啟發(fā)和借鑒～

轉(zhuǎn)載聲明：本文來(lái)源于網(wǎng)絡(luò)，不作任何商業(yè)用途