寫在前面

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

你可以用它來(lái):

• 強(qiáng)調(diào)重點(diǎn)
• 提高可讀性
• 建立層次結(jié)構(gòu)
• 并添加一些可視化的趣味

你的設(shè)計(jì)中加入對(duì)比度可以讓它更加突出。在本文中，我們將與你分享一些使用不同類型元素來(lái)提高設(shè)計(jì)對(duì)比度的方法。

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

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

增加設(shè)計(jì)對(duì)比度的最簡(jiǎn)單方法之一是使一個(gè)元素比它周圍的元素更大（或更小）。瀏覽者的眼睛自然會(huì)被對(duì)比鮮明的頁(yè)面元素所吸引，因?yàn)樗雌饋?lái)與他們所看到的其他元素不一樣。

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

使元素（如圖像，文本塊，標(biāo)題或按鈕）更大，超出了它的尺寸。例如，如果您正在處理標(biāo)題，字體的重量也會(huì)影響其顯示的大小。雖然這句話中的文本大小明顯相同，但這部分看起來(lái)會(huì)更大一些，因?yàn)樗哂懈嗟囊曈X重量。

我們來(lái)看一些例子：

二、使用紋理和圖案

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

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

以下是一些使用紋理和圖案的一些網(wǎng)站案例:

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

三、添加顏色

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

與明暗顏色對(duì)比是很簡(jiǎn)單的。想想深色背景上的淺色文字或者淺色背景上的深色文字?；蛘撸阋部梢詫⒉煌恼{(diào)色板組合在一起以使用不同的顏色。

主要有三種選擇:

• 互補(bǔ)的。這些是在色輪上相對(duì)出現(xiàn)的顏色。一些例子包括紅綠，紫黃和藍(lán)橙。
• 拆分互補(bǔ)。這是互補(bǔ)色方案的變體。它使用基色和色輪上與其互補(bǔ)色相鄰的兩種顏色。
• 三元色。這些調(diào)色板包括均勻分布在色輪上的顏色，如紫綠橙。

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

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

四、注意對(duì)齊和間距

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

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

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

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

五、利用排版

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

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

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

以下是一些例子:

六、添加意外的元素

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

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

下面是一些使用意想不到的元素添加對(duì)比度的簡(jiǎn)單例子:

寫在最后

在你的設(shè)計(jì)中添加對(duì)比是一種很好的方式來(lái)強(qiáng)調(diào)什么是重要的，并將訪問(wèn)者的視線引向屏幕上的特定元素。設(shè)計(jì)人員使用大小、顏色、類型和對(duì)齊來(lái)改善設(shè)計(jì)中的對(duì)比度，使普通web頁(yè)面看起來(lái)更有趣。

讓我們總結(jié)一些方法，你可以為設(shè)計(jì)添加對(duì)比的一些方法：

• 在你的設(shè)計(jì)中使用大大小小的元素來(lái)建立視覺層次，讓用戶知道什么是重要的。
• 在背景和排版中使用紋理和圖案，使它們突出。
• 添加顏色使頁(yè)面元素流行。
• 利用空白包圍重要元素，注意對(duì)齊。
• 使用對(duì)比鮮明的字體組合來(lái)搭配排版。
• 添加意想不到的元素，在你的設(shè)計(jì)中引入驚喜元素。

原文地址：secretstache

譯文地址：小阿田的設(shè)計(jì)筆記（公眾號(hào)）

作者：Written by Rich Staats

譯者：小阿田