說起排版，這是個大學(xué)問,。頁面上的每一個元素都能影響瀏覽,，排版設(shè)計的好壞絕對很考驗一個人的基本功底。那么什么是好的排版,？在小編看來有比較棒的閱讀性的,，內(nèi)容在視覺上是平衡連貫的，并且有整體空間感和美感的就是好排版,。所以現(xiàn)在就從文字排版和圖片排版這兩大方面,，與大家分享內(nèi)容排版的技巧。
當(dāng)下社會的快餐文化,，直接的使得我們的各種習(xí)慣隨之改變,，人們好像越來越不愿將時間花在長時間閱讀上，用戶習(xí)慣讀圖,，那么一定是讀圖比讀字更符合他們自身的使用習(xí)慣,，所以不應(yīng)該強(qiáng)行沒收大家讀圖的權(quán)利，而應(yīng)該想辦法讓文字內(nèi)容更加易讀美觀并脫穎而出,。
創(chuàng)造排版的層次感,，讓頁面結(jié)構(gòu)更加清晰,。排版的層次感通常指頁面中文本排列構(gòu)建出的視覺層次,。平時我們看過的書籍,，書中的主標(biāo)題看起來比副標(biāo)題更重要，而主標(biāo)題和副標(biāo)題又明顯比正文部分更顯眼,。所以我們在進(jìn)行文字排版時,，一般也可以遵循這個原則。
頁面中所有字體尺寸應(yīng)該是基于正文字體來進(jìn)行選擇的,，因為正文是用戶在每個頁面中閱讀最多的部分,。那么如何基于正文來選取其他部分字體的大小,，下面有一些基本原則。
1,、正文字體：調(diào)整字體大小,，直到感覺看起來非常舒服為止。
2,、標(biāo)題字體：通常將正文字體放大到180%-200%,。
3、副標(biāo)題字體：通常為正文字體的130%-150%,。
通過調(diào)整行間距和段間距,，讓用戶更容易掃讀文字。段間距讓用戶能夠更好地識別內(nèi)容塊和意群,，行間距控制好則可以讓大腦更輕松識別文字內(nèi)容,。
1、行間距
行間距沒有固定的值,，通常是根據(jù)字體大小來定義的。在word里我們?？吹诫p倍行距,、單倍行距和1.5倍行距的選項。網(wǎng)頁上行距的單位常用em來表示,，不管是中文網(wǎng)站還是英文網(wǎng)站,，大家多喜歡用1.5em-1.8em的行距，不超過2em,?？刂圃谡某叽绲?20%-160%，同時文本字體越小,，兩行之間的行距應(yīng)該越大,，確保字與行間的呼吸空間。
2,、段間距
一般而言,，段間距等于或大于正文字體行高。比如文章篇幅較短,，就不需要很寬的段距,，二文章篇幅很長，特別是那些偏學(xué)術(shù)的比較枯燥的文章,，就要多利用段距把握文章的節(jié)奏,，給閱讀者喘息和思考的機(jī)會，且使文章更有層次和可讀性,。
我們隨手拿起一本書或者一份報紙,，數(shù)一數(shù)每行的文字,，一般情況下都不會超過40個漢字。這是因為如果每行文字過長,，讀者會不停的轉(zhuǎn)動脖子,，感到疲憊的同時也會降低閱讀效率；目光從行尾移至下一行首,，也很容易串行,，影響讀者瀏覽文章的節(jié)奏。這點同樣適用于網(wǎng)頁上的文章閱讀,。由于顯示器是橫向的,，我們更要注意劃分閱讀區(qū)域。
文本寬度控制在450-700px為宜,，此范圍內(nèi)參照字號大?。?br/> ● 英文每行80-100個字母(空格算一個字母)為宜；
● 中文每行30-40個漢字為宜,。
對比（contrast）是四項基本設(shè)計原理之一,，在網(wǎng)頁中對文字的排版也非常適用?？梢詫Ρ确譃槿?，主要是標(biāo)題與正文的對比、文字顏色的對比,，以及文字顏色與背景顏色的對比,。
1、標(biāo)題與正文對比
標(biāo)題使用18號的微軟雅黑,，正文使用12號的宋體,，兩種字體字號的對比讓文字內(nèi)容富有層次，很容易吸引讀者眼球,。
2,、強(qiáng)調(diào)文本對比
一部分文字采用了與主要文字不同的樣式，增加視覺效果,，突出展示了段落的重點,。一般規(guī)則是，強(qiáng)調(diào)文本不要超過整個文本的10%,，如果所有都被強(qiáng)調(diào),，那就不是強(qiáng)調(diào)了。當(dāng)然,，一次僅僅使用兩種或是三種強(qiáng)調(diào)技巧,。換句話說，不要同時使用,，顏色,，字體改變,，大小，下劃線,，斜體,，黑體。
3,、文字顏色與背景顏色對比
正文文本與背景合適的對比可以提高文字的清晰度,，產(chǎn)生強(qiáng)烈的視覺效果。將文字內(nèi)容清晰襯托出來,，既有豐滿的層次感,，同時有具有很強(qiáng)的視覺沖擊力。在使用這一原則時需要注意,，必須確保文字是容易看清的,，如果文字過小或過于纖細(xì)、色彩對比度不夠,，會適得其反,。如果對色彩的對比度還不夠熟悉時，可以通過顏色對比檢測工具（Check My Colours,、Colour Contrast Check）檢測色差和亮度差,，確保網(wǎng)頁設(shè)計的易讀性。
為了增加閱讀體驗，一種友好的圖文排版必不可少,。圖文混排的樣式有很多,，我們大體可以分為具有設(shè)計樣式的和簡單混排的。富有設(shè)計感的圖文排版較復(fù)雜,，需要一定的設(shè)計功底才能做的好看,。因此簡單好看的圖文排版越來越受歡迎，處理好圖片和文字的關(guān)系就可以,。
-
圖片靠左對齊
正常情況下,，用戶的注意力從左向右（當(dāng)然不否定特例的）。其優(yōu)勢是可以增加內(nèi)容的識別度,，圖片可以先吸引讀者對內(nèi)容的注意力,。
-
圖片靠右對齊
如果內(nèi)容比圖片更重要或者內(nèi)容很難用相應(yīng)的圖片進(jìn)行表達(dá)，同時又想充實頁面提高頁面美觀度的,，可以考慮圖片放在右側(cè),。
-
圖片放在上方
一般都是類似瀑布流列表的排版方式,。此時圖片的重要程度比放在左側(cè)還要高的多,，基本每條記錄的主要信息都靠配圖來呈現(xiàn),。
-
圖片放在下方
主要的優(yōu)勢，可以把文字和圖片的結(jié)合優(yōu)勢充分發(fā)揮出來,，文字簡要陳訴，圖片帶你身臨其境,，還原真實情況。
-
圖片作為背景
圖片作為背景,，可以加強(qiáng)其沉浸感,，充分利用圖片喚起讀者的想象，把圖片的誘惑最大化以提高文章整體檔次,。
-
同時利用上述幾種方式
有時候為了減緩讀者審美疲勞,，或者突出某些重點部分。利用不同排列方式的優(yōu)勢來最大化達(dá)到傳播目的,，但缺點是給人的第一感覺是“亂”,。
1、左右圖文
左右圖文可以選擇,，左邊放圖片,，右邊放文案,；或者右邊放圖片,，左邊放文案。但需要注意的是,，使用這種排版方法要保證圖片尺寸盡量一致,，文案長度盡量相近，保證它們都是對稱對齊的,。
2,、上下圖文
上下圖文和左右圖文差不多，可以上圖片下文案,，也可以下圖片上文案,。跟左右圖文一樣，要注意盡量保證圖片尺寸和文案長度的相同,。
3,、在內(nèi)容文字比圖片多很多時，上圖下文的效果比上文下圖的好，因為圖文同時出現(xiàn)時,，用戶會先被圖片吸引,，如果文字在圖片上方，很容易造成大家忽略跳過文字的結(jié)果,。而大段文字出現(xiàn)在圖片下方,，也會讓人比較有耐心閱讀。
1,、高清圖鋪滿
如果是一張高清的圖片,，我們可以選擇用它直接鋪滿整個頁面，再把文字置于圖片中,。當(dāng)圖片構(gòu)圖復(fù)雜或文案顏色與背景顏色相近時,，不能直接將文案置于背景上，否則就會看不清,。
① 給圖片加個色塊,，再把文案放到色塊上面。
② 或者干脆給整個背景都覆蓋上一個帶透明度的矩形,。
③ 如果圖片構(gòu)圖簡單,，你可以直接把文案置于圖片空白處。
2,、模糊圖縮小
如果所選的這張圖片質(zhì)量不好模糊,，可以考慮走氣質(zhì)路線：小圖配上少量文字，再加上留白,。但是當(dāng)圖片實在太小,，而文案又實在過多時，此時這條路不但走不通,，還會顯得單調(diào)呆板,。
此時可以考慮通過設(shè)計以增大圖片面積：
①加個好看的邊框
②插入幾個形狀，用圖片填充形狀以后,，更改形狀的透明度
排版設(shè)置完全是一個常規(guī)技能，遵循簡單的原則能讓文本的可讀性更好,。雖然這些規(guī)則相對簡單可行,，但是并不能覆蓋全部的排版需求，比如在移動端閱讀,。由于移動設(shè)備的逐漸發(fā)展,，人們平時往往使用它的機(jī)會多于使用電腦，因此在移動端的排版上,，我們要尤為注意,。
從移動端有限的屏幕以及頁面加載速度這兩方面來考慮，最好的展示效果是簡單,，有一個核心元素,，突出重點為最優(yōu),。以可口可樂的這個“我們在這 我們在乎”為例，相較而言,，越簡單的排版會越容易引起關(guān)注,。這是因為我們的大腦里最初看到這種簡潔排版，會立刻出現(xiàn)“嗯 我可以馬上看完不費勁”的潛意識信息而帶著輕松的態(tài)度去閱讀,。
在桌面端我們可能會采用字號差異較大的文字組合,，移動端屏幕較小，容納的文字也較少,，同等的字號差異在小屏幕上的感受會被放大,。原因是我們在使用這兩種設(shè)備時的觀看距離不同，桌面端我們的眼睛離屏幕較遠(yuǎn),，而在移動端則相反,，因此我們應(yīng)該在移動端使用較小的字號反差。
移動設(shè)備使用環(huán)境復(fù)雜多變而不局限在室內(nèi),，可能在室外,，甚至暴露在強(qiáng)烈的陽光下，應(yīng)確保文字在背景中不會識別困難,，即使是色弱者也可以正常閱讀,。建議的文字和背景的顏色反差比應(yīng)該高于4.5:1（AA級），才能確保更多人及環(huán)境都可以輕松閱讀,。我們可以借助檢測工具來幫助檢測這個比值,。例如：Colour Contrast Check。
在英文的段落排版中,，通常是左側(cè)對齊,，而讓右側(cè)自然形成起伏邊。對中文排版與閱讀習(xí)慣而言則相反,，特別是在移動端上閱讀,，段落的頭尾對齊尤其重要。一邊是夾雜了數(shù)字或英文字母字符的情況下,，原本中文的整齊排列被打亂了,，右側(cè)嚴(yán)重參差不齊不美觀。一邊是微調(diào)文字的間距以補(bǔ)足右邊存大的空白,，整潔對齊,。
結(jié)語closing
關(guān)于排版，還有很多不同的方法,，因為不僅不同的人對排版有不同的見解,，而且如今的傳播媒介和字體等本身都在不斷的變化。相應(yīng)的審美和設(shè)計方法也不會一成不變，但總的原則是不變的,，那就是讓內(nèi)容更易讀,，這也是好的排版的不變標(biāo)準(zhǔn)。
★★★
攜程
蘇寧
愛奇藝
嗶哩嗶哩
芒果TV
唯品會
搜狐視頻
當(dāng)當(dāng)
喜馬拉雅
華為