網站上每一個元素都能影響瀏覽,網站設計的效果整體感覺,能夠影響多使用者的多使用者體驗,而且目前的網站最佳化中也在著重的強調——深度瀏覽,而網站建設中頁面設計的好與壞就能給您的網站在深度瀏覽中有一個好的評價;網站的整體設計效果是有很多細微的點與面結合出來的,WordPress 網站設計覺得排版設計的好壞絕對能考驗一個設計師的基本功底,文字的排版需要考慮文字辨識度和頁面易讀性,本文就從理想易讀性規範和 CRAP 設計四原則的角度與大家分享怎樣在網頁中做出精彩的文字排版。
在我們看來,好排版一定有著比較棒的閱讀性,文字內容在視覺上是平衡和連貫的,並且有整體的空間感。佈局、內容擺放和欄目設計都會影響文字的閱讀性。從易讀性來看,需要設計師考慮字型、字號、行距、間距、背景色與文字顏色對比等。我們在前面文章中已經重點介紹了字型和字號,以下理想易讀性規範則介紹行距和間距,分享適宜的行寬和行高,幫助瀏覽者保持閱讀節奏,讓讀者擁有更好的閱讀體驗。
一、理想易讀性規範
1. 行寬
我們可以想象一下:如果一行文字過長,視線移動距離長,很難讓人注意到段落起點和終點,閱讀比較困難;如果一行文字過短,眼睛要不停來回掃視,破壞閱讀節奏。因此我們可以讓內容區的每一行承載合適的字數,來提高易讀性。傳統圖書排版每行理想字元數是 55—75,實際在網頁上每行字元 75—85 更流行。中文在 14 號字型時,建議 35—45 個文字。
比如下圖:
2. 間距
行距是影響易讀性非常重要的因素,過寬的行距會會讓文字失去延續性,影響閱讀;而行距過窄,則容易出現跳行。
網頁設計中,文字間距一般根據字型大小選 1—1.5 倍作為行間距,1.5—2 倍作為段間距。比如 12 號字型,行間距是 12px—18px,段落間距則是 18px—24px 。另外,行高/段落之間的空白=0.754 。行間距正好是段落間距的 75% 是非常常見的。比如簡書 16 號字型,行間距 27px/段間距 36px=75% 。文字字號本身比較大,所以行間距也不需要嚴格按照 1—1.5 倍的比例設定,不過行間距和段間距的比例符合 75%,看起來很不錯,這樣的視覺效果讓人在閱讀時保持一種節奏感,這就是在實際情況中將規範的靈活應用。
3. 行對齊
排版中很重要的一個規範就是把應該對其的地方對齊,比如每個段落行的位置對齊。不論哪種視覺效果,精美的、正式的、有趣的還是嚴肅的,一般都可以應用一種明確的對齊來達到目的。通常情況下,建議在頁面上只使用一種文字對齊,儘量避免兩端對齊。
4. 文字留白
在排版文字時,在版面需要留出空餘空間,留白麵積從小到大應該遵循的順序是:字間距、行間距、段間距。此外,在排版內容區之前,需要根據頁面實際情況給頁面四周留出餘白。