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

 

 

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

 

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

 

 

 

 

 

 

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

 

 

 

點的變化

 

 

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

 

 

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

相比紅色，黃色是淡；

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

 

 

總結(jié)：

1.有對比就有點

2.點不是單獨存在的

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

 

 

 

 

 

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

 

線的變化

 

 

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

 

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

 

 

無形的線

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

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

 

 

字形成隱形的線；

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

 

視線

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

 

 

 

 

有形的線

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

 

 

 

 

線的應用

 

 

總結(jié)：

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

2.引導視覺

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

 

 

 

 

 

幾何學中線的移動軌跡。

 

 

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

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

 

 

幾何形的面

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

 

 

 

 

不規(guī)則的面

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

 

 

 

 

總結(jié)：

1.大面積，視覺的重心

2.整體信息的依托  

 

 

 

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

 

 

看下面的例子

 

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

 

 

對這個設計繼續(xù)進行分析，線，加強視線的引導，強化/區(qū)分模塊關(guān)系?？瓷蠄D所示：標題作為無形的線，成為模塊區(qū)分的標識。在縱向方向上自然引導視線下移。

 

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

 

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

面，信息模塊的載體,構(gòu)建畫面的基礎；

線，加強視線的引導，強化/區(qū)分模塊關(guān)系；

點，打破節(jié)奏，增加氛圍；

 

 

再看幾個例子

 

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

 

 

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

 

 

 

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

 

 

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

 

 

 

 

 

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

 

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

來源：UI中國