說起專業(yè),小編學(xué)的是立體設(shè)計,后來漸漸轉(zhuǎn)到了網(wǎng)頁設(shè)計,這麼多年過來了,小編用蟬知零碎也是給多個行業(yè)范疇的客戶定制了諸多的網(wǎng)站。所以明天小編來給大家分享一下怎樣將立體設(shè)計的一些知識運用到網(wǎng)頁設(shè)計當中去。
方式美規(guī)律是人類在發(fā)明美的方式和進程中對美的方式規(guī)律的總結(jié)概括,人間萬物的美都可以用方式美規(guī)律來概括。在立體構(gòu)成中也無形式美規(guī)律:一致和變化,對稱戰(zhàn)爭衡,節(jié)拍和韻律,比照和諧和。小編曾給大家引見《寫給大家看的設(shè)計書》這本書,書中作者也概括了設(shè)計四大根本準繩,辨別是:比照、反復(fù)、對其和密切性。立體構(gòu)成的方式美規(guī)律和Robin在書中概括出的設(shè)計四大準繩中都包括了比照,這兩者所表達的內(nèi)容是一樣的,可見比照在設(shè)計中的重要性。
一個網(wǎng)頁是由很多個不同元素構(gòu)成的,這些元素的重要性都不同,有些元素需求特別突出、有些元素彼此之間存在著聯(lián)絡(luò),而另外的元素之間則一點關(guān)聯(lián)性都沒有。如何去均衡元素中的同等和不同的元素特性,就顯得特別重要,由于假如不能將這些元素在一個畫面當中協(xié)調(diào)處置,這個畫面便變得突兀。比照就是兩個或更多個元素之間的不同。經(jīng)過比照,設(shè)計師就可以發(fā)明出視覺興趣性,同時引導(dǎo)用戶的留意力。
罕見的比照有這麼多的表現(xiàn)方式:
1) 色彩上的明暗比照、冷暖比照等;
2) 外形上的大小比照、方圓比照、粗細比照、長短比照等;
3) 方向上的垂直比照、程度比照、傾斜比照等;
4) 數(shù)量上的疏密比照等;
5) 圖片上的真假比照、彩色比照等;
6) 事物的動態(tài)比照等。
比照的表現(xiàn)方式比擬多,明天小編先來跟大家分享一下網(wǎng)頁界面當中的——顏色比照。
不同的顏色可以表達不同的感受,顏色上的比照也有很多,這個跟顏色構(gòu)成有很大的關(guān)系。顏色比照次要分色絕對比、明度比照和純度比照。
色相即各類顏色顏色的容顏稱謂,任何彩色灰以外的顏色都有色相的屬性。如朱紅、普藍、檸檬黃等。色相是顏色的首要特征,是區(qū)別各種不同顏色的最精確的規(guī)范。
明度指的就是顏色的亮度。比方:深黃、中黃、淡黃、檸檬黃等,這些黃顏色在明度上就不一樣。顏色有深淺、明暗的變化,這些顏色在明暗、深淺上的不同變化,也就是顏色的明度變化。
純度指的是顏色的艷麗和深淺水平。純度是顏色艷麗度的判別規(guī)范,純度最高的顏色就是原色,隨著純度的降低,顏色就會變暗、變淡。
一、色絕對比。兩種以上顏色組合后,由于色相差異而構(gòu)成的顏色比照效果稱爲色絕對比。它是顏色比照的一個基本方面,其比照強弱水平取決于色相之間在色相環(huán)上的間隔(角度),間隔(角度)越小比照越弱,反之則比照越強。
依據(jù)色相環(huán)可以看出色環(huán)上的顏色是多豐厚多彩,隨意抽取兩個顏色,都能構(gòu)成不一樣的比照。因而色絕對比又分很多,有補色比照、比照色比照、臨近色絕對比等等。
1、互補色比照
在色相環(huán)的組成中,相隔 180 度的顏色我們稱之爲互補色:紅與綠互補,黃與紫互補而藍色與橙色互補?;パa色的比照效果激烈、眩目、嘹亮、極無力,但也需求慎用,由于運用不當易發(fā)生老練 、原始、粗鄙、不安寧、不協(xié)調(diào)等不良覺得。
Orangina這個網(wǎng)站就是巧妙的運用了藍色和橙色互補色的比照,設(shè)計者在顏色的輕重上做了很好的拿捏,整個網(wǎng)站以藍色爲主,橙色爲輔,加上適當?shù)陌咨珌頊p弱橙色的比照,界面顯得效果醒目和有沖擊力。
假如加大界面橙色局部會變成怎樣呢?
可以看到,當橙藍各占一半的時分,這時分的比照是最激烈的,也是最容易讓觀看的人發(fā)生不舒適的感受。當增加橙色的比重,添加藍色的比重時,這種不舒適感會隨之增加,當兩者顏色比重差距越大時,你會覺得這個比照效果很分明且不會讓你發(fā)生不適感。除了更改顏色的比重來讓比照色互相一致之外,還可以經(jīng)過添加一兩個顏色來添加界面的協(xié)調(diào)性,起到過渡一致的作用。Orangina這個網(wǎng)站就添加了白色來協(xié)調(diào)整個畫面,白色的呈現(xiàn)雖然只是裝點的作用,但是確實讓整個界面愈加的協(xié)調(diào)。
2、臨近色絕對比
臨近色比照好了解一些,好比黃色跟橙色可以稱爲臨近色,草綠和果綠也可稱爲臨近色。色相環(huán)上相鄰的二至三色比照,色相間隔大約30度左右,爲弱比照類型。臨近色絕對比效果覺得柔和、調(diào)和、俗氣、文靜,但也會讓人覺得單調(diào)、模糊、有趣、有力,所以必需調(diào)理明度差來增強效果。
Dotfusion設(shè)計公司這個網(wǎng)站全體采用橙色彩,外面的一些方格也用到臨近色來協(xié)調(diào),但這樣臨近色之間也構(gòu)成了微弱的比照關(guān)系。整個界面最大的亮點就是左上角logo的中央,用了一個白色做底色來諧和界面,接著用了一個藍綠色的色塊來裝點畫面,使得整個色塊和橙色構(gòu)成鮮明的比照,但又和整個橙色界面可以協(xié)調(diào)的融在一同。
小編把藍綠色的區(qū)別略微處置了一下,改成同個色系的,可以看出這個界面的沖擊力也變?nèi)趿?。在網(wǎng)頁的界面設(shè)計當中,我們確實可以學(xué)習(xí)這種臨近色比照,當這種比照不夠分明時,可以嘗試參加一些比照色來進步全體的沖擊力。
3、比照色比照
色絕對比間隔約120度左右,爲強比照類型,要比臨近色絕對比鮮明、激烈、豐滿。豐厚,容易使人興奮沖動和形成視覺以及肉體的疲勞。如黃綠與紅紫色比照等,但是顏色之間協(xié)同一致的任務(wù)也比擬難做。這種比照不容易單調(diào),但普通需求采用多種諧和手腕來改善比照效果,不然就容易發(fā)生蕪雜和過火安慰的效果。
Tymbark飲料這個界面采用了紅、黃、綠的這三種比照色比照,界面效果清爽明快。
界面雖然用了紅黃綠三種豐厚的顏色來表現(xiàn),但是這個界面在諧和這塊做得很好。可以看到界面上的黃色是占面積是最大的,設(shè)計者降低了黃色的明度,使得整個黃色不會特別突兀。兩頭的綠色純度比擬高,雖然顏色的面積不大,但凸顯了整個網(wǎng)站的主題顏色。左邊的白色局部其實是整個畫面最小占比的,但是設(shè)計者在顏色的純度和明度上也做了一定的調(diào)整,使得整個白色不會很耀眼。全體來說這個界面將紅黃綠這三種顏色協(xié)調(diào)的一致在一同還是很成功的,既能表現(xiàn)明快的主題,又不會讓觀者發(fā)生不適感。小編點贊!
4、零度比照
零度比照其實也分了幾塊,比方無黑色比照、無黑色與有黑色的比照、同種色絕對比和無黑色與同種色相比四種,這塊只需了解下無黑色的概念即可。
無黑色指的就是沒有色相的顏色,后面小編說的顏色都有色相,但彩色灰這三種是沒有色相的,所以也被稱爲無黑色。
無黑色比照:如黑與白 、黑與灰、中灰與淺灰,或黑與白與灰、黑與深灰與淺灰等。
無黑色與有黑色的比照:如黑與黃、白與藍等。
同種色絕對:如藍與淺藍(藍+白)色比照,橙與咖啡(橙+灰)或綠與粉綠(綠+白)與墨綠(綠+黑)色等比照。
無黑色與同種色相比:如白與深藍與淺藍、黑與桔與咖啡色等比照。
無黑色雖然無色相,但它們的組合在適用方面很有價值。上面小編給大家復(fù)雜舉兩個例子:
NewsTech設(shè)計公司這個網(wǎng)站采用了無黑色的比照,整個界面都是用了彩色灰來表現(xiàn),普通這種界面都會顯得比擬冷漠和特性,但看久了也會覺得有點單調(diào)。這個界面在彩色灰的處置上做得特別好,通常只用彩色灰來表現(xiàn)主題難度很大,由于關(guān)于界面的彩色關(guān)系不好掌握,也不好凸顯主次關(guān)系,但這個界面真是小編覺得引薦的一個,界面的主次關(guān)系很分明,在點線面的處置上可以看出設(shè)計者花了不少心思。
MINI 5-DOOR HATCH這個網(wǎng)頁就是采用了無黑色和有黑色的比照,全體畫面顏色比照特別分明,容易彰顯特性和主題。黑色的底色、白色的字體和灰色logo,無黑色的彩色灰都運用到了。有黑色選用了藍色,比擬亮堂,也跟商品的顏色相照應(yīng)。在整個畫面當中,假使沒有藍色呈現(xiàn),畫面會變得單調(diào)單調(diào),參加藍色之后,整個畫面鮮活起來了。
二、明暗比照。
兩種以上色相組合后,由于明度不同而構(gòu)成的顏色比照效果稱爲明度比照。它是顏色比照的一個重要方面,是決議顏色方案覺得明快、明晰、活躍、柔和、激烈、朦朧與否的關(guān)鍵。
可以看到,明度變化外面也有低中拙劣度區(qū)分的。
POCARI SWEAT這個網(wǎng)站就是采用了藍色的明暗比照來設(shè)計的,在這個界面當中,左邊的深藍色顯得比擬穩(wěn)重,右邊導(dǎo)航局部采用一個亮堂的藍色,左右兩邊構(gòu)成了鮮明的比照,這樣的界面穩(wěn)重中又帶著輕快,視覺效果也比擬好。
三、純度比照。
純度指的就是飽和度,檸檬黃的純度是比擬高的,當參加一點白色之后就變成橙色,因此檸檬黃和橙色就構(gòu)成了純度上的比照。兩種以上顏色組合后,由于純度不同而構(gòu)成的顏色比照效果稱爲純度比照。它是顏色比照的另一個重要方面,但因其較爲蔭蔽、內(nèi)在,故易被疏忽。在顏色設(shè)計中,純度比照是決議色彩覺得華美、庸俗、古樸、粗鄙、宛轉(zhuǎn)與否的關(guān)鍵。
純度變化外面也有低中高純度區(qū)分。
ALIVE2013年活動這個網(wǎng)站在整個色系的掌握上特別好。整個高純度的綠底到墨綠色的山脈,都可以表現(xiàn)出純度的比照。
前面的純度和明度能夠比擬容易混雜,純度指的是顏色的飽和度,明度指的是顏色的明暗水平,這樣說能夠比擬好區(qū)分。關(guān)于顏色比照在網(wǎng)頁當中的使用,小編就給大家剖析這三大點。顏色構(gòu)成的內(nèi)容觸及的比擬廣,小編也只選擇了其中幾個有代表性的跟大家分享,這幾點是我這麼多年在給蟬知客戶做定制網(wǎng)站的進程中總結(jié)出來的。假如你想更深化理解更多顏色比照相關(guān)的知識,小編覺得你可以買兩本性彩書籍去學(xué)習(xí)一下。學(xué)無盡頭,希望大家可以互相學(xué)習(xí),共同提高,加油吧設(shè)計師們!
Copyright 2005-2024 ? UCI All Rights Reserved
聯(lián)合創(chuàng)智北京vi設(shè)計公司 版權(quán)所有
總監(jiān)微信咨詢 舒先生
業(yè)務(wù)咨詢 張小姐
業(yè)務(wù)咨詢 付小姐