“點線面”在電商視覺設計中的實際運用

【導讀】以前我所理解的海報一般就是背景、產品、文案這幾部分組成,後來接觸了一些設計知識,原來

從設計的角度來看,所有的設計作品都可以理解為是點線面組成的。 今天把之前所瞭解的知識做個總結~~本文的案例來源於花瓣採集。總結此文前閱讀過的書籍《網店視覺營銷》《版式設計法則》還有阿門和豪斯大神在站酷的相關文章等等。

電商美工 | “點線面”在電商視覺設計中的實際運用

點線面之間的關係是相對的,不是絕對的。

電商美工 | “點線面”在電商視覺設計中的實際運用

在重複一遍,點線面之間的關係是相對的,不是絕對的,這個畫面中:

A比較B,A是面,B是點。 F比較B,F是面,B是點。

小時候剛學素描時候老師講過一句話,點連成線,線連成面,這句話也是最近猛然又想起的,直到現在發現原來設計與素描有很多相通之處……在上面這個畫面中,C比較B,C是線,B還是點。B多了連成了C,C多了連成為E。

知道上面這些有什麼用嗎?我感覺卵用不是太大……大致瞭解下就可以,至少現在我是這麼認為的……主要還是看知道這個玩意對我們有什麼幫助…

電商美工 | “點線面”在電商視覺設計中的實際運用

上圖中的點線面很好區分,圖中的模特以及中間的大三角形可以理解為“面”背景中的小三角形可以理解為“點”,背景上的線條裝飾可以理解為“線”。

電商美工 | “點線面”在電商視覺設計中的實際運用

點的元素在電商設計中主要存在的意義就是點綴活躍畫面,烘托氛圍,豐富畫面!點在畫面中常見的表現元素有:綠葉、花瓣、玻璃、火花、幾何色塊、碎石等等添加點元素的時候

注意近實遠虛,近大遠小的以及疏密的對比等。

綠葉與花瓣

電商美工 | “點線面”在電商視覺設計中的實際運用

玻璃碎片(這個可以下載玻璃筆刷)

電商美工 | “點線面”在電商視覺設計中的實際運用

火花

電商美工 | “點線面”在電商視覺設計中的實際運用

幾何碎片

電商美工 | “點線面”在電商視覺設計中的實際運用

彩片、金幣、紅包(常見於扁平化風格)

電商美工 | “點線面”在電商視覺設計中的實際運用

點元素的選用主要是要契合畫面的氛圍,使用可以配合主題的點元素,當然點元素絕不止上面幾種,下圖中的圓形標籤也可以理解為”點“。

電商美工 | “點線面”在電商視覺設計中的實際運用

下圖中的手錶,眼鏡,箱子都可以理解為“點”,契合海報的主題箱包會場。

電商美工 | “點線面”在電商視覺設計中的實際運用

下圖中的綠葉、小鳥都可以理解為”點“,配合營造一個早春的主題

電商美工 | “點線面”在電商視覺設計中的實際運用

大家看看有”點“和沒有”點“畫面是什麼樣子?是不是少了很多氣氛。

電商美工 | “點線面”在電商視覺設計中的實際運用

電商美工 | “點線面”在電商視覺設計中的實際運用

線的存在意義,渲染畫面,引導或分割畫面元素,串聯畫面中的元素

電商美工 | “點線面”在電商視覺設計中的實際運用

線做為背景用來渲染畫面,最常見基本兩種,一種是放射性的線,一種是45°的斜線放射性線有很強視覺衝擊。45°斜線會有一種失衡帶來的運動感,和視覺活力。運用的時候需要注意線條的粗細和長短對比。

電商美工 | “點線面”在電商視覺設計中的實際運用

線條在文案中配合色塊可以起到分割畫面信息的作用,讓文案更有條理。有時候也起引導指向作用,就整個畫面而言,文案也可以理解為“線”,比如漢字下面的幾行英文小字,它們的存在可以很好的增加畫面的細膩感和逼格。如下圖

電商美工 | “點線面”在電商視覺設計中的實際運用

線條在畫面中也有引導指向作用,串聯信息的作用,如下圖

電商美工 | “點線面”在電商視覺設計中的實際運用

面一般是畫面中的主角,在電商海報中一般就是指產品了。除了產品之外的面,在設計中面元素還經常起到組合信息,分割畫面的作用。

電商美工 | “點線面”在電商視覺設計中的實際運用

一些常見的首頁基本都是通過色塊也就是“面”來組合畫面,需要注意的是面與面之間要通過不同的排列來靈活對比。

電商美工 | “點線面”在電商視覺設計中的實際運用

不得不提現在非常常見的幾何色塊元素,不規則幾何元素讓畫面背景不再單調,同時讓畫面增加現代時尚感,同時讓畫面也有層次和活力。

電商美工 | “點線面”在電商視覺設計中的實際運用

背景採用不同形狀切割畫面,可以與產品配合,加些投影營造畫面的前後層次感,同時也讓畫面富有活力和動感。

電商美工 | “點線面”在電商視覺設計中的實際運用

你能看出下面海報中的“點線面”嗎?

電商美工 | “點線面”在電商視覺設計中的實際運用

電商美工 | “點線面”在電商視覺設計中的實際運用

電商美工 | “點線面”在電商視覺設計中的實際運用

電商美工 | “點線面”在電商視覺設計中的實際運用

- END -

電商經

知識分享 好貨嚴選 人才合作


分享到:


相關文章: