網(wǎng)站建設中平面構成之“點(diǎn)”睛的張力發(fā)布者：本站     時(shí)間：2022-03-08 12:03:31

構成是什么，不就是把我們的自然界里的視覺(jué)規律再通過(guò)文字整理歸納的知識么？所有設計的門(mén)類(lèi)，幾乎都離不開(kāi)構成，所有視覺(jué)的表現也都體現了構成。它太隱蔽了，也太簡(jiǎn)單了，它是整個(gè)視覺(jué)世界的抽象，因此很多人就覺(jué)得應用上特別困難。要說(shuō)推薦構成的書(shū)，我十分沒(méi)有把握，但看了孫彤輝的《平面構成》，好像又豁然開(kāi)朗。不如就這本書(shū)的思路，我們再來(lái)一起學(xué)一下這些基礎吧。除了理論，最重要是我們從理論再回到實(shí)踐，從抽象再回到日常。

一、并不是小小圓圓才叫點(diǎn)
點(diǎn)是造型的基礎之一，是造型最小的單位?？臻g中出現了一點(diǎn)就能吸引眼球，再出現一點(diǎn)，這個(gè)焦點(diǎn)的注意力就均分了，如果這些點(diǎn)大小不一，則首先吸引焦點(diǎn)的是較大的那個(gè)點(diǎn)，再接著(zhù)是較小的點(diǎn)，這樣就形成了視覺(jué)的節奏。首先，你必須要簡(jiǎn)化日常所見(jiàn)的點(diǎn)，任何一個(gè)能引發(fā)視覺(jué)緊張，產(chǎn)生視覺(jué)張力的圖形都有被稱(chēng)為“點(diǎn)”的可能，并不是小小圓圓才叫點(diǎn)。

平面構成之“點(diǎn)”睛的張力

上圖的頁(yè)面在覆蓋層上表現很多水滴狀的圖像，隱隱透露出下方的圖像信息，給人一種半遮面的未知之美。

平面構成之“點(diǎn)”睛的張力

這里的大小不一的點(diǎn)形成了一種視覺(jué)節奏，你的視覺(jué)會(huì )從一個(gè)點(diǎn)跳到另一個(gè)點(diǎn)，配色鮮明，構成一派歡快的氛圍。

從上面兩個(gè)例子可以看出，在造型的世界中，點(diǎn)是具有形象的，也是有大小的，并且點(diǎn)的大小是有限度的。超越限度就會(huì )失去點(diǎn)的性質(zhì)而成為“面”。因此，點(diǎn)是根據周?chē)h(huán)境而確定的，點(diǎn)與其所在空間的面積應該是一種從屬關(guān)系，它本身具有一種細小單位的性質(zhì)。

平面構成之“點(diǎn)”睛的張力

這個(gè)海報中，利用圖形的合成，把人物也看作一個(gè)點(diǎn)，這個(gè)點(diǎn)由于是一個(gè)人物攀爬的狀態(tài)，其實(shí)更能激發(fā)一種緊張向上的活力。

二、一個(gè)點(diǎn)就是一個(gè)小宇宙
點(diǎn)具有張力的作用，它具有一定的緊張性。點(diǎn)在版面中的位置不同、數量不同、大小不同，給人的張力感受也不同。

理論上，在不考慮其他視覺(jué)元素的作用下，一個(gè)點(diǎn)處于中間位置的時(shí)候，是非常穩定的，但略顯得呆板。因此可以把點(diǎn)的位置往左上或右上移動(dòng)，這樣就形成一種上升的力量，帶來(lái)了動(dòng)感。

例如此處的圖形安排，如果放于中間，看上去會(huì )特別穩定，當然也會(huì )比較無(wú)聊。

平面構成之“點(diǎn)”睛的張力

往上方移動(dòng)，帶出一種往上提升的力量。

平面構成之“點(diǎn)”睛的張力

下圖中的圖形浮動(dòng)在流動(dòng)的波浪線(xiàn)上方形成一種浮動(dòng)其上的美，略靠中間的位置，由于極少其他元素的干擾，整體畫(huà)面簡(jiǎn)潔、穩定。

平面構成之“點(diǎn)”睛的張力

三、點(diǎn)與點(diǎn)的火花
點(diǎn)與點(diǎn)之間，會(huì )形成一種視覺(jué)牽引，你的大腦會(huì )自動(dòng)腦補出兩點(diǎn)間的連線(xiàn)。以此類(lèi)推，如果更多的點(diǎn)不僅形成了線(xiàn)，還連成了片，所以，用點(diǎn)這個(gè)單位就能創(chuàng )作更多的線(xiàn)和面。這時(shí)，點(diǎn)的裝飾作用減弱了。

平面構成之“點(diǎn)”睛的張力

例如上面這個(gè)由藍色的點(diǎn)來(lái)組成的數字“8”，形成的虛面效果非?；顫?。

平面構成之“點(diǎn)”睛的張力

這里的點(diǎn)的連線(xiàn)部分已經(jīng)用一種“未斷欲斷”的手法表現出來(lái)，而其他的部分則相比就顯得更獨立，有一種對比，在45度角的對稱(chēng)也有一種傾斜的活力。

四、點(diǎn)的構圖運用
圓點(diǎn)波爾卡抽象圖案

在運用點(diǎn)作為主角構圖的案例中，最常見(jiàn)的就是利用點(diǎn)的集合關(guān)系進(jìn)行構圖，日本草間彌生的作品是最具有代表性的。圓點(diǎn)本身的造型柔美、可愛(ài)，利用大大小小的圓點(diǎn)安排空間深度的關(guān)系，有機組合就能形成有趣的圖案。下圖是草間彌生的南瓜圖。

平面構成之“點(diǎn)”睛的張力

由于圓點(diǎn)本身的抽象性，這個(gè)圖也同樣姿態(tài)萬(wàn)千，未必是一個(gè)南瓜。這份創(chuàng )作理念自然是大師的手筆，我們能從中學(xué)到的是她運用圓點(diǎn)的創(chuàng )作技巧。她把南瓜分成了對稱(chēng)的瓣狀，每一瓣安排了圓點(diǎn)來(lái)形成一種立體關(guān)系，讓你感受到南瓜表面的起伏。

紋理背景

點(diǎn)也可以大面積鋪開(kāi)形成紋理，根據點(diǎn)的形狀來(lái)表達不同的氛圍。

平面構成之“點(diǎn)”睛的張力

利用五彩繽紛的圓點(diǎn)形成類(lèi)似氣球一樣的歡樂(lè )氛圍，不僅作為背景存在，也由于圓點(diǎn)的有機的位置安排，顯得非常灑脫自在。

聚合成形

也是同樣運用上例的圓點(diǎn)，采用一種較為規律的構圖方式，形成一個(gè)邊緣略散，但依然能成形的聚合體，整個(gè)圖形往外擴散，給人一種膨脹的張力。

平面構成之“點(diǎn)”睛的張力

本例中，你可以看出，當點(diǎn)試著(zhù)拋棄中心構圖，拋開(kāi)規則而成群出現的時(shí)候，有一種動(dòng)感。這種動(dòng)感通過(guò)色彩、大小、位置就能輕易獲得一種完美的張力。這是利用圓點(diǎn)之間的關(guān)系而形成的。

五、想和做
理論畢竟是停留在文字階段，實(shí)踐是，我們通過(guò)圓的構思來(lái)設計一個(gè)輕網(wǎng)頁(yè)的首頁(yè)界面。

這個(gè)界面是一個(gè)攝影作品的網(wǎng)站，首頁(yè)如果直接按照九宮格或者瀑布流排列攝影作品的方式顯然有點(diǎn)太規范，采用“輕”的思維方式，我們只需要展示一張大圖即可表現出作品的美感。但在這個(gè)網(wǎng)站中，我們還想要透出一種含蓄美，或者一種隱藏起來(lái)的美，這時(shí)，可以想到這個(gè)點(diǎn)的方式，因為點(diǎn)可以凝聚成面，這個(gè)面不太具體，給人一種虛化的感受。

STEP 01

我們先做出這個(gè)點(diǎn)的組合圖案，采用漸次變化的方法，中心大，往兩端漸變小。這樣的構圖產(chǎn)生了空間深度。

平面構成之“點(diǎn)”睛的張力

STEP 02

再將攝影作品大圖全屏展示，形成一種全屏的視野。

平面構成之“點(diǎn)”睛的張力

STEP 03

在圖片的上方增加一個(gè)純色的深藍色圖層，圖層的靠右側，也是攝影作品的右邊人物面部焦點(diǎn)處利用蒙板制作出步驟一的圖案，略降低這個(gè)圖層的透明度。

平面構成之“點(diǎn)”睛的張力

STEP 04

添加上LOGO和漢堡包菜單圖標。顯然這個(gè)作品網(wǎng)站是極簡(jiǎn)風(fēng)格，因此導航隱藏起來(lái)可以減少頁(yè)面的干擾。用戶(hù)的視覺(jué)首先會(huì )被右側的這種隱約其中的效果所吸引，再關(guān)注到LOGO、菜單等。這是我們所安排的用戶(hù)的視覺(jué)流。

LOGO的圖案并不是像其他網(wǎng)站一樣靠左，而是略往中心移動(dòng)，這樣做的目的是為了增加頁(yè)面左邊的視覺(jué)的趣味，讓LOGO和右側的畫(huà)面有呼應，不至于分成兩個(gè)完全不相干的陌生部分。

菜單的圖標放置于左側中線(xiàn)，剛好也和右側圖案的最左一個(gè)圓在一條水平線(xiàn)上。它們同樣產(chǎn)生了一種遙相呼應的關(guān)系。

平面構成之“點(diǎn)”睛的張力

整個(gè)界面在左側保持了留白，讓右側的畫(huà)面更突出。大家可以想象如果左側放太多信息，不但削弱了右側的視覺(jué)效果，整體的視覺(jué)將會(huì )失去重點(diǎn)。這是我們在設計中應該盡力避免的。