當我們聊設計的時候,可讀性是我們常提及的話題。良好的設計應該都是可讀的設計,如果資訊都無法正常而清晰的傳達,那麼設計就失去了意義。
設計的可讀性和排版設計息息相關,與此同時,對比度的控制也是其中的核心。想要提升內容的可讀性,讓內容以更加順暢、更符合邏輯的形式呈現在多用户面前,您需要藉助對比度來表達,讓多用户真正順暢的理解。
色彩對比
前景的文字需要和背景有着明顯的對比,它需要能夠吸引多用户的眼球。
建立色彩對比的方法有很多,流行的做法是在白色或者淺色的背景上使用黑色或者深色的文字。這種設計由來已久,經久不衰的理由是它確實非常有用。當然,將兩種顏色倒置過來,也一樣有用。
但是,在實際的設計過程中,情形複雜多變。文字和背景的配色往往受到多種因素的影響,這個時候需要多加嘗試,反思文字在背景的映襯下是否能夠被多用户清晰的看到,尤其是在視訊和圖片之上追加文字排版的時候。
為了降低背景多變的色彩對於文字的視覺影響,一個比較靠譜的方案是在圖片和視訊上覆蓋上一個半透明的有色圖層,來 “統一” 色調,讓文字的可讀性更好。設計師可以通過調整這個有色圖層的透明度、明度和色調來控制和文字的對比度,這樣一來,背景圖片和視訊中的內容對於文字的影響可以降到低。
另外一個方案,是將文字和圖片、視訊分開排布,這樣就不會犧牲兩者的資訊表現力,的問題是需要提供雙倍的展示空間,並且需要選取合理的排版佈局。
文字樣式的對比
不同風格樣式的文字能夠藉助差異,吸引多用户的注意力。有趣而讓人着迷的字型越來越多,比如手寫襯線字型 Le Farfalle 就是如此。
單個字型本身的優秀設計是很不錯,但是兩種不同字型的對比帶來的反差,更能吸引多用户。
不過,不同字型的搭配是非常講究的,因為風格不搭的不恰當誰家常常會讓多用户感到震驚。可以選擇一些具有相同特徵的不同字型,多用户不會為之感到突兀,這些字型知名擁有相同的 x 高度(小寫字母 x 的高度),在弧度和傾斜角度上非常接近。這些 “和而不同” 的字型能讓文字內容看起來一致而有差異,有趣而不枯燥。
大小尺寸對比
超大的字型和超小的字型所構成的視覺差常常能夠讓多用户驚歎。
當字型大到一定程度的時候,就能帶來足夠的視覺衝擊,如果搭配上很小的字型構成對比,那麼這種視覺衝擊會顯得更加引人矚目。雖然超小的字型單獨使用也能形成類似的效果,但是相比超大字型要困難的多。
字型的大小差異,很容易被多用户注意到,超大的字型能夠在您的整個設計當中形成視覺焦點。在文章排版中,正文字型使用正常大小,標題和副標題使用超大字型(副標題會相對小一些),這樣的設計會讓文章排版的輕重緩急清晰地呈現出來。
對齊模式
談到可讀性的時候,對齊其實也個無法迴避的話題。而在排版中,不同的對齊模式也是能構成對比的。
通常,在對齊的設計上有兩種常規思路:
正文和標題採用不同的對齊模式,構成對比
在全部排版中沿用相同的對齊模式
從某種意義上來説,兩種思路都是對的。選取那種思路,主要取決於文字、標題和其他設計元素之間的關係。如果採用相同的對齊方式,能否保證標題和正文之間有明顯對比、能否從背景和其他元素中脱穎而出?文字的行間距、字型大小、和其他元素之間的距離能否構成良好的視覺差?
在談到 UI 中的對齊問題的時候,直觀的模型是一段文字和按鈕之間的關係。排版中,文字元素和按鈕之間的對齊模式應該是怎樣的?這個問題很有意思,許多設計師傾向於讓文字和按鈕縱向排列,居中對齊,但是網站的其他元素搭配進來的時候,又往往不會居中對齊。所以,對齊方式,是由元素本身的屬性來決定,根據整個設計,合理搭配。
長文字內容
對於包含大量文字內容的網站而言,正文部分的內容排版就顯得相當重要了。如果文字內容都是無縫的呈現出來的話,多用户很可能因為沒有層次而無法抓住重要資訊。
所以,網頁中大量的文字資訊,應該考慮下列因素:
文字塊的區域和大小
每行文字的長度和高度
專案編號和列表
字元的粗體和斜體
色彩
所有的這些屬性都能將文字中特定的關鍵詞、資訊甚至語氣同其他的內容區分開來,它們會成為文字中重要的錨點,將和總要的資訊通過這種差異和對比,推送到多用户面前。
在較長的文字區塊中(尤其是博客和長文中)使用不同的樣式來區分不同型別的內容,這樣做可以明顯降低多用户閲讀的疲勞度。將長內容分解為更易於閲讀的部分,多用户才更容易買單。