做設(shè)計(jì)的同學(xué)都知道這句話,叫做:無對(duì)比不設(shè)計(jì)。雖然很多人都知道對(duì)比在設(shè)計(jì)中的重要程度,但在工作中卻還是會(huì)出現(xiàn)前面所說的那些問題。所以本期的內(nèi)容就以對(duì)比作為切入點(diǎn),解決上面所說的問題。

首先,什么是對(duì)比?
通俗一點(diǎn)來講,對(duì)比就是一個(gè)元素與另外其他元素相互比較的設(shè)計(jì)手法,通過營造視覺元素之間的差異化,從而制造視覺沖突。

這里主要說下在使用對(duì)比手法時(shí)的誤區(qū):
1. 對(duì)比不夠明朗:這也是很多新手設(shè)計(jì)師會(huì)犯的失誤,明明使用了對(duì)比,但差異化的體現(xiàn)總是似有非有,不夠直觀。下面看個(gè)錯(cuò)誤的案例:

2. 對(duì)比缺少目的性:尤其是當(dāng)畫面元素多時(shí),這也想強(qiáng)調(diào)那也想強(qiáng)調(diào),結(jié)果導(dǎo)致畫面缺少主次關(guān)系、元素與元素之間相互搶。
對(duì)比的重點(diǎn)在于:你想要強(qiáng)調(diào)的元素是什么,就通過對(duì)比的手法讓他跟其他元素形成視覺上的明顯差異化。

你有沒有想過,在設(shè)計(jì)工作中,運(yùn)營和老板常說的:放大、標(biāo)紅、加粗具體指的是什么?
答案是:對(duì)比!
對(duì)比是不可或缺的重要設(shè)計(jì)手法之一,可以說只要是設(shè)計(jì)師,就離不開對(duì)比。那么該有人問了:對(duì)比在設(shè)計(jì)中的作用有哪些?
第一:對(duì)比是信息整理的好手段,他能讓用戶快速分別出哪些是主要信息,哪些是次要信息,提高閱讀效率。
第二:改變作品呆板、單調(diào)的視覺感受,提升畫面整體的跳躍率以及層次感。
第三:強(qiáng)烈的對(duì)比能提升視覺沖擊力,讓畫面更加生動(dòng)、有趣。
第四:對(duì)比手法還可以提升作品的出彩度,更吸引用戶眼球。

對(duì)比手法在設(shè)計(jì)中的具體表現(xiàn)形式有很多種,比如:大小、長短、粗細(xì)、顏色、材質(zhì)、形態(tài)、留白、虛實(shí)、方向、透視、圖文、文字、表情、年齡等等。

雖然說對(duì)比手法在設(shè)計(jì)中的表現(xiàn)形式多種多樣,但在作用及目的性上,很多也都是有共通性的,下面我們就以對(duì)比目的作為分類,逐一來說。

說到對(duì)比,最被人所熟知的作用就是突出主體,通俗點(diǎn)理解就是通過對(duì)比的手法讓用戶知道哪個(gè)是主角、哪些是配角。
不管是通過大小、長短、粗細(xì)、形態(tài)、色彩、形態(tài)等等不同的表現(xiàn)手法,都要確保能形成明顯的視覺差異化,讓元素之間互為參照物,舉個(gè)簡(jiǎn)單的例子:

很顯然,紅色色塊更吸引人的眼球,也更容易引起注意,因?yàn)橹車谏珘K都很雷同,沒有明顯的視覺沖突,而相反,紅色色塊與其他元素不同,差異化很強(qiáng)烈,所以這就是通過色彩對(duì)比的表現(xiàn)形式突出了主體。
這里不得不提格式塔原理:人類會(huì)無意識(shí)之中,把相同形狀或形狀、形態(tài)相似的物品看做一個(gè)整體。對(duì)比就是利用了這個(gè)原理,制造視覺差異化,突出你想突出的視覺元素。
下面看幾個(gè)類似的案例:



通過色彩對(duì)比,重點(diǎn)主體得到了凸顯,其他視覺元素保持了相對(duì)統(tǒng)一,這就是對(duì)比最基本的作用。同樣適用于其他表現(xiàn)形式:大小、促銷、長短、虛實(shí)……

其實(shí)在設(shè)計(jì)中,只要恰當(dāng)?shù)氖褂脤?duì)比手法,對(duì)于作品整體的層次感提升就有幫助,比如最簡(jiǎn)單的大小對(duì)比:

如圖所示,在層級(jí)上已經(jīng)算是有大有小、有主有次了,可以說是設(shè)計(jì)中最簡(jiǎn)單的層次感體現(xiàn)方式了。即使最簡(jiǎn)單的對(duì)比,也能體現(xiàn)出視覺上的層級(jí)關(guān)系,如果是為了提升設(shè)計(jì)作品整體的層次感,那么對(duì)比可以做的更豐富一些,比如:結(jié)合大小、虛實(shí)的對(duì)比形式,對(duì)于層次感的提升會(huì)很有幫助。

下面看兩個(gè)案例:



如圖所示,虛實(shí)對(duì)比的手法讓作品具備了一定空間上的前后遮擋關(guān)系,視覺層次上給人的感覺更加豐富、立體。
再比如我們經(jīng)常看到的產(chǎn)品場(chǎng)景圖,也很喜歡使用這種虛實(shí)對(duì)比的形式展示:

虛化的視覺元素是為了體現(xiàn)整體的層次,實(shí)物是主體,為了突出強(qiáng)調(diào)的,這樣就形成了虛實(shí)對(duì)比。
類似的案例還有:

這里需要說一點(diǎn):視覺層次感不單純指空間維度的變化,還可以通過提升整體視覺豐富度來體現(xiàn),比如下面這個(gè)案例:

如上圖案例所示,單純的看左側(cè)黑白稿,僅僅通過大小、粗細(xì)對(duì)比就讓整體在視覺上很有層次感。再看右側(cè)案例,在左側(cè)基礎(chǔ)上結(jié)合色彩對(duì)比的形式,使得整體層次感受更加豐富,而這種層次感就是通過視覺豐富度進(jìn)行體現(xiàn)的。
強(qiáng)調(diào):對(duì)比的形式不要拘泥于某一種,可以相互結(jié)合使用,這樣不管對(duì)于信息整理還是主次關(guān)系、層次感,都會(huì)起到很好的加強(qiáng)、輔助的作用。

有些時(shí)候,作品會(huì)給人感覺很平淡、枯燥,這讓很多設(shè)計(jì)師頭疼,而通過對(duì)比手法就可以改善以上問題。
首先簡(jiǎn)單的理解下跳躍率:版面上“大塊的部分”與“小塊的部分”之間的比叫做“跳躍率”,通俗一點(diǎn)來說:就是大塊與小塊之間的對(duì)比強(qiáng)度。
而對(duì)比強(qiáng)度的體現(xiàn)可以是一種或者多種。
下面看個(gè)案例:

如上圖所示,左側(cè)和右側(cè)案例從設(shè)計(jì)的角度來說都很好,只是兩者給人的感覺有些不同,左側(cè)案例給人一種相對(duì)安靜、統(tǒng)一的視覺感受。而右側(cè)案例則通過明顯的色塊分割,形成了很強(qiáng)烈的視覺沖突,使得作品整體給人的感覺更加活躍、富有跳躍性,也更有層次感。類似的案例還有:

大多數(shù)情況下可以這么理解:在視覺元素不變的情況下,對(duì)比強(qiáng)度越強(qiáng),作品的活躍度就越大,再舉個(gè)很簡(jiǎn)單的例子:

雖然文案都一樣,但兩者給人的視覺感受卻天差地別,很顯然右側(cè)作品視覺上更富有跳躍性,文字信息更有層次感。這一切都要?dú)w功于對(duì)比的手法,因?yàn)榧訌?qiáng)了對(duì)比,所以作品在視覺上給人的感受也更活躍。
當(dāng)你的作品總是給人很單調(diào)、呆板、平淡、缺少亮點(diǎn)時(shí),不妨仔細(xì)審查一遍作品有沒有做好對(duì)比?
但也要強(qiáng)調(diào):作品并不是越跳躍就越好,比如一些作品本身就是想營造一種安靜、統(tǒng)一的感覺。而像兒童節(jié)海報(bào),整體感覺活躍一些會(huì)更好。所以一定要結(jié)合最終目的進(jìn)行設(shè)計(jì)。

首先我們先來說下:設(shè)計(jì)感對(duì)于作品來說有用嗎?比如我們常說的點(diǎn)綴性的元素、英文、線條等等,其元素本身在作品中并沒有太大的含義,只是起到輔助、點(diǎn)綴的作用。
所以你可能會(huì)聽到甲方或者老板問你:為什么要加英文,誰能看懂?
除了填充空白的作用,還有個(gè)目的就是提升作品的設(shè)計(jì)感。舉個(gè)現(xiàn)實(shí)中的例子:同時(shí)有兩女生站在男生面前,一位普普通通,另一位膚白貌美大長腿,你會(huì)看誰多一眼?
人向往美好事物是天性!延伸到設(shè)計(jì)中一樣如此。
但需要注意的是:不要一味的強(qiáng)調(diào)設(shè)計(jì)感而忽略了目的性,設(shè)計(jì)感也許可以讓你原本70分的作品向90分提升,但肯定不會(huì)將50分作品提升到70分,因?yàn)槟阕罨镜亩紱]做好,談設(shè)計(jì)感就是本末倒置了。
如何更直觀的理解呢?看下面這張示例:

同樣都是以設(shè)計(jì)二字為主體,下面兩個(gè)案例就屬于過分強(qiáng)調(diào)設(shè)計(jì)感而忽略了目的性,關(guān)鍵文字的識(shí)別性高于一切設(shè)計(jì)感。而上側(cè)兩個(gè)案例,相比而言,右側(cè)在兼顧文字識(shí)別性的前提下,給人的感覺更新穎、富有層次感和設(shè)計(jì)感。
所以當(dāng)標(biāo)題性關(guān)鍵文案經(jīng)特殊處理后,與常規(guī)文字就形成了對(duì)比,可以理解為對(duì)比手法中的形態(tài)對(duì)比,下面看個(gè)案例:

如圖所示,案例就用到了文字之間肌理和大小的對(duì)比形式,不僅豐富了主次文案的層次,還間接的提升了作品整體的設(shè)計(jì)感。
類似的案例還有:

綜上所述:尤其是形態(tài)、虛實(shí)、空間、圖文、角度、位置此類的對(duì)比形式,對(duì)作品設(shè)計(jì)感的提升有很大幫助。
多數(shù)情況下,形式感強(qiáng)的對(duì)比都會(huì)依附于常規(guī)對(duì)比形式之上,也就是說先要做好基礎(chǔ),再追求設(shè)計(jì)感。要切記:設(shè)計(jì)目的高于設(shè)計(jì)感!

說到氛圍感大家并不陌生,比如:對(duì)抗、活潑、有趣、激烈等等,而常用的對(duì)比手法就有提升氛圍感的作用,比如:強(qiáng)烈的色彩對(duì)比,能體現(xiàn)出對(duì)抗、激烈、活潑的氛圍;空間位置對(duì)比能體現(xiàn)出有趣……
下面看幾個(gè)案例:



如圖所示,案例通過顏色對(duì)比的形式,即冷暖色對(duì)比,加強(qiáng)了作品整體的氛圍感和視覺沖擊力,也正因如此,使得作品給人的視覺感受更加立體。對(duì)比無處不在,往往一些很有意思的創(chuàng)意都來源于對(duì)比手法,只是呈現(xiàn)形式有所不同而已,比如:

貓與虎在形態(tài)上形成了強(qiáng)烈的對(duì)比,作品給人的感受有趣、新穎,這就是對(duì)比所帶來的氛圍感受。
類似的案例還有:

前面也說了,對(duì)比在一定程度上也能體現(xiàn)出對(duì)抗、激烈的氛圍,除了被大家所熟知的冷暖色對(duì)比外,還有哪些?下面看幾個(gè)案例:




通過位置、表情、形態(tài)的對(duì)比,也可以體現(xiàn)出激烈、對(duì)抗的氛圍感受。

通過整篇文章你會(huì)發(fā)現(xiàn),即使同樣的對(duì)比手法,有時(shí)候所帶給我們的視覺感受也各不相同,往往在強(qiáng)調(diào)某一作用時(shí),無形之中也兼顧了另外其他的作用,比如:當(dāng)對(duì)比是強(qiáng)調(diào)突出主體時(shí),也兼顧了整體層次感……
所以在工作中,我們無需刻意強(qiáng)調(diào)哪種對(duì)比形式對(duì)應(yīng)哪種作用,因?yàn)楹芏喽际腔ネǖ模鶕?jù)自己的設(shè)計(jì)目的,做到靈活使用即可。
原文地址:美工美邦(公眾號(hào))
作者:美工美邦

然而在實(shí)際的對(duì)比中,你需要從全部的項(xiàng)目上去思考,這是設(shè)計(jì)的重要原則之一。對(duì)比是為了將設(shè)計(jì)中的重要元素進(jìn)行分類整理,然后按照不同的重要階層來傳遞給讀者。設(shè)計(jì)的重點(diǎn),不僅僅是為了傳遞出焦點(diǎn)(英: Focal Point),也要給用戶帶來視覺性的趣味。相同大小的形狀,顏色按照布局并列的放在一起,可能會(huì)讓你覺得無聊。但是,如果在這之中加入對(duì)比,設(shè)計(jì)立馬就變得有趣起來了。
當(dāng)然很多的設(shè)計(jì)概念是相同的,平衡對(duì)于對(duì)比來說也是非常重要的。如果對(duì)比度太高,做成之后就變得混亂,視線就不能馬上落在重要的東西上了。
那么,靈活運(yùn)用對(duì)比的秘密究竟是什么呢?令人悲傷的是,并沒有那樣完美的魔法公式。就像學(xué)習(xí)設(shè)計(jì)技巧一樣,學(xué)習(xí)的過程往往是無意識(shí)的積累案例的過程。這是設(shè)計(jì)師們所擁有的不可思議的力量,所以千萬不要放棄。我們可以將與對(duì)比有關(guān)的項(xiàng)目情報(bào)進(jìn)行整理,為了加上視覺的趣味性,成為誰都可以利用的設(shè)計(jì)工具。這需要有哪些需要注意的點(diǎn)與技術(shù)呢?這次就讓我們一起來看一看吧。
詳細(xì)從以下開始。
讓設(shè)計(jì)增加對(duì)比的方法。

值(英: Value)是指,色彩的亮度或者暗度的表示用語。使用白色和黑色,可以做成無數(shù)的對(duì)比值(英: Contrasting Value)。但是,當(dāng)作成對(duì)比度強(qiáng)的設(shè)計(jì)時(shí),也就沒有必要使用黑色和白色了。通過調(diào)整色彩的明暗度來增強(qiáng)對(duì)比使設(shè)計(jì)中的一部分變得可見是最簡(jiǎn)單的技術(shù)之一。
在下面的這個(gè)設(shè)計(jì)案例中,在照片上配上文字會(huì)使其變得難以閱讀,在白色的文字上添加紫色到藍(lán)色的漸變色,就成了一個(gè)很好的對(duì)比。


色相,色調(diào)(英:Hue)是指,在從很久以前就開始使用的12色色輪中,所選擇的特定的顏色名稱的繪畫用語。但是這種色彩的原理,不管是繪畫還是網(wǎng)頁設(shè)計(jì),都可以去利用他。不知道從什么世紀(jì)開始,為了創(chuàng)建出對(duì)比的組合,畫家們就開始利用色輪上的對(duì)比色了。
1.互補(bǔ)色(英: Complementary):他指的是選擇色輪上面對(duì)面的那一組顏色,例如紅和綠,藍(lán)和橙?;パa(bǔ)色的特點(diǎn)是高對(duì)比度,所以如何掌握顏色之間的平衡,也就成了難點(diǎn)。
在下面的設(shè)計(jì)案例中,使用了簡(jiǎn)單的互補(bǔ)色,他看起來非常的有吸引力,他將圖像中的各種情報(bào)都整理的很好,是非常具有實(shí)際意義的設(shè)計(jì)案例。

2.分散互補(bǔ)色(英: Split-Complementary):他只的是選中主色之后,分布在主色對(duì)面的互補(bǔ)色兩側(cè)相鄰的顏色。這種配色有較強(qiáng)的視覺對(duì)比,可以設(shè)計(jì)出有著強(qiáng)烈碰撞的設(shè)計(jì)效果。
3.三色系(英: Triadic):他指的是選中主色后,以主色畫一個(gè)等邊三角形的配色方案。
當(dāng)你在使用色輪進(jìn)行設(shè)計(jì)時(shí),我們要有“沒必要只是用純色”這樣的念頭。在越來越多的實(shí)踐中,不斷的去嘗試提高降低顏色的明度和各種各樣的顏色組合,來表現(xiàn)出最棒的對(duì)比效果吧。

所有的顏色都是有溫度的,他可以被分為暖色(英: Warm)、冷色(英: Cool)或者中性色(英: Neutral)。紅色、橙色或者黃色會(huì)給人溫暖的感覺,而藍(lán)色、綠色則會(huì)給人冷的感覺,黑和白就給人中性的感覺(還有些不常見的米色和茶色,也歸屬這一類。),顏色就按這樣來進(jìn)行劃分。利用顏色的溫度的不同來進(jìn)行配色,例如暖色和冷色進(jìn)行組合,可以給人一種巨大的反差。
就好像下面這個(gè)設(shè)計(jì)案例,使用鮮艷的藍(lán)色和黃色這樣不同的色溫,在網(wǎng)頁布局上實(shí)現(xiàn)了對(duì)比。像這樣,Call−to−Action(行為召喚:http://cued.xunlei.com/log046)將按鈕與背景區(qū)分出來,產(chǎn)生引人注意的效果。更進(jìn)一步來說,什么樣的顏色被稱為寒色(呈綠色的色調(diào):英: ‘Greenish’ Tinge)等,已經(jīng)有一個(gè)統(tǒng)一的對(duì)比的組合。


顏色的濃度(英: The Intensity of A Color),也被稱為色彩飽和度(英: Saturation)。純粹明亮的顏色,他的飽和度狀態(tài)就是100%;越是接近灰色,他的飽和度也就越低。明亮的色調(diào)和黑色一起使用的話,就能產(chǎn)生特別的引人注意的效果。在設(shè)計(jì)中可以作為一個(gè)特別的組成部分,為了強(qiáng)調(diào)出重要的部分,一定要謹(jǐn)慎的使用。
在下面的這個(gè)設(shè)計(jì)案例中,可以使用降低了飽和度的橙紅色,將其放置在山頂同樣降低了飽和度的綠色上。利用互補(bǔ)色組合(英:Complementary Color Scheme),通過調(diào)整色彩的飽和度來吸引眼球,為你的設(shè)計(jì)賦予更多的活力。


大多數(shù)圖形(英: Shape),是可以被分類為具有幾何意義的幾何圖形(英: Geometric)(例如長方形,三角形和圓形),或者不規(guī)則(英: Organic)(流線型(英: Fluid)或者受自然影響的形狀(英:Nature-Inspired))。在均勻?qū)ΨQ的幾何圖形的角落,使用一些柔和的非對(duì)稱(英: Asymmetrical Quality)的不規(guī)則圖形,可以進(jìn)行很好的對(duì)比。
下面的這個(gè)設(shè)計(jì)案例,在復(fù)雜抽象的(英: Abstract)有機(jī)圖片中,我們可以看到,很好的插入了強(qiáng)調(diào)排版的直線和曲線,他們補(bǔ)充的位置非常好。


在使用圖形幫助設(shè)計(jì)的另一個(gè)方法,就是利用邊框。在任何設(shè)計(jì)要素中,比如按鈕,就可以使用銳角邊(英: Edges)或者是曲線邊(英: Corner)。按鈕的形狀越柔軟,圓滑,給人的視覺效果就越友好。角的形狀越是整齊,給人的感覺就越是嚴(yán)肅。(參考:http://www.jianshu.com/p/f575891409c8)通過兩種不同的形狀,我們可以創(chuàng)建一個(gè)對(duì)比。在下面這個(gè)設(shè)計(jì)案例中,我們可以看到很好的利用了銳角和曲線進(jìn)行排版,表現(xiàn)出了一種驚人的對(duì)比感。


圖片相同,設(shè)計(jì)的要素不同,例如使用紋理(英: Textures),對(duì)比的效果也就出來了。粗糙(英: Rough)與細(xì)致(英: Smooth),硬(英:Hard)與軟(英: Soft),立體(英: Raised)與平面(英: Flat)等。作為特殊的打印加工,紋理和別的技術(shù)不同,可以應(yīng)用于任何內(nèi)容。通過使用網(wǎng)絡(luò)上免費(fèi)的素材,可能性是非常廣闊的。
在下面這個(gè)案例中,在清爽的LOGO上,添加上砂質(zhì)紋理(英: Gritty),表現(xiàn)出一種復(fù)古的質(zhì)感。粗糙質(zhì)感的紋理和復(fù)古的顏色,是為了表現(xiàn)出復(fù)古氛圍的最佳選擇。


對(duì)比不僅可以增加視覺趣味,也可以幫助我們展現(xiàn)相關(guān)聯(lián)的設(shè)計(jì)要素的優(yōu)先級(jí)。如果設(shè)計(jì)要素的尺寸相同,就無法表現(xiàn)出他們的層級(jí)(英: Hierachy)關(guān)系。不管是怎樣的讀者,我們都需要將重要的東西優(yōu)先傳達(dá)給他們。有效的利用比例(英: Scale),在實(shí)踐中不僅非常重要,在添加動(dòng)態(tài)布局設(shè)計(jì)中,也是非常簡(jiǎn)單的一種技術(shù)。
在下面這個(gè)設(shè)計(jì)案例中,使用了被擴(kuò)展的非常大的照片作為雜志封面,也不會(huì)對(duì)其他的設(shè)計(jì)要素進(jìn)行干擾。實(shí)際上,通過調(diào)整大小,形狀和配色、版式,可以強(qiáng)調(diào)出照片的焦點(diǎn)部分。


在比例和尺寸相同的情況下,利用視覺重量(英: Visual Weight)【http://uec.nq.com/works/176】就可以將設(shè)計(jì)中重要的部分給凸顯出來了。在視覺重量中,將那個(gè)元素與剩余的元素進(jìn)行顯著的區(qū)分,這種方法我們稱之為高對(duì)比度(英: High-Contrast)。被視覺重量所采用的設(shè)計(jì)要素,沒有必要是最大的。此外,通過使用紋理。配色和圖形等,給他一種【重(英: Weighty)】的印象,也能做出有魅力的設(shè)計(jì)。
在下面的設(shè)計(jì)案例中,是介紹在美國辛辛那提,有著當(dāng)?shù)匚幕瘹庀⒌慕ㄖ拿餍牌?。?dāng)然,建筑在明信片中是最大的設(shè)計(jì)要素,但關(guān)鍵詞“Enjoy more”卻更能吸引眼球。這當(dāng)然是因?yàn)?,他的顏色是最暗(? Darkest)的。


在有限的空間中,為了最大化的填入信息,我們常利用填補(bǔ)式的設(shè)計(jì),但留白或者空白(英: Blank),負(fù)(英: Negative)空間等方法,將設(shè)計(jì)要素進(jìn)行區(qū)分/整理,做成一個(gè)平衡的布局,也是非常重要的。當(dāng)然,如果你在設(shè)計(jì)時(shí)使用了很多復(fù)雜的布局,在設(shè)計(jì)重要的要素時(shí)就要記得留白。通過這種方法,你可以將用戶的時(shí)間集中到重要的要素上,從而和其他的要素產(chǎn)生有效的對(duì)比。
在下面的這個(gè)設(shè)計(jì)案例中,留白和細(xì)邊框線相結(jié)合,我們就完成了將網(wǎng)頁信息精辟概括的設(shè)計(jì)模型。在左右上下進(jìn)行了適當(dāng)?shù)牧舭?,在產(chǎn)品信息中也利用了留白,引起了用戶的興趣。


當(dāng)你開始做設(shè)計(jì)時(shí),需要有一定的布局的概念。那么,如何讓設(shè)計(jì)變得平衡而不枯燥,動(dòng)而不亂,想明白了這點(diǎn),作品就會(huì)變得非常有魅力。我們可以從舊時(shí)代的藝術(shù)家和攝影師身上來學(xué)習(xí)構(gòu)圖的方法。
①.三分割法(英: The rule of thirds):也是老生常談的一種方法。有時(shí)也稱作井字構(gòu)圖法,是一種在攝影、繪畫、設(shè)計(jì)等藝術(shù)中經(jīng)常使用的構(gòu)圖手段。在這種方法中,攝影師需要將場(chǎng)景用兩條豎線和兩條橫線分割,就如同是書寫中文的“井”字。這樣就可以得到4個(gè)交叉點(diǎn),然后再將需要表現(xiàn)的重點(diǎn)放置在4個(gè)交叉點(diǎn)中的一個(gè)即可。
下面的這個(gè)設(shè)計(jì)案例中,作為banner的圖片就利用了三分割法,將玫瑰放在了重要的地方,是一種非常方便均衡的構(gòu)圖方法。

②.對(duì)角(英: Diagonals):對(duì)角線或S形布局,可以給你的設(shè)計(jì)賦予一些流動(dòng)感(英: Flow),幫助誘導(dǎo)用戶的視線。相較于正常的網(wǎng)格布局,它可以給你的設(shè)計(jì)帶來更多的樂趣。

介紹這個(gè)合成效果方法的一個(gè)理由是,讓用戶對(duì)這個(gè)要素期望不大。利用適當(dāng)?shù)脑O(shè)計(jì)手法,賦予要素驚奇的感覺,從而產(chǎn)生對(duì)比。設(shè)計(jì)是一個(gè)自然的主題,通過添加上鮮艷流動(dòng)的色彩,打破之前固有的規(guī)則,從而引起讀者的興趣。
在下面這個(gè)設(shè)計(jì)案例中,將文字和照片上的山組合在一起,將邊框隱藏在山后而資卻放在山前,非常簡(jiǎn)單,且易于理解。


在設(shè)計(jì)戰(zhàn)略上,通過不斷重復(fù)(英: Repeating)利用設(shè)計(jì)要素和圖案素材,創(chuàng)建一個(gè)視覺焦點(diǎn),會(huì)產(chǎn)生與上圖的合成技術(shù)類似的視覺效果。此外,通過不斷的重復(fù)利用主題本身,你就能完成更好的設(shè)計(jì)。
在下面這個(gè)設(shè)計(jì)案例中,通過重復(fù)利用圖案,讓文字成為焦點(diǎn),很好的完成了平衡。在設(shè)計(jì)上成功的反應(yīng)出了,和LOGO相呼應(yīng)的效果。


無論哪種設(shè)計(jì),控制信息結(jié)構(gòu)(英: Struction)是很有必要的。在文字或設(shè)計(jì)要素上,通過一定的編排,確保有留白的空間。整理你的設(shè)計(jì),讓他具有一致性(英: Consistency),然后我們?cè)儆心康牡娜ゴ蚱?、混合,從而引起用戶的興趣。
在下面的這個(gè)設(shè)計(jì)案例中,LOGO的設(shè)計(jì)使用了稍微沿著對(duì)角線稍稍向上傾斜,這立刻將它與其他沿直線分布的要素區(qū)別出來了。另外,通過使用和其他印刷字體有顯著區(qū)別的手寫體,進(jìn)一步的提高了對(duì)比度。


將你的設(shè)計(jì)要素進(jìn)行整理,有目的的將要素進(jìn)行分組,讓要素之間的關(guān)聯(lián)性變得易懂,使其更容易的引導(dǎo)用戶。同樣的,將沒有關(guān)聯(lián)的要素分離獨(dú)立出來,讓用戶易于了解,他們是不同的兩個(gè)信息。此外,利用對(duì)比,還能將要素的數(shù)量表示出來。例如,在大量的設(shè)計(jì)要素中,單獨(dú)存在的要素肯定會(huì)脫穎而出。
下面這個(gè)設(shè)計(jì)案例,是使用了大量文字的個(gè)人簡(jiǎn)歷設(shè)計(jì),良好的結(jié)構(gòu)(英: Structure)會(huì)便于閱讀。在這里,利用了接近(英: Proximity),對(duì)齊(英: Align)和配色技術(shù)相結(jié)合,將信息進(jìn)行劃分,誘導(dǎo)視線,使之更容易閱讀。


根據(jù)最近的一項(xiàng)研究,人類記住的東西80%都是看到的,在這之中,優(yōu)秀的設(shè)計(jì)也是幫助記憶的強(qiáng)大工具之一。但是要注意的是觀看的時(shí)間其實(shí)是很短的,引導(dǎo)用戶的視線,就顯得很有必要了。在這種情況下,好的視覺提示(英: Visual Cues),能起到不錯(cuò)的作用。我們可以直截了當(dāng)?shù)氖褂眉^標(biāo)記希望用戶看到的要素,或者在它周圍畫個(gè)圈,來進(jìn)行強(qiáng)調(diào)。
在下面的設(shè)計(jì)案例中,在文字下面使用了下劃線(英: Underline),著重號(hào)(英: Bullet Points)和圖標(biāo),可以看出是很好的利用了視覺化的概念。


復(fù)雜(英: Complex)或簡(jiǎn)單(英: Simple),利用這些個(gè)別的要素,可以進(jìn)一步強(qiáng)化對(duì)比。在下面這個(gè)設(shè)計(jì)案例中,成功的利用了貼紙?jiān)O(shè)計(jì)技術(shù),通過在鮮花背景上放置一個(gè)清爽的白板,將文字與周圍進(jìn)行區(qū)分,讓設(shè)計(jì)發(fā)生了急劇的變化。


在版式設(shè)計(jì)中,這是必不可少的設(shè)計(jì)要素,你可以用這種獨(dú)特的方式來增加對(duì)比。事實(shí)上,在這篇文章中所涵蓋的技術(shù)中,都可以應(yīng)用到版式設(shè)計(jì)中。但在使用字體組合或這自己創(chuàng)建一個(gè)自定義的字體時(shí),有特別需要注意的幾點(diǎn)。
那么接下來我們來看一下在字體設(shè)計(jì)上最后需要注意的三點(diǎn)。首先,是字體組合(英: Combining Fonts)。當(dāng)使用一種以上的字體時(shí),良好的對(duì)比,是確保其成功的關(guān)鍵;當(dāng)標(biāo)題使用了,就不要將他再次使用在正文中了。如果標(biāo)題和正文的字體太過相似,就會(huì)讓用戶變得混亂。這也是非常容易犯的一個(gè)錯(cuò)誤。
另一個(gè)經(jīng)驗(yàn),可以選擇一種襯線(英: Serif)字體一種無襯線(英: Sans Serif)字體。這種組合不但能互補(bǔ),也是一種非常好的對(duì)比效果。至于其他的字體組合技術(shù),你們可以參考這篇文章【http://photoshopvip.net/78213】【http://www.digitaling.com/articles/12293.html】,我就不進(jìn)行詳細(xì)的講解了。


在字體組合中,使用設(shè)計(jì)性區(qū)別很大的字體非常容易導(dǎo)致失敗。除非你有意去這樣設(shè)計(jì),否則就會(huì)非常難看。由字體的組合,可以決定設(shè)計(jì)的好壞。將各種各樣的字體組合記錄到你的筆記本中,不斷的練習(xí)吧。字體組合這項(xiàng)技能,你可以利用電腦去摸索各種各樣的組合,總有一天會(huì)掌握的(英: Second Nature)。
在下面的這個(gè)設(shè)計(jì)案例中,利用不同的字體營造了一個(gè)非常有趣的氛圍,類似YES/NO形式的流程圖。值得參考的地方是,字體的區(qū)別(英: Loud)不是很大,一直保持著平衡。通過有目的的巧妙編排,表現(xiàn)出了很棒的設(shè)計(jì)。


很多字體,都有著類似Light、Bold這樣廣泛的自定義范圍。就算你只用一種字體來設(shè)計(jì),都可以產(chǎn)生很多種不同的對(duì)比,讓我們的設(shè)計(jì)變得更輕松。除了不同的重量,大小和配色方案,你能強(qiáng)調(diào)的對(duì)比有很多種。
在下面這個(gè)設(shè)計(jì)中,使用了粗和細(xì)兩種無襯線字體,給人一種洗練的感覺。實(shí)際上襯線字體作為客串也被使用了,進(jìn)一步的增加了對(duì)比感。

這些都是從過去的經(jīng)驗(yàn)之中誕生的,非常實(shí)用的可以增加對(duì)比度的設(shè)計(jì)方法。那么,讓我們一起在實(shí)踐中去嘗試這些方法吧~一起來感受設(shè)計(jì)的樂趣~
Via: Lofter
]]>