東莞設計分享:色彩層級的設計技巧

日期:2016年10月12日 來源:本站原創 標簽: 瀏覽:

  怎么樣設計才能讓整體的設計作品給人系統的流暢性呢?往往很多設計師的作品看起來不銜接、很突兀,這是什么原因呢?大家首先想到的一定是配色問題。

 

  配色確實是設計流暢性的關鍵點,今天東莞設計的小編帶大家分享色彩層級的技巧。

 

  提高層次感的3個方法:

 

  一,Banner 圖的色彩分解

 

  這部分我會著重說的比較多,因為在后面的網頁和APP當中都會有涉及,而且當了解的大概的原理后看到后面自然也就會很容易的明白了。

 

  A、主產品美觀突出型

 

  首先從汽車類Banner 圖開始說起吧!因為這算是一大類,如:“汽車、奢侈品、高級音響……”,甚至是模特、演員相關的設計原理也大都如此,就是需要宣傳推廣的產品本身忒漂亮。

 

uisdc-color-201609071
     

  上面的這3張圖,算是汽車中的高端車型和一個高爾夫奢侈品,其實想一想看過的大部分高端(貴貴貴)的產品設計大都是這種風格。這里面說的貴是相對的,就好像哈根達斯幾個雪球100多元,也算奢侈了!

 

  1、因為產品本身已經非常精美,所以文字大都用白色或灰黑做輔助(根據底色來定)

 

  2、為了最大化產品優勢,文字所占空間也相對較小,且多用系統字體(因為不搶眼)

 

  3、背景多數選擇實景,且接近產品本身色系,要么君臨天下的大場景、要么卓爾不凡的近距離

 

  當然了,無論汽車還是奢侈品,他們也都有更加細分的市場和投放渠道,如汽車的高端車、家庭型、運動型、白領代步……所以在設計中會根據產品不同的市場方向進行規劃。我們做任何設計也都是如此,所以在每次接到設計任務的時候一定一定要和需求方溝通清楚具體方向。

 

uisdc-color-201609072
     

  上面這幾個圖就是青年運動型咯,用動感的背景來表達“看我動力十足,快來一起撒野”

 

  下面這幾張圖很明顯是為了表現繽紛生活,愉快出行的生活狀態!畫面背景色和產品本身有較大反差,這樣依然是最大化的突出了我們的宣傳目的。

 

  當最終還是開始說的那樣,當產品(美女帥哥也是哦!)本身足夠美觀的時候,一定要最大化突出產品本身,信息只是作為輔助,層級排在商品之后。

 

  B、產品展示型

 

  當然這個也是我們最常見的設計圖,并且更新頻率更快(想起來都夠了是不是),電商里面最常見的就是這類圖,這時候就需要在文字字形色彩、背景色彩或輔助元素上多做一點設計排列了……

 

uisdc-color-201609074
     

  這一組還是以產品本身突出為主,輔助以文字信息介紹

 

  1、文字占空間略大,和背景反差色彩較大置于后景(↖左側兩張)

 

  2、文字占據空間偏小,且字體較細視覺感不強烈,置于前景(右側兩張↗)

 

  3、這些常規性產品推廣,他們都把背景色接近了產品本身色系(減淡或加深后突出前景)

 

  尤其是走長線宣傳的產品,盡可能要有常規推廣型和事件型(促銷、新功能)兩種模式做區別

 

  C、標題突出型

 

  韓國也是有暴力型促銷Banner出現的,不過相對比還是清晰些,這里還要說下天貓官方設計,現在的設計也都是很贊了,本人也是經常看的內心驚嘆。

 

uisdc-color-201609075
     

  上面幾張圖的特點幾乎都是一樣的:

 

  1、標題占據前景,且占據空間大

 

  2、色彩與背景色做較大反差

 

  3、讓背景色和產品本身色系接近,且明暗度也略接近,目的是增加產品氛圍渲染,但削弱產品本身視覺沖擊,把標題最大化

 

  D、產品展示、標題點睛

 

  好像看了上面的讓我自己都覺得,不就是突出產品就是產品占的空間大然后還在前景,突出文字就是文字占的空間大置于前景么?!多簡單點事兒啊……其實好像……也就是這樣咯,但我還是找了點例外如下

 

uisdc-color-201609076
     

  1、把背景色接近產品(弱化產品本身),文字顏色和背景較大明暗度和色相反差,突出文字(左上↖)。

 

  2、把文字組模塊化、圖形化,可以用會話氣泡、框線、標簽……能讓文字作為一個整體突出,然后這個整體和背景色有較大的反差!

 

  這樣做的優點就是你的圖要看起來是促銷,而不是廉價!

 

  二,網頁的色彩分解

 

  單張的設計圖說了一大堆,下面把網頁部分盡可能的說的簡單一點咯!

 

  A、首屏引導型

 

  這類型的網站或網頁是我們看到的大部分網頁設計類型,多數是以公司或產品LOGO的主色系進行色彩延續,在頁面需要突出重點的地方,他們選用首屏的主色調,輔以黑白灰或在加一個臨近色(點綴使用)

 

  這類型的網頁設計不需要做太多介紹,隨便點開兩個網站就有一個這樣咯!

 

  如果非要說要點,那就是設計整體頁面的時候劃分好你的重要信息分級,不要在同一屏內出現過多重要信息,那樣無論信息還是主色彩,你一定會流失一樣才能保住頁面美感.

 

  B、單底色、多色彩型

 

  這類型設計多出現于宣傳活動頁,由于需要展現的內容較多,甚至多線(品類)展示,所以在不同屏次間做不同色系區分,但詳細文字的基礎色的黑白灰盡量不變,這樣才能穩定整個頁面。

 

  1、不同頁面用不同色系來做區分,前提一定要保持色彩在同一級明度、飽和度范圍

 

  2、主推產品色彩反差和空間最大化(↖左上)

 

  3、前景都用那么多色彩了,背景當然是黑白色系咯

 

  C、色彩對比型

 

  這類型網頁不那么常見,多出現在對陣游戲、競技賽事、電影傳播、時間軸展示頁,常見的色彩多為紅V藍、紅V黑、藍V綠、青V粉……還有一個特點就是,這類型頁面多為敘述性排列信息

 

  這里只說一個重點就是,這類型頁面大都要有較好的圖才行,要么攝影圖片、要么游戲原畫、至少要有精致的圖標……沒有怎么辦,去搜圖、去畫圖標啊。

 

  三,色彩在APP中的分級應用

 

  設計公司的小編寫到這我的內心是崩潰的,這個坑挖的太大了,居然來分析APP的色彩運用,簡直就是作啊……

 

  第二次崩潰下載了一個看起來漂亮的韓國應用CongKong,然后……用不了,于是我只好用國內一小撮文藝青年和一大部分偽文藝青年聚集的豆瓣來叨叨叨了!

 

  當我自己看完了豆瓣的設計后,還是恨贊嘆的,心想我啥時候能做的這么好啊(又一波馬屁拍的真棒)!他們的APP當中色彩確實也很有系統分級性了,甚至是在版本迭代后的閃屏圖都保留了整體的色彩傳承,此處給予掌聲啊!

 

  寫在此處,整個A部分大家看不看都行(都是廢話),因為大部分APP都是走這種主色系統形式。

 

  A、主頁面的色彩分析

 

  從首次安裝時的啟動閃屏、啟動頁、節日閃屏,豆瓣已經把主色系展現

 

uisdc-color-2016090710
     

  1、主色系(明度飽和度)用手寫方式展現

 

  2、輔助色黃色同時并行出現

 

  3、無論Hello、還是小插畫都把清新風表現出來和豆瓣的主色系形成呼應

 

  本文由源素品牌設計網站分享:/

上一篇:東莞設計分享:今年流行的設計元素   下一篇:東莞設計分享:12個包裝設計要領

品牌觀點 Brand Article
東莞設計分享:今年流行的設計元素2016-10-12
東莞設計分享:色彩層級的設計技巧2016-10-12
東莞設計分享:12個包裝設計要領2016-10-12
東莞設計分析:UI設計要做什么?2016-10-12
東莞設計分享:視覺設計的6個技巧2016-10-12
東莞設計分享:怎么吸引用戶?2016-10-12
東莞設計分析:美食網頁設計的技巧2016-10-12
東莞設計分析:引導用戶跟著“套路2016-10-12
行業動態 News
埃及旅游公司Directions企業形象2016-10-12
餐廳創意廣告vi設計2016-10-12
災難題材電影海報設計欣賞2016-10-12
聯系我們 Contact Us

Add / 東莞市東城區東城南路東升大廈308-310
E-mail / [email protected]
Tel / 0769-22107010
微博 / http://www.92533723.com
品牌咨詢專用QQ / 1979716627
官網 / http://www.92533723.com

源素品牌-致力于幫助客戶塑造影響力品牌

免費電話

QQ客服

球探网篮球即时比分nba