UI設(shè)計師必會的6種提高對比度的方法

　　我們對對比一定很熟悉吧，小學(xué)語文就會學(xué)到，而對比度就是一張照片調(diào)一下也會變得截然不同，我們所說的可以是黑白對比，大小對比，對比所存在的形式多樣，對比度也就有了它的意義。那么，你知道哪些UI設(shè)計師必會的提高對比度的方法呢？
 

　　事實(shí)上，對比度是最重要的設(shè)計原則之一，它也是每個設(shè)計項目中必不可少的設(shè)計要求。為什么這么說呢?控制對比度有助于設(shè)計項目的組織結(jié)構(gòu)化，建立信息和視覺的層次，讓你最重要的部分成為視覺的重心，讓關(guān)鍵信息突出展示。善于使用有對比度的設(shè)計，能增加視覺的觀賞性和趣味性。在相同的布局、相同的視覺元素中，形態(tài)和色彩的變化有時候非常單調(diào)，但是對比能讓變化顯得不同凡響。
 

　　然而，和絕大多數(shù)的設(shè)計規(guī)則一樣，平衡是對比度控制的核心規(guī)則。如果對比度反差太大，這樣的視覺設(shè)計可能是混亂而不和諧的，如果對比度不明顯，那么設(shè)計作品可能看起來單調(diào)而晦暗，毫不突出。
 

　　那么，怎么控制對比度才能真正提升設(shè)計項目的視覺效果呢?遺憾的是，你所期待的神奇公式并不存在。正如同你剛剛開始學(xué)習(xí)設(shè)計技能的時候一樣，對比度設(shè)計中的許多技巧不是非此即彼的簡單規(guī)程。但是如果你認(rèn)為它過于神秘那就錯了，對比度是成就好設(shè)計的一種規(guī)則，它還是有跡可循的，任何人都可以將它添加到設(shè)計項目中，做出優(yōu)秀的作品。

 

　　在本文中，將與你分享一些使用不同類型元素來提高設(shè)計對比度的方法。
 

　　對比是不同的，尤其是在實(shí)體或物體之間的強(qiáng)烈的不同。簡單地說，就是頁面上的兩個元素完全不同。設(shè)計師使用對比度的原因有很多。
 

　　你可以用它來：強(qiáng)調(diào)重點(diǎn)，提高可讀性，建立層次結(jié)構(gòu)，并添加一些可視化的趣味，你的設(shè)計中加入對比度可以讓它更加突出。在本文中，我們將與你分享一些使用不同類型元素來提高設(shè)計對比度的方法。
 

　　一、調(diào)整元素大小
 

　　如果你試圖使事物盡可能相似或?qū)ΨQ，那么在您的設(shè)計中創(chuàng)建一個明確的焦點(diǎn)可能會非常困難。具有相同尺寸，顏色和重量的元素可能最終變得不明顯。
 

　　增加設(shè)計對比度的最簡單方法之一是使一個元素比它周圍的元素更大(或更小)。瀏覽者的眼睛自然會被對比鮮明的頁面元素所吸引，因為它看起來與他們所看到的其他元素不一樣。
 

　　例如，如果你正在設(shè)計一個登錄頁面，你會希望在折疊上方調(diào)用action按鈕，其大小要大于它周圍的標(biāo)題和文本。
 

　　使元素(如圖像，文本塊，標(biāo)題或按鈕)更大，超出了它的尺寸。例如，如果您正在處理標(biāo)題，字體的重量也會影響其顯示的大小。雖然這句話中的文本大小明顯相同，但這部分看起來會更大一些，因為它具有更多的視覺重量。

　　我們來看這個例子：
 

　　二、使用紋理和圖案
 

　　紋理和圖案可以幫助你創(chuàng)建高對比度的設(shè)計時，他們的特點(diǎn)是顯著不同的彼此。例如，將粗糙紋理的背景與平滑的前景文本進(jìn)行配對，可以增加設(shè)計的對比度。
 

　　紋理賦予設(shè)計個性。粗糙的，顆粒狀的紋理會給你的設(shè)計帶來復(fù)古的品質(zhì)，而細(xì)微的噪音紋理會幫助你創(chuàng)造出一種自然的變化，類似于你在報紙上看到的那種。同樣的，照片的紋理會給你的設(shè)計帶來逼真的效果，也是另一種流行的增加對比度的方法。
 

　　使用紋理和圖案的案例：
 

　　Conchords網(wǎng)站演示了如何在排版中使用紋理來提高對比度。
 

　　三、添加顏色
 

　　使用顏色為你的設(shè)計增加對比度是非常有效的。最好的部分是有幾種不同的方法去做它。你可以對比暗色調(diào)和淺色，色相和/或色溫。
 

　　與明暗顏色對比是很簡單的。想想深色背景上的淺色文字或者淺色背景上的深色文字?；蛘?，你也可以將不同的調(diào)色板組合在一起以使用不同的顏色。
 

　　主要有三種選擇:
 

　　互補(bǔ)的。這些是在色輪上相對出現(xiàn)的顏色。一些例子包括紅綠，紫黃和藍(lán)橙。
 

　　拆分互補(bǔ)。這是互補(bǔ)色方案的變體。它使用基色和色輪上與其互補(bǔ)色相鄰的兩種顏色。
 

　　三元色。這些調(diào)色板包括均勻分布在色輪上的顏色，如紫綠橙。
 

　　TripAdvisor網(wǎng)站在搜索結(jié)果中使用了三元調(diào)色板來增加一些對比

 

　　最后，你可以混合顏色溫度，尤其是暖色和冷色，來改善你設(shè)計中的對比度。紅色、橙色和黃色是暖色，而藍(lán)色、綠色和紫色是冷色。
 

　　四、注意對齊和間距
 

　　空白和文本對齊有助于建立組織結(jié)構(gòu)，并在UI設(shè)計中創(chuàng)建視覺層次結(jié)構(gòu)。例如，如果你正在設(shè)計一個包含大量內(nèi)容的頁面，那么在重要元素周圍加上空白可以幫助它們脫穎而出，并吸引訪問者的注意力。
 

　　請注意，Information Highwayman網(wǎng)站如何使用空白和文本對齊來將頁面元素分組，并創(chuàng)建一個視覺層次結(jié)構(gòu)來引導(dǎo)讀者的視線向下瀏覽屏幕。

 

　　將對象分組在一起可以讓用戶知道它們是相關(guān)的，并將它們分隔成不同的部分。通過這種方式，你可以通過簡單地使用空白和對齊來實(shí)現(xiàn)設(shè)計中的對比度。
 

　　周圍的產(chǎn)品與大量的空白空間注入您的網(wǎng)頁與豪華和優(yōu)雅的感覺
 

　　五、利用排版
 

　　版式對于網(wǎng)頁設(shè)計是必不可少的，它給了你很多機(jī)會來提高你的設(shè)計的對比度。具體來說，您可以添加與字體組合、樣式和權(quán)重的對比。
 

　　當(dāng)您在設(shè)計中使用多個字體來實(shí)現(xiàn)對比度時，您需要確保字體對很好地組合在一起，并且在視覺上彼此不同。最流行的公式之一是使用襯線和無襯線配對。使用像Fontjoy或Type Connection這樣的工具，為你的設(shè)計找到一個好的對比鮮明的字體搭配。
 

　　通過排版提高對比度的另一個簡單方法是使用不同的字體樣式(斜體、縮寫或小帽)或字體權(quán)重(輕、普通或粗體)。例如，可以對標(biāo)題使用粗體，對文本塊使用相同字體的輕型版本

 

　　六、添加意外的元素
 

　　意想不到的元素，如果使用得當(dāng)，可以給你的設(shè)計一個平衡的對比。
 

　　盡管這種對比技巧很難掌握，但是有幾種不同的方法可以讓你開始嘗試。例如，您可以通過引入不對稱元素來打破干凈、對稱的設(shè)計?；蛘吣阋部梢栽谄渌行缘腢I設(shè)計中使用明亮的顏色使它更流行。
 

　　使用意想不到的元素添加對比度:

 

　　掌握了這幾種在設(shè)計中提高對比度的方法后，你會感受道在你的設(shè)計中添加對比是一種很好的方式，它能夠強(qiáng)調(diào)什么是重要的，并將訪問者的視線引向屏幕上的特定元素。設(shè)計人員使用大小、顏色、類型和對齊來改善UI設(shè)計中的對比度，就連普通web頁面也會看起來更有趣。