色彩對比
但是,在實際的設計過程中,情形複雜多變。文字和背景的配色往往受到多種因素的影響,這個時候需要多加嘗試,反思文字在背景的映襯下是否能夠被用戶清晰的看到,尤其是在視頻和圖片之上追加文字排版的時候。
為了降低背景多變的色彩對於文字的視覺影響,一個比較靠譜的方案是在圖片和視頻上覆蓋上一個半透明的有色圖層,來「統一」色調,讓文本的可讀性更好。設計師可以通過調整這個有色圖層的透明度、明度和色調來控制和文字的 對比度 ,這樣一來,背景圖片和視頻中的內容對於文字的影響可以降到最低。
另外一個方案,是將文字和圖片、視頻分開排布,這樣就不會犧牲兩者的信息表現力,唯一的問題是需要提供雙倍的展示空間,並且需要選取合理的排版佈局。
文本樣式的對比
不過,不同字體的搭配是非常講究的,因為風格不搭的不恰當誰家常常會讓用戶感到震驚。可以選擇一些具有相同特徵的不同字體,用戶不會為之感到突兀,這些字體最好擁有相同的x高度(小寫字母x的高度),在弧度和傾斜角度上非常接近。這些「和而不同」的字體能讓文本內容看起來一致而有差異,有趣而不枯燥。
大小尺寸對比
字體的大小差異,很容易被用戶注意到,超大的字體能夠在你的整個設計當中形成視覺焦點。在文章排版中,正文字體使用正常大小,標題和副標題使用超大字體(副標題會相對小一些),這樣的設計會讓文章排版的輕重緩急清晰地呈現出來。
對齊模式
‧正文和標題採用不同的對齊模式,構成對比
‧在全部排版中沿用相同的對齊模式
從某種意義上來說,兩種思路都是對的。選取那種思路,主要取決於文本、標題和其他設計元素之間的關係。如果採用相同的對齊方式,能否保證標題和正文之間有明顯對比、能否從背景和其他元素中脫穎而出?文本的行間距、字體大小、和其他元素之間的距離能否構成良好的視覺差?
在談到UI中的對齊問題的時候,最直觀的模型是一段文本和按鈕之間的關係。排版中,文本元素和按鈕之間的對齊模式應該是怎樣的?這個問題很有意思,許多設計師傾向於讓文本和按鈕縱向排列,居中對齊,但是網站的其他元素搭配進來的時候,又往往不會居中對齊。所以,對齊方式,是由元素本身的屬性來決定,根據整個設計,合理搭配。
長文本內容
‧文本塊的區域和大小
‧每行文字的長度和高度
‧項目編號和列表
‧字元的粗體和斜體
‧色彩
所有的這些屬性都能將文本中特定的關鍵詞、信息甚至語氣同其他的內容區分開來,它們會成為文本中重要的錨點,將和總要的信息通過這種差異和對比,推送到用戶面前。
在較長的文本區塊中(尤其是博客和長文中)使用不同的樣式來區分不同類型的內容,這樣做可以明顯降低用戶閱讀的疲勞度。將長內容分解為更易於閱讀的部分,用戶才更容易買單。
保持一致
Ntgrate 這個網站就很好的貫徹了一致性的設計。背景統一使用了菱形的柵格,而文本則統一使用白底黑字的卡片來承載,同時網站中的大圖則是置於背景和文本而卡片之間。
結語
對比度是讓設計項目在視覺上更具吸引力的重要工具,它讓排版佈局更加富有層次結構,高對比度的設計讓內容的可讀性有明顯的提升,而這也是設計可用性達標的最基本條件。
原文地址: webdesignerdepot
原文作者: CARRIE COUSINS
優設譯文: @陳子木
非特殊說明,本文版權歸原作者所有,轉載請註明出處
本文地址: http://www.uisdc.com/using-contrast-to-enhance-readability
本文地址: http://www.uisdc.com/using-contrast-to-enhance-readability