电竞比分网-中国电竞赛事及体育赛事平台

分享

點/線/面的形式研究

 evenho 2018-01-25

“依賴于對藝術(shù)單個的精神考察,這種元素分析是通向作品內(nèi)在律動的橋梁?!薄呶骼铩た刀ㄋ够╓assily Kandinsky)《點、線、面》

Image title


Image title


設(shè)計的過程,或者形式的探討,始終繞不開的就是對于點線面的研究,看下平面構(gòu)成的定義:視覺元素在二次元的平面上,按照美的視覺效果,力學(xué)的原理,進行編排和組合,它是以理性和邏輯推理來創(chuàng)造形象、研究形象與形象之間的排列的方法,是理性與感性相結(jié)合的產(chǎn)物。任何在設(shè)計中呈現(xiàn)的元素,我們都可以歸納到點線面的范疇,然后就是對其三者的反復(fù)組合排列,形成設(shè)計語言,形式,美感。核心:元素與元素之間的排列關(guān)系,進而所有元素在一起所體現(xiàn)的構(gòu)成形式。


像下圖所示,點線面最終形成了結(jié)構(gòu)——設(shè)計作品中的秩序,這是一種支架,所有元素在此骨架上有序排列。


Image title





Image title


體積小、分散、遠的、運動;大空間對比下小的、密集的


Image title



點的變化


Image title


點在畫面中存在,通過大小,虛實,濃淡,多少的關(guān)系變化,都會影響視覺感受的強弱。這些變化可以形成線也可以形成面,或者依舊是點的變化。


Image title


原點的大與小,虛與實,濃與淡。

相比紅色,黃色是淡;

同為紅色,漸變?yōu)樘摚?/span>



總結(jié):

1.有對比就有點

2.點不是單獨存在的

3.點用來豐富畫面和層次





Image title


線具有位置。它是點的移動軌跡,是面與面的交界。


Image title

線的變化


Image title


線的存在表現(xiàn)形式是微妙的,點的密集形成的運動軌跡可以視為線,不同顏色的面形成交界也可以存在線。同時線足夠短時,又可以變化為點,線的加粗又轉(zhuǎn)化為面。因此,點線面不是絕對存在的,是相對存在。


下面重點闡述線的兩個重要特質(zhì),無形的線有形的線。



無形的線

我認為這點尤為重要,其實一幅運營設(shè)計作品,基本上都包括圖像和文字,而文字本身在畫面中可以理解為點,通過這些點的組合,詞組和句子就形成了線(文字的長度、高度),很多時候就是這些線決定了畫面的核心。

為什么我們經(jīng)常排版起來難看,就是因為沒有粗細、長短的對比。


Image title


字形成隱形的線;

不同大小,粗細,顏色的組合,形成線的粗細變化,分割畫面,進而形成有序的節(jié)奏;


視線

無形的線中還有一種很重要的表現(xiàn)形式——視線。很重要,很多時候的內(nèi)容設(shè)計的期望值就是自然引導(dǎo)用戶去閱讀。人物的視線引導(dǎo)我們把視覺轉(zhuǎn)向文字。


Image title




有形的線

清晰的線條讓畫面有速度感、層次感、豐富板式。


Image title




線的應(yīng)用

Image title

總結(jié):

1.不同的線能夠創(chuàng)造不同的感受

2.引導(dǎo)視覺

3.   控制好線的使用,不要為線而線,造成畫面的組織混亂

Image title

幾何學(xué)中線的移動軌跡。

Image title


面對畫面進行分割,得到層次感。也可以作為信息的載體,讓文字在畫面中更清晰的表現(xiàn)。

面可以分為:幾何形的面和不規(guī)則的面



幾何形的面

方,圓,三角,多邊形…等幾何形狀,這些面可以傳遞有序,簡潔,穩(wěn)定,速度等視覺心理感受。


Image title




不規(guī)則的面

實物(人物,墨跡,水花),不規(guī)則多邊形…,應(yīng)用方式更廣泛。其中規(guī)則面對畫面進行分割后,剩余空間本身也形成了一種面,可以理解為一種正負形的形式。對負空間的設(shè)計,對于整體畫面的風(fēng)格和層次感的提升很關(guān)鍵,也需要更多的研究和體會。


Image title




總結(jié):

1.大面積,視覺的重心

2.整體信息的依托  




通過上面的示例介紹,我們應(yīng)該可以建立起對點線面的基礎(chǔ)認識。下圖是對點線面在呈現(xiàn)信息內(nèi)容時,承擔(dān)的職能意義。接下來讓我們更深入的研究和分析。

Image title



看下面的例子

Image title


上圖的例子我們先看下面面,像之前總結(jié)的一樣:面,信息模塊的載體,構(gòu)建畫面的基礎(chǔ)。上圖的列子通過大背景的區(qū)分,顏色與圖形的交織分布,信息骨架就此建立。


Image title


對這個設(shè)計繼續(xù)進行分析,線,加強視線的引導(dǎo),強化/區(qū)分模塊關(guān)系。看上圖所示:標題作為無形的線,成為模塊區(qū)分的標識。在縱向方向上自然引導(dǎo)視線下移。


這個例子仔細分析后,并沒有所謂明顯的點元素的出現(xiàn),再想想點的總結(jié):點,打破節(jié)奏,增加氛圍。點的戲份不多也不重,隱含在每個模塊中去構(gòu)建信息。


通過這個簡單列子的分析,大家是否對之前點線面的總結(jié)有一定的理解呢?再強調(diào)一遍:

面,信息模塊的載體,構(gòu)建畫面的基礎(chǔ);

線,加強視線的引導(dǎo),強化/區(qū)分模塊關(guān)系;

點,打破節(jié)奏,增加氛圍;



再看幾個例子

Image title


線,加強視線的引導(dǎo),強化/區(qū)分模塊關(guān)系。上圖內(nèi)容信息量比較龐雜,在設(shè)計上選擇白色大背景,并不利于模塊信息的區(qū)分。那為了達到區(qū)分,標題的設(shè)計就很關(guān)鍵,所以如右圖所示,標題統(tǒng)一主題色處理,字形成線加強線的感覺,達到區(qū)分引導(dǎo)內(nèi)容信息。這是一根無形的線來串聯(lián)信息。



再看下面的案例,大家可以看到有形的線,清晰的串聯(lián)了內(nèi)容的上下關(guān)系,強視覺引導(dǎo)。

Image title




接下來再看看點的案例,下圖的設(shè)計通過圓(點的形式出現(xiàn))的串聯(lián),在起到裝飾的同時,也成功引導(dǎo)了視線移動,將信息有效的組織起來。

Image title



通過上述種種圖片的案例分析,大家對點線面是否有了新的認識,再附上本文最開始的圖片,大家現(xiàn)在能理解了嗎?


Image title





今天的分享為大家簡單闡述了點線面形式,以及在實際設(shè)計過程中的展示形式和意義,這是點線面第一部分的內(nèi)容。


之后會給大家?guī)淼诙糠值膬?nèi)容,是自己在實際工作中總結(jié)的點線面的具體使用方法,像上圖所示,點線面構(gòu)成了設(shè)計的結(jié)構(gòu)骨架,然后再此基礎(chǔ)上去豐富呈現(xiàn)信息。  那怎么在拿到一個運營需求后,去剖析拆分一份信息,用點線面的原理去搭建畫面呢?我總結(jié)了一個方法,叫做“土木工程法”,一家之言,也在下篇章與大家一起討論。敬請期待。


Image title




    本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息,謹防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點擊一鍵舉報。
    轉(zhuǎn)藏 分享 獻花(0

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多