UI 是一門偏向排版的設計類型，而對於排版來講，最重要的東西既不是軟體操作深度，也不是視覺設計創意性，而是對於文字的排列與設置。
對於新手來說，注意力往往被案例中精緻的配圖，花哨的配色，酷炫的動畫吸引，而忽略文字的重要性。實際上，文字才是介面的骨骼和靈魂，掌握好文字的使用，才能真正駕馭所有介面的視覺表現。
並且，除了設計效果以外，實際開發過程中實現設計效果時，在字體上遇到的問題是最多，也是最難以解決的。所以，這篇文章會圍繞在 UI 中文字的使用展開，如何正確的設置文字做出正確的設計，且符合項目開發的實際需要。
文字的基本認識
在常規設計軟體中，主要將文字元素的設置劃分為兩個部分，分別是 「文字屬性」 和「排版屬性」。在開始具體講解如何應用文字前，需要先詳細了解它們的知識點以及設置規則。
在這裡，我們主要使用 Sketch 的文字設置面板做介紹，如下圖所示，XD、Figma 等其它 UI 設計軟體介面與內容基本相同，看懂以下內容即可。
1. 文字屬性
字體 FontFamily
首先，我們要討論的是文字的字體，字體即文字設計的不同風格，相信大家都已經知道。那麼值得注意的是，字體是如何顯示到我們的電子設備中的呢？
字體設計公司或者設計師完成一套字體的設計時，會將這些字體圖形合併成一個標準的字體格式文件，常見的如 OTF、TTC、TTF 等等。
這些字體文件，本質上也是矢量文件，因為介面中任何一個可見的文字都是已經已經設計好的矢量圖形輪廓，設計師將這些圖形置入並分配對應的編碼，於是系統就會通這些編碼來調用文字圖形。
任何設計軟體的字體都是從系統中調用的，如果缺乏對應字體文件，那麼設計師在設計軟體的字體列表中就找不到。如果設計師應用了某字體，而用戶的客戶端系統里沒有，那麼他們的字體顯示也會出錯或者用其它字體替代，與設計稿樣式有出入。
所以，商業系統為了顯示的統一性，都有規範各自平台默認的字體，以防設計師過度發揮，導致字體在客戶端無法正常顯示，會在後面的部分詳細講解。
字號 FontSize
文字的字號，即文字的大小數值，通常使用 pt 作為字號的單位 （安卓是 sp 但是只是稱呼的不同）。相信大家還記得小時候學寫字時寫的田字格，在介面的文字顯示中，每個獨立的文字實際上都由一個 「田字格」 正方形包裹，字號即這個正方形的邊長。
因為文字的一些特性，這個矩形通常會比實際的文字圖形更高更寬，比如中文 「一」 它的字形高度肯定不會和字號等同，而英文字母不是等寬的比如 「i」 和 「m」，字號就是——比文字更大的矩形容器的高度值。
字號的設置需要根據實際場景決定，但首先要了解它在介面中的限制。在中文中，字號如果小於10pt，那麼就會因為太小無法被正常識別，而英文和數字的最小字號約為 9pt。最大的字號通常為iOS 的大標題 34pt，如果是類似鬧鐘、計數等大號文字，則根據設計風格制定。
字重 FontWeight
字重是文字筆畫粗細的設定，因為在排版中，不同的欄位類型對字重的要求不同，比如標題往往需要比較粗的筆畫，注釋文字需要比較細的筆畫等等，所以我們要通過更改字體字重的方式來實現。
絕大多數人對字重更改的理解都來自學習 Office Word 的 「B」 加粗按鈕。但在 UI 設計軟體中，這個加粗按鈕並不存在，且加粗也不是真正的字重調節。加粗按鈕 「B「 只是對當前字體進行類似描邊的輪廓放大渲染，效果非常粗糙。
軟體都有為字體提供字重調節的菜單，只要點擊就可以查看和選擇對應的字重。如果選項中只有一個，那麼證明該字體並沒有包含其它字重，無法進行更改。當然，主流的 UI 設計字體都會包含豐富的字重，不用擔心想要的效果找不到。
常見的字重通常分為三個等級，粗 (Blod)、常規 (Regular)、細 (Light)，如果字重較為豐富的字體則會在每個等級中包含更豐富的字重。例如，苹方字體中，從細到粗包含了極細、纖細、細體、常規體、中黑體、中粗體等七種。
字色 FontColor
字色即文字對應的顏色，這個就沒有必要多做解釋了。只是大家需要注意的是，通常 UI 的字色只能使用純色，而不能使用漸變色。
並且，字體的顏色顯示和透明度有一定的關聯，在比較規範的設計過程中，切記不要使用透明度調節的方式來淡化字體的顏色。
字符樣式
除了以上4個最基本的文字樣式屬性以外，還有幾個使用頻率比較低，但也比較常見的設置。例如，為文本添加下劃線、刪除線。
還有就是文本的大小寫切換，即所有文本採用大寫字符和小寫字符，這個設置只對外文字符起作用，對中文沒有影響。如果是英文字體本身就全大寫的顯示的話，那麼該設置也會失效。
2. 排版屬性
文本區域
在一般設計軟體中，我們在畫布添加文本，就會生成一個文本區域，即顯示該圖層文本的區域。通常，文本區域有三種類型，水平適應，定寬模式，固定尺寸。
水平適應就是默認的文本區域模式，我們輸入的內容可以無限向右延伸，只有按回車鍵才可以對文字換行。
定寬模式，是我們確定一個固定的文本區域寬度，則文本會在字數超過區域寬度後自動進行換行，直至顯示完為止。
固定尺寸，是對文本區域設置一個固定的寬度和高度，文本內容雖然也會自動換行，但當高度不足時，則超出的內容會被隱藏，而不會正常顯示。
對齊模式
對齊模式，即文本的對齊方向，有左、中、右三種對齊方式，這個大家初中就應該在 Word 里學過了。但是，文本對齊的標準是基於文本區域的邊緣決定的，只有設置定寬和固定的文本區域模式對齊才有意義。
除了以上三種垂直的對齊方向以外，類似 Sketch 等部分軟體中還包含水平方向的對齊模式。當我們使用了一個固定尺寸的文本區域以後，就可以設置文本內容的上、中、下對齊，在一些特殊的排版場景中非常便利。
字間距
字間距是單個字符之間的水平距離，即文字 「田字格」 邊框的間距，默認狀態下通常為 0，用來控制文本的橫向寬鬆程度，單位也是 pt。
這個屬性對於中文的排版來說並沒有太多用處，因為中文的字符區域是以正方形進行設計的，且在設計時就以已經考慮了最佳的默認顯示樣式，所以只有一些比較特殊的場景會用到。
而對於英文來說字間距就顯得尤為重要，因為不同字母的字寬是不同的，往往需要我們根據字號、字重的不同動態調節間距參數，所以蘋果在官方字體規範中使用 SF 不同字號狀態下就會應用不同的字間距數值。
為什麼很多英文設計稿一看就是中國設計師做的，因為這它們使用的都是字間距為 0 的英文，在英文母語環境下這樣的間距是無法被接受的。
行高
行高是一行文本垂直方向的高度，這個高度和字高無關，文字內容默認處於這個高度的水平居中位置，如下圖所示。
在一般的 UI 軟體中，我們可以發現通常默認行高一定比字號本身更大，例如字號為 12pt 的文字行高為 17，導致文本區域高度大於實際的字高。這是一個正常現象，因為如果行高和文字同高或更小，那麼在多行文本狀態下就無法正常顯示。
但是，還有一個在 Sketch、XD 等軟體中沒有包含的屬性需要引起我們重視，那就是 —— 「行間距」。
行間距是一個獨立於行高之外的屬性，在一些複雜的設計、排版軟體中會出現，以及iOS、Android 等前端語言中也有提供這個屬性，它是造成我們標註與實際開發過程出錯的罪魁禍首。
無論是設計過程中，或者設計標註文件中，都要拋棄掉任何有關行間距的概念，具體的原因會在後續內容中說明，這裡只要搞清楚它們的區別即可。
段間距
前面我們已經了解了，在定寬和固定尺寸的文本區域中，文字超出一定數量會換行，這是自動執行的，但當我們想要對數量較多的文字做出主動的劃分，就會對內容進行換行操作，即——生成新的段落。而段間距，就是和前面所有元素無關的控制段和段之間距離的屬性。
根據親密性的原則，段落之間首尾的行之間間距應該大於段內的間距，這時候就應該增加段間距，使得文本的閱讀體驗得到進一步的提升。
比如本段和上一段內容……
系統的字體規範
在上面了解了文字基本屬性以後，接下來我們要簡單介紹一次有關 iOS、Android 端的文字規範。規範內容主要分為兩個方面，一個是使用的字體介紹，另一個是對文字大小的應用。
1. iOS 文字規範
可用字體
在 iOS 中中文和英文都有各自的官方字體，中文只有一個字體，那就是 「苹方」，而英文有兩個系列的字體，一個是黑體 「SF Pro」 另一個是襯線體 「NewYork」。
在中文字體環境中，我們使用苹方這個字體即可，苹方中也有攜帶英文字符，所以中英文混排不需要特意設置英文字體，統一使用苹方即可。
而英文環境下，使用的字體就比較複雜。我們可以根據需要選用 SF Pro 或者 NewYork 作為主要用字，但作為系列字體，它們實際上還各自包含好幾個字體類型，目前官網對 NewYork 的說明還語焉不詳，所以我們先從 SF Pro 入手。
蘋果官方為 SF 系列提供了 7 種字體，用於各種不同的設備，其中 SF Pro Text 和 SF Pro Display 是用於手機和 ipad 客戶端的系統字體。
而這兩個字體的區別，在於當我們使用的字號小於 20 時，使用 SF Text，大於或等於 20 時，則使用 SF Display，這需要我們在設計英文介面時手動進行切換。以及，每個 SF Pro 字體下包含了接近 20 種字重，直接讓設計師體會英文排版的複雜性。
除了官方提供給我們的字體以外，系統還有內置一些其它的英文字體可以供我們使用，在一些特殊的標題或者數字中使用。具體的我就不羅列出來了，大家可以參考下方的連結：
iOS 所有的系統字體列表：https://blog.csdn.net/appleLg/article/details/84140924
文字設置
2. Android 文字規範
可用字體
Android 系統中，Google 為 Material Design 系統指定的字體，中文是思源黑體，英文是 Roboto。相對於 iOS 來說，MD 的字體使用上比較簡單，沒有那麼多系列要選。
但是，安卓與 iOS 不同的是，不同手機廠商會對系統進行深度定製，使用自己的設計語言，所以自然會更換掉機器默認的用字。我們無法為每個系統都開一個新的設計稿，所以通常在安卓系統的設計中，只要使用思源黑體和 Roboto 即可。
文字設置
3. 系統規範與應用
可能有些同學看了上面的列表和參數，就認為有關字體設置的難題都解開了……哪有那麼容易。
iOS、Android、Windows 等系統的設計語言，都是基於英語環境下誕生的，給出的文字設置也是基於英文的參數。這種情況導致，這些設置不能無差別的應用到我們設計的介面中去，會為我們的設計帶來非常多不合理的地方和限制。
例如，官方規範中的字間距，在不同尺寸下有不同的數值，這在中文中是完全不需要，且英文適用的閱讀文本字號，比中文更小等。
所以，系統的規範只能作為一種參考，而不能作為我們直接套用的來源。合理的設計源自合理的思考，所以，我們會在下一部分開始講解文字在設計過程中的具體設置。
文字的應用實例
既然前面說了，官方的文字只能作為參考，所以這一部分，就要從思路開始，詳解我們設計過程中如何一步步完成文字的應用。
1. 文字的角色
在 UI 中應用文字，有一個非常重要的概念，就是 —— 文字的角色。這個詞聽起來很抽象，但並不難理解，比如下圖京東的購物信息：
包含的文字角色有商品標題、價格、原價、商品介紹、優惠信息、新品提示、標籤提示等，它們的樣式各不相同，不僅豐富了頁面的視覺體驗，也便於用戶理解內容。
文字的角色是決定它們樣式的關鍵因素。在我們用過的 Word 或 PPT 中，都有提供一個樣式選擇的列表，它們就是文字角色最基本的體現，比如標題、二級標題、三級標題、正文、注釋等等。
不同的角色，它們在畫面中的定位就不一樣，有各自的作用，所以我們必須通過不同樣式體現。
而角色中還包含一種內建的邏輯，即 「權重」 的等級，大標題、價格就像主角一樣，需要重點給特寫，而注釋類文字則是龍套無足輕重。
2. 字號、字重、字色
接下來，我們就講講文字角色差異如何來表現。主要涉及三個最基本的文字屬性，那就是字號、字重、字色。
先說權重，無論在中英文排版中，文字角色的等級越高，那麼它們的字號也就越大。
但不同的是，在字重上，英文的排版由於 「正負形」 概念影響，可能字號越大，則字重越小，即使標題使用 Light 這種低字重也不影響我們的閱讀體驗，而中文則不行。
中文中，字號和字重都和文字的權重成正比，顏色的強弱也會和等級成正比，如下圖所示。
當然，一個應用中包含的文字角色數以百計，我們不可能劃分出幾百個等級出來，通常只會定義出10個以內，並將不同的角色對應分配進去。
而在差異的表現上，我們主要會使用色彩作為區分方法，即使是同一等級中，也有一些文字作用、權重不同於另一些文字，所以它們就會用更易於識別的顏色，比如可點擊文字、用戶名、價格等。
雖然要考慮的東西看似很多，但在 UI 這些年的發展中，文字的這三樣設置已經逐漸形成了固定、可用、高效的規律了，可以有效總結出在三個設置對應的參數和準則，下面我們分別進行說明。
字號應用
在字號上，字體有最小的顯示極限，10pt 是不把手機懟臉上可以接受的最小字號，而最大字號通常就以蘋果的標題欄大標題字號 34pt 為準。只有當介面設計一些類似倒計時、計數等特殊需求的時候，才會使用比這更大的字號。
如果再進一步拆分，那麼我們可以將字號這麼進行分配：
- 標題：16-34
- 正文：14-16
- 注釋：10-12
字重應用
字重在中文的使用上，和字號成正比關係，但這並不是絕對的，字重核心且唯一的作用就是用來傳遞文字的權重，設計師會為重要的文字加重，為沒有什麼觀看必要的文字減重，但不會僅僅為了美觀隨意更改字重。
並且，在中文環境的使用中，Light 字重是我們正常閱讀範圍內最輕的字重，Thin （纖細）、 Ultralight（極細） iOS10 以後已經基本不會出現在正常的設計稿中。
所以簡單概括起來，文字類的字重可以這麼分配：
- 標題：Meduim、Semibold
- 正文：Regular、Meduim
- 注釋：Regular、Light
字色應用
正常來說，配色應該是隨設計風格來決定的，無法被具體規定。但是，色彩除了視覺特徵以外，也有一定的功能特性，即滿足文字最基本的 「清晰可見」 要求。
字號的影響主要體現在文字與背景環境的結合上，如果字色無法將文字信息從環境中凸顯出來，那麼它的設置就是不合格的，比如下面這樣的情況：
面向所有色彩的情況先不談，先從白和黑兩種背景色系開始講起。在調色板中，我們都可以將色彩數值模式調節成 HSB，而 B 值（灰度）就是我們來控制字色的關鍵屬性。
在 HS 值為 0 的時候，B 值越高顏色越亮，100 為純白，0 為純黑。在不同背景下它們的顯示效果。
所以，在面向淺色和深色背景中，我們可以將 B 值控制在以下範圍內：
白色背景
- 標題：0-20
- 正文：20-50
- 注釋：60-80
深色背景
- 標題：100-90
- 正文：90-70
- 注釋：70-30
以上的內容可以整理成以下的表格，每當我們設置文字屬性的時候，就可以進行對照。
3. 文本框設置
接下來，就該講講有關文字的排版操作了。在設計介面的過程中，我們通常會使用定寬模式進行排版，也就是輸入文字前像置入矩形元素一樣拖動一個文本區域出來。
通常，文本框的高度由支持多少行文字決定，比如我們設置一個支持兩行文字的標題，每行高25，那麼文本框的高就為 25*2 = 50，而寬度則由設計的排版需要決定。
並且，當我們使用文本框以後，那麼當文字與其它元素計算間距與對齊時，是以文本框的邊緣為標準，而不是使用文字的圖形邊緣。
這麼做雖然不符合設計師的第一直覺，但實際上這麼排列的文字即使沒有文本區域的影響，也需要適當下移才能帶給我們更好的視覺體驗，所以絕大多數主流應用也都遵循這個規則而不是使用特殊的布局技巧強行對齊。大家可以自己打開手機里的應用看看……
接下來，我們要說說文本區域內的對齊。無論我們使用左或右對齊，文本會在每行末尾上會因為空間不足換行，導致其中一側的排列參差不齊，這是一個正常的現象，不要刻意製造兩端對齊的文本，這會導致不同行的字間距呈現不規則的變化，降低閱讀體驗。
最後，就是段間距的真正使用方法了。相信很多人在打字的時候是有這樣的習慣的，當在輸入區域換段以後，會覺得段落的間距不足，然後就再打一個回車增加段間距。這是一種低級錯誤，一定要牢記段落之間的區分，要由 「段間距」 這個屬性設置，並且基於親密性原則，段間距不能大於行高。例如下圖右圖中行高24，段間距為8。
4. 操作實例
上面密集的拋出一系列的知識點，硬記肯定是記不住的！所以，我們需要用一個具體的設計案例，講解這些知識點是如何使用的（重點來了的意思……）。
這次演示用我之前關於 Mars 的設計頁面案例來進行，效果如下：
步驟1：
首先在原型階段（開始設置細節前），將所有文字內容填充到畫布中去。這麼做的目的是在調節細節前能對整體有一個宏觀的認識，否則我們無法對文字的角色作出定義。
步驟2：
開始對頁面的角色權重和定位做出梳理，構建文字的層級關係，例如下方的列表。這麼看做起來是挺麻煩的，但如果對文字本身權重的考慮已經適應以後，是不需要再額外記錄的，直接上手即可。
- 大標題：商家名
- 次標題：模塊名稱
- 正文：主介紹文字
- 次文本：簡介、價格
- 注釋：演出時間、地址、電話
步驟3：
有了對應角色的定義以後，就可以開始下一步，為它們分配字重、字號和基礎字色了。大標題使用 18pt 的中粗體，次標題使用 16pt 的中粗體，正文使用 14pt 的常規體，次文本使用 12pt 常規體，注釋也使用 12pt 的常規題。然後為他們分別分配 B 值為 10、10、40、40、60 的灰度，這樣字體就具備了初級的層次感。
步驟4：
只依靠灰度值是不足以滿足真實介面設計需要的，所以這個過程中，我們要對一些比較特殊的文字類型使用一些其它色相進行突出。例如標題下方的小字用赭石色，地址和電話這些可以點擊的文字使用主色綠色（根據其它頁面設計用過的色彩，因地制宜了），進一步豐富了文字的展示樣式。
步驟5：
到這裡，當然還沒結束，前面花了大篇幅講的文本區域與行高，這時候就要隆重登場了！故意留到後面再講，是因為對於新手來說，先做樣式再排版會比較友好一點，等到適應以後就不用在意順序了。
文本的設置難題主要來自於行高的制定，我們前面已經說過，最穩妥的做法就是為所有文本設置可以直接支持合理多行顯示的行高。比如簡介和詳細介紹部分的文字，行高明顯需要我們做出調整。簡介使用 20pt 行高，介紹使用 26pt 行高，且因為是多段文字設置段間距為 10pt。
步驟6：
除了這種顯而易見的多行文本以外，再看商家名大標題，實際上這個區域是支持兩行顯示的，雖然我們只做了一行，所以我們也要為它設置對應多行的行高，這樣這個字體無論在任何情況下都可以正常顯示。
所以，我們將所有字號設置了合適的行高，參數如下：
- 字號 12 的行高從 17 改為 20
- 字號 14 的行高從 20 改成 24
- 字號 16 的行高從 20 改成 26
並將文本區域設置成實際文字的寬度，再根據親密性原則對文字進行合適的間距調整，就可以完成最終的效果了。
文組的開發與標註
是的，沒錯，文章到這裡還沒結束！光了解怎麼把圖做出來是不夠的，設計的任務，還要想辦法合理過度到開發階段，而在前端實現我們設計稿的過程中，最讓人頭疼的問題絕對不是動效，而是字體設置的差異，導致細節上的崩壞。
所以最後，我們要站在實際項目的角度上，來有哪些是設計師需要關注的事情。
1. 文字與代碼的實現
前端布局邏輯
我們先從前端程式設計師完成介面樣式的開發邏輯講起，很多人以為了解技術，是要我們自己學代碼，實際了解技術是明白功能和結果實現的過程，而不是具體操作。
在各種代碼類型中，我們會將實現頁面視覺效果的過程稱為 —— 介面布局，布局是個動詞。雖然每一個系統，不同的代碼版本，都有各自的布局特性，但大體上它們的實現邏輯是一致的。
介面布局的實現過程，就像是一個堆積木的過程，每一個積木，就是一個矩形區域，矩形區域內可以容納圖形、矢量文件、視頻動畫、文本內容等等。程式設計師通過一定的方式，將矩形區域置入頁面中進行排列和定位，再在其中添加對應的視覺內容，實現最終用戶可見的樣式。
比如下圖是 DW 中前端布局效果的預覽，線框的矩形就是一個 「積木」。
矩形區域在一定程度上可以等同於前文所說的文本區域，除設置長寬尺寸以外，更重要的事情就是可以用來定義它的坐標和位置。
比如上面案例中，在一個組件的區域內添加一行文本，那麼定位過程就是將其設置成距上方圖片 10 即可。
行高的應用差異
行高始終是文字布局上最頭痛的問題，為什麼，看看下面的內容就知道了。
前文說過，在 Sketch 等設計軟體中，只給我們提供了行高這個屬性來控制行間距。但是，iOS、 Android 都有提供過 LineSpacing （行間距），而很多設計師在標註設計稿的過程中也會使用標註間距的形式。
雖然 iOS 使用行間距可以實現，但是實現的效果和設計稿是有出入的。因為設計稿中我們只能使用行高，所以在一個文本區域中，它的上下兩側都有行高增加的空白區域，但是實現過程裡面沒有這一截間距，導致實際文本區域和上方元素的距離效果有偏差。
並且，還有一個常見的問題，就是 iOS 在默認狀態下，行高是和字號相同的，但是安卓的行高如 Skecth 一樣會大於字號。所以經常會導致沒有定義明確的行高，兩個平台使用同一套設計時實現的效果不一致。
前面提到，多行文本勢必要使用大於字號的行高，比如一個字號為 12pt 的文本區域，行高為 20pt，那麼它的頂部就有 4pt 的空白，我們需要將它上移 4pt，才能保證文字邊緣和其它元素的邊界是持平的。
這意味著，在開發中，程式設計師還需要在設置屬性的過程里注意高度距離的實際差異，而這種左右高度不一致的做法還會直接導致布局過程變得更繁瑣，具體原因就不細說了，只需知道真實項目的情況會遠比現在複雜，且布局也會更麻煩即可。
可能還有一些同學會說，如果多行文本行高需要設置，那麼我將只有單行的文本設置成行高字號相同可不可以？答案依舊是否定的，這就要在下一個環節中說明了。
文字樣式的復用
要在介面中實現字體的效果，就要用代碼把它的屬性和值都對應碼出來。雖然這個過程很簡單也很容易，但在整個應用中，出現的文本數量沒有一千也有八百，難道我們要挨個設置文本樣式？
顯然不是。
程式設計師應該屬於最討厭重複造輪子的群體了，所以自然會用別的方式來實現。通所有的程序語言都會提供文字復用的功能。比如在 CSS 中，可以通過 Class（類）的定義實現樣式的復用。
例如，命名了類1為 「TitleName」, 類2為 「PriceAll」, 它們分別包含了不同的文字屬性和樣式，當我們需要使用類1的時候，只要輸入 「TitleName」 這個名字，類2則輸入 「 PriceAll 」 即可，可以省去成千上萬行代碼。
所以，當我們在做設計規範時，為什麼會有文字的部分，原因除了設計統一性的要求以外，還有就是為了方便程式設計師可以提前把字體的樣式定義好，提升整個項目介面布局的效率。
這裡要注意的就是，任何一個文本樣式，只要定義過，它的所有屬性和值就是絕對的，如果要調整其中任意的一個參數，那麼對於程序而言，它就是一個新的樣式。
所以回到前面所說的單行文本和多行文本的行高問題，如果在其它屬性相同的狀況下，設置了兩種行高，那麼實際就變成了兩個文字樣式，會讓開發過程變得更繁瑣。
所以，儘可能保證文字樣式的精簡，是對設計過程中對文字設置的基本要求。
2. 設計規範中的文字
很多人以為文字設計規範就是把用過的文字列一些出來，沒啥難度。這也是一個誤區，想要讓整個開發過程順利，不在文字實現問題上栽跟頭，那麼設計規範中文字的規範制定就至關重要。
從文章最開始，就說過，多行文字下，行高勢必要進行調整，於是就和默認狀態下有差異，而我們在設計過程中，有很多文字即可能出現單行也可能出現多行，比如下面的案例。左側是只有一行的狀態，右側是兩行的狀態，於是行高上就發生了變化。
所以，為了解決後面很多不必要的麻煩，我們儘可能在制定設計中的文字規範時，就將文字的行高設置成多行顯示高度下的數值，再以此進行排版。這樣，就可以解決非常多不必要的問題。
所以，細心的同學應該發現了上面演示的案例中，我用的文本框高度實際上都比正常行高再多出一點。
為了保證我們設計過程中的統一性，同時要將應用過的文字樣式通過軟體功能進行整理。比如下圖是 Sketch 中的字體樣式庫。
在項目開始設計的時候，隨著主要頁面樣式的確認，我們就要著手開始規範字體的使用，將這些樣式添加到軟體的字體庫中。
整理字體樣式的過程，一定要為樣式進行合理命名，絕對不能用一些完全不著調或者沒意義的字符，比如 A1、A2、C1、C2 之類的。我們要儘可能根據心裡所想的角色名來命名文字樣式，這樣在添加文字的時候我們可以通過標題來快速識別。
還有，我會習慣於將樣式建立排序，根據權重的高低用數字序號來進行排列，這樣在高頻率和強度的使用下，可以形成肌肉記憶，而不是每次要調用樣式的時候我都要查找半天（實際項目中樣式數量會遠不止那麼一點）。
只要頁面的字體樣式被整理出來，那麼後續的設計中，我們就要儘可能的調用這些樣式來設計和排版，只有在某些新的場景下，已有的樣式實在不足以支撐介面，才創建新的樣式出來。
換句話說，就是要保證我們設計稿中每一個出現的文字它們都屬於已經制定好的某個樣式，並且它們的行高在多行和單行狀態下都能一致。這樣，我們只需要將設計稿上傳到類似藍湖的工具中，程式設計師就可以順滑高效的將文字效果正確的實現出來。
結尾
以上，就是我暫時能想到的關於一個專業的 UI 設計師，在設計過程中對文字進行排版和設置的全部內容了。再細節的東西實在肝不動了，因為篇幅很長，而且幾經修訂，細節處可能會有錯誤，如果大家發現了，可以在評論區留言。
當然，想要脫離圖文，通過更好的形式了解和學習這些知識點和實際應用方法，就需要通過視頻教學的形式了，歡迎來關注我的 UI 基礎課程，學習更全面有用的乾貨