電商頁面設計 只需懂六個字

2021-06-29 05:02:01 字數 3417 閱讀 5476

這篇文章主要講和配色有關的常見的幾種搭配方式,比較偏理論。其實我剛做美工的時候對這些內容是從來不看的,感覺非常枯燥。但做了一段時間之後,再回頭看看這些內容,又是另外一種感覺。這篇文章,希望可以盡可能縮短無用枯燥的理論,簡短精幹的總結幾個方面,給大家帶來一點啟示。

一、學配色,必須先了解配色比例

日本的設計師提出過乙個配色**比例,是70:25:5,其中的70%為大面積使用的主色,25%為輔助色,5%為點綴色。一般情況下建議畫面色彩不超過3種,3種是指的3種色相,比如深紅和暗紅可以視為一種色相。

一般來說顏色用的越少越好,顏色越少畫面越簡潔,作品會顯得更加成熟,顏色越少我們越容易控制畫面。除非有特殊情況,比如一些節日類的海報等,要求畫面有一種熱鬧,活力的氛圍的,多些顏色可以畫面顯得很活躍,但是顏色越多越要嚴格按照配色比例來分配顏色,不然會使得畫面非常混亂,難以控制。

二、了解色彩的關係

色彩搭配就是不同色相之間相互呼應相互調和的過程,色彩之間的關係取決於在色相環上的位置,色相和色相之間距離的角度越近,則對比越弱,離得越遠則對比越強烈。

背下這六種色相之後,那你的配色之旅已經起步了,因為所有的顏色都可以根據這六種基礎色相來調配。這就是六字真言。下面我們來說下3種最最常見的色彩配色方式。

①相鄰色搭配

背下這六種色相之後,那你的配色之旅已經起步了,因為所有的顏色都可以根據這六種基礎色相來調配。這就是六字真言。下面我們來說下3種最最常見的色彩配色方式。

①相鄰色搭配

在色輪中挨著比較近的就是鄰近色,根據紅橙黃綠藍紫這六字順序,相鄰色搭配就是紅+橙,橙+黃, 黃+綠,綠+藍……以此類推。

相鄰色因為比較鄰近,有很強的關聯性,非常協調柔和,畫面非常和諧統一,可以製造出一種柔和溫馨的感覺,因為在色輪中位置較近所以這種搭配視覺衝擊力較弱。

幾個例子:

這兩張基本都是採用相鄰色的搭配方式,第一張還加了一筆橙色起到點綴的作用,整體畫面非常柔和協調,因此這類配色常用家居,棉織品,小清新淡雅的服裝,中國風等能給人以寧靜,柔和,傳統感覺的產品。

相近色搭配中還有一種單色系的搭配方式,採用同一色相,僅僅調整該色的明度/飽和度,得到另外一種顏色。如上圖所示,文字顏色就是用背景色降低飽和度/明度後的結果。本身背景色明度很高,又採用單色搭配手法所以會給人高雅,淡雅,寧靜的感覺。主標題的字型也配合整個畫面採用了一些變形,使得整體非常統一和諧。

七夕這張使用的藍與紫搭配,畫面寧靜和諧。旁邊這張使用的單色搭配,深藍+淺藍,畫面統一帶有一點傳統的感覺。

這張海報用的紅+橙的搭配方式,以橙色為主色調,背景中採用不同橙色增加了畫面的空間感,並且讓畫面看起來不是那麼的單調。海報中鄧超驚訝的表情,以及背景傾斜的線條和幾何方塊的點綴,漂浮的產品使得原本穩定的畫面變得活潑輕快富有衝擊力,可見海報做成什麼格調也與畫面每個組成部分都有密切的關係。

②間隔色搭配

根據紅橙黃綠藍紫這六字順序,紅+黃 ,橙+綠 ,黃+藍 ,綠+紫 , 藍+紅,因為這種搭配方式中間都隔了乙個顏色,因此稱為間隔色。

間隔色相比較相鄰色,2色之間在色輪上相隔遠一些,因此視覺衝擊力會強於相鄰色,而且間隔色使用非常廣泛,既沒有180互補色衝擊力那麼具有刺激性,又比相鄰色多了一些明快丶活潑丶對比鮮明的感覺。特別是紅黃藍三原色之間的相互搭配,應用非常廣泛,也非常流行。

幾個例子:

這張基本是很典型的藍黃間隔色搭配,畫面非常明快時尚,文字還採用了白色作為調和。藍色本身就具有一種科技的格調。這裡用藍黃白搭配再合適不過了。

這張是典型的三原色紅黃藍組合,畫面比例控制的非常好,以藍色為點綴,也採用了白色作為調和緩衝,使得畫面有一定的空間感。

紫綠搭配,很明快,略帶一絲傳統,算是一種中性的搭配方式。

紅黃百搭色,有非常搶眼的**感。

大家可以看上方這幾個的背景都不是單一顏色,比如最後這張海報,紅色背景上又加了乙個深紅色的放射性背景。第三張海報,紫色背景後面還加了一些深紫色的幾何方塊做點綴。雖然是兩個顏色,但是都屬於一種色相,這樣可以使得畫面擺脫單調的感覺,增加畫面的空間感,給人以活潑時尚的感覺。

配色一定要控制好畫面的色彩比例!

再看幾個例子:

這些海報基本都無一例外的在中新增了白色作為調和,白色和黑色都是萬能的調和色,紅藍搭配還要注意的是不能讓色彩過於均衡,一定要控制好兩色的比例,其中乙個要為主色在畫面中要佔大比例,使之產生主次關係,或者降低其中乙個顏色的明度/飽和度,產生一種明暗對比。

還需要說明一點的是:冷色在畫面中總是趨於後退,暖色是趨近,暖色很容易就可以進入人的眼簾。這點就需要大家根據畫面中重點資訊的層級自己把握了。

③互補色搭配

在色輪中相隔180的2個顏色互為補色,是色彩搭配中,對比最為強烈的顏色,沒有之一…根據紅橙黃綠藍紫這六字順序,互補色就是中間間隔2個顏色,紅+綠,橙+藍,黃+紫…

互補色搭配可以表現出一種力量,氣勢與活力,有非常強烈的視覺衝擊力,而且也是非常現代時尚的搭配。若控制的不好往往產生不協調,不含蓄,不安定的效果。

幾個例子:

互補色搭配要注意三個方面:①一定要控制好畫面的色彩比例,因為這個2個顏色放一起對抗非常激烈,所以一定要選出乙個老大當主色調,另外一方作為點綴或者輔助色。②可以降低其中一方的明度/飽和度,這樣可以產生一種明暗對比,緩衝其對抗性。③在畫面中加入黑/白作為調和色進一步緩衝其對抗的特性。

總結下本文配色方法,其實也就是記住六個字:紅橙黃綠藍紫,色相相隔越遠對比越強烈,離得越近搭配越柔和。最後是控制好畫面的色彩比例。是不是非常簡單呢?記住這6個字可以搭配出萬千種的顏色。

關於顏色搭配方法有很多,這裡只是列舉最為常見的3種。關於配色的一些名詞性的東西,大家沒有必要去糾結,引用梁景紅老師的一句話,配色是應用學科,沒必要讓理論成為學習的負擔。

設計模式 六個建立型模式

定義乙個工廠類,它可以根據引數的不同返回不同類的例項,被建立的例項通常都具有共同的父類。定義乙個用於建立物件的介面,讓子類決定例項化哪乙個類。工廠方法使乙個類的例項化延遲到其子類。提供乙個建立一系列相關或相互依賴物件的介面,而無需指定他們具體的類。保證乙個類僅有乙個例項,並提供乙個訪問它的全域性訪問...

設計模式六個基本原則

最近學習設計模式,針對所做的筆記,總結下設計模式的六個基本原則。設計根本的指導原則是提高可維護性和可復用性。這些原則主要有 開放封閉 依賴倒轉 黎克特制代換 合成 聚合復用 迪公尺特單一職責 介面隔離原則 一 開放 封閉原則 a 乙個軟體實體應該對擴充套件開放,對修改關閉。在設計乙個模組的時候,應當...

第六個設計模式 模板方法

第六個設計模式之 模板方法 模板方法模式主要是對大方法體細化 一.uml示意圖 二.組成部分1.抽象構件 2.具體構件 三.例子 我用乙個簡單的例子來說明 計算食物 1.抽象構件 packagecom.eekq.template publicabstractclassabstractfood 抽象方...