提高對比度對比是不同的,尤其是在實體或物體之間的強烈的不同。簡單地說,就是頁面上的兩個元素完全不同。設計師使用對比度的原因有很多。 你可以用它來:
你的設計中加入對比度可以讓它更加突出。在本文中,我們將與你分享一些使用不同類型元素來提高設計對比度的方法。 一、調(diào)整元素大小 如果你試圖使事物盡可能相似或?qū)ΨQ,那么在您的設計中創(chuàng)建一個明確的焦點可能會非常困難。具有相同尺寸,顏色和重量的元素可能最終變得不明顯。 增加設計對比度的最簡單方法之一是使一個元素比它周圍的元素更大(或更?。?。瀏覽者的眼睛自然會被對比鮮明的頁面元素所吸引,因為它看起來與他們所看到的其他元素不一樣。 例如,如果你正在設計一個登錄頁面,你會希望在折疊上方調(diào)用action按鈕,其大小要大于它周圍的標題和文本。 使元素(如圖像,文本塊,標題或按鈕)更大,超出了它的尺寸。例如,如果您正在處理標題,字體的重量也會影響其顯示的大小。雖然這句話中的文本大小明顯相同,但這部分看起來會更大一些,因為它具有更多的視覺重量。 我們來看一些例子: 二、使用紋理和圖案 紋理和圖案可以幫助你創(chuàng)建高對比度的設計時,他們的特點是顯著不同的彼此。例如,將粗糙紋理的背景與平滑的前景文本進行配對,可以增加設計的對比度。 紋理賦予設計個性。粗糙的,顆粒狀的紋理會給你的設計帶來復古的品質(zhì),而細微的噪音紋理會幫助你創(chuàng)造出一種自然的變化,類似于你在報紙上看到的那種。同樣的,照片的紋理會給你的設計帶來逼真的效果,也是另一種流行的增加對比度的方法。 以下是一些使用紋理和圖案的一些網(wǎng)站案例: 三、添加顏色 使用顏色為你的設計增加對比度是非常有效的。最好的部分是有幾種不同的方法去做它。你可以對比暗色調(diào)和淺色,色相和/或色溫。 與明暗顏色對比是很簡單的。想想深色背景上的淺色文字或者淺色背景上的深色文字?;蛘撸阋部梢詫⒉煌恼{(diào)色板組合在一起以使用不同的顏色。 主要有三種選擇:
TripAdvisor網(wǎng)站在搜索結果中使用了三元調(diào)色板來增加一些對比 最后,你可以混合顏色溫度,尤其是暖色和冷色,來改善你設計中的對比度。紅色、橙色和黃色是暖色,而藍色、綠色和紫色是冷色。 四、注意對齊和間距 空白和文本對齊有助于建立組織結構,并在設計中創(chuàng)建視覺層次結構。例如,如果你正在設計一個包含大量內(nèi)容的頁面,那么在重要元素周圍加上空白可以幫助它們脫穎而出,并吸引訪問者的注意力。 請注意,Information Highwayman網(wǎng)站如何使用空白和文本對齊來將頁面元素分組,并創(chuàng)建一個視覺層次結構來引導讀者的視線向下瀏覽屏幕。 五、利用排版 版式對于網(wǎng)頁設計是必不可少的,它給了你很多機會來提高你的設計的對比度。具體來說,您可以添加與字體組合、樣式和權重的對比。 當您在設計中使用多個字體來實現(xiàn)對比度時,您需要確保字體對很好地組合在一起,并且在視覺上彼此不同。最流行的公式之一是使用襯線和無襯線配對。使用像Fontjoy或Type Connection這樣的工具,為你的設計找到一個好的對比鮮明的字體搭配。 通過排版提高對比度的另一個簡單方法是使用不同的字體樣式(斜體、縮寫或小帽)或字體權重(輕、普通或粗體)。例如,可以對標題使用粗體,對文本塊使用相同字體的輕型版本。 以下是一些例子: 六、添加意外的元素 意想不到的元素,如果使用得當,可以給你的設計一個平衡的對比。 盡管這種對比技巧很難掌握,但是有幾種不同的方法可以讓你開始嘗試。例如,您可以通過引入不對稱元素來打破干凈、對稱的設計?;蛘吣阋部梢栽谄渌行缘脑O計中使用明亮的顏色使它更流行。 下面是一些使用意想不到的元素添加對比度的簡單例子: 寫在最后 在你的設計中添加對比是一種很好的方式來強調(diào)什么是重要的,并將訪問者的視線引向屏幕上的特定元素。設計人員使用大小、顏色、類型和對齊來改善設計中的對比度,使普通web頁面看起來更有趣。 讓我們總結一些方法,你可以為設計添加對比的一些方法:
|