平面構(gòu)成的設(shè)計理論,指導(dǎo)設(shè)計banner

有關(guān)平面構(gòu)成的3個概念:

元素與元素之間的排列關(guān)系

所有元素在一起所體現(xiàn)的構(gòu)成形式

了解幾個常用的平面術(shù)語

1、元素與元素之間的排列關(guān)系

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


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

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

重疊:形與形之間覆疊關(guān)系,由此產(chǎn)生上下前后的空間關(guān)系。

透疊:形與形有透明性的相互交疊,但不產(chǎn)生上下前后的空間關(guān)系。

結(jié)合:形與形相互結(jié)合成較大的新形狀。

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

差疊:形與形相互交疊,交疊的部分產(chǎn)生一個新的形。

重合:形與形相互重合,變?yōu)橐惑w。

舉例

2、所有元素在一起所體現(xiàn)的構(gòu)成形式

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

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

(1)重復(fù)

指在同一設(shè)計中,相同的形象出現(xiàn)過兩次以上,重復(fù)是設(shè)計中比較常用的手法,以加強給人的印象,造成有規(guī)律的節(jié)奏感,使畫面統(tǒng)一。所謂相同,在重復(fù)的構(gòu)成中主要是指形狀、顏色、大小等方面的相同。比如:

形狀的重復(fù)

骨骼的重復(fù)

大小的重復(fù)

色彩的重復(fù)

肌理的重復(fù)

方向的重復(fù)

舉例:

(2)近似

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

形狀的近似

骨骼的近似

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

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

元素延展設(shè)計


(3)漸變

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

形狀的漸變

方向的漸變

位置的漸變

大小的漸變

色彩的漸變

骨骼的漸變

光影的漸變

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

舉個例子:

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

舉個例子:

鞋子的排列方式。

背景的紋理形狀

(4)對比

有時候是形態(tài)上的對比,有時是色彩和質(zhì)感的對比。對比可產(chǎn)生明朗、肯定、強烈的視覺效果,給人深刻的印象。比如:

形狀的對比

大小的對比

色彩的對比

肌理的對比

位置的對比

重心的對比

空間的對比

虛實的對比

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

Banner舉例:

(5)密集:

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

點的密集

線的密集

面的密集

密集舉例:

banner舉例:

(6)發(fā)射

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

中心點的發(fā)射

螺旋式的發(fā)射

同心式的發(fā)射

發(fā)射舉例:星軌/水波/觀世音菩薩背后自帶的光環(huán)

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

(7)特異

是指構(gòu)成要素在有次序的關(guān)系里,有意違反次序,使少數(shù)個別的要素顯得突出,以打破規(guī)律性。

形狀的特異

大小的特異

色彩的特異

方向的特異

肌理的特異

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

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

(8)空間

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

利用重疊:前后/上下等關(guān)系。

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

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

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

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

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

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

虛實關(guān)系:遠景/中景/近景。

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

空間感Banner舉例:

(9)分割

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

等形分割

自由分割

比例與數(shù)量

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

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

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

(10)肌理

又稱質(zhì)感,由于物體的材料不同,表面的排列、組織、構(gòu)造等不同,因而產(chǎn)生粗糙感、光滑、軟硬感。比如:

筆觸的變化

凹凸不平的肌理

噴繪/染

自帶的紋理效果

肌理舉例:木材等

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


(11)錯視

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

1.繆勒—萊依爾錯視

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

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

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

3.透視錯視

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

4.正方形的錯視

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

5.黑白錯視

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

6.由于圖形結(jié)構(gòu)的影響而產(chǎn)生的錯視

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

7.對比錯視

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

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

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

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

原文來自:

www.woshipm.com/ucd/406308.html

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,460評論 6 538
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 99,067評論 3 423
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,467評論 0 382
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,468評論 1 316
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,184評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,582評論 1 325
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,616評論 3 444
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,794評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,343評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 41,096評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,291評論 1 371
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,863評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 44,513評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,941評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,190評論 1 291
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,026評論 3 396
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,253評論 2 375

推薦閱讀更多精彩內(nèi)容

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