說到排版，這是一個(gè)大學(xué)問題。 網(wǎng)站上的每個(gè)元素都會(huì)影響瀏覽。排版的質(zhì)量絕對可以測試設(shè)計(jì)師的基本知識(shí)。一篇簡短的文章不能清楚地介紹排版。本文主要分享網(wǎng)站主題部分的排版。之后，我們還將介紹基于不同系列文章中關(guān)鍵點(diǎn)的印刷技術(shù)。

文本布局需要考慮文本識(shí)別和頁面易讀性。本文分享了如何從理想的易讀性規(guī)范和CRAP設(shè)計(jì)原則的角度在網(wǎng)頁中制作精彩的文本布局。

首先考慮一下，您如何看待良好的文本布局？

我們認(rèn)為，良好的排版必須具備良好的閱讀能力。文本內(nèi)容在視覺上是平衡和連貫的，并且具有整體空間感。

布局，內(nèi)容放置和列設(shè)計(jì)都會(huì)影響文本的可讀性。從易讀性的角度來看，設(shè)計(jì)師需要考慮字體，字體大小，行間距，間距，背景顏色和文本顏色對比。

我們在上一篇文章中突出顯示了字體和字體大小。以下理想的易讀性規(guī)范引入了行間距和間距，共享適當(dāng)?shù)木€寬和線高，并幫助觀眾保持閱讀節(jié)奏，以便讀者獲得更好的閱讀體驗(yàn)。

首先，理想的可讀性規(guī)范

1.線寬

我們可以想象：如果文字行太長，視線的距離很長，很難注意到段落的開頭和結(jié)尾，閱讀起來比較困難;如果文字行太短，眼睛應(yīng)該來回掃描，破壞閱讀的節(jié)奏。

因此，我們可以使內(nèi)容區(qū)域的每一行都帶有適當(dāng)數(shù)量的單詞以提高易讀性。

傳統(tǒng)書籍排版的每一行中理想的字符數(shù)是55-75，實(shí)際上在75-85字符行中更受歡迎。第14種字體推薦使用中文35-45個(gè)字符。

2.間距

行間距是影響易讀性的一個(gè)非常重要的因素。行間距太寬會(huì)導(dǎo)致文本失去連續(xù)性并影響閱讀。如果行間距太窄，則容易跳躍。它很容易跳躍。

在網(wǎng)頁設(shè)計(jì)中，文本間距通常選擇為行間距的1到1.5倍，以及段間距的1.5到2倍。

例如，第12個(gè)字體，行間距為12px-18px，段落間距為18px-24px。

另外，線高/段之間的間隙是=0.754。行間距恰好是段落間距的75％是很常見的。

例如，簡單的書號(hào)為16號(hào)字體，行間距為27px /段間距為36px=75％。字體大小本身相對較大，因此行間距不需要嚴(yán)格按1 - 1.5倍的比例設(shè)置，但行間距和截面間距比為75％，看起來非常好。這種視覺效果在閱讀時(shí)保持一致。節(jié)奏感，這是規(guī)范在實(shí)際情況下的靈活應(yīng)用。

3.行對齊

排版中最重要的規(guī)范之一是對齊應(yīng)放置的位置，例如每個(gè)段落的行的對齊方式。無論視覺效果如何，美麗，正式，有趣或嚴(yán)肅，都可以應(yīng)用清晰的對齊來實(shí)現(xiàn)目標(biāo)。通常，建議只與頁面上的文本對齊，并盡量避免理由。

4.文字留白

格式化文本時(shí)，需要在布局中留出可用空間。白色空間應(yīng)從小到大的順序是：字間距，行間距和段間距。另外，在布局內(nèi)容區(qū)域之前，需要根據(jù)頁面的實(shí)際情況在頁面周圍留下空白區(qū)域。

二、CRAP設(shè)計(jì)四原則在文字排版中的應(yīng)用

CARP是四個(gè)基本設(shè)計(jì)原則，包括對比度，重復(fù)，對齊和接近，這些原則已被設(shè)計(jì)師廣泛使用。這四個(gè)基本原則也非常適用于網(wǎng)頁設(shè)計(jì)中的文本布局。

1.對比

我們將比較分為三類，主要是標(biāo)題和正文的字體和字體大小比較，文本顏色的對比度，文本顏色和背景顏色之間的對比。

＆gt;標(biāo)題與文字

在AnyForWeb網(wǎng)站案例頁面中，標(biāo)題在18日使用Microsoft Yahei，在12日使用歌曲。兩種字體大小之間的對比使得文本內(nèi)容豐富且易于吸引讀者的注意力。

＆gt;文字顏色比較

在Garan的官方網(wǎng)站上，一些文本使用了與正文不同的另一種顏色。這種對比是增加視覺效果的有效方法之一，突出了段落的重點(diǎn)。

＆gt;文字顏色與背景顏色

這是一種非常常見的排版設(shè)計(jì)。文本和背景之間的適當(dāng)對比可以提高文本的清晰度并產(chǎn)生強(qiáng)烈的視覺效果。

例如，在埃森哲的官方網(wǎng)站上，白色背景，紅色標(biāo)題，黑色文字以及紅色背景和白色文本之間的對比清晰地顯示了文本內(nèi)容，其具有完整的層次感和強(qiáng)烈的視覺沖擊力。

設(shè)計(jì)師在使用這個(gè)原則時(shí)需要注意。有必要確保文本易于查看。如果文字太小或太細(xì)，顏色對比度不夠，則會(huì)適得其反。例如：

對顏色對比不熟悉的設(shè)計(jì)師可以通過顏色對比度檢測工具（例如檢查我的顏色，顏色對比度檢查）來檢測顏色和亮度差異，以確保網(wǎng)頁設(shè)計(jì)的易讀性。

2.重復(fù)

設(shè)計(jì)中的元素可以在整個(gè)網(wǎng)頁設(shè)計(jì)中重復(fù)。對于文本，字體，字體大小和樣式的重復(fù)可以是相同類型的圖案裝飾，文本和圖像布局。重復(fù)為用戶提供了有組織，一致的體驗(yàn)，從而創(chuàng)造了連貫性并且看起來更多。

例如，HeyJuice網(wǎng)站在產(chǎn)品指南部分使用統(tǒng)一的“圖片+標(biāo)題+正文”表單。內(nèi)容不同，布局統(tǒng)一，圖片風(fēng)格一致。當(dāng)用戶查看過去時(shí)，他們可以知道這是同一部分的內(nèi)容。這種重復(fù)很容易具有連貫和平衡的美感。

例如，圖巴兔裝飾網(wǎng)絡(luò)的過程，標(biāo)題文字在圖片的相同位置，使用相同的形式，不僅與圖片的背景顏色形成對比，而且還與文本樣式的重復(fù)形成對比。

重復(fù)原則廣泛用于網(wǎng)頁設(shè)計(jì)。單次重復(fù)可能是單調(diào)的。設(shè)計(jì)人員可以根據(jù)不同的網(wǎng)站要求靈活使用它。例如，改變重復(fù)可以增加創(chuàng)新并增加網(wǎng)頁設(shè)計(jì)的活力。

3.對齊

在網(wǎng)頁設(shè)計(jì)中，元素不能隨意放置在頁面上，并且每個(gè)項(xiàng)目都應(yīng)該與頁面內(nèi)容有一些連接。對齊可對齊性是網(wǎng)頁設(shè)計(jì)的重要組成部分。它可以幫助設(shè)計(jì)師制作有吸引力的設(shè)計(jì)，并且是良好網(wǎng)頁設(shè)計(jì)的潛在要求。

有很多對齊的情況，我們只列出兩個(gè)。

曼秀雷敦的左對齊網(wǎng)站：

DarryRing網(wǎng)站的中心對齊：

左右對齊使文本看起來更清晰，更清晰;中心對齊更莊嚴(yán)，更正式，更穩(wěn)定。

4.親密性

位置的接近意味著存在關(guān)聯(lián)。親密關(guān)系是指將相關(guān)項(xiàng)目組織在一起，使它們從整體上看起來和諧統(tǒng)一。

親密關(guān)系可以從兩點(diǎn)開始：適當(dāng)?shù)陌咨臻g，側(cè)重于視覺強(qiáng)調(diào)。

例如，在以下情況下，圖形和文本匹配，這是多個(gè)元素組合在一起。

首先將人眼吸引到橫幅和文本內(nèi)部，然后向下移動(dòng)到文本描述和鏈接文本。這些元素的親密關(guān)系和對比形成了平衡。

以上是此次分享的內(nèi)容。如上所述，排版測試的質(zhì)量是設(shè)計(jì)師的基本技能，平時(shí)的努力是必不可少的，我們期待大家的精彩布局！