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

作品集中的文字要求

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

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

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

一、文字字體

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

第一個問題其實(shí)很好解決，因?yàn)閷ψ煮w的選用等等會說，這些字體很容易就可以搜到下載地址。而第二個問題也不用擔(dān)心，因?yàn)樽髌芳⒉挥糜谑圪u，僅作為個人"學(xué)習(xí)""參考"使用就不會有觸發(fā)版權(quán)問題。

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

只有一個建議 —— 標(biāo)準(zhǔn)黑體。

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

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

以 UI 為主的互聯(lián)網(wǎng)行業(yè)更現(xiàn)代、科技、都市、商業(yè)化，要求字體也要符合這種特征，黑體就是最匹配這個行業(yè)的字體類型。所以我們?nèi)ジ鞔罂萍计髽I(yè)官網(wǎng)和視覺介紹設(shè)計中，都以黑體為準(zhǔn)展開后續(xù)的排版。

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

不是說襯線和藝術(shù)體一定不能用，而是應(yīng)用的水準(zhǔn)要求是很高的，如果駕馭不了，就不要選擇。

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

雖然有一些設(shè)計軟件即使選擇了英文字體也能在文本框輸入中文，那是因?yàn)樗鼈冏隽巳笔ё煮w的匹配，自動將缺失的中文字體套用系統(tǒng)里有的其它字體，所以一個文本框內(nèi)應(yīng)用了兩種字體。

這是要避免的情況，因?yàn)椴煌煮w對筆畫、基線、中宮定義的不同，導(dǎo)致放在同一行中會產(chǎn)生明顯的割裂感。中文字體之所以帶上英文字符是因?yàn)榛炫判枨蟛豢杀苊?，要單?dú)設(shè)計一套適合這套中文風(fēng)格的英文字體，當(dāng)中英文進(jìn)行同段混排時，就不要單獨(dú)使用別的英文字體。

建議使用的字體：

二、文字字號

字號同樣是應(yīng)用的重災(zāi)區(qū)，明明是學(xué)設(shè)計中第一天學(xué)習(xí)軟件使用就要學(xué)的基礎(chǔ)，但在作品集中依舊無法做到對字號的合理控制。

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

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

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

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

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

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

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

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

三、文字字重

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

中文的字重應(yīng)用其實(shí)是非常簡單的，因?yàn)樽种財?shù)量很少，通常就 3-5 種，而細(xì)體、極細(xì)這些字重可以直接排除，因?yàn)樗鼈兊拈喿x性過差，作品集的場景并不適合它們。

而字重應(yīng)用中，實(shí)際上的問題只有一個 —— 什么時候用粗字重？

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

比如看下面對比：

這點(diǎn)中英文同理，越是需要支撐的標(biāo)題需要的字重就越大，而 iOS 官方字體 "蘋方" 因?yàn)樽畲笞种夭蛔?，所以在作品集建議中，我會首先排除該字體。

四、文字字距

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

主要的使用場景標(biāo)題的應(yīng)用，因?yàn)橛械淖煮w默認(rèn)的字間距較大，當(dāng)我們使用較大的字號時，這種縫隙的感覺就變得明顯起來，所以要緊跟前面說到的，強(qiáng)化填充感，就需要減少字間距來實(shí)現(xiàn)。

必須要強(qiáng)調(diào)，并不是所有字體都要改，尤其是英文字體，部分面向標(biāo)題的字體自帶極小的字距，到底應(yīng)該怎么設(shè)置就需要靠大家自己的判斷。

五、文字字色

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

字色之所以出問題，是因?yàn)楹芏嗤瑢W(xué)對文字的認(rèn)識僅僅作為界面中的某個視覺元素，用于和其它元素搭配和組合用的，所以顏色要 "融入環(huán)境"，而從來不把它們當(dāng)成信息對待。

于是文字在畫面中的可視性就大幅度降低了，因?yàn)轭伾珶o法和背景區(qū)分：

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

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

六、文字行高

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

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

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

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

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

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

七、文字區(qū)域

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

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

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

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

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

那么具體應(yīng)該做多大的文本區(qū)域呢？這沒辦法給出具體的數(shù)值，因?yàn)椴煌嗽O(shè)計的作品集尺寸不一樣。只能給出大致的建議，那就是解釋型文本的寬度不要超過內(nèi)容區(qū)域的 50%，垂直高度上，不要超過單屏內(nèi)容區(qū)域的 60%。

八、作品集字體整理

前面講了不少字體相關(guān)的屬性和參數(shù)應(yīng)用思路，而這些東西又是特別基礎(chǔ)且可以總結(jié)出范圍的東西，既然想要在整體應(yīng)用中保證不出錯和效率，那就需要對它們進(jìn)行 —— 標(biāo)準(zhǔn)化。

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

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

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

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

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

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

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

不要因?yàn)樽约喊媸侥芰Φ膮T乏而緊盯著特定的文本段落或標(biāo)題可勁兒薅，你是薅不出結(jié)果，薅不出希望的。多在網(wǎng)格系統(tǒng)、空間、色彩、作品中花功夫，才能真正提升作品集的質(zhì)量。

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

結(jié)尾

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

作者：超人的電話亭