構圖就像是整個畫面的骨骼,設計者要賦予作品怎樣的構成秩序,就要采取怎樣的骨骼形式,以達到更高層次的有秩序的變化。作為視覺設計師,用設計語言來解構畫面是我們必須具備的基本素養(yǎng)。同時,在移動端這樣較小的屏幕上有效展示并引導信息指向,又在考驗著設計師的能力。我們以往看到的構圖文章,大部分老生常談九宮格和三分法構圖,但一個頁面滿足了九宮格和三分法的構圖就一定是優(yōu)秀的作品嗎?下面是傳統(tǒng)的九宮格和三分法構圖:現(xiàn)在,讓我們跟著奧斯卡最佳攝影《愛樂之城》的鏡頭來看看構圖的另一面。畫面的構成可以分成兩個方面來說,一個是畫面的造型構成
構圖就像是整個畫面的骨骼,設計者要賦予作品怎樣的構成秩序,就要采取怎樣的骨骼形式,以達到更高層次的有秩序的變化。作為視覺設計師,用設計語言來解構畫面是我們必須具備的基本素養(yǎng)。同時,在移動端這樣較小的屏幕上有效展示并引導信息指向,又在考驗著設計師的能力。
我們以往看到的構圖文章,大部分老生常談九宮格和三分法構圖,但一個頁面滿足了九宮格和三分法的構圖就一定是優(yōu)秀的作品嗎?
下面是傳統(tǒng)的九宮格和三分法構圖:
現(xiàn)在,讓我們跟著奧斯卡最佳攝影《愛樂之城》的鏡頭來看看構圖的另一面。
畫面的構成可以分成兩個方面來說,一個是畫面的造型構成,另一個是畫面的黑白灰結構。就像唱歌一樣,用高中低音的不同穿插來豐富主體。
一、構圖中平衡的把握
當我們看到圖片時,均衡感相當重要,任何一個均衡的構圖都和造型,方向,位置等因素相關,不均衡的圖片會給觀眾挫敗感。
下面是優(yōu)酷的一張插圖,整個畫面平衡而有力,怎樣畫面可以做到錯落有序,多而不亂呢。
畫面中各元素之間有著磁場一般的力,他們相互作用抗衡,主物體較多的構圖較難,但分析后仍能找到規(guī)律:
1. 造型平衡
a. 越接近中心,力越強
這就像是杠桿原理,越遠離中心,份量越重。頁面上偏離中心的的形小卻仍能壓得住畫面。
b. 垂直方向次之,四個點為中心的四分之一。
c. 上重下輕。
這是根據(jù)我們眼睛的視覺習慣形成的規(guī)律。構圖時,我們多會增強下半部分的份量感,來尋求平衡。
這是眾安保險女神節(jié)曬照片的活動頭圖,也遵循了上下構圖中,上輕下重的原則。
d. 右重左輕
這是人類左右手習慣造成,所以我們在構圖的時候會讓左邊更重一點。當然對于左撇子來說,就是左重右輕。
下面是眾安保險春節(jié)紅包H5頁面,除中間主體物外,左邊的物體明顯比右邊要重,使整個畫面和諧舒適。
2. 色彩平衡
色彩在平衡畫面構圖中也起到了重要的作用。
a. 我們會發(fā)現(xiàn)離用戶越遠,重度越重。
這是兩張國外設計師作品,相同色彩并且面積相差不大的形,在越遠處重量越重。
b. 鮮艷顏色重于灰暗色,白色重于黑色。
在視覺稿上鮮艷的顏色更跳更容易抓住用戶眼光,也更重。
下面的插畫中明顯鮮艷的顏色要比周圍暗色更重更跳躍。
c. 有趣的吸引人的形,也會重量大。
這也是我們做視覺稿時所說的小巧思。
d. 孤立也會形成重量。
下面插圖中單獨人物和一群人物兩邊對立,仍然能保持畫面的平衡,這就是孤立的力量。
畫面的傳達不是靜止的,而是流動的。比如構圖也在傳達情緒。
二、構圖也能表現(xiàn)需求
構圖本身有著強烈的表達能力,對用戶也有著強烈的感染能力,正因為如此,構圖是有感情的,不同的感情也在傳達不同的需求。
1. 九宮格的點表達不同的需求
天空面積較大,傳達著積極向上的情緒。
地平面上主體物的面積多,給人壓抑的情感氛圍。
畫面中主體物面積大,代表主體物更強勢,更有自信,更易被接受。--
2. 畫面方向的表達
畫面方向是主體物產(chǎn)生的向某方向的力,比如人往前走,往后跌倒,眼光視線,或者樹枝的延伸。
人們在閱讀畫面時視覺點會形成從左上角主要視覺區(qū)到右下角末端停留區(qū),這是閱讀的引力。強迫眼球反向移動會破壞觀看節(jié)奏,這一點也在眼動儀中得到證實。
一個頁面表達同一時間或故事順序時,我們需要遵守這樣的從左到右的規(guī)律。但對于阿拉伯人,這順序是相反的。
下面是眾安保險的一張專題banner,從標題到主體物的過渡,表現(xiàn)從主到次的順序。
從左到右也表達了積極,順境,樂觀的情緒。在舞臺劇中我們也會發(fā)現(xiàn)人物都是從左邊上場。
下面是美團和眾安保險的視覺稿,春節(jié)回家的心情也遵循了從左到右的規(guī)律。
從右往左,表現(xiàn)受挫,被強大勢力壓迫的情緒。
這方面讓大家印象深刻的案例之一是“911”,當時電視臺對這起災難的實況拍攝是從左往右的方向,如左圖。但這個視頻放出來后,電視臺內(nèi)部很快進行了調整,之后二次報道都變成了右面的圖像。
可想而知畫面構圖方向的重要性。
向左向下,代表回憶,過去,低落,悲觀的情緒。
這是國外插畫師的一張兒童插畫,向左向下的趨勢表達了考拉從樹上跌落的驚慌氛圍。
向右向上代表積極,樂觀,未來。
下面是國外設計師的一張扁平插畫,艷麗的色彩和熱氣球向右向上的趨勢,整個頁面給人美好生活的情緒感染。
3. 封閉式和開放式構圖
框架式的構圖:利用框架截取主體物,形成集中的視覺可以用人物,樹枝,花朵,都可以營造這樣的氣氛。這種形式也起到強調的作用。
而框架式構圖中圓形構圖的優(yōu)點是在視覺上給人以旋轉,運動,收縮的審美,在圓形構圖中如果出現(xiàn)一個集中的趣味點,那么整個畫面就以這個點為軸線,產(chǎn)生強烈的向心力。
這在我們工作中多用于烘托節(jié)日氛圍,中國人對于圓有著特殊偏愛。-
開放式構圖:強調畫面內(nèi)外的相互聯(lián)系,表現(xiàn)形式是畫面上人物實現(xiàn)、行為、落腳點常常在畫面之外,暗示與畫面外的某物體相呼應。多在我們頁面設計上起到引導作用。
4. 光影構圖
光影構圖會讓簡單的頁面生動起來,更能抓住用戶情緒。
光線與色彩對于界面構圖而言,是一種重要的補充元素,起到無可替代的渲染效果,突出畫面的空間感,節(jié)奏感和韻律感。在界面中,通過光線明暗對比,主體輪廓與背景彼此的關系可以得到進一步加強,使主體與背景相分離,以加強主體的大小和所處空間位置,向用戶傳遞了構圖空間的深度感,同樣也使構圖形成豐富的美的形態(tài)。通過不同的顏色搭配,讓畫面有了鮮明的質感和空間感,形成強烈的視覺沖擊,與形式組成的對比。
下面是分別是國外設計師的插畫和眾安保險的H5頁面,都利用了光影來突出焦點。
光影對畫面的構成也可以做一個切割,增加畫面形式感,整個畫面表達了一種戲劇性的神秘氣氛。具有強烈的主觀認識。
下面分別是國外設計師和美團的一張H5頁面,利用光線進行了畫面的切割。
三、總結
隨著審美感悟的發(fā)展,不斷的在形成新的審美理念,用戶對畫面的高要求,使構圖進入一個更加靈活的境地。每一個設計作品不僅體現(xiàn)了產(chǎn)品需求和公司的品牌文化的傳達,同時也反映了設計者獨特的藝術風格和創(chuàng)造思路。構圖本身就有一種與生俱來的強烈的表達能力,這就有助于用戶領悟設計之外的公司的形象和內(nèi)在品質,并且有利于幫助用戶由表及里地挖掘產(chǎn)品傳達的內(nèi)涵和情感。