今天的分享則從排版中最基礎的元素，文字講起。

作品集中的文字要求

文字是 UI 作品集排版中除作品本身外最重要，且最關鍵的要素，想要了解排版肯定就要先了解文字本身。而文字主要關注的幾個要點：
字體

1. 字號
2. 字重
3. 字距
4. 字色
5. 行高
6. 區(qū)域

這些要素在過去的基礎 UI 規(guī)范中講了不少，但是依舊很多同學沒有真正去理解它們的細節(jié)和底層邏輯，導致在制作作品集的場景中就忘得一干二凈。所以，下面還要再根據作品集的維度對它們進行解析，并列舉那些非常常見的誤區(qū)。

一、文字字體

字體就是文字的樣式、風格類型，目前市面上有無數可供我們使用的字體。但新手會直面兩個阻力，首先得找到這個字體的文件，并安裝到你的電腦中。接著要擔心這些找到的字體能不能商用，會不會有侵權風險。

第一個問題其實很好解決，因為對字體的選用等等會說，這些字體很容易就可以搜到下載地址。而第二個問題也不用擔心，因為作品集并不用于售賣，僅作為個人"學習""參考"使用就不會有觸發(fā)版權問題。

那下面，我們就要討論，作品集中用什么字體合適呢？

只有一個建議 —— 標準黑體。

這個黑體不是指系統(tǒng)自帶的 "黑體簡"，而是一個風格大類，這就要講到對字體的分類上，我們基本可以把主要字體分成三個大類，黑體（非襯線）、襯線體、藝術體。

黑體就是我們日?？吹阶瞵F代、最平常、最嚴肅、最工整的字體類型，在筆畫的處理上沒有太多修飾和彎彎繞繞的元素。而襯線體是在保留一定書寫風格下建立的類型，所以很注重 "落" 和 "收" 的筆觸反應。而藝術體則是不遵循傳統(tǒng)文字樣式設計的創(chuàng)新的、個性化的設計類型，五花八門。

以 UI 為主的互聯(lián)網行業(yè)更現代、科技、都市、商業(yè)化，要求字體也要符合這種特征，黑體就是最匹配這個行業(yè)的字體類型。所以我們去各大科技企業(yè)官網和視覺介紹設計中，都以黑體為準展開后續(xù)的排版。

設計感往往來自于"排版"的思路和技巧，但很多新手顯然把找個酷炫的字體當成是增加設計感的思路，結果注定是不理想的。有大量作品集都處于濫用字體的問題，字體用的越花，看起來也就越輕挑不專業(yè)。

不是說襯線和藝術體一定不能用，而是應用的水準要求是很高的，如果駕馭不了，就不要選擇。

再者中文和英文都遵循這種分類方式，在中英文的混排上，還有非常重要的細節(jié)，就是所有中文字體都會自帶配套的英文字符，比如你選了 "蘋方簡" 也可以輸入 ABCD，但是如果你選了英文字體如 "Arial"，則無法正常輸出中文。

雖然有一些設計軟件即使選擇了英文字體也能在文本框輸入中文，那是因為它們做了缺失字體的匹配，自動將缺失的中文字體套用系統(tǒng)里有的其它字體，所以一個文本框內應用了兩種字體。

這是要避免的情況，因為不同字體對筆畫、基線、中宮定義的不同，導致放在同一行中會產生明顯的割裂感。中文字體之所以帶上英文字符是因為混排需求不可避免，要單獨設計一套適合這套中文風格的英文字體，當中英文進行同段混排時，就不要單獨使用別的英文字體。

建議使用的字體：

二、文字字號

字號同樣是應用的重災區(qū)，明明是學設計中第一天學習軟件使用就要學的基礎，但在作品集中依舊無法做到對字號的合理控制。

字號設置中最基本也最樸素的要求 —— 看得見字。

就是當觀看者打開作品集以后，里面文字的尺寸能滿足正常閱讀的需要。而不是過大或者過小。通常過大的問題比較少，主要的問題全在過小上，無法正常的閱讀，即使很多看起來排版做的還不錯的作品集，也表現出一副 "我雖然放了很多字，但是并沒有打算讓你讀" 的架勢。

字號的設置主要障礙在于，作品集的畫布應用和真實項目的規(guī)范不同，并且不同人做的作品集畫布尺寸不一樣，就更不可能統(tǒng)一出一套字號的規(guī)范出來。比如我常規(guī)建議使用 1280 或 1440 的，但是有的人就愛用 1920 或 2560 設計，那么怎么確定合理的字號呢？

我在這里統(tǒng)一建議就是，不管你原有畫布創(chuàng)建成多大，在旁邊打開個優(yōu)設等網站的詳情頁，把你的畫布縮放到和它們相同的尺寸（展示內容寬一般 800-1000px ），然后在畫布中復制一些段落進去并設置字號，調出一個你在這個狀態(tài)能接受的最小字號，那么這個數值就是你做作品集時正文字號應用的底線。

再解釋一遍原因，就是雖然你設計時可能用 100% 畫布，但我們作為面試官看作品集都是窗口化的查看，窗口的尺寸通常和設計網站的詳情區(qū)域差不多。

標題和大文本的設置是美觀度的問題，而最小字號的設置是物理性的限制，先確保字能閱讀，再談版式美不美觀。

如果有同學問，我的分析內容像上面那么多，用這個字號放不下，是不是就要減少？

當然不可能妥協(xié)，分析內容如果連最小字號都放不完，那只有一個解釋 —— 文案過量。不要產生文字越多作品集越厲害的錯誤認知，閱讀性的體驗高于寫過量的且沒人愿意看的文案信息。

三、文字字重

字重作為文字筆畫的粗細，在版式中的主要作用即 —— 文字對比。

中文的字重應用其實是非常簡單的，因為字重數量很少，通常就 3-5 種，而細體、極細這些字重可以直接排除，因為它們的閱讀性過差，作品集的場景并不適合它們。

而字重應用中，實際上的問題只有一個 —— 什么時候用粗字重？

最偷懶的認識，就是在大標題中統(tǒng)一使用 Blod 或以上的字重，其它一般文本只用默認的。因為大標題需要比較塊狀緊湊的填充感（正形大于副形）來填充畫面的空間，而低字重會讓標題顯得中氣不足，呈現出一股 "弱者的氣息"。

比如看下面對比：

這點中英文同理，越是需要支撐的標題需要的字重就越大，而 iOS 官方字體 "蘋方" 因為最大字重不足，所以在作品集建議中，我會首先排除該字體。

四、文字字距

字距就是文字間距，這個參數可以說在正常界面設計中是完全用不上的參數（中文不需要），但是在平面排版中是必用項。

主要的使用場景標題的應用，因為有的字體默認的字間距較大，當我們使用較大的字號時，這種縫隙的感覺就變得明顯起來，所以要緊跟前面說到的，強化填充感，就需要減少字間距來實現。

必須要強調，并不是所有字體都要改，尤其是英文字體，部分面向標題的字體自帶極小的字距，到底應該怎么設置就需要靠大家自己的判斷。

五、文字字色

字色就是文字顏色了，這個其實也是最不想講的一個屬性，想必你們也知道講了就證明問題也非常嚴重。字色和字號的要求一樣，那就是 —— 看得見字。

字色之所以出問題，是因為很多同學對文字的認識僅僅作為界面中的某個視覺元素，用于和其它元素搭配和組合用的，所以顏色要 "融入環(huán)境"，而從來不把它們當成信息對待。

于是文字在畫面中的可視性就大幅度降低了，因為顏色無法和背景區(qū)分：

解決這個問題一直都很簡單，要不然加深背景色，要不然加深文字色，我們自己用肉眼就能直觀判斷它們的可讀性，而不需要借助一些灰度計算公式。

文字背景對比度夠大，才能讓文字看起來干凈利索，而不是讓整個畫面都臟臟的。

六、文字行高

行高是文字單行的高度，在平面排版中，文字行高的應用確實會和界面行高的應用有差異，這個差異通常我只分成兩類，單行文本和多行文本。

單行文本主要指的就是標題，常規(guī)的標題只有一行，不需要換行，行高對于這段文字而言是多余的，并且應為標題往往字號都比較大，導致行高也很大，對于實際排版而言很不方便。

所以，建議將單行的文本行高設置成和字號同值。如果使用的字體不處于文本區(qū)域水平居中的位置，那么就手動調節(jié)幾像素行高，直至文本處于區(qū)域居中為止。

而在封面或一些組合型標題中，雖然看起來是多行，但不是用于段落閱讀的，所以這種性質的標題每行可以獨立成一個圖層，而不是使用一個文本圖層來控制，所以本質上它們也是單行文本。

最后，就是多行文本的行高設置了。行高的設置想深入研究排版有很多細節(jié)，但顯然我們不需要再這里展開，大家只要記住一個樸素的觀點，作品集中用于閱讀的多行文本，使用字號 1.6-1.8 倍的行高即可（不等同 UI 界面）。

比如 16 的字號使用 28 的行高，24 的字號使用 40 的行高，保證換行閱讀的舒適性。

七、文字區(qū)域

文字區(qū)域就是設計軟件中創(chuàng)建的文本框區(qū)域，主要用于多行文本的顯示。前面在行高部分雖然也說了多行的參數設置，但并沒有涉及文字區(qū)域的講解。

多行文本在一個平面的畫布中，就是一個矩形化的塊狀圖形，是專業(yè)排版中幾何分布的組成部分之一。例如類似下圖的這種版式的 "原型"，就會清晰的劃分出文本的區(qū)塊，用于完成整體的排版。

在作品集設計中同理，在需要文本輸出的頁面中，大量解釋性文本的置入是需要先考慮區(qū)域，然后再進行內容填充的。這涉及到柵格和版式相關的原理，在之后再做討論。

而我們在這里首先要討論的，就是在解釋性文本區(qū)域中，文本的空間利用是要結合版式設置的，而不是僅僅作為一個放置你寫好的文案的容器。雖然文案內容必然是重要的，但所有專業(yè)的平面必然會根據版式需要對內容做一定的調整，例如刪減或增加文案，段落拆分或合并。

同時，段落型文本除了行高的差異，還有個非常重要的操作 —— 斷行。即一行的文本的內容不能太長，單行超過一定的長度就毫無閱讀感可言。所以比一般書籍大的16開雜志很喜歡用分欄型的文本排版，就是因為頁面寬度太大，文本區(qū)域的寬度沒法兼容。

那么具體應該做多大的文本區(qū)域呢？這沒辦法給出具體的數值，因為不同人設計的作品集尺寸不一樣。只能給出大致的建議，那就是解釋型文本的寬度不要超過內容區(qū)域的 50%，垂直高度上，不要超過單屏內容區(qū)域的 60%。

八、作品集字體整理

前面講了不少字體相關的屬性和參數應用思路，而這些東西又是特別基礎且可以總結出范圍的東西，既然想要在整體應用中保證不出錯和效率，那就需要對它們進行 —— 標準化。

像整理 UI 項目字體規(guī)范一樣，也整理作品集中文字應用的規(guī)范，來統(tǒng)一字體的規(guī)格和樣式。要統(tǒng)一樣式就要確定作品集中文字的 "角色"，比如下面這些類型：

1. 大標題
2. 頁面標題
3. 中標題
4. 小標題
5. 一般正文
6. 小正文
7. 注釋文字
8. 英文大標題
9. 英文小標題

上面只是常見類型的建議，不代表你的作品集里一定要這么用，具體應該整理出哪些文本類型，肯定是需要你在完成一些基礎作品集頁面設計后總結出來。比如特殊的說明文字、數字應用、氛圍型裝飾英文之類的。

要將這些字體的樣式整理出來，然后在軟件中創(chuàng)建成 "文本樣式"，在后面的設計過程進行復用。

然后，我們就可以用這些字體進行作品集的排版制作了。

文字本身參數的應用上沒有太多訣竅，掌握完上面那些基礎的規(guī)律即可。滿足這個前提條件，就可以斬釘截鐵的告訴你們：

"作品集做的難看就一定不是文字樣式的鍋！"

不要因為自己版式能力的匱乏而緊盯著特定的文本段落或標題可勁兒薅，你是薅不出結果，薅不出希望的。多在網格系統(tǒng)、空間、色彩、作品中花功夫，才能真正提升作品集的質量。

也多花時間去看優(yōu)秀的作品集和外網如 behance 等地方的作品是怎么包裝的，越高級的設計文字就越樸素，越初級越沒信心的作者文字就越花哨復雜。

結尾

想要提升作品集的排版能力，對字體的理解就是一切的開端，理解得越細、越深越好，需要大家盡可能多看一些字體相關的書籍和視頻積累，例如小林章的《西文字體設計》，靳埭強的《字體設計》等等。

作者：超人的電話亭