2017-2-21 用心設(shè)計(jì)
如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里
來(lái)源:圖冀網(wǎng)
說(shuō)起專業(yè),小編學(xué)的是平面設(shè)計(jì),后來(lái)慢慢轉(zhuǎn)到了網(wǎng)頁(yè)設(shè)計(jì),這么多年過(guò)去了,小編用蟬知系統(tǒng)也是給多個(gè)行業(yè)領(lǐng)域的客戶定制了諸多的網(wǎng)站。所以今天小編來(lái)給大家分享一下怎么將平面設(shè)計(jì)的一些知識(shí)運(yùn)用到網(wǎng)頁(yè)設(shè)計(jì)當(dāng)中去。
形式美法則是人類(lèi)在創(chuàng)造美的形式和過(guò)程中對(duì)美的形式規(guī)律的總結(jié)概括,世間萬(wàn)物的美都可以用形式美法則來(lái)概括。在平面構(gòu)成中也有形式美法則:統(tǒng)一和變化,對(duì)稱和平衡,節(jié)奏和韻律,對(duì)比和調(diào)和。小編曾給大家介紹《寫(xiě)給大家看的設(shè)計(jì)書(shū)》這本書(shū),書(shū)中作者也概括了設(shè)計(jì)四大基本原則,分別是:對(duì)比、重復(fù)、對(duì)其和親密性。平面構(gòu)成的形式美法則和Robin在書(shū)中概括出的設(shè)計(jì)四大原則中都包含了對(duì)比,這兩者所表達(dá)的內(nèi)容是一樣的,可見(jiàn)對(duì)比在設(shè)計(jì)中的重要性。
一個(gè)網(wǎng)頁(yè)是由很多個(gè)不同元素構(gòu)成的,這些元素的重要性都不同,有些元素需要特別突出、有些元素彼此之間存在著聯(lián)系,而另外的元素之間則一點(diǎn)關(guān)聯(lián)性都沒(méi)有。如何去平衡元素中的等同和不同的元素特性,就顯得特別重要,因?yàn)槿绻荒軐⑦@些元素在一個(gè)畫(huà)面當(dāng)中協(xié)調(diào)處理,這個(gè)畫(huà)面便變得突兀。對(duì)比就是兩個(gè)或更多個(gè)元素之間的不同。通過(guò)對(duì)比,設(shè)計(jì)師就可以創(chuàng)造出視覺(jué)趣味性,同時(shí)引導(dǎo)用戶的注意力。
常見(jiàn)的對(duì)比有這么多的表現(xiàn)形式:
1) 色調(diào)上的明暗對(duì)比、冷暖對(duì)比等;
2) 形狀上的大小對(duì)比、方圓對(duì)比、粗細(xì)對(duì)比、長(zhǎng)短對(duì)比等;
3) 方向上的垂直對(duì)比、水平對(duì)比、傾斜對(duì)比等;
4) 數(shù)量上的疏密對(duì)比等;
5) 圖片上的虛實(shí)對(duì)比、黑白對(duì)比等;
6) 事物的動(dòng)靜對(duì)比等。
對(duì)比的表現(xiàn)形式比較多,今天小編先來(lái)跟大家分享一下網(wǎng)頁(yè)界面當(dāng)中的——色彩對(duì)比。
不同的顏色可以表達(dá)不同的感受,顏色上的對(duì)比也有很多,這個(gè)跟色彩構(gòu)成有很大的關(guān)系。顏色對(duì)比主要分色相對(duì)比、明度對(duì)比和純度對(duì)比。
色相即各類(lèi)顏色色彩的相貌稱謂,任何黑白灰以外的顏色都有色相的屬性。如朱紅、普藍(lán)、檸檬黃等。色相是色彩的首要特征,是區(qū)別各種不同色彩的最準(zhǔn)確的標(biāo)準(zhǔn)。
明度指的就是色彩的亮度。比如:深黃、中黃、淡黃、檸檬黃等,這些黃顏色在明度上就不一樣。顏色有深淺、明暗的變化,這些顏色在明暗、深淺上的不同變化,也就是色彩的明度變化。
純度指的是色彩的鮮艷和深淺程度。純度是色彩鮮艷度的判斷標(biāo)準(zhǔn),純度最高的色彩就是原色,隨著純度的降低,色彩就會(huì)變暗、變淡。
一、色相對(duì)比。兩種以上色彩組合后,由于色相差別而形成的色彩對(duì)比效果稱為色相對(duì)比。它是色彩對(duì)比的一個(gè)根本方面,其對(duì)比強(qiáng)弱程度取決于色相之間在色相環(huán)上的距離(角度),距離(角度)越小對(duì)比越弱,反之則對(duì)比越強(qiáng)。
根據(jù)色相環(huán)可以看出色環(huán)上的顏色是多豐富多彩,隨意抽取兩個(gè)顏色,都能形成不一樣的對(duì)比。因此色相對(duì)比又分很多,有補(bǔ)色對(duì)比、對(duì)比色對(duì)比、鄰近色相對(duì)比等等。
1、互補(bǔ)色對(duì)比
在色相環(huán)的組成中,相隔 180 度的色彩我們稱之為互補(bǔ)色:紅與綠互補(bǔ),黃與紫互補(bǔ)而藍(lán)色與橙色互補(bǔ)?;パa(bǔ)色的對(duì)比效果強(qiáng)烈、眩目、響亮、極有力,但也需要慎用,因?yàn)槭褂貌划?dāng)易產(chǎn)生幼稚 、原始、粗俗、不安定、不協(xié)調(diào)等不良感覺(jué)。
Orangina這個(gè)網(wǎng)站就是巧妙的運(yùn)用了藍(lán)色和橙色互補(bǔ)色的對(duì)比,設(shè)計(jì)者在顏色的輕重上做了很好的拿捏,整個(gè)網(wǎng)站以藍(lán)色為主,橙色為輔,加上適當(dāng)?shù)陌咨珌?lái)削弱橙色的對(duì)比,界面顯得效果醒目和有沖擊力。
如果加大界面橙色部分會(huì)變成怎樣呢?
可以看到,當(dāng)橙藍(lán)各占一半的時(shí)候,這時(shí)候的對(duì)比是最強(qiáng)烈的,也是最容易讓觀看的人產(chǎn)生不舒服的感受。當(dāng)減少橙色的比重,增加藍(lán)色的比重時(shí),這種不舒服感會(huì)隨之減少,當(dāng)兩者顏色比重差距越大時(shí),你會(huì)覺(jué)得這個(gè)對(duì)比效果很明顯且不會(huì)讓你產(chǎn)生不適感。除了更改顏色的比重來(lái)讓對(duì)比色相互統(tǒng)一之外,還可以通過(guò)增加一兩個(gè)顏色來(lái)增加界面的協(xié)調(diào)性,起到過(guò)渡統(tǒng)一的作用。Orangina這個(gè)網(wǎng)站就增加了白色來(lái)協(xié)調(diào)整個(gè)畫(huà)面,白色的出現(xiàn)雖然只是點(diǎn)綴的作用,但是的確讓整個(gè)界面更加的協(xié)調(diào)。
2、鄰近色相對(duì)比
鄰近色對(duì)比好理解一些,好比黃色跟橙色可以稱為鄰近色,草綠和果綠也可稱為鄰近色。色相環(huán)上相鄰的二至三色對(duì)比,色相距離大約30度左右,為弱對(duì)比類(lèi)型。鄰近色相對(duì)比效果感覺(jué)柔和、和諧、雅致、文靜,但也會(huì)讓人感覺(jué)單調(diào)、模糊、乏味、無(wú)力,所以必須調(diào)節(jié)明度差來(lái)加強(qiáng)效果。
Dotfusion設(shè)計(jì)公司這個(gè)網(wǎng)站整體采用橙色調(diào),里面的一些方格也用到鄰近色來(lái)協(xié)調(diào),但這樣鄰近色之間也形成了微弱的對(duì)比關(guān)系。整個(gè)界面最大的亮點(diǎn)就是左上角logo的地方,用了一個(gè)白色做底色來(lái)調(diào)和界面,接著用了一個(gè)藍(lán)綠色的色塊來(lái)點(diǎn)綴畫(huà)面,使得整個(gè)色塊和橙色形成鮮明的對(duì)比,但又和整個(gè)橙色界面可以協(xié)調(diào)的融在一起。
小編把藍(lán)綠色的區(qū)別稍微處理了一下,改成同個(gè)色系的,可以看出這個(gè)界面的沖擊力也變?nèi)趿恕?/span>在網(wǎng)頁(yè)的界面設(shè)計(jì)當(dāng)中,我們的確可以學(xué)習(xí)這種鄰近色對(duì)比,當(dāng)這種對(duì)比不夠明顯時(shí),可以嘗試加入一些對(duì)比色來(lái)提高整體的沖擊力。
3、對(duì)比色對(duì)比
色相對(duì)比距離約120度左右,為強(qiáng)對(duì)比類(lèi)型,要比鄰近色相對(duì)比鮮明、強(qiáng)烈、飽滿。豐富,容易使人興奮激動(dòng)和造成視覺(jué)以及精神的疲勞。如黃綠與紅紫色對(duì)比等,但是顏色之間協(xié)同統(tǒng)一的工作也比較難做。這種對(duì)比不容易單調(diào),但一般需要采用多種調(diào)和手段來(lái)改善對(duì)比效果,不然就容易產(chǎn)生雜亂和過(guò)分刺激的效果。
Tymbark飲料這個(gè)界面采用了紅、黃、綠的這三種對(duì)比色對(duì)比,界面效果清新明快。
界面雖然用了紅黃綠三種豐富的顏色來(lái)表現(xiàn),但是這個(gè)界面在調(diào)和這塊做得很好??梢钥吹浇缑嫔系狞S色是占面積是最大的,設(shè)計(jì)者降低了黃色的明度,使得整個(gè)黃色不會(huì)特別突兀。中間的綠色純度比較高,雖然顏色的面積不大,但凸顯了整個(gè)網(wǎng)站的主題顏色。右邊的紅色部分其實(shí)是整個(gè)畫(huà)面最小占比的,但是設(shè)計(jì)者在顏色的純度和明度上也做了一定的調(diào)整,使得整個(gè)紅色不會(huì)很耀眼。整體來(lái)說(shuō)這個(gè)界面將紅黃綠這三種顏色協(xié)調(diào)的統(tǒng)一在一起還是很成功的,既能表現(xiàn)明快的主題,又不會(huì)讓觀者產(chǎn)生不適感。小編點(diǎn)贊!
4、零度對(duì)比
零度對(duì)比其實(shí)也分了幾塊,比如無(wú)彩色對(duì)比、無(wú)彩色與有彩色的對(duì)比、同種色相對(duì)比和無(wú)彩色與同種色相比四種,這塊只要理解下無(wú)彩色的概念即可。
無(wú)彩色指的就是沒(méi)有色相的顏色,前面小編說(shuō)的顏色都有色相,但黑白灰這三種是沒(méi)有色相的,所以也被稱為無(wú)彩色。
無(wú)彩色對(duì)比:如黑與白 、黑與灰、中灰與淺灰,或黑與白與灰、黑與深灰與淺灰等。
無(wú)彩色與有彩色的對(duì)比:如黑與黃、白與藍(lán)等。
同種色相對(duì):如藍(lán)與淺藍(lán)(藍(lán)+白)色對(duì)比,橙與咖啡(橙+灰)或綠與粉綠(綠+白)與墨綠(綠+黑)色等對(duì)比。
無(wú)彩色與同種色相比:如白與深藍(lán)與淺藍(lán)、黑與桔與咖啡色等對(duì)比。
無(wú)彩色雖然無(wú)色相,但它們的組合在實(shí)用方面很有價(jià)值。下面小編給大家簡(jiǎn)單舉兩個(gè)例子:
NewsTech設(shè)計(jì)公司這個(gè)網(wǎng)站采用了無(wú)彩色的對(duì)比,整個(gè)界面都是用了黑白灰來(lái)表現(xiàn),一般這種界面都會(huì)顯得比較冷酷和個(gè)性,但看久了也會(huì)覺(jué)得有點(diǎn)單調(diào)。這個(gè)界面在黑白灰的處理上做得特別好,通常只用黑白灰來(lái)表現(xiàn)主題難度很大,因?yàn)閷?duì)于界面的黑白關(guān)系不好掌握,也不好凸顯主次關(guān)系,但這個(gè)界面真是小編覺(jué)得推薦的一個(gè),界面的主次關(guān)系很明顯,在點(diǎn)線面的處理上可以看出設(shè)計(jì)者花了不少心思。
MINI 5-DOOR HATCH這個(gè)網(wǎng)頁(yè)就是采用了無(wú)彩色和有彩色的對(duì)比,整體畫(huà)面色彩對(duì)比特別明顯,容易彰顯個(gè)性和主題。黑色的底色、白色的字體和灰色logo,無(wú)彩色的黑白灰都運(yùn)用到了。有彩色選用了藍(lán)色,比較明亮,也跟產(chǎn)品的顏色相呼應(yīng)。在整個(gè)畫(huà)面當(dāng)中,倘若沒(méi)有藍(lán)色出現(xiàn),畫(huà)面會(huì)變得枯燥單調(diào),加入藍(lán)色之后,整個(gè)畫(huà)面鮮活起來(lái)了。
二、明暗對(duì)比。
兩種以上色相組合后,由于明度不同而形成的色彩對(duì)比效果稱為明度對(duì)比。它是色彩對(duì)比的一個(gè)重要方面,是決定色彩方案感覺(jué)明快、清晰、沉悶、柔和、強(qiáng)烈、朦朧與否的關(guān)鍵。
可以看到,明度變化里面也有低中高明度區(qū)分的。
POCARI SWEAT這個(gè)網(wǎng)站就是采用了藍(lán)色的明暗對(duì)比來(lái)設(shè)計(jì)的,在這個(gè)界面當(dāng)中,右邊的深藍(lán)色顯得比較穩(wěn)重,左邊導(dǎo)航部分采用一個(gè)明亮的藍(lán)色,左右兩邊形成了鮮明的對(duì)比,這樣的界面穩(wěn)重中又帶著輕快,視覺(jué)效果也比較好。
三、純度對(duì)比。
純度指的就是飽和度,檸檬黃的純度是比較高的,當(dāng)加入一點(diǎn)紅色之后就變成橙色,因而檸檬黃和橙色就形成了純度上的對(duì)比。兩種以上色彩組合后,由于純度不同而形成的色彩對(duì)比效果稱為純度對(duì)比。它是色彩對(duì)比的另一個(gè)重要方面,但因其較為隱蔽、內(nèi)在,故易被忽略。在色彩設(shè)計(jì)中,純度對(duì)比是決定色調(diào)感覺(jué)華麗、高雅、古樸、粗俗、含蓄與否的關(guān)鍵。
純度變化里面也有低中高純度區(qū)分。
ALIVE2013年活動(dòng)這個(gè)網(wǎng)站在整個(gè)色系的把握上特別好。整個(gè)高純度的綠底到墨綠色的山脈,都可以體現(xiàn)出純度的對(duì)比。
后面的純度和明度可能比較容易混淆,純度指的是顏色的飽和度,明度指的是顏色的明暗程度,這樣說(shuō)可能比較好區(qū)分。關(guān)于色彩對(duì)比在網(wǎng)頁(yè)當(dāng)中的應(yīng)用,小編就給大家分析這三大點(diǎn)。色彩構(gòu)成的內(nèi)容涉及的比較廣,小編也只選擇了其中幾個(gè)有代表性的跟大家分享,這幾點(diǎn)是我這么多年在給蟬知客戶做定制網(wǎng)站的過(guò)程中總結(jié)出來(lái)的。如果你想更深入了解更多色彩對(duì)比相關(guān)的知識(shí),小編覺(jué)得你可以買(mǎi)兩本色彩書(shū)籍去學(xué)習(xí)一下。學(xué)無(wú)止境,希望大家可以相互學(xué)習(xí),共同進(jìn)步,加油吧設(shè)計(jì)師們!
藍(lán)藍(lán)設(shè)計(jì)( www.miumiuwan.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.miumiuwan.com