不得不說(shuō)，現(xiàn)今真的是一個(gè)看臉的社會(huì)，對(duì)于美好事物不斷追求的人們看到漂亮的“臉蛋”總是莫名喜歡，從而可以得到更多大眾關(guān)注，新媒體人做文字排版也是不例外的。文章的“臉蛋”除了文字功底優(yōu)質(zhì)內(nèi)容外，臉面當(dāng)然就是圖文排版。出眾的文筆配合上文章排版，除了跟讀者共鳴，也能讓讀者感受到美的傳遞，賞心悅目。

說(shuō)起排版，這是個(gè)大學(xué)問(wèn)。頁(yè)面上的每一個(gè)元素都能影響瀏覽，排版設(shè)計(jì)的好壞絕對(duì)很考驗(yàn)一個(gè)人的基本功底。那么什么是好的排版？在我看來(lái)有比較棒的閱讀性的，內(nèi)容在視覺(jué)上是平衡連貫的，并且有整體空間感和美感的就是好排版。所以現(xiàn)在就從文字排版和圖片排版這兩大方面，與大家分享內(nèi)容排版的技巧。

一、文字編排的易讀化

當(dāng)下社會(huì)的快餐文化，直接的使得我們的各種習(xí)慣隨之改變，人們好像越來(lái)越不愿將時(shí)間花在長(zhǎng)時(shí)間閱讀上，用戶習(xí)慣讀圖，那么一定是讀圖比讀字更符合他們自身的使用習(xí)慣，所以不應(yīng)該強(qiáng)行沒(méi)收大家讀圖的權(quán)利，而應(yīng)該想辦法讓文字內(nèi)容更加易讀美觀并脫穎而出（具體可查看馬海祥博客《基于頁(yè)面易讀性的文字編排設(shè)計(jì)要點(diǎn)》的相關(guān)介紹）。

1、字體：創(chuàng)造層次感

創(chuàng)造排版的層次感，讓頁(yè)面結(jié)構(gòu)更加清晰。排版的層次感通常指頁(yè)面中文本排列構(gòu)建出的視覺(jué)層次。平時(shí)我們看過(guò)的書籍，書中的主標(biāo)題看起來(lái)比副標(biāo)題更重要，而主標(biāo)題和副標(biāo)題又明顯比正文部分更顯眼。所以我們?cè)谶M(jìn)行文字排版時(shí)，一般也可以遵循這個(gè)原則。

頁(yè)面中所有字體尺寸應(yīng)該是基于正文字體來(lái)進(jìn)行選擇的，因?yàn)檎氖怯脩粼诿總€(gè)頁(yè)面中閱讀最多的部分。那么，如何基于正文來(lái)選取其他部分字體的大小，下面有一些基本原則。

（1）、正文字體：調(diào)整字體大小，直到感覺(jué)看起來(lái)非常舒服為止。

（2）、標(biāo)題字體：通常將正文字體放大到180%-200%。

（3）、副標(biāo)題字體：通常為正文字體的130%-150%。

2、間距：排版更易讀

通過(guò)調(diào)整行間距和段間距，讓用戶更容易掃讀文字。段間距讓用戶能夠更好地識(shí)別內(nèi)容塊和意群，行間距控制好則可以讓大腦更輕松識(shí)別文字內(nèi)容。

（1）、行間距

行間距沒(méi)有固定的值，通常是根據(jù)字體大小來(lái)定義的。在word里我們常看到雙倍行距、單倍行距和1.5倍行距的選項(xiàng)。網(wǎng)頁(yè)上行距的單位常用em來(lái)表示，不管是中文網(wǎng)站還是英文網(wǎng)站，大家多喜歡用1.5em-1.8em的行距，不超過(guò)2em?？刂圃谡某叽绲?20%-160%，同時(shí)文本字體越小，兩行之間的行距應(yīng)該越大，確保字與行間的呼吸空間。

（2）、段間距

一般而言，段間距等于或大于正文字體行高。比如文章篇幅較短，就不需要很寬的段距，二文章篇幅很長(zhǎng)，特別是那些偏學(xué)術(shù)的比較枯燥的文章，就要多利用段距把握文章的節(jié)奏，給閱讀者喘息和思考的機(jī)會(huì)，且使文章更有層次和可讀性。

3、行長(zhǎng)：劃分閱讀區(qū)

我們隨手拿起一本書或者一份報(bào)紙，數(shù)一數(shù)每行的文字，一般情況下都不會(huì)超過(guò)40個(gè)漢字。這是因?yàn)槿绻啃形淖诌^(guò)長(zhǎng)，讀者會(huì)不停的轉(zhuǎn)動(dòng)脖子，感到疲憊的同時(shí)也會(huì)降低閱讀效率；目光從行尾移至下一行首，也很容易串行，影響讀者瀏覽文章的節(jié)奏。這點(diǎn)同樣適用于網(wǎng)頁(yè)上的文章閱讀。由于顯示器是橫向的，我們更要注意劃分閱讀區(qū)域。

文本寬度控制在450-700px為宜，此范圍內(nèi)參照字號(hào)大?。?/p>

● 英文每行80-100個(gè)字母（空格算一個(gè)字母）為宜；

● 中文每行30-40個(gè)漢字為宜。

4、對(duì)比：提高視覺(jué)性

對(duì)比（contrast）是四項(xiàng)基本設(shè)計(jì)原理之一，在網(wǎng)頁(yè)中對(duì)文字的排版也非常適用。可以將對(duì)比分為三類，主要是標(biāo)題與正文的對(duì)比、文字顏色的對(duì)比，以及文字顏色與背景顏色的對(duì)比。

（1）、標(biāo)題與正文對(duì)比

標(biāo)題使用18號(hào)的微軟雅黑，正文使用12號(hào)的宋體，兩種字體字號(hào)的對(duì)比讓文字內(nèi)容富有層次，很容易吸引讀者眼球（具體可查看馬海祥博客《如何通過(guò)內(nèi)容營(yíng)銷策劃來(lái)吸引消費(fèi)者眼球》的相關(guān)介紹）。

（2）、強(qiáng)調(diào)文本對(duì)比

一部分文字采用了與主要文字不同的樣式，增加視覺(jué)效果，突出展示了段落的重點(diǎn)。一般規(guī)則是，強(qiáng)調(diào)文本不要超過(guò)整個(gè)文本的10%，如果所有都被強(qiáng)調(diào)，那就不是強(qiáng)調(diào)了。當(dāng)然，一次僅僅使用兩種或是三種強(qiáng)調(diào)技巧。換句話說(shuō)，不要同時(shí)使用，顏色，字體改變，大小，下劃線，斜體，黑體。

（3）、文字顏色與背景顏色對(duì)比

正文文本與背景合適的對(duì)比可以提高文字的清晰度，產(chǎn)生強(qiáng)烈的視覺(jué)效果。將文字內(nèi)容清晰襯托出來(lái)，既有豐滿的層次感，同時(shí)有具有很強(qiáng)的視覺(jué)沖擊力。在使用這一原則時(shí)需要注意，必須確保文字是容易看清的，如果文字過(guò)小或過(guò)于纖細(xì)、色彩對(duì)比度不夠，會(huì)適得其反。如果對(duì)色彩的對(duì)比度還不夠熟悉時(shí)，可以通過(guò)顏色對(duì)比檢測(cè)工具（Check My Colours、Colour Contrast Check）檢測(cè)色差和亮度差，確保網(wǎng)頁(yè)設(shè)計(jì)的易讀性（具體可查看馬海祥博客《基于網(wǎng)站色彩設(shè)計(jì)對(duì)用戶體驗(yàn)影響的研究》的相關(guān)介紹）。

二、圖文排版的簡(jiǎn)單化

為了增加閱讀體驗(yàn)，一種友好的圖文排版必不可少。圖文混排的樣式有很多，我們大體可以分為具有設(shè)計(jì)樣式的和簡(jiǎn)單混排的。富有設(shè)計(jì)感的圖文排版較復(fù)雜，需要一定的設(shè)計(jì)功底才能做的好看。因此簡(jiǎn)單好看的圖文排版越來(lái)越受歡迎，處理好圖片和文字的關(guān)系就可以。

1、圖文的組織關(guān)系

①、圖片靠左對(duì)齊

正常情況下，用戶的注意力從左向右（當(dāng)然不否定特例的）。其優(yōu)勢(shì)是可以增加內(nèi)容的識(shí)別度，圖片可以先吸引讀者對(duì)內(nèi)容的注意力。

②、圖片靠右對(duì)齊

如果內(nèi)容比圖片更重要或者內(nèi)容很難用相應(yīng)的圖片進(jìn)行表達(dá)，同時(shí)又想充實(shí)頁(yè)面提高頁(yè)面美觀度的，可以考慮圖片放在右側(cè)。

③、圖片放在上方

一般都是類似瀑布流列表的排版方式。此時(shí)圖片的重要程度比放在左側(cè)還要高的多，基本每條記錄的主要信息都靠配圖來(lái)呈現(xiàn)。

④、圖片放在下方

主要的優(yōu)勢(shì)，可以把文字和圖片的結(jié)合優(yōu)勢(shì)充分發(fā)揮出來(lái)，文字簡(jiǎn)要陳訴，圖片帶你身臨其境，還原真實(shí)情況。

⑤、圖片作為背景

圖片作為背景，可以加強(qiáng)其沉浸感，充分利用圖片喚起讀者的想象，把圖片的誘惑最大化以提高文章整體檔次。

⑥、同時(shí)利用上述幾種方式

有時(shí)候?yàn)榱藴p緩讀者審美疲勞，或者突出某些重點(diǎn)部分。利用不同排列方式的優(yōu)勢(shì)來(lái)最大化達(dá)到傳播目的，但缺點(diǎn)是給人的第一感覺(jué)是“亂”。

2、多圖型簡(jiǎn)單排版

（1）、左右圖文

左右圖文可以選擇，左邊放圖片，右邊放文案；或者右邊放圖片，左邊放文案。但需要注意的是，使用這種排版方法要保證圖片尺寸盡量一致，文案長(zhǎng)度盡量相近，保證它們都是對(duì)稱對(duì)齊的。

（2）、上下圖文

上下圖文和左右圖文差不多，可以上圖片下文案，也可以下圖片上文案。跟左右圖文一樣，要注意盡量保證圖片尺寸和文案長(zhǎng)度的相同。

（3）、上圖下文

在內(nèi)容文字比圖片多很多時(shí)，上圖下文的效果比上文下圖的好，因?yàn)閳D文同時(shí)出現(xiàn)時(shí)，用戶會(huì)先被圖片吸引，如果文字在圖片上方，很容易造成大家忽略跳過(guò)文字的結(jié)果。而大段文字出現(xiàn)在圖片下方，也會(huì)讓人比較有耐心閱讀。

3、單圖型簡(jiǎn)單排版

（1）、高清圖鋪滿

如果是一張高清的圖片，我們可以選擇用它直接鋪滿整個(gè)頁(yè)面，再把文字置于圖片中。當(dāng)圖片構(gòu)圖復(fù)雜或文案顏色與背景顏色相近時(shí)，不能直接將文案置于背景上，否則就會(huì)看不清。

①、給圖片加個(gè)色塊，再把文案放到色塊上面。

②、或者干脆給整個(gè)背景都覆蓋上一個(gè)帶透明度的矩形。

③、如果圖片構(gòu)圖簡(jiǎn)單，你可以直接把文案置于圖片空白處。

（2）、模糊圖縮小

如果所選的這張圖片質(zhì)量不好模糊，可以考慮走氣質(zhì)路線：小圖配上少量文字，再加上留白。但是當(dāng)圖片實(shí)在太小，而文案又實(shí)在過(guò)多時(shí)，此時(shí)這條路不但走不通，還會(huì)顯得單調(diào)呆板。

此時(shí)可以考慮通過(guò)設(shè)計(jì)以增大圖片面積：

①、加個(gè)好看的邊框。

②、插入幾個(gè)形狀，用圖片填充形狀以后，更改形狀的透明度。

三、移動(dòng)端排版的特殊化

排版設(shè)置完全是一個(gè)常規(guī)技能，遵循簡(jiǎn)單的原則能讓文本的可讀性更好。雖然這些規(guī)則相對(duì)簡(jiǎn)單可行，但是并不能覆蓋全部的排版需求，比如在移動(dòng)端閱讀。由于移動(dòng)設(shè)備的逐漸發(fā)展，人們平時(shí)往往使用它的機(jī)會(huì)多于使用電腦，因此在移動(dòng)端的排版上，我們要尤為注意。

1、簡(jiǎn)單突出

從移動(dòng)端有限的屏幕以及頁(yè)面加載速度這兩方面來(lái)考慮，最好的展示效果是簡(jiǎn)單，有一個(gè)核心元素，突出重點(diǎn)為最優(yōu)。以可口可樂(lè)的這個(gè)“我們?cè)谶@ 我們?cè)诤酢睘槔?，相較而言，越簡(jiǎn)單的排版會(huì)越容易引起關(guān)注。這是因?yàn)槲覀兊拇竽X里最初看到這種簡(jiǎn)潔排版，會(huì)立刻出現(xiàn)“嗯 我可以馬上看完不費(fèi)勁”的潛意識(shí)信息而帶著輕松的態(tài)度去閱讀。

2、大小反差

在桌面端我們可能會(huì)采用字號(hào)差異較大的文字組合，移動(dòng)端屏幕較小，容納的文字也較少，同等的字號(hào)差異在小屏幕上的感受會(huì)被放大。原因是我們?cè)谑褂眠@兩種設(shè)備時(shí)的觀看距離不同，桌面端我們的眼睛離屏幕較遠(yuǎn)，而在移動(dòng)端則相反，因此我們應(yīng)該在移動(dòng)端使用較小的字號(hào)反差。

3、顏色反差

移動(dòng)設(shè)備使用環(huán)境復(fù)雜多變而不局限在室內(nèi)，可能在室外，甚至暴露在強(qiáng)烈的陽(yáng)光下，應(yīng)確保文字在背景中不會(huì)識(shí)別困難，即使是色弱者也可以正常閱讀。建議的文字和背景的顏色反差比應(yīng)該高于4.5:1（AA級(jí)），才能確保更多人及環(huán)境都可以輕松閱讀。我們可以借助檢測(cè)工具來(lái)幫助檢測(cè)這個(gè)比值。

4、對(duì)齊

在英文的段落排版中，通常是左側(cè)對(duì)齊，而讓右側(cè)自然形成起伏邊。對(duì)中文排版與閱讀習(xí)慣而言則相反，特別是在移動(dòng)端上閱讀，段落的頭尾對(duì)齊尤其重要。一邊是夾雜了數(shù)字或英文字母字符的情況下，原本中文的整齊排列被打亂了，右側(cè)嚴(yán)重參差不齊不美觀。一邊是微調(diào)文字的間距以補(bǔ)足右邊存大的空白，整潔對(duì)齊。

當(dāng)然，其實(shí)排版的方法有很多，不過(guò)不同人都會(huì)有不一樣的簡(jiǎn)潔，并且現(xiàn)今的傳播媒介都在隨著時(shí)代變化而變化。審美和設(shè)計(jì)方面水平都在提高，不過(guò)最基礎(chǔ)的原則總是不變的，對(duì)于用戶體驗(yàn)來(lái)說(shuō)，那就是內(nèi)容更加易懂，這就是作為文字排版最好的執(zhí)行標(biāo)準(zhǔn)。