在網頁設計和 WordPress APP 軟體中,一個好的排版不僅僅要擁有漂亮的字型。更要有高度的可讀性——易於瀏覽——同時能讓多使用者專注它的內容。
這是一個相當艱鉅的任務,但是大多數設計師可以透過練習達到這種效果。
今天我們將去看看優秀的多使用者體驗需要遵守的 10 個 “準則”,同時您也可以學習以便幫助您設計出非常棒的設計。(每個規則都配有一個網站的例子)
可讀性
必須使用無襯線體的想法是過時的,但是您要去了解為什麼必須使用無襯線體的想法是過時的深層次原因:文字必須是易於閱讀的。
您需要避免難以閱讀的字型,然而就是這些難以閱讀的字型存在於指令碼當中,比如新奇的字型或者哥特風的字型。(除了那些特別需要裝飾的藝術字型以外。)
絕大多數可讀性字型都能夠被輕鬆閱讀的,它不會花費多使用者太多時間去注意字型本身。這就是可讀性準則的原理。
給行間距留足夠的空間
關鍵就是設計一個多使用者都喜愛的行間距。適宜的行間距有利於閱讀,這在移動端尤其的重要。
造成行之間變化的因素有以下這些:
文字大小 文字數量 字型樣式 螢幕寬度
這裡沒有什麼明文的規則去告訴您應該怎麼做–但是這裡有一些規則您可以去遵循:
對於大多數網站,設定行間距的文字大小約 125% 對於移動裝置,設定行距的文字大小約 150% 使用一個鬆散的段落間距——等於 “迴歸”——使段落容易閱讀 使用您的雙眼去測試,看文字在螢幕上是松的還是緊的。(感受即可) 使用大而圓的字母
大又圓的字更易閱讀。所以字母有大的圓弧-這個弧度在字型裡面就像一個迴圈的 “o” 。
緊湊和壓縮的字型是很難閱讀的。寬鬆的風格,比如上圖這個例子就容易閱讀,因為每一個字母都容易區分。
給字型設定大小
毫無疑問,使用大點的文字會讓多使用者感覺舒服。大或者小的文字取決於您需要放置多少文字在您的頁面裡;尤其注意大段文字。
不同的設計師對使用多少文字有不同的想法,大多數認為每行使用 45-60 個字是理想的。這樣縮小了手機的排版,同時大多數多使用者能接受的。
尋找字母高度
字母高度——尤其是小寫字母——讓多使用者輕鬆的瀏覽您的內容有很大的影響。
小寫字母 “x” 不管多高它仍然是小寫”x”. 用更高的 “x” 小寫字型更容易閱讀,這就是說小寫字母的高度更接近大寫字母。查詢字符集,其中 x 的高度是三分之二是大寫字母高度的四分之三。
學會表現文字的字間距
好的字間距意味著好的排版。
您不會有時間,您也不需要,回到字間距這裡。但當展示字型的時候。您希望每一個字母都是組合在一起的,就像它們原本如此。這個細節將會幫助您去如何展示,防止多使用者忘記重要的部分。
考慮比例
比例能夠幫助您去為一個專案創造樣式。雖然這聽起來像是在做數學題,但是它能讓您的工作更加輕鬆。
回到行間距;那就是比例。考慮著文字的大小、文字主幹、小標題、標題和大面積的複製。把他們連成一片,從視覺上看起來是一片和諧,同時您也知道是用怎樣的比例更好。一開始可能有些複雜,但是 TutsPlus 有個很酷的教程幫助您去理解它。
統一風格
當談到字母的形式,粗體是很重要的。由於超細的字母缺乏對比,所以很難閱讀。同樣,細體和粗體有強烈的反差也會存在同樣的問題。
解決方法:堅持相對統一的字型形式。這種風格是很容易被使用,不管您是使用哪種背景都有可讀性。
限制字型的使用
兩個字型。再說一次:兩個字型。
所有設計都應該遵從這個準則。太多的字型會讓您的多使用者發瘋。眼睛會非常痛苦,可讀性很差。同時也讓多使用者很痛苦。
學會使用兩種字型——您可以有一種藝術字型,如果需要——保持這樣的習慣。標出每個字型應該如何使用。包括顏色、大小和相應放置的位置。對於每一個裝置,不同的頁面也應該是一致性的。
對比度
在一些少數流行的設計裡面,背景和字型只有很小的區別。它看起來很酷炫,但是並沒有那麼友好,可讀性也差。
內容才是讓您的網站特別和重要的關鍵。讓背景和字型有更大的區別,它能讓多使用者輕鬆的閱讀。(這就是為什麼白色或者淺色背景使用黑色或者深色背景非常流行的原因。)
網站文字越多,這些準則就越發重要。當您眯著眼睛看文字時,對比可能就會減弱(或字母太小)。 Color Safe 是一個強大的顏色工具,它能幫助您去組合接近對比度的顏色。(它會讓您的網站看起來更加酷!)
排版設計能幫助您設計出非常好的設計體驗。