UI 是一門偏向排版的設(shè)計(jì)類型，而對于排版來講，最重要的東西既不是軟件操作深度，也不是視覺設(shè)計(jì)創(chuàng)意性，而是對于文字的排列與設(shè)置。

對于新手來說，注意力往往被案例中精致的配圖，花哨的配色，酷炫的動(dòng)畫吸引，而忽略文字的重要性。實(shí)際上，文字才是界面的骨骼和靈魂，掌握好文字的使用，才能真正駕馭所有界面的視覺表現(xiàn)。

并且，除了設(shè)計(jì)效果以外，實(shí)際開發(fā)過程中實(shí)現(xiàn)設(shè)計(jì)效果時(shí)，在字體上遇到的問題是最多，也是最難以解決的。所以，這篇文章會(huì)圍繞在 UI 中文字的使用展開，如何正確的設(shè)置文字做出正確的設(shè)計(jì)，且符合項(xiàng)目開發(fā)的實(shí)際需要。

文字的基本認(rèn)識(shí)

在常規(guī)設(shè)計(jì)軟件中，主要將文字元素的設(shè)置劃分為兩個(gè)部分，分別是 「文字屬性」 和「排版屬性」。在開始具體講解如何應(yīng)用文字前，需要先詳細(xì)了解它們的知識(shí)點(diǎn)以及設(shè)置規(guī)則。

在這里，我們主要使用 Sketch 的文字設(shè)置面板做介紹，如下圖所示，XD、Figma 等其它 UI 設(shè)計(jì)軟件界面與內(nèi)容基本相同，看懂以下內(nèi)容即可。

1. 文字屬性

字體 FontFamily

首先，我們要討論的是文字的字體，字體即文字設(shè)計(jì)的不同風(fēng)格，相信大家都已經(jīng)知道。那么值得注意的是，字體是如何顯示到我們的電子設(shè)備中的呢？

字體設(shè)計(jì)公司或者設(shè)計(jì)師完成一套字體的設(shè)計(jì)時(shí)，會(huì)將這些字體圖形合并成一個(gè)標(biāo)準(zhǔn)的字體格式文件，常見的如 OTF、TTC、TTF 等等。

這些字體文件，本質(zhì)上也是矢量文件，因?yàn)榻缑嬷腥魏我粋€(gè)可見的文字都是已經(jīng)已經(jīng)設(shè)計(jì)好的矢量圖形輪廓，設(shè)計(jì)師將這些圖形置入并分配對應(yīng)的編碼，于是系統(tǒng)就會(huì)通這些編碼來調(diào)用文字圖形。

任何設(shè)計(jì)軟件的字體都是從系統(tǒng)中調(diào)用的，如果缺乏對應(yīng)字體文件，那么設(shè)計(jì)師在設(shè)計(jì)軟件的字體列表中就找不到。如果設(shè)計(jì)師應(yīng)用了某字體，而用戶的客戶端系統(tǒng)里沒有，那么他們的字體顯示也會(huì)出錯(cuò)或者用其它字體替代，與設(shè)計(jì)稿樣式有出入。

所以，商業(yè)系統(tǒng)為了顯示的統(tǒng)一性，都有規(guī)范各自平臺(tái)默認(rèn)的字體，以防設(shè)計(jì)師過度發(fā)揮，導(dǎo)致字體在客戶端無法正常顯示，會(huì)在后面的部分詳細(xì)講解。

字號 FontSize

文字的字號，即文字的大小數(shù)值，通常使用 pt 作為字號的單位 （安卓是 sp 但是只是稱呼的不同）。相信大家還記得小時(shí)候?qū)W寫字時(shí)寫的田字格，在界面的文字顯示中，每個(gè)獨(dú)立的文字實(shí)際上都由一個(gè) 「田字格」 正方形包裹，字號即這個(gè)正方形的邊長。

因?yàn)槲淖值囊恍┨匦裕@個(gè)矩形通常會(huì)比實(shí)際的文字圖形更高更寬，比如中文 「一」 它的字形高度肯定不會(huì)和字號等同，而英文字母不是等寬的比如 「i」 和 「m」，字號就是——比文字更大的矩形容器的高度值。

字號的設(shè)置需要根據(jù)實(shí)際場景決定，但首先要了解它在界面中的限制。在中文中，字號如果小于10pt，那么就會(huì)因?yàn)樘o法被正常識(shí)別，而英文和數(shù)字的最小字號約為 9pt。最大的字號通常為iOS 的大標(biāo)題 34pt，如果是類似鬧鐘、計(jì)數(shù)等大號文字，則根據(jù)設(shè)計(jì)風(fēng)格制定。

字重 FontWeight

字重是文字筆畫粗細(xì)的設(shè)定，因?yàn)樵谂虐嬷校煌淖侄晤愋蛯ψ种氐囊蟛煌?，比如?biāo)題往往需要比較粗的筆畫，注釋文字需要比較細(xì)的筆畫等等，所以我們要通過更改字體字重的方式來實(shí)現(xiàn)。

絕大多數(shù)人對字重更改的理解都來自學(xué)習(xí) Office Word 的 「B」 加粗按鈕。但在 UI 設(shè)計(jì)軟件中，這個(gè)加粗按鈕并不存在，且加粗也不是真正的字重調(diào)節(jié)。加粗按鈕 「B「 只是對當(dāng)前字體進(jìn)行類似描邊的輪廓放大渲染，效果非常粗糙。

軟件都有為字體提供字重調(diào)節(jié)的菜單，只要點(diǎn)擊就可以查看和選擇對應(yīng)的字重。如果選項(xiàng)中只有一個(gè)，那么證明該字體并沒有包含其它字重，無法進(jìn)行更改。當(dāng)然，主流的 UI 設(shè)計(jì)字體都會(huì)包含豐富的字重，不用擔(dān)心想要的效果找不到。

常見的字重通常分為三個(gè)等級，粗 (Blod)、常規(guī) (Regular)、細(xì) (Light)，如果字重較為豐富的字體則會(huì)在每個(gè)等級中包含更豐富的字重。例如，蘋方字體中，從細(xì)到粗包含了極細(xì)、纖細(xì)、細(xì)體、常規(guī)體、中黑體、中粗體等七種。

字色 FontColor

字色即文字對應(yīng)的顏色，這個(gè)就沒有必要多做解釋了。只是大家需要注意的是，通常 UI 的字色只能使用純色，而不能使用漸變色。

并且，字體的顏色顯示和透明度有一定的關(guān)聯(lián)，在比較規(guī)范的設(shè)計(jì)過程中，切記不要使用透明度調(diào)節(jié)的方式來淡化字體的顏色。

字符樣式

除了以上4個(gè)最基本的文字樣式屬性以外，還有幾個(gè)使用頻率比較低，但也比較常見的設(shè)置。例如，為文本添加下劃線、刪除線。

還有就是文本的大小寫切換，即所有文本采用大寫字符和小寫字符，這個(gè)設(shè)置只對外文字符起作用，對中文沒有影響。如果是英文字體本身就全大寫的顯示的話，那么該設(shè)置也會(huì)失效。

2. 排版屬性

文本區(qū)域

在一般設(shè)計(jì)軟件中，我們在畫布添加文本，就會(huì)生成一個(gè)文本區(qū)域，即顯示該圖層文本的區(qū)域。通常，文本區(qū)域有三種類型，水平適應(yīng)，定寬模式，固定尺寸。

水平適應(yīng)就是默認(rèn)的文本區(qū)域模式，我們輸入的內(nèi)容可以無限向右延伸，只有按回車鍵才可以對文字換行。

定寬模式，是我們確定一個(gè)固定的文本區(qū)域?qū)挾龋瑒t文本會(huì)在字?jǐn)?shù)超過區(qū)域?qū)挾群笞詣?dòng)進(jìn)行換行，直至顯示完為止。

固定尺寸，是對文本區(qū)域設(shè)置一個(gè)固定的寬度和高度，文本內(nèi)容雖然也會(huì)自動(dòng)換行，但當(dāng)高度不足時(shí)，則超出的內(nèi)容會(huì)被隱藏，而不會(huì)正常顯示。

對齊模式

對齊模式，即文本的對齊方向，有左、中、右三種對齊方式，這個(gè)大家初中就應(yīng)該在 Word 里學(xué)過了。但是，文本對齊的標(biāo)準(zhǔn)是基于文本區(qū)域的邊緣決定的，只有設(shè)置定寬和固定的文本區(qū)域模式對齊才有意義。

除了以上三種垂直的對齊方向以外，類似 Sketch 等部分軟件中還包含水平方向的對齊模式。當(dāng)我們使用了一個(gè)固定尺寸的文本區(qū)域以后，就可以設(shè)置文本內(nèi)容的上、中、下對齊，在一些特殊的排版場景中非常便利。

字間距

字間距是單個(gè)字符之間的水平距離，即文字 「田字格」 邊框的間距，默認(rèn)狀態(tài)下通常為 0，用來控制文本的橫向?qū)捤沙潭?，單位也?pt。

這個(gè)屬性對于中文的排版來說并沒有太多用處，因?yàn)橹形牡淖址麉^(qū)域是以正方形進(jìn)行設(shè)計(jì)的，且在設(shè)計(jì)時(shí)就以已經(jīng)考慮了最佳的默認(rèn)顯示樣式，所以只有一些比較特殊的場景會(huì)用到。

而對于英文來說字間距就顯得尤為重要，因?yàn)椴煌帜傅淖謱捠遣煌?，往往需要我們根?jù)字號、字重的不同動(dòng)態(tài)調(diào)節(jié)間距參數(shù)，所以蘋果在官方字體規(guī)范中使用 SF 不同字號狀態(tài)下就會(huì)應(yīng)用不同的字間距數(shù)值。

為什么很多英文設(shè)計(jì)稿一看就是中國設(shè)計(jì)師做的，因?yàn)檫@它們使用的都是字間距為 0 的英文，在英文母語環(huán)境下這樣的間距是無法被接受的。

行高

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

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

但是，還有一個(gè)在 Sketch、XD 等軟件中沒有包含的屬性需要引起我們重視，那就是 —— 「行間距」。

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

無論是設(shè)計(jì)過程中，或者設(shè)計(jì)標(biāo)注文件中，都要拋棄掉任何有關(guān)行間距的概念，具體的原因會(huì)在后續(xù)內(nèi)容中說明，這里只要搞清楚它們的區(qū)別即可。

段間距

前面我們已經(jīng)了解了，在定寬和固定尺寸的文本區(qū)域中，文字超出一定數(shù)量會(huì)換行，這是自動(dòng)執(zhí)行的，但當(dāng)我們想要對數(shù)量較多的文字做出主動(dòng)的劃分，就會(huì)對內(nèi)容進(jìn)行換行操作，即——生成新的段落。而段間距，就是和前面所有元素?zé)o關(guān)的控制段和段之間距離的屬性。

根據(jù)親密性的原則，段落之間首尾的行之間間距應(yīng)該大于段內(nèi)的間距，這時(shí)候就應(yīng)該增加段間距，使得文本的閱讀體驗(yàn)得到進(jìn)一步的提升。

比如本段和上一段內(nèi)容……

系統(tǒng)的字體規(guī)范

在上面了解了文字基本屬性以后，接下來我們要簡單介紹一次有關(guān) iOS、Android 端的文字規(guī)范。規(guī)范內(nèi)容主要分為兩個(gè)方面，一個(gè)是使用的字體介紹，另一個(gè)是對文字大小的應(yīng)用。

1. iOS 文字規(guī)范

可用字體

在 iOS 中中文和英文都有各自的官方字體，中文只有一個(gè)字體，那就是 「蘋方」，而英文有兩個(gè)系列的字體，一個(gè)是黑體 「SF Pro」 另一個(gè)是襯線體 「NewYork」。

在中文字體環(huán)境中，我們使用蘋方這個(gè)字體即可，蘋方中也有攜帶英文字符，所以中英文混排不需要特意設(shè)置英文字體，統(tǒng)一使用蘋方即可。

而英文環(huán)境下，使用的字體就比較復(fù)雜。我們可以根據(jù)需要選用 SF Pro 或者 NewYork 作為主要用字，但作為系列字體，它們實(shí)際上還各自包含好幾個(gè)字體類型，目前官網(wǎng)對 NewYork 的說明還語焉不詳，所以我們先從 SF Pro 入手。

蘋果官方為 SF 系列提供了 7 種字體，用于各種不同的設(shè)備，其中 SF Pro Text 和 SF Pro Display 是用于手機(jī)和 ipad 客戶端的系統(tǒng)字體。

而這兩個(gè)字體的區(qū)別，在于當(dāng)我們使用的字號小于 20 時(shí)，使用 SF Text，大于或等于 20 時(shí)，則使用 SF Display，這需要我們在設(shè)計(jì)英文界面時(shí)手動(dòng)進(jìn)行切換。以及，每個(gè) SF Pro 字體下包含了接近 20 種字重，直接讓設(shè)計(jì)師體會(huì)英文排版的復(fù)雜性。

除了官方提供給我們的字體以外，系統(tǒng)還有內(nèi)置一些其它的英文字體可以供我們使用，在一些特殊的標(biāo)題或者數(shù)字中使用。具體的我就不羅列出來了，大家可以參考下方的鏈接：

iOS 所有的系統(tǒng)字體列表：
https://blog.csdn.net/appleLg/article/details/84140924

文字設(shè)置

2. Android 文字規(guī)范

可用字體

Android 系統(tǒng)中，Google 為 Material Design 系統(tǒng)指定的字體，中文是思源黑體，英文是 Roboto。相對于 iOS 來說，MD 的字體使用上比較簡單，沒有那么多系列要選。

但是，安卓與 iOS 不同的是，不同手機(jī)廠商會(huì)對系統(tǒng)進(jìn)行深度定制，使用自己的設(shè)計(jì)語言，所以自然會(huì)更換掉機(jī)器默認(rèn)的用字。我們無法為每個(gè)系統(tǒng)都開一個(gè)新的設(shè)計(jì)稿，所以通常在安卓系統(tǒng)的設(shè)計(jì)中，只要使用思源黑體和 Roboto 即可。

文字設(shè)置

3. 系統(tǒng)規(guī)范與應(yīng)用

可能有些同學(xué)看了上面的列表和參數(shù)，就認(rèn)為有關(guān)字體設(shè)置的難題都解開了……哪有那么容易。

iOS、Android、Windows 等系統(tǒng)的設(shè)計(jì)語言，都是基于英語環(huán)境下誕生的，給出的文字設(shè)置也是基于英文的參數(shù)。這種情況導(dǎo)致，這些設(shè)置不能無差別的應(yīng)用到我們設(shè)計(jì)的界面中去，會(huì)為我們的設(shè)計(jì)帶來非常多不合理的地方和限制。

例如，官方規(guī)范中的字間距，在不同尺寸下有不同的數(shù)值，這在中文中是完全不需要，且英文適用的閱讀文本字號，比中文更小等。

所以，系統(tǒng)的規(guī)范只能作為一種參考，而不能作為我們直接套用的來源。合理的設(shè)計(jì)源自合理的思考，所以，我們會(huì)在下一部分開始講解文字在設(shè)計(jì)過程中的具體設(shè)置。

文字的應(yīng)用實(shí)例

既然前面說了，官方的文字只能作為參考，所以這一部分，就要從思路開始，詳解我們設(shè)計(jì)過程中如何一步步完成文字的應(yīng)用。

1. 文字的角色

在 UI 中應(yīng)用文字，有一個(gè)非常重要的概念，就是 —— 文字的角色。這個(gè)詞聽起來很抽象，但并不難理解，比如下圖京東的購物信息：

包含的文字角色有商品標(biāo)題、價(jià)格、原價(jià)、商品介紹、優(yōu)惠信息、新品提示、標(biāo)簽提示等，它們的樣式各不相同，不僅豐富了頁面的視覺體驗(yàn)，也便于用戶理解內(nèi)容。

文字的角色是決定它們樣式的關(guān)鍵因素。在我們用過的 Word 或 PPT 中，都有提供一個(gè)樣式選擇的列表，它們就是文字角色最基本的體現(xiàn)，比如標(biāo)題、二級標(biāo)題、三級標(biāo)題、正文、注釋等等。

不同的角色，它們在畫面中的定位就不一樣，有各自的作用，所以我們必須通過不同樣式體現(xiàn)。

而角色中還包含一種內(nèi)建的邏輯，即 「權(quán)重」 的等級，大標(biāo)題、價(jià)格就像主角一樣，需要重點(diǎn)給特寫，而注釋類文字則是龍?zhí)谉o足輕重。

2. 字號、字重、字色

接下來，我們就講講文字角色差異如何來表現(xiàn)。主要涉及三個(gè)最基本的文字屬性，那就是字號、字重、字色。

先說權(quán)重，無論在中英文排版中，文字角色的等級越高，那么它們的字號也就越大。

但不同的是，在字重上，英文的排版由于 「正負(fù)形」 概念影響，可能字號越大，則字重越小，即使標(biāo)題使用 Light 這種低字重也不影響我們的閱讀體驗(yàn)，而中文則不行。

中文中，字號和字重都和文字的權(quán)重成正比，顏色的強(qiáng)弱也會(huì)和等級成正比，如下圖所示。

當(dāng)然，一個(gè)應(yīng)用中包含的文字角色數(shù)以百計(jì)，我們不可能劃分出幾百個(gè)等級出來，通常只會(huì)定義出10個(gè)以內(nèi)，并將不同的角色對應(yīng)分配進(jìn)去。

而在差異的表現(xiàn)上，我們主要會(huì)使用色彩作為區(qū)分方法，即使是同一等級中，也有一些文字作用、權(quán)重不同于另一些文字，所以它們就會(huì)用更易于識(shí)別的顏色，比如可點(diǎn)擊文字、用戶名、價(jià)格等。

雖然要考慮的東西看似很多，但在 UI 這些年的發(fā)展中，文字的這三樣設(shè)置已經(jīng)逐漸形成了固定、可用、高效的規(guī)律了，可以有效總結(jié)出在三個(gè)設(shè)置對應(yīng)的參數(shù)和準(zhǔn)則，下面我們分別進(jìn)行說明。

字號應(yīng)用

在字號上，字體有最小的顯示極限，10pt 是不把手機(jī)懟臉上可以接受的最小字號，而最大字號通常就以蘋果的標(biāo)題欄大標(biāo)題字號 34pt 為準(zhǔn)。只有當(dāng)界面設(shè)計(jì)一些類似倒計(jì)時(shí)、計(jì)數(shù)等特殊需求的時(shí)候，才會(huì)使用比這更大的字號。

如果再進(jìn)一步拆分，那么我們可以將字號這么進(jìn)行分配：

• 標(biāo)題：16-34
• 正文：14-16
• 注釋：10-12

字重應(yīng)用

字重在中文的使用上，和字號成正比關(guān)系，但這并不是絕對的，字重核心且唯一的作用就是用來傳遞文字的權(quán)重，設(shè)計(jì)師會(huì)為重要的文字加重，為沒有什么觀看必要的文字減重，但不會(huì)僅僅為了美觀隨意更改字重。

并且，在中文環(huán)境的使用中，Light 字重是我們正常閱讀范圍內(nèi)最輕的字重，Thin （纖細(xì)）、 Ultralight（極細(xì)） iOS10 以后已經(jīng)基本不會(huì)出現(xiàn)在正常的設(shè)計(jì)稿中。

所以簡單概括起來，文字類的字重可以這么分配：

• 標(biāo)題：Meduim、Semibold
• 正文：Regular、Meduim
• 注釋：Regular、Light

字色應(yīng)用

正常來說，配色應(yīng)該是隨設(shè)計(jì)風(fēng)格來決定的，無法被具體規(guī)定。但是，色彩除了視覺特征以外，也有一定的功能特性，即滿足文字最基本的 「清晰可見」 要求。

字號的影響主要體現(xiàn)在文字與背景環(huán)境的結(jié)合上，如果字色無法將文字信息從環(huán)境中凸顯出來，那么它的設(shè)置就是不合格的，比如下面這樣的情況：

面向所有色彩的情況先不談，先從白和黑兩種背景色系開始講起。在調(diào)色板中，我們都可以將色彩數(shù)值模式調(diào)節(jié)成 HSB，而 B 值（灰度）就是我們來控制字色的關(guān)鍵屬性。

在 HS 值為 0 的時(shí)候，B 值越高顏色越亮，100 為純白，0 為純黑。在不同背景下它們的顯示效果。

所以，在面向淺色和深色背景中，我們可以將 B 值控制在以下范圍內(nèi)：

白色背景

• 標(biāo)題：0-20
• 正文：20-50
• 注釋：60-80

深色背景

• 標(biāo)題：100-90
• 正文：90-70
• 注釋：70-30

以上的內(nèi)容可以整理成以下的表格，每當(dāng)我們設(shè)置文字屬性的時(shí)候，就可以進(jìn)行對照。

3. 文本框設(shè)置

接下來，就該講講有關(guān)文字的排版操作了。在設(shè)計(jì)界面的過程中，我們通常會(huì)使用定寬模式進(jìn)行排版，也就是輸入文字前像置入矩形元素一樣拖動(dòng)一個(gè)文本區(qū)域出來。

通常，文本框的高度由支持多少行文字決定，比如我們設(shè)置一個(gè)支持兩行文字的標(biāo)題，每行高25，那么文本框的高就為 25*2 = 50，而寬度則由設(shè)計(jì)的排版需要決定。

并且，當(dāng)我們使用文本框以后，那么當(dāng)文字與其它元素計(jì)算間距與對齊時(shí)，是以文本框的邊緣為標(biāo)準(zhǔn)，而不是使用文字的圖形邊緣。

這么做雖然不符合設(shè)計(jì)師的第一直覺，但實(shí)際上這么排列的文字即使沒有文本區(qū)域的影響，也需要適當(dāng)下移才能帶給我們更好的視覺體驗(yàn)，所以絕大多數(shù)主流應(yīng)用也都遵循這個(gè)規(guī)則而不是使用特殊的布局技巧強(qiáng)行對齊。大家可以自己打開手機(jī)里的應(yīng)用看看……

接下來，我們要說說文本區(qū)域內(nèi)的對齊。無論我們使用左或右對齊，文本會(huì)在每行末尾上會(huì)因?yàn)榭臻g不足換行，導(dǎo)致其中一側(cè)的排列參差不齊，這是一個(gè)正常的現(xiàn)象，不要刻意制造兩端對齊的文本，這會(huì)導(dǎo)致不同行的字間距呈現(xiàn)不規(guī)則的變化，降低閱讀體驗(yàn)。

最后，就是段間距的真正使用方法了。相信很多人在打字的時(shí)候是有這樣的習(xí)慣的，當(dāng)在輸入?yún)^(qū)域換段以后，會(huì)覺得段落的間距不足，然后就再打一個(gè)回車增加段間距。這是一種低級錯(cuò)誤，一定要牢記段落之間的區(qū)分，要由 「段間距」 這個(gè)屬性設(shè)置，并且基于親密性原則，段間距不能大于行高。例如下圖右圖中行高24，段間距為8。

4. 操作實(shí)例

上面密集的拋出一系列的知識(shí)點(diǎn)，硬記肯定是記不住的！所以，我們需要用一個(gè)具體的設(shè)計(jì)案例，講解這些知識(shí)點(diǎn)是如何使用的（重點(diǎn)來了的意思……）。

這次演示用我之前關(guān)于 Mars 的設(shè)計(jì)頁面案例來進(jìn)行，效果如下：

步驟1：

首先在原型階段（開始設(shè)置細(xì)節(jié)前），將所有文字內(nèi)容填充到畫布中去。這么做的目的是在調(diào)節(jié)細(xì)節(jié)前能對整體有一個(gè)宏觀的認(rèn)識(shí)，否則我們無法對文字的角色作出定義。

步驟2：

開始對頁面的角色權(quán)重和定位做出梳理，構(gòu)建文字的層級關(guān)系，例如下方的列表。這么看做起來是挺麻煩的，但如果對文字本身權(quán)重的考慮已經(jīng)適應(yīng)以后，是不需要再額外記錄的，直接上手即可。

• 大標(biāo)題：商家名
• 次標(biāo)題：模塊名稱
• 正文：主介紹文字
• 次文本：簡介、價(jià)格
• 注釋：演出時(shí)間、地址、電話

步驟3：

有了對應(yīng)角色的定義以后，就可以開始下一步，為它們分配字重、字號和基礎(chǔ)字色了。大標(biāo)題使用 18pt 的中粗體，次標(biāo)題使用 16pt 的中粗體，正文使用 14pt 的常規(guī)體，次文本使用 12pt 常規(guī)體，注釋也使用 12pt 的常規(guī)題。然后為他們分別分配 B 值為 10、10、40、40、60 的灰度，這樣字體就具備了初級的層次感。

步驟4：

只依靠灰度值是不足以滿足真實(shí)界面設(shè)計(jì)需要的，所以這個(gè)過程中，我們要對一些比較特殊的文字類型使用一些其它色相進(jìn)行突出。例如標(biāo)題下方的小字用赭石色，地址和電話這些可以點(diǎn)擊的文字使用主色綠色（根據(jù)其它頁面設(shè)計(jì)用過的色彩，因地制宜了），進(jìn)一步豐富了文字的展示樣式。

步驟5：

到這里，當(dāng)然還沒結(jié)束，前面花了大篇幅講的文本區(qū)域與行高，這時(shí)候就要隆重登場了！故意留到后面再講，是因?yàn)閷τ谛率謥碚f，先做樣式再排版會(huì)比較友好一點(diǎn)，等到適應(yīng)以后就不用在意順序了。

文本的設(shè)置難題主要來自于行高的制定，我們前面已經(jīng)說過，最穩(wěn)妥的做法就是為所有文本設(shè)置可以直接支持合理多行顯示的行高。比如簡介和詳細(xì)介紹部分的文字，行高明顯需要我們做出調(diào)整。簡介使用 20pt 行高，介紹使用 26pt 行高，且因?yàn)槭嵌喽挝淖衷O(shè)置段間距為 10pt。

步驟6：

除了這種顯而易見的多行文本以外，再看商家名大標(biāo)題，實(shí)際上這個(gè)區(qū)域是支持兩行顯示的，雖然我們只做了一行，所以我們也要為它設(shè)置對應(yīng)多行的行高，這樣這個(gè)字體無論在任何情況下都可以正常顯示。

所以，我們將所有字號設(shè)置了合適的行高，參數(shù)如下：

• 字號 12 的行高從 17 改為 20
• 字號 14 的行高從 20 改成 24
• 字號 16 的行高從 20 改成 26

并將文本區(qū)域設(shè)置成實(shí)際文字的寬度，再根據(jù)親密性原則對文字進(jìn)行合適的間距調(diào)整，就可以完成最終的效果了。

文組的開發(fā)與標(biāo)注

是的，沒錯(cuò)，文章到這里還沒結(jié)束！光了解怎么把圖做出來是不夠的，設(shè)計(jì)的任務(wù)，還要想辦法合理過度到開發(fā)階段，而在前端實(shí)現(xiàn)我們設(shè)計(jì)稿的過程中，最讓人頭疼的問題絕對不是動(dòng)效，而是字體設(shè)置的差異，導(dǎo)致細(xì)節(jié)上的崩壞。

所以最后，我們要站在實(shí)際項(xiàng)目的角度上，來有哪些是設(shè)計(jì)師需要關(guān)注的事情。

1. 文字與代碼的實(shí)現(xiàn)

前端布局邏輯

我們先從前端程序員完成界面樣式的開發(fā)邏輯講起，很多人以為了解技術(shù)，是要我們自己學(xué)代碼，實(shí)際了解技術(shù)是明白功能和結(jié)果實(shí)現(xiàn)的過程，而不是具體操作。

在各種代碼類型中，我們會(huì)將實(shí)現(xiàn)頁面視覺效果的過程稱為 —— 界面布局，布局是個(gè)動(dòng)詞。雖然每一個(gè)系統(tǒng)，不同的代碼版本，都有各自的布局特性，但大體上它們的實(shí)現(xiàn)邏輯是一致的。

界面布局的實(shí)現(xiàn)過程，就像是一個(gè)堆積木的過程，每一個(gè)積木，就是一個(gè)矩形區(qū)域，矩形區(qū)域內(nèi)可以容納圖形、矢量文件、視頻動(dòng)畫、文本內(nèi)容等等。程序員通過一定的方式，將矩形區(qū)域置入頁面中進(jìn)行排列和定位，再在其中添加對應(yīng)的視覺內(nèi)容，實(shí)現(xiàn)最終用戶可見的樣式。

比如下圖是 DW 中前端布局效果的預(yù)覽，線框的矩形就是一個(gè) 「積木」。

矩形區(qū)域在一定程度上可以等同于前文所說的文本區(qū)域，除設(shè)置長寬尺寸以外，更重要的事情就是可以用來定義它的坐標(biāo)和位置。

比如上面案例中，在一個(gè)組件的區(qū)域內(nèi)添加一行文本，那么定位過程就是將其設(shè)置成距上方圖片 10 即可。

行高的應(yīng)用差異

行高始終是文字布局上最頭痛的問題，為什么，看看下面的內(nèi)容就知道了。

前文說過，在 Sketch 等設(shè)計(jì)軟件中，只給我們提供了行高這個(gè)屬性來控制行間距。但是，iOS、 Android 都有提供過 LineSpacing （行間距），而很多設(shè)計(jì)師在標(biāo)注設(shè)計(jì)稿的過程中也會(huì)使用標(biāo)注間距的形式。

雖然 iOS 使用行間距可以實(shí)現(xiàn)，但是實(shí)現(xiàn)的效果和設(shè)計(jì)稿是有出入的。因?yàn)樵O(shè)計(jì)稿中我們只能使用行高，所以在一個(gè)文本區(qū)域中，它的上下兩側(cè)都有行高增加的空白區(qū)域，但是實(shí)現(xiàn)過程里面沒有這一截間距，導(dǎo)致實(shí)際文本區(qū)域和上方元素的距離效果有偏差。

并且，還有一個(gè)常見的問題，就是 iOS 在默認(rèn)狀態(tài)下，行高是和字號相同的，但是安卓的行高如 Skecth 一樣會(huì)大于字號。所以經(jīng)常會(huì)導(dǎo)致沒有定義明確的行高，兩個(gè)平臺(tái)使用同一套設(shè)計(jì)時(shí)實(shí)現(xiàn)的效果不一致。

前面提到，多行文本勢必要使用大于字號的行高，比如一個(gè)字號為 12pt 的文本區(qū)域，行高為 20pt，那么它的頂部就有 4pt 的空白，我們需要將它上移 4pt，才能保證文字邊緣和其它元素的邊界是持平的。

這意味著，在開發(fā)中，程序員還需要在設(shè)置屬性的過程里注意高度距離的實(shí)際差異，而這種左右高度不一致的做法還會(huì)直接導(dǎo)致布局過程變得更繁瑣，具體原因就不細(xì)說了，只需知道真實(shí)項(xiàng)目的情況會(huì)遠(yuǎn)比現(xiàn)在復(fù)雜，且布局也會(huì)更麻煩即可。

可能還有一些同學(xué)會(huì)說，如果多行文本行高需要設(shè)置，那么我將只有單行的文本設(shè)置成行高字號相同可不可以？答案依舊是否定的，這就要在下一個(gè)環(huán)節(jié)中說明了。

文字樣式的復(fù)用

要在界面中實(shí)現(xiàn)字體的效果，就要用代碼把它的屬性和值都對應(yīng)碼出來。雖然這個(gè)過程很簡單也很容易，但在整個(gè)應(yīng)用中，出現(xiàn)的文本數(shù)量沒有一千也有八百，難道我們要挨個(gè)設(shè)置文本樣式？

顯然不是。

程序員應(yīng)該屬于最討厭重復(fù)造輪子的群體了，所以自然會(huì)用別的方式來實(shí)現(xiàn)。通所有的程序語言都會(huì)提供文字復(fù)用的功能。比如在 CSS 中，可以通過 Class（類）的定義實(shí)現(xiàn)樣式的復(fù)用。

例如，命名了類1為 「TitleName」, 類2為 「PriceAll」, 它們分別包含了不同的文字屬性和樣式，當(dāng)我們需要使用類1的時(shí)候，只要輸入 「TitleName」 這個(gè)名字，類2則輸入 「 PriceAll 」 即可，可以省去成千上萬行代碼。

所以，當(dāng)我們在做設(shè)計(jì)規(guī)范時(shí)，為什么會(huì)有文字的部分，原因除了設(shè)計(jì)統(tǒng)一性的要求以外，還有就是為了方便程序員可以提前把字體的樣式定義好，提升整個(gè)項(xiàng)目界面布局的效率。

這里要注意的就是，任何一個(gè)文本樣式，只要定義過，它的所有屬性和值就是絕對的，如果要調(diào)整其中任意的一個(gè)參數(shù)，那么對于程序而言，它就是一個(gè)新的樣式。

所以回到前面所說的單行文本和多行文本的行高問題，如果在其它屬性相同的狀況下，設(shè)置了兩種行高，那么實(shí)際就變成了兩個(gè)文字樣式，會(huì)讓開發(fā)過程變得更繁瑣。

所以，盡可能保證文字樣式的精簡，是對設(shè)計(jì)過程中對文字設(shè)置的基本要求。

2. 設(shè)計(jì)規(guī)范中的文字

很多人以為文字設(shè)計(jì)規(guī)范就是把用過的文字列一些出來，沒啥難度。這也是一個(gè)誤區(qū)，想要讓整個(gè)開發(fā)過程順利，不在文字實(shí)現(xiàn)問題上栽跟頭，那么設(shè)計(jì)規(guī)范中文字的規(guī)范制定就至關(guān)重要。

從文章最開始，就說過，多行文字下，行高勢必要進(jìn)行調(diào)整，于是就和默認(rèn)狀態(tài)下有差異，而我們在設(shè)計(jì)過程中，有很多文字即可能出現(xiàn)單行也可能出現(xiàn)多行，比如下面的案例。左側(cè)是只有一行的狀態(tài)，右側(cè)是兩行的狀態(tài)，于是行高上就發(fā)生了變化。

所以，為了解決后面很多不必要的麻煩，我們盡可能在制定設(shè)計(jì)中的文字規(guī)范時(shí)，就將文字的行高設(shè)置成多行顯示高度下的數(shù)值，再以此進(jìn)行排版。這樣，就可以解決非常多不必要的問題。

所以，細(xì)心的同學(xué)應(yīng)該發(fā)現(xiàn)了上面演示的案例中，我用的文本框高度實(shí)際上都比正常行高再多出一點(diǎn)。

為了保證我們設(shè)計(jì)過程中的統(tǒng)一性，同時(shí)要將應(yīng)用過的文字樣式通過軟件功能進(jìn)行整理。比如下圖是 Sketch 中的字體樣式庫。

在項(xiàng)目開始設(shè)計(jì)的時(shí)候，隨著主要頁面樣式的確認(rèn)，我們就要著手開始規(guī)范字體的使用，將這些樣式添加到軟件的字體庫中。

整理字體樣式的過程，一定要為樣式進(jìn)行合理命名，絕對不能用一些完全不著調(diào)或者沒意義的字符，比如 A1、A2、C1、C2 之類的。我們要盡可能根據(jù)心里所想的角色名來命名文字樣式，這樣在添加文字的時(shí)候我們可以通過標(biāo)題來快速識(shí)別。

還有，我會(huì)習(xí)慣于將樣式建立排序，根據(jù)權(quán)重的高低用數(shù)字序號來進(jìn)行排列，這樣在高頻率和強(qiáng)度的使用下，可以形成肌肉記憶，而不是每次要調(diào)用樣式的時(shí)候我都要查找半天（實(shí)際項(xiàng)目中樣式數(shù)量會(huì)遠(yuǎn)不止那么一點(diǎn)）。

只要頁面的字體樣式被整理出來，那么后續(xù)的設(shè)計(jì)中，我們就要盡可能的調(diào)用這些樣式來設(shè)計(jì)和排版，只有在某些新的場景下，已有的樣式實(shí)在不足以支撐界面，才創(chuàng)建新的樣式出來。

換句話說，就是要保證我們設(shè)計(jì)稿中每一個(gè)出現(xiàn)的文字它們都屬于已經(jīng)制定好的某個(gè)樣式，并且它們的行高在多行和單行狀態(tài)下都能一致。這樣，我們只需要將設(shè)計(jì)稿上傳到類似藍(lán)湖的工具中，程序員就可以順滑高效的將文字效果正確的實(shí)現(xiàn)出來。

結(jié)尾

以上，就是我暫時(shí)能想到的關(guān)于一個(gè)專業(yè)的 UI 設(shè)計(jì)師，在設(shè)計(jì)過程中對文字進(jìn)行排版和設(shè)置的全部內(nèi)容了。再細(xì)節(jié)的東西實(shí)在肝不動(dòng)了，因?yàn)槠荛L，而且?guī)捉?jīng)修訂，細(xì)節(jié)處可能會(huì)有錯(cuò)誤，如果大家發(fā)現(xiàn)了，可以在評論區(qū)留言。

當(dāng)然，想要脫離圖文，通過更好的形式了解和學(xué)習(xí)這些知識(shí)點(diǎn)和實(shí)際應(yīng)用方法，就需要通過視頻教學(xué)的形式了，歡迎來關(guān)注我的 UI 基礎(chǔ)課程，學(xué)習(xí)更全面有用的干貨