首頁 部落格 網站行銷設計是如何善用對比度,提升網頁內容的可讀性
Jericho
Jan 04, 2022
網路、科技、滿滿的新知在浩瀚的網路上,想要得到他嗎?沒問題,永遠抱持著謙卑的態度,自然會找到方案!

網站行銷設計是如何善用對比度,提升網頁內容的可讀性

網頁設計師交流意見時,其實很少在討論當今最新技術,反而是傳統的設計價值,才是左右網站品質的主要原因,例如今天與大家分享的可讀性,就是設計師很喜歡卻也有點老舊的話題。

影響網站可讀性的原因有很多,色彩、文字、尺寸、對比、RWD規劃...等幾個要素,最主要的變因有兩個:版型與設計。同時,色彩與對比也是其中的核心。想要提升內容的可讀性,你需要運用不同的技巧來設計網站,讓用戶樂於接受你的網站資訊。

 

色彩對比

前景的文字需要和背景協調,以吸引用戶的目光。

色彩對比的搭配方法少說也有百種甚至千種,最流行的做法是:在白色或者淺色的背景上,用黑色或深色的文字,歷久不衰卻確實非常有用。當然,將兩種顏色倒置過來,也一樣有用。

但是,在實際的設計過程中還有其他的變數。文字和背景配色受到多種因素的影響,白底黑字是不足以應付所有的狀況,尤其是在影片和圖片之上,追加文字排版的時候情況就複雜起來了。

曾經有一個十分流行的做法:在圖片上覆蓋上一個半透明的圖層來「統一」色調,讓文字的可讀性變得更好。設計師可以通過調整圖層的透明度、對比和色調來控制文字的可讀性,優點是圖片內容對於文字的影響低,尤其用在網頁上可以快速使用CSS技巧套用此一效果,缺點是千篇一律的做法缺乏個性。

其實另外一個常用方案,是將文字和圖片分開呈現,這樣就不會造成圖片與文字彼此干擾的問題,但問題是需要提供更多的空間呈現內容,或是要透過縮放布局的方式,讓圖片影片與文字可以一併呈現。

 

內文樣式的字體對比

不同風格樣式的文字能夠讓用戶注意到「這個訊息很重要」,吸引用戶的注意力。許多新一代的字體設計都是基於這樣的概念而產生的,舉幾個中文字的例子:有著優雅風格的花體字、有著手寫溫度的拙體字、受到女性與兒童喜愛的娃娃體等,近年都在設計領域廣泛獲得肯定。

不同字體的搭配可以引起讀者注意,但風格不搭的字體會讓用戶感到錯愕。選擇一些具有相同特徵但不同款式的字體,例如:標準的黑體、圓體搭配上新潮的字體當作標題,用戶就不會感到突兀,這些字體最好使用相同的參數,不要突然斜體搭配加粗,這些「不謀而和」的字體能讓內文看起來一致而有差異,有趣而不枯燥。


大小尺寸對比

超大的字體和超小的字體所構成的視覺差,常常能夠讓用戶驚嘆。例如各類實體展會就很慣用這樣的手法抓住用戶目光,同樣的策略也可以用於網頁設計上。

大型文字可以帶來足夠的視覺衝擊,若搭配很小的字體加以對比,視覺衝擊會顯得更加引人矚目。雖然超小的字體有時也能形成類似的效果,但大多是幽默、逗趣、會心一笑的效果較多,不太容易塑造出超大字體的吸引注意力效果。

字體的大小變化很容易被用戶注意到,不過在網頁設計內文排版中會以標題(H1、H2...)等方式表現之。不過在網頁設計中H1、H2標籤其實代表的是標題(Heading)的意思,並不是用來營造視覺效果的目的,所以請不要將不同的標題標籤混搭,如果您對於這個參數感到困惑,請您與網頁設計公司討論相關細節。


總結

對比度不只是色彩上的對比,樣式、尺寸都可以營造出對比效果,使網頁設計視覺上更具吸引力的技巧,它讓排版構圖上更加富有層次,讓越來越懶得閱讀內容的現代人可以一目了然,進而達到提升網頁效益與表現。

2022網頁設計趨勢-用創新的技術,抓住客戶的目光
2022網頁設計趨勢-用創新的技術,抓住客戶的目光
Ryan
Ryan
Nov 24, 2021
手機端網頁設計與PC電腦端的差別與設計要點
手機端網頁設計與PC電腦端的差別與設計要點
Jericho
Jericho
Mar 23, 2021
網頁APP化:開發APP有什麽好處及弊端
網頁APP化:開發APP有什麽好處及弊端
Jericho
Jericho
Mar 17, 2021