網(wǎng)站設(shè)計(jì)師出于各種原因讓網(wǎng)站提高對比度來豐富網(wǎng)站,那么他的目的是為了什么呢?
我們認(rèn)為主要的目的是為了:
·?強(qiáng)調(diào)網(wǎng)站中的重點(diǎn)。
·?提高頁面可讀性。
·?建立網(wǎng)站的頁面等級(jí)。
·?添加瀏覽的視覺興趣。
那么如何讓網(wǎng)站更具有對比度及可讀性,并能留住訪問者呢。。
首先調(diào)整頁面設(shè)計(jì)元素的大小
增加網(wǎng)站設(shè)計(jì)的可讀性最簡單方法之一是使一個(gè)元素比它周圍的元素更大(或更?。S^眾的眼睛自然會(huì)被吸引到對比的頁面元素,因?yàn)樗雌饋砼c他們看到的其他所有東西都不同。
比如文字或者圖像,文本塊,標(biāo)題或按鈕更大,超出了它的尺寸。讓他們看起來更大,因?yàn)樗哂懈嗟囊曈X沖擊度。
參考下面的例子:
其次使用紋理和圖案
紋理和圖案可以幫助您創(chuàng)建高對比度設(shè)計(jì),當(dāng)它們的特征彼此顯著不同時(shí)就會(huì)有對比效果。
比如,將粗糙紋理背景與平滑前景文本配對會(huì)增加設(shè)計(jì)的對比度。
以下是使用紋理和模式的網(wǎng)站的一些示例:
也可以添加一些顏色突出
使用顏色為您的設(shè)計(jì)增加對比度是比較好的辦法。最好的辦法是用不同的顏色來解決。您可以對比深色和淺色。
·?與深色和淺色對比非常簡單。或者,您可以將各種調(diào)色板放在一起,配合調(diào)色。
看看下面的案例參考
可以混合色溫,暖色和冷色可以提高設(shè)計(jì)的對比度。
紅色,橙色和黃色的顏色是溫暖的,而藍(lán)色,綠色和紫色則是冷色。
另外注意網(wǎng)站行間距的間距及對齊方式
空白和文本對齊有助于建立組織結(jié)構(gòu)并在設(shè)計(jì)中創(chuàng)建視覺層次結(jié)構(gòu)。例如,如果您正在設(shè)計(jì)一個(gè)包含大量內(nèi)容的頁面,那么帶有空白區(qū)域的重要元素可以幫助它們脫穎而出并引起觀眾的注意。
網(wǎng)站如何使用空格和文本對齊方式將頁面元素組合在一起,并創(chuàng)建一個(gè)視覺層次明顯的結(jié)構(gòu),可以引導(dǎo)讀者更愿意瀏覽您的網(wǎng)站。
參考以下案例
。
帶有大量空白區(qū)域?yàn)槟木W(wǎng)頁注入了奢華與優(yōu)雅的感覺。
要學(xué)會(huì)排版
排版對于網(wǎng)頁設(shè)計(jì)至關(guān)重要,為您提供了許多改善設(shè)計(jì)對比度的機(jī)會(huì)。具體來說,您可以添加字體組合,樣式和重量的對比度。
當(dāng)您在設(shè)計(jì)中使用多種字體來實(shí)現(xiàn)對比時(shí),您需要確保字體配對完美結(jié)合并且在視覺上彼此不同。通過排版提高對比度的簡單方法是使用不同的字體樣式(斜體,濃縮或小型大寫)或字體粗細(xì)(淺色,普通或粗體)。比如,您可以使用粗體字體作為標(biāo)題,使用相同字體的小版本作為文本塊。
參考例子:
還可以添加一些意外的設(shè)計(jì)元素
如果使用得當(dāng),意外的元素可以為您的設(shè)計(jì)提供平衡的對比度。這樣可以使訪問者感到驚訝增加興趣。
雖然這種對比技術(shù)很難做到恰到好處,但有幾種不同的方法可以開始嘗試。例如,您可能會(huì)通過引入不對稱元素來打破干凈,或者你可以在中性設(shè)計(jì)中增加明亮的顏色使其更感覺流行。
以下是使用意外元素添加對比度的一些簡潔示例:
結(jié)論
為您的設(shè)計(jì)添加對比度是一種強(qiáng)調(diào)重要性的好方法,并將訪問者的眼睛引導(dǎo)到屏幕上的特定元素。設(shè)計(jì)師使用大小,顏色,類型和對齊來改善設(shè)計(jì)中的對比度,使普通網(wǎng)頁看起來很有趣,提高你網(wǎng)站的訪問量為訪問者留下美好的影像。。