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