平面構成的設計理論,指導設計banner

有關平面構成的3個概念:

元素與元素之間的排列關系

所有元素在一起所體現的構成形式

了解幾個常用的平面術語

1、元素與元素之間的排列關系

它們之間的排列有下面這么幾種:分離/相切/重疊/透疊/結合/減缺/差疊/重疊。


分離:形與形之間不接觸,有一定距離。

相切:形與形之間的邊緣正好相切。

重疊:形與形之間覆疊關系,由此產生上下前后的空間關系。

透疊:形與形有透明性的相互交疊,但不產生上下前后的空間關系。

結合:形與形相互結合成較大的新形狀。

減缺:形與形相互覆疊,覆疊的形狀被剪掉。

差疊:形與形相互交疊,交疊的部分產生一個新的形。

重合:形與形相互重合,變為一體。

舉例

2、所有元素在一起所體現的構成形式

從所有元素(點線面)整體看,其構成形式主要有重復、近似、漸變、變異、對比、集結、發射、特異、空間與矛盾空間、分割、肌理及錯視等等。

下面我們分別來舉例說明:

(1)重復

指在同一設計中,相同的形象出現過兩次以上,重復是設計中比較常用的手法,以加強給人的印象,造成有規律的節奏感,使畫面統一。所謂相同,在重復的構成中主要是指形狀、顏色、大小等方面的相同。比如:

形狀的重復

骨骼的重復

大小的重復

色彩的重復

肌理的重復

方向的重復

舉例:

(2)近似

近似指的是在形狀、大小、色彩、肌理等方面有著共同特征,它表現了在統一中呈現生動變化的效果。近似的程度可大可小,如果近似的程度大就產生了重復感。近似程度小就會破壞統一。比如:

形狀的近似

骨骼的近似

近視舉例:臺灣的一對雙胞胎姐妹

Banner舉例:相同款式不同顏色的鞋子,大小不一的波點。

元素延展設計


(3)漸變

是我常常聽說的一種效果,在自然界中能親身體驗到,在行駛的道路上我們會感到樹木由近到遠、由大到小的漸變。比如:

形狀的漸變

方向的漸變

位置的漸變

大小的漸變

色彩的漸變

骨骼的漸變

光影的漸變

色彩的漸變舉例:故宮淘寶前段時間的表情包

舉個例子:

大小漸變舉例:故宮淘寶前段時間的表情包

舉個例子:

鞋子的排列方式。

背景的紋理形狀

(4)對比

有時候是形態上的對比,有時是色彩和質感的對比。對比可產生明朗、肯定、強烈的視覺效果,給人深刻的印象。比如:

形狀的對比

大小的對比

色彩的對比

肌理的對比

位置的對比

重心的對比

空間的對比

虛實的對比

對比舉例:買家秀和買家秀。。。

Banner舉例:

(5)密集:

密集在設計中是一種常用的組織圖面的手法,基本形在整個構圖中可自由散布,有疏有密。最疏或最密的地方常常成為整個設計的視覺焦點,他其實也是對比的一種情況,越密集的地方給人感覺距離越遠,反之越近。

點的密集

線的密集

面的密集

密集舉例:

banner舉例:

(6)發射

是一種常見的自然現象,太陽四射的光芒就是發射的。發射具有方向的規律性,發射中心為最重要的視覺焦點,所有的形象均向中心集中,或由中心散開,有時可造成光學動感,會產生爆炸的感覺,有強烈的視覺效果。

中心點的發射

螺旋式的發射

同心式的發射

發射舉例:星軌/水波/觀世音菩薩背后自帶的光環

Banner舉例:放射線,使得畫面聚焦到中間部分內容。

(7)特異

是指構成要素在有次序的關系里,有意違反次序,使少數個別的要素顯得突出,以打破規律性。

形狀的特異

大小的特異

色彩的特異

方向的特異

肌理的特異

特異舉例:其實各種類似于連連看的游戲,就是這么個原理

Banner舉例:一家人站成一排,個頭比較小的那一個就給人一種特異和俏皮的感覺,使畫面不那么單調

(8)空間

利用大小:比如近大遠小。

利用重疊:前后/上下等關系。

利用陰影:使物體具有立體感/空間感。

利用疏密:比如間隔越小,越密集,感覺就越遠。

利用透視:平行線由寬到窄。

利用色彩:冷色遠離,暖色靠近。

利用肌理:越粗糙越近,越細膩越遠。

矛盾空間:真實不存在的空間,假想的。

虛實關系:遠景/中景/近景。

矛盾空間舉例:前段時間非常流行的一款游戲《紀念碑谷》。

空間感Banner舉例:

(9)分割

把整體分成小的部分。比如:

等形分割

自由分割

比例與數量

分割舉例:來自大自然的梯田

分割Banner舉例:不同比例大小的色塊組成Banner的背景。

商品的排列也可以起到分割畫面的作用。

(10)肌理

又稱質感,由于物體的材料不同,表面的排列、組織、構造等不同,因而產生粗糙感、光滑、軟硬感。比如:

筆觸的變化

凹凸不平的肌理

噴繪/染

自帶的紋理效果

肌理舉例:木材等

肌理Banner舉例:?背景采用噴墨+涂色的方式形成了一種很時尚的紋理。


(11)錯視

因空間距離或周圍環境所造成的視覺差。主要有下面幾種:

1.繆勒—萊依爾錯視

圖中兩條線是等長的,由于上下線段兩端的箭頭方向相反,上線段的箭頭占據的空間大,所以上面的線顯的較長。

2.垂直線與水平線的錯視

大多數人往往把垂直線看的比水平線要長,這是高估的錯覺。在水平線長度為8-10mm時,這種錯覺最大。

3.透視錯視

圖中的兩條線是相等的。看起來下面的要短,是因為透視的錯覺。

4.正方形的錯視

標準的正方形左右的邊看上去大于上下的邊。

5.黑白錯視

圖中黑白線段,由于白線段明度大,具有膨脹的現象,所以看以來比黑線段長。

6.由于圖形結構的影響而產生的錯視

圖中組成三、四、五邊形的邊長都相等,但由于周長和面積的不同,產生邊長的不同。

7.對比錯視

高個子和矮個子在一起,高的會顯的越高,矮的會顯的越矮。

錯視舉例:比如虛實手繪拼接,比如有些攝影作品

這里要說明的是,錯視在一些視差動畫的網頁頁面里運用的會比較多一些,還有一些app的引導頁,這里Banner舉例的話可能也不太合適,不過也可以給大家看一下:

比如這個畫面里的黃色圓點,同樣的黃色圓點,在暗色背景上是很突出的,但在同樣是黃色的背景上就幾乎看不見了,但其實原點是沒變的,只是背景的顏色變了,就導致我們看到了不一樣的結果

原文來自:

www.woshipm.com/ucd/406308.html

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 寫在前面: 我之前說過要寫一系列專門針對電商的三大構成的文章的,而在上篇文章中我已經給大家梳理了一篇關于色彩的文章...
    做設計的面條閱讀 4,985評論 3 71
  • 前言 平面構成對設計師來說,是必備的技能。特別是對于非科班的設計師來說,沒有理論的支持,剛開始設計是比較迷茫的,別...
    夏天的米茶閱讀 17,207評論 0 35
  • 構成與圖案,構成是現代藝術,圖案是裝飾藝術,兼收并蓄 平面構成形態要素 1.平面構成形態要素——點 》漸變可產生空...
    葡萄紫耶閱讀 13,520評論 2 21
  • oc和swift建立橋接文件可幫助swift使用oc的庫文件,一般格式:XXX-Bridging-Header.h...
    滾滾貓閱讀 1,189評論 0 3
  • 是我太孤獨,還是我太悲觀,說好的事情,想了想還是拒絕了,不想當做沒事人一樣,又玩在一起,或許是馬上就要分開,所以不...
    我一直在聽閱讀 395評論 0 0