要注意,淺色背景上的小號文本比暗色背景上的更容易閱讀。 所以在設計新網站時,要使用一些虛擬文本來做測試,以確保文本的易讀性, 如果不行,嘗試增加字號看是否有幫助
四、如何選用字體
字體在設計中扮演著重要的角色,在深底色設計中我們應該更謹慎地考慮字體的選用。 下圖中示范了在深色背景中14號無襯線字體和襯線字體的顯示效果。
(譯注:襯線:例如右邊Serif的“S”字母曲線兩端的小筆畫,那就是襯線。中文中的襯線字體是宋體,無襯線字體是黑體。襯線字體除了有筆畫頂端的裝飾筆畫,線條有明顯的粗細變化。而無襯線字體往往筆畫是粗細是一致的,或變化非常不明顯。)
無襯線字體可讀性更強, 但許多設計師仍然選用襯線字體來表現設計中優雅的部分。其中的訣竅是僅在大字號文本上選用襯線字體,大字號的襯線字體會帶來更多額外的空白,從而令每個字母都顯得非常清晰。
下圖的案例中, 襯線字體和無襯線字體的使用形成了優美的搭配。
在大字號的文本(如標題,導航和頁面頭部)上使用襯線字體,可令設計倍增優雅。 在正文部分使用了簡潔的無襯線字體,又提高可讀性和對比度。
無、文本的對比度
很多人都同意,深底色設計容易造成眼睛疲勞,過高或過低的對比度通常是罪魁禍首。 那如何找到完美的平衡點呢?
假設你在一個漆黑的房間里,突然有明亮的光線進入,你肯定會感到非常不適。 但如果是在一個不太黑的屋子里,射入不那么亮的光線,則會好受得多。 這同樣適用于web設計。
尋找完美的對比度,意味著要找到背景暗度和文本亮度之間的平衡點。
下圖中簡略地說明了背景和文本之間的對比狀況。 你可以注意到背景和文本的亮度都在梯次降低。
在深底色背景上,為文字尋找合適的亮度要困難得多。要找到完美的平衡點,必須要試驗不同的配色。 通常不使用純黑或純白能帶來更好的效果。
六、提供切換模式
雖然我們已經掌握了很多技巧令深底色設計更具吸引力,但是我們還可以再做一點努力已滿足更多的用戶。
務必增加一個樣式表,以便用戶可以選擇切換到效果為“淺色背景+深色文字”的另一版本。
同時創建2個樣式表可以保證這一點,一個用于默認的深底色風格,一個用于替換為淺底色。
網站SitePoint上有不錯的教程講到了這一點 : Build a Simple Style Switcher in CSS.《如何使用css創建風格簡潔的界面切換功能!。 在這里僅需創建深色和淺色兩份樣式表,而無需其它顏色(如橙色、藍色、白色)的界面皮膚。
感謝您對石家莊網站設計的關注與支持!