近萬字雄文！全網(wǎng)最最最詳細的 UI 文字應(yīng)用指南

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

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

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

文字的基本認識

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

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

1. 文字屬性

字體 FontFamily

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

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

這些字體文件，本質(zhì)上也是矢量文件，因為界面中任何一個可見的文字都是已經(jīng)已經(jīng)設(shè)計好的矢量圖形輪廓，設(shè)計師將這些圖形置入并分配對應(yīng)的編碼，于是系統(tǒng)就會通這些編碼來調(diào)用文字圖形。

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

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

字號 FontSize

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

因為文字的一些特性，這個矩形通常會比實際的文字圖形更高更寬，比如中文 「一」 它的字形高度肯定不會和字號等同，而英文字母不是等寬的比如 「i」 和 「m」，字號就是——比文字更大的矩形容器的高度值。

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

字重 FontWeight

字重是文字筆畫粗細的設(shè)定，因為在排版中，不同的字段類型對字重的要求不同，比如標題往往需要比較粗的筆畫，注釋文字需要比較細的筆畫等等，所以我們要通過更改字體字重的方式來實現(xiàn)。

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

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

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

字色 FontColor

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

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

字符樣式

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

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

2. 排版屬性

文本區(qū)域

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

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

定寬模式，是我們確定一個固定的文本區(qū)域?qū)挾龋瑒t文本會在字數(shù)超過區(qū)域?qū)挾群笞詣舆M行換行，直至顯示完為止。

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

對齊模式

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

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

字間距

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

這個屬性對于中文的排版來說并沒有太多用處，因為中文的字符區(qū)域是以正方形進行設(shè)計的，且在設(shè)計時就以已經(jīng)考慮了最佳的默認顯示樣式，所以只有一些比較特殊的場景會用到。

而對于英文來說字間距就顯得尤為重要，因為不同字母的字寬是不同的，往往需要我們根據(jù)字號、字重的不同動態(tài)調(diào)節(jié)間距參數(shù)，所以蘋果在官方字體規(guī)范中使用 SF 不同字號狀態(tài)下就會應(yīng)用不同的字間距數(shù)值。

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

行高

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

在一般的 UI 軟件中，我們可以發(fā)現(xiàn)通常默認行高一定比字號本身更大，例如字號為 12pt 的文字行高為 17，導(dǎo)致文本區(qū)域高度大于實際的字高。這是一個正常現(xiàn)象，因為如果行高和文字同高或更小，那么在多行文本狀態(tài)下就無法正常顯示。

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

行間距是一個獨立于行高之外的屬性，在一些復(fù)雜的設(shè)計、排版軟件中會出現(xiàn)，以及iOS、Android 等前端語言中也有提供這個屬性，它是造成我們標注與實際開發(fā)過程出錯的罪魁禍首。

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

段間距

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

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

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

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

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

1. iOS 文字規(guī)范

可用字體

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

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

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

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

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

除了官方提供給我們的字體以外，系統(tǒng)還有內(nèi)置一些其它的英文字體可以供我們使用，在一些特殊的標題或者數(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 不同的是，不同手機廠商會對系統(tǒng)進行深度定制，使用自己的設(shè)計語言，所以自然會更換掉機器默認的用字。我們無法為每個系統(tǒng)都開一個新的設(shè)計稿，所以通常在安卓系統(tǒng)的設(shè)計中，只要使用思源黑體和 Roboto 即可。

文字設(shè)置

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

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

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

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

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

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

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

1. 文字的角色

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

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

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

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

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

2. 字號、字重、字色

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

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

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

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

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

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

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

字號應(yīng)用

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

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

• 標題：16-34
• 正文：14-16
• 注釋：10-12

字重應(yīng)用

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

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

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

• 標題：Meduim、Semibold
• 正文：Regular、Meduim
• 注釋：Regular、Light

字色應(yīng)用

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

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

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

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

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

白色背景

• 標題：0-20
• 正文：20-50
• 注釋：60-80

深色背景

• 標題：100-90
• 正文：90-70
• 注釋：70-30

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

3. 文本框設(shè)置

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

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

并且，當我們使用文本框以后，那么當文字與其它元素計算間距與對齊時，是以文本框的邊緣為標準，而不是使用文字的圖形邊緣。

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

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

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

4. 操作實例

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

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

步驟1：

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

步驟2：

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

• 大標題：商家名
• 次標題：模塊名稱
• 正文：主介紹文字
• 次文本：簡介、價格
• 注釋：演出時間、地址、電話

步驟3：

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

步驟4：

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

步驟5：

到這里，當然還沒結(jié)束，前面花了大篇幅講的文本區(qū)域與行高，這時候就要隆重登場了！故意留到后面再講，是因為對于新手來說，先做樣式再排版會比較友好一點，等到適應(yīng)以后就不用在意順序了。

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

步驟6：

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

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

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

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

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

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

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

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

前端布局邏輯

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

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

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

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

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

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

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

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

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

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

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

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

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

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

文字樣式的復(fù)用

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

顯然不是。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

結(jié)尾

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

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

歡迎關(guān)注作者的微信公眾號：「超人的電話亭」