之前公開課很多同學(xué)糾結(jié)的一個(gè)問題——如何做好排版。這是一兩句話講不完的大問題，需要一整個(gè)系列的分享來實(shí)現(xiàn)。

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

作品集中的文字要求

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

1. 字體

2. 字號(hào)

3. 字重

4. 字距

5. 字色

6. 行高

7. 區(qū)域

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

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

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

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

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

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

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

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

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

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

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

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

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

建議使用的字體：

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

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

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

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

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

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

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

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

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

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

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

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

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

比如看下面對(duì)比：

這點(diǎn)中英文同理，越是需要支撐的標(biāo)題需要的字重就越大，而 iOS 官方字體 “蘋方” 因?yàn)樽畲笞种夭蛔悖栽谧髌芳ㄗh中，我會(huì)首先排除該字體。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

前面講了不少字體相關(guān)的屬性和參數(shù)應(yīng)用思路，而這些東西又是特別基礎(chǔ)且可以總結(jié)出范圍的東西，既然想要在整體應(yīng)用中保證不出錯(cuò)和效率，那就需要對(duì)它們進(jìn)行 —— 標(biāo)準(zhǔn)化。像整理 UI 項(xiàng)目字體規(guī)范一樣，也整理作品集中文字應(yīng)用的規(guī)范，來統(tǒng)一字體的規(guī)格和樣式。要統(tǒng)一樣式就要確定作品集中文字的 “角色”，比如下面這些類型：

大標(biāo)題

頁(yè)面標(biāo)題

中標(biāo)題

小標(biāo)題

一般正文

小正文

注釋文字

英文大標(biāo)題

英文小標(biāo)題

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

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

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

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

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

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

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

結(jié)尾

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

關(guān)于版式的設(shè)計(jì)方法我會(huì)自后面開一個(gè)系列的干貨分享出來，周五也會(huì)有一節(jié)直播課專門來分享和作品版式有關(guān)的處理方式，感興趣的同學(xué)記得B站預(yù)約。

我們下篇再賤~

更多更系統(tǒng)的B端系統(tǒng)化知識(shí)課程都在我的付費(fèi)正課中了！B端產(chǎn)品設(shè)計(jì)課程第八期開啟正式招生～

課程介紹點(diǎn)擊鏈接查看：

課前預(yù)習(xí)和咨詢服務(wù)都準(zhǔn)備好了，還不快來～