本期帶來的是“滿版構(gòu)圖”的使用攻略，當(dāng)要營造豐富飽滿、輕松熱鬧、充滿趣味性等氛圍的版面時，滿版構(gòu)圖是不二之選。

什么是滿版構(gòu)圖？

滿版型構(gòu)圖，是將圖片、文案和設(shè)計元素等充滿整個版面，營造出豐富的畫面效果，具有極強的代入感以及視覺感受，傳遞的情感也更加豐沛。

滿版構(gòu)圖以其獨特的創(chuàng)作效果廣泛運用于各類設(shè)計作品中，無論是飽滿充實的形象，還是直觀而豐富的視覺感受，或是輕松隨意的趣味性，都是其它構(gòu)圖形式不可替代的。

滿版構(gòu)圖的優(yōu)點

親和力

滿版構(gòu)圖常使用圖片特寫、俯視角度等手法營造身臨其境的場景，畫面鮮活生動。這樣的設(shè)計主題突出，能夠很好引起消費者的注意，從而喚起人們的購買欲望。

沖擊力

用設(shè)計元素布滿版面空間，可以產(chǎn)生畫面代入感，讓版面具有良好的視覺張力，設(shè)計感強烈。

熱鬧、歡快

滿版構(gòu)圖版面能夠傳達(dá)出輕松活潑的印象，配合跳躍的元素，畫面會出現(xiàn)熱鬧歡快的視覺感受。如在促銷頁面中經(jīng)常可以看到滿版構(gòu)圖的運用。

飽滿豐富

滿版構(gòu)圖使用各種設(shè)計元素占據(jù)版面，不會有太大的留白出現(xiàn)，視覺效果飽滿而豐富。

趣味性

滿版構(gòu)圖可以使用視覺元素靈活多變的形式自由編排，賦予版面豐富的跳躍感，顯得更加活潑，富有趣味性。

滿版構(gòu)圖的形式

圖片滿版

將圖片放大鋪滿整個版面，給人大氣、舒展的感覺。文字信息一般壓置于圖像上方或放置在圖像空白處，要注意保證文字的識別性和圖片的完整性。

文字滿版

文字不僅具有閱讀的固有功能，同時肩負(fù)塑造版面視覺風(fēng)格的審美功能。使用文字和裝飾元素充斥整個版面，通過巧妙的編排與組織，也可以成為美觀而有視覺沖擊力的版面。適用于缺少素材、文字比較多的版面。

圖文混排

當(dāng)遇到圖片和文字內(nèi)容都比較多的設(shè)計時，可以采取圖文混合排版的方式，找到圖片的“空白區(qū)”，安排文字穿插排版。

放大主體

放大主體視覺元素布滿畫面，讓視覺集中在主體，既能突出版面重點，還可以增加視覺沖擊力，使版面效果充實飽滿。

總結(jié)：

1、“滿版構(gòu)圖”可以營造出豐富的畫面效果，具有極強的代入感以及視覺感受，傳遞的情感也更加豐沛。

2、“滿版構(gòu)圖”具有良好的親和力、強烈的視覺沖擊力、豐富飽滿的視覺效果、熱鬧輕松的氛圍和自由活潑的趣味性。

3、“滿版構(gòu)圖”常用的設(shè)計形式有：圖片滿版、文字滿版、圖文混排、放大主體。

原文地址：藝海拾貝Design（公眾號）

作者：鄧海貝

大部分的版式設(shè)計只能在有限的空間和時間內(nèi)與讀者接觸，這就要求版面的設(shè)計必須主題突出、簡明易懂。“中心構(gòu)圖”可以很好的凸顯主體，讓版面信息主次分明，能很好地提高信息的傳達(dá)效果和效率，同時還具有強烈的視覺沖擊力。本期通過案例詳細(xì)分析“中心構(gòu)圖”的使用方法。

什么是中心構(gòu)圖

“中心構(gòu)圖”是把主體放置在畫面視覺中心，形成視覺焦點，再使用其他信息烘托和呼應(yīng)主體。這樣的構(gòu)圖形式能夠?qū)⒑诵膬?nèi)容直觀的展示給受眾，內(nèi)容要點展示更有條理，也具有良好的視覺效果。

中心構(gòu)圖的“中心”可以理解為畫面的視覺中心，而不是畫面的絕對中心位置，在設(shè)計時也經(jīng)常會把主體重心往四周偏移，可以避免使用中心構(gòu)圖形成的呆板感。

中心構(gòu)圖的優(yōu)點

凸顯主體

將主體放置在畫面中心進(jìn)行構(gòu)圖，可以使主體最為突出、明確，常使用產(chǎn)品本身、人物形象和主題內(nèi)容成為作為畫面主體形象，占據(jù)版面的視覺中心，給人最直觀的視覺引導(dǎo)。

聚焦醒目

將主體設(shè)置在版式的中心位置，能引導(dǎo)受眾的視線聚集在想要突出的內(nèi)容上，提高版面的注目效果，引起觀者的高度注意。

生動活潑

中心構(gòu)圖重點突出、主次分明，版面具有很好的層次感，版式鮮活生動、富有趣味性，能產(chǎn)生良好的視覺體驗。

如何設(shè)計中心構(gòu)圖

放大主體

通過放大主體視覺元素，與周圍元素形成體量之間的差異來制造視覺沖突，強烈的對比可以形成視覺落差，增強版面的節(jié)奏和明快感。

色彩對比

運用色彩對比可以有效的突出重點、區(qū)分信息，還可以起到裝飾畫面的作用。大面積的背景色與少量的主體色形成了強烈的對比效果，能夠第一時間把讀者視覺引導(dǎo)到主體上。

明暗對比

利用明暗對比，可以形成強有力的反差效果，能第一時間讓讀者捕捉到主體和重點。

中心發(fā)散

以主體為中心，其他的內(nèi)容放射編排，向四周不斷延展、散發(fā)或者聚攏，有利于聚焦視線，凸顯位于中心的內(nèi)容，獲得更高的注目度，同時使版面充滿動感和活力。

圓形聚焦

圓形給人飽滿、完整的視覺感受。當(dāng)我們看到圓形，會產(chǎn)生尋找圓心的愿望，所以使用圓形很容易形成視覺的聚焦，快速吸引人的注意力。

借助畫框

借助色塊和線框可以讓主體的聚焦性更強，同時也會在一定程度上讓畫面的主體形式更加的豐富。

空間對比 

版式設(shè)計并不局限于一個平面上的層次，通過主體與其他元素之間疊壓編排、虛實對比、遠(yuǎn)近對比體現(xiàn)空間關(guān)系，不僅能突出重點信息，而且能夠較好營造氛圍感、場景感和立體感。

還可以使用空間的留白突出主體，給予主體充分的主導(dǎo)地位，降低次要元素對于主體的影響，讓受眾視線聚焦在重點內(nèi)容上。

1、“中心構(gòu)圖”可以將核心內(nèi)容直觀的展示給受眾，能很好地提高信息的傳達(dá)效果和效率，也具有良好的視覺效果。

2、“中心構(gòu)圖”的優(yōu)勢是重點突出、主次分明，能引導(dǎo)受眾的視線聚集在想要突出的內(nèi)容上。版面具有很好的層次感，版式鮮活生動、富有趣味性，能產(chǎn)生良好的視覺體驗。

3、“中心構(gòu)圖”常用的設(shè)計形式有：放大主體、色彩對比、明暗對比、中心發(fā)散、圓形聚焦、借助畫框、空間對比等。

原文地址：藝海拾貝Design
作者：鄧海貝

設(shè)計初學(xué)者常常會對著將要進(jìn)行設(shè)計的圖片素材和文字資料無從下手，很多時候花了大量的時間進(jìn)行設(shè)計編排，做出來的效果也并不理想。對稱的結(jié)構(gòu)是很常用而且效果比較好的排版形式，本期通過案例詳細(xì)講解對稱構(gòu)圖的使用方法，讓你快速做出平衡穩(wěn)定，美觀大方的版式設(shè)計。

對稱之美

對稱之美源于自然，在日常生活中處處都可見，對稱之所以為美，這是視覺美的天性使然。稍微留意一下我們身邊的事物，就會發(fā)現(xiàn)我們生活在一個充滿對稱的世界里。

人們對“對稱美”的思索可以追溯到人類文明的初始階段。早在古希臘時期，哲學(xué)家對藝術(shù)中的美的理解就多與對稱有關(guān)。如亞里士多德認(rèn)為“美在于秩序、對稱、明確”，畢達(dá)哥拉斯說“美的線型和其他一切美的形體都必須有對稱形式”等。這體現(xiàn)了人類在自覺不自覺中，以普遍存在的追求對稱感的審美習(xí)慣來衡量藝術(shù)作品。

中國人一直追求著造物里的對稱美，在許許多多中國的文化國粹中，我們似乎都能看到對稱元素的攝入，建筑、繪畫、詩歌、瓷器、圖章、書法等都講究對稱，反映著中國人獨有的陰陽平衡概念。

中國古人把和諧平衡的精神之美，轉(zhuǎn)化到生活中的每一種具體形式，久而久之，演變成了一種中式對稱之美，給人以莊重、大氣、和諧之感，變成了中國人獨有的生活美學(xué)。

對稱構(gòu)圖的優(yōu)點

“對稱構(gòu)圖”是將版面分割為兩部分，通過設(shè)計元素的布局讓畫面整體呈現(xiàn)出對稱的結(jié)構(gòu)，具有很強的秩序感，給人安靜、嚴(yán)謹(jǐn)和正式的感受，呈現(xiàn)出和諧、穩(wěn)定、經(jīng)典的氣質(zhì)。

平衡穩(wěn)定

對稱創(chuàng)造了平衡，平衡創(chuàng)造了和諧穩(wěn)定之美，人們通過追求畫面中的視覺平衡感，從而獲得心靈上的愉悅與滿足。

嚴(yán)謹(jǐn)秩序

對稱式的構(gòu)圖能夠營造出嚴(yán)謹(jǐn)?shù)闹刃蚋校o人以整齊嚴(yán)肅、有條不紊的視覺感受。

經(jīng)典完美

對稱視覺上的平衡與和諧能給人莊重大方的美感，體現(xiàn)了人們對完美平和的追求之心，令版面具有經(jīng)典的氣質(zhì)。

對稱構(gòu)圖的形式

中心對稱

將圖形和文字信息放置在畫面中軸線上，采用居中對齊的排版形式，呈現(xiàn)出對稱的狀態(tài)：

或以畫面中軸線為中心，視覺元素分布在畫面左右兩邊，元素形狀和大小幾乎一致，呈現(xiàn)出平衡、穩(wěn)定的狀態(tài)。

上下對稱

將版面一分為二，形成均等的上下兩部分，

呈現(xiàn)出對稱均衡的視覺效果。

左右對稱

將版面分割為左右1:1兩部分，通過設(shè)計元素的布局讓畫面整體呈現(xiàn)出平衡、穩(wěn)定的特點。

對角對稱

信息分布在對角線兩端，互相呼應(yīng)，呈現(xiàn)出對角的對稱平衡狀態(tài)，既具有對稱的秩序性和工整性，又能打破呆板，令版面生動活潑。

混合對稱

同一版面可以同時使用多種對稱方式。此案例把圖形放在中軸線上，版面整體呈現(xiàn)中心對稱狀態(tài)，其他信息放置在左上角和右下角，呈現(xiàn)出對角的對稱平衡狀態(tài)：

此案例把文字居中排列放置在中軸線上，圖形放置在左上角和右下角，版面使用了中心對稱和對角對稱兩種對稱方式：

此案例整體呈現(xiàn)左右對稱的狀態(tài)，但在局部圖形和文字則采用中心對稱，也可以呈現(xiàn)豐富的視覺效果：

靈活運用

對稱是比較嚴(yán)謹(jǐn)規(guī)范的構(gòu)圖方式，但是為了避免版面的呆板，可以通過多種設(shè)計手法，巧妙破除對稱構(gòu)圖的單一性與呆板感。

文字破圖

使用文字串聯(lián)起兩個空間，

破除對稱構(gòu)圖版面的呆板感。

元素串聯(lián)

利用圖形、色塊等元素串聯(lián)空間，讓兩個空間建立起聯(lián)系，具有豐富的視覺效果和良好的設(shè)計感。

場景融合

重新營造場景，弱化空間的分區(qū)，

使對稱構(gòu)圖沒有明顯的分割線，畫面更靈動美觀 。

使用雙重曝光的手法弱化空間的分區(qū)、

突破空間束縛，畫面更具創(chuàng)意性 。

總結(jié)：

1、對稱是自然界中最常見的形式美規(guī)律，被廣泛應(yīng)用于各種設(shè)計中；

2、常用的對稱構(gòu)圖形式有中心對稱、上下對稱、左右對稱和對角對稱，同一版面也可以同時使用多種對稱方式；

3、對稱是比較嚴(yán)謹(jǐn)規(guī)范的構(gòu)圖方式，可以通過文字破圖、元素串聯(lián)和空間融合等設(shè)計手法，巧妙破除對稱構(gòu)圖的單一性與呆板感，也能使畫面具有豐富的視覺效果和良好的設(shè)計感。

原文地址：藝海拾貝Design
作者：鄧海貝

構(gòu)圖攻略前兩期分享了“上下構(gòu)圖”和“左右構(gòu)圖”的使用方法，這兩種構(gòu)圖是視覺效果相對比較均衡穩(wěn)定的構(gòu)圖形式，當(dāng)想要設(shè)計更靈動活潑的版面，營造輕松、動感、刺激等氛圍時，“傾斜構(gòu)圖”是更適合運用的構(gòu)圖表現(xiàn)形式，本期就來分析傾斜構(gòu)圖的使用方法。

什么是傾斜構(gòu)圖？

“傾斜構(gòu)圖”是版面整體或部分元素以傾斜的角度呈現(xiàn)在畫面上，打破常規(guī)構(gòu)圖橫平豎直的視覺思維，可以產(chǎn)生不穩(wěn)定的動感，畫面顯得更具創(chuàng)意性。

“傾斜構(gòu)圖”是用更自由和個性化的視覺去表達(dá)信息和情感，畫面充滿活力，也更有視覺沖擊力。

傾斜構(gòu)圖的作用

傾斜構(gòu)圖能打破平衡感與穩(wěn)定感，可以根據(jù)主題需要，搭配相應(yīng)的視覺元素營造出不同的氛圍。

動感、沖擊力

傾斜被視覺感知為從垂直和水平方向上的偏離，會產(chǎn)生不穩(wěn)定的視覺感受，通過這種不平衡感產(chǎn)生了“動感”。所以傾斜構(gòu)圖常運用在體現(xiàn)具有對抗性、速度感、力量感和沖擊力的版面中。

活潑、歡快

將畫面以傾斜的角度處理會為版面帶來躍動的心理感受，能夠傳達(dá)出輕松活潑的印象，配合跳躍、歡快的元素，可以營造出熱鬧喜慶的氛圍。如在促銷頁面經(jīng)常可以看到傾斜構(gòu)圖的使用。

緊張、刺激

傾斜的畫面充滿了不確定性，讓人感到焦慮緊張,經(jīng)常用來營造驚悚、叛逆、驚險刺激與危機(jī)感的氛圍，在影視劇海報中多有體現(xiàn)。

傾斜構(gòu)圖的角度

將版面加入傾斜角度變化，打破常規(guī)的觀看視角，增強了版面的趣味性，也產(chǎn)生良好的視覺沖擊力。最常用的方式是將設(shè)計元素傾斜15°至45°，既能夠讓畫面變得活潑起來，又不會影響到圖文的識別性，設(shè)計時也比較容易把控。

也可以嘗試變換不一樣的傾斜角度，如當(dāng)圖片傾斜旋轉(zhuǎn)90°時，產(chǎn)生了新穎的視角，版面顯得更具創(chuàng)意，能夠給人帶來的嶄新視覺印象。

當(dāng)圖片以旋轉(zhuǎn)180°的角度呈現(xiàn)時，給人視覺錯亂、顛倒的印象，這種表現(xiàn)手法常出現(xiàn)體現(xiàn)時尚、個性和藝術(shù)性較強的版面中。

傾斜構(gòu)圖的形式

“傾斜構(gòu)圖”通常使用的形式為整體畫面的傾斜或者畫面中局部元素的傾斜（主體傾斜、文字傾斜或輔助元素的傾斜），在實際設(shè)計中，要根據(jù)現(xiàn)有的素材和資料來決定使用哪種傾斜方式來表現(xiàn)。但要注意無論畫面中的元素如何傾斜，都要保證版式的整體是平衡的。

一、整體傾斜

把畫面所有元素進(jìn)行傾斜，使畫面呈現(xiàn)出不穩(wěn)定的動感，整體又可分為”同一方向傾斜”、“雙方向傾斜”和“多方向傾斜”。

“同一方向傾斜”是各視覺元素按同一角度有規(guī)律的傾斜，版面具有單純的結(jié)構(gòu)和井然有序的的組織，呈現(xiàn)出統(tǒng)一和諧的整體性和秩序感。

“雙方向傾斜”是設(shè)計元素朝兩個對立的角度傾斜，產(chǎn)生了方向上的對比，可以形成視覺沖突，營造出空間立體感。

“多同方向傾斜”是版面中視覺元素朝多個不同的方向傾斜，視覺效果豐富活躍，具有強烈的對比。為了避免版面雜亂，需要形成一定的傾斜規(guī)律，讓豐富的元素具有一定的秩序，達(dá)到版面的穩(wěn)定。

二、主體傾斜

主體是版面中占據(jù)面積最大、傳達(dá)信息最直觀的視覺元素。將主體進(jìn)行傾斜處理，其他元素使用穩(wěn)定的橫豎排列，形成動靜對比，既能保持畫面的穩(wěn)定性，又能達(dá)到突出主體的目的。

三、文字傾斜

文字在版式設(shè)計中具有豐富的表現(xiàn)力，在圖片素材受限的情況下，使用文字傾斜破除規(guī)范穩(wěn)定的版面，是打破畫面呆板印象的有效方法。

四、元素傾斜

在不改變整體視覺感受的情況下，運用部分裝飾性元素或背景元素的傾斜打破畫面的平衡感，還能起著強調(diào)、裝飾畫面的作用。

1.“傾斜構(gòu)圖”是版面整體或部分元素以一定的傾斜的角度呈現(xiàn)在畫面上，打破常規(guī)構(gòu)圖橫平豎直的視覺思維，可以產(chǎn)生不穩(wěn)定的動感，畫面顯得更具創(chuàng)意性；

2.傾斜構(gòu)圖能打破平衡感與穩(wěn)定感，可以根據(jù)主題需要，搭配相應(yīng)的設(shè)計元素營造具有動感、活潑歡快、緊張刺激的氛圍；

3.將最常用的傾斜方式是將設(shè)計元素傾斜15°至45°，既能夠讓畫面變得活潑起來，又不影響到圖文的識別性。也可以嘗試變換不一樣的傾斜角度，使版面具有更新穎的視角；

4.傾斜構(gòu)圖通常使用的形式為整體畫面的傾斜或者畫面中局部元素的傾斜（主體傾斜、文字傾斜或輔助元素的傾斜）,要根據(jù)實際情況決定版面使用哪種方式來表現(xiàn)。

原文地址：藝海拾貝Design
作者：鄧海貝

在設(shè)計之前，對于設(shè)計元素的擺放位置需要有一個大致的構(gòu)想，這個構(gòu)想就是構(gòu)圖，它相當(dāng)于是版式的雛形，有了這個雛形之后，才能開始下一步的細(xì)化，只有充分理解構(gòu)圖的意義與作用，排版時才能做到心中有數(shù)。

本期要分享的是左右構(gòu)圖的使用方法，與上一期的上下構(gòu)圖使用方法類似，都是版式設(shè)計中比較通用和非常實用的構(gòu)圖形式，適用于各種設(shè)計項目。接下來看看實際應(yīng)用案例：

什么是左右構(gòu)圖？

“左右構(gòu)圖”是將版面分割為左右兩部分，或通過設(shè)計元素的布局讓畫面整體呈現(xiàn)出左右的分布趨勢，具有平衡、穩(wěn)定、互相呼應(yīng)的特點。

最典型的左右構(gòu)圖由“左圖右字”或者“左字右圖”兩部分構(gòu)成，圖片及文字各占據(jù)一部分，形成左右兩部分獨立的空間，產(chǎn)生良好的閱讀體驗。

當(dāng)畫面缺少圖片時，也可以使用文字圖形化的方法，占據(jù)版面主空間形成畫面的主體。

左右構(gòu)圖看似比較簡單，但是通過精心的編排，也可以使畫面具有豐富的視覺效果和良好的設(shè)計感。

構(gòu)圖比例

進(jìn)行左右構(gòu)圖設(shè)計時，可以根據(jù)版面內(nèi)容的信息體量劃分畫面的空間，常用的版面分割比例有：1:1、1:1.618、1:1.414、1:2、1:3等。在設(shè)計時也可以反復(fù)進(jìn)行調(diào)整，直到找到最為合適的構(gòu)圖比例。

1:1分割

將畫面把版面一分為二，形成均等的兩份，呈現(xiàn)出對稱均衡的版面效果，多用于版面中兩部分內(nèi)容處于并列或?qū)α⒌年P(guān)系。

黃金分割

“黃金分割比例（1:1.618）”被認(rèn)為是最具美感的分割比例，在設(shè)計中有意識地運用黃金分割比例進(jìn)行設(shè)計，可以營造出富有美感的版式效果。

白銀分割

“白銀分割比例（1:1.414）”也是具有獨特美感的分割比例，與黃金分割相比，次空間占據(jù)的比例更大一些，能夠承載的信息量也更多，適用于文字信息量較大的版面。

2:1分割

采用2:1的比例，圖片主體在畫面中占據(jù)主導(dǎo)地位，視覺焦點集中在主空間，閱讀信息則放置在次空間。

3:1分割

3:1分割的比例與2:1比例相似，但圖片在畫面中占據(jù)主導(dǎo)地位更強，主要適用于圖片比較重要而文字信息較少的版面。

通過比例，可以讓版面分割更嚴(yán)謹(jǐn)。但沒有那個比例關(guān)系絕對正確，需要根據(jù)畫面的項目調(diào)性、信息體量、信息功能與圖文主體而定。如使用其它比例分割的優(yōu)秀案例：

空間調(diào)整

把圖文按比例分別編排在版面上下方，是比較嚴(yán)謹(jǐn)規(guī)范的構(gòu)圖方式，但是為了避免版面的呆板，可以通過調(diào)整版面空間變換出多種編排形式。如以下幾個案例：

縮小圖片和文字空間，使留白處形成外空間，增加層次感。

在主空間上劃分出新的空間，這樣的手法可以很好讓空間具有多變性，也可以讓我們的設(shè)計更加靈動。

使用圖片占滿整個版面，再運用色塊承載文字信息，可以強化與聚集內(nèi)容，既能保證信息清晰有效的傳達(dá)，同時也可以增加畫面的層次感、提升畫面的豐富度。

靈活運用

上下構(gòu)圖的框架看似比較固定，但是也能通過設(shè)計手法，變換出多種編排形式，巧妙破除上下分割的單一性與呆板感。

曲線分割

把生硬的直線改為呈現(xiàn)出動態(tài)的曲線或斜線進(jìn)行畫面的分割，版面顯得更生動活潑。

圖片裁切

把方形圖片裁切為其他形狀，或使用其他形狀的圖形作為主體，使左右構(gòu)圖沒有明顯的分割線，也可以呈現(xiàn)出良好的視覺效果。

元素串聯(lián)

利用圖形、色塊等元素串聯(lián)空間，讓主次空間建立起聯(lián)系，具有豐富的視覺效果和良好的設(shè)計感。

文字破圖

使用文字串聯(lián)起左右兩個空間，破除左右構(gòu)圖版面的單一性。

空間留白

使用留白破除兩個空間的間隙，拉開畫面的空間感，具有良好的視覺效果。

滿版構(gòu)圖

在滿版圖片的背景上重新進(jìn)行左右分割構(gòu)圖，可以突破空間束縛，畫面更飽滿 。

圖片退底

把圖片主體進(jìn)行退底處理，重新營造場景，弱化空間的分區(qū)。

總結(jié)

1.“左右構(gòu)圖”是將版面分割為左右兩部分，或通過設(shè)計元素的布局讓畫面整體呈現(xiàn)出左右的分布趨勢，具有平衡、穩(wěn)定、互相呼應(yīng)的特點;

2.進(jìn)行左右構(gòu)圖設(shè)計時，可以根據(jù)版面內(nèi)容的信息體量劃分畫面的空間，常用的版面分割比例有：1:1、1:1.618、1:1.414、1:2、1:3等;

3.為了避免版面的呆板，可以通過調(diào)整版面空間變換出多種編排形式;還可以通過曲線分割、圖片裁切、文字破圖等設(shè)計手法，變換出多種編排形式，巧妙破除空間分割的單一性與呆板感。

原文地址：藝海拾貝Design

作者：鄧海貝

那下面就讓我們一起學(xué)習(xí)一下，什么是左右分割構(gòu)圖，這樣的構(gòu)圖該如何使用，以及實際的應(yīng)用的商業(yè)案例。下面就開始今天的學(xué)習(xí)吧。

下面找一個左右分割的案例給大家詳細(xì)拆分元素分布，以及構(gòu)成規(guī)律，讓大家能更通俗的理解這種設(shè)計的理論。

排放熱區(qū)

下面給大家推薦幾種常見的排版方式，可以這幾個為根版式做思維發(fā)散，改變布局，不要死記硬背版式而是要記住大概的排放趨勢，靈活變通。

下面我們把色塊具象成版面，通過一個簡單的案例讓大家對左右分割構(gòu)圖的設(shè)計過程有一個初步的了解。

-設(shè)計樣機(jī)圖-

案例實操

剛才通過一個小案例為大家粗略的演示了一下這樣構(gòu)圖的畫面如何演變，下面將通過幾個更詳細(xì)的海報設(shè)計案例拆分，為大家?guī)磉@種構(gòu)圖的更多玩法，以及左右分割構(gòu)圖的常用擺放方式。

可以看到，我們按照一開始的常用構(gòu)圖擺放，直接把我們的元素和文案置換上去，就可以完成一個很好的畫面，但是我們不能像套模板一樣一模一樣的弄上去，要有在版式的基本框架內(nèi)有所變化，如果有靈感可以加上一些自己的想法。

-設(shè)計樣機(jī)圖-

以第一個案例為基礎(chǔ)，往下演變的版式，可先以草圖變化，看看如何規(guī)劃合理，最后再結(jié)合我們使用的主體素材的特點去增加一些小創(chuàng)意。

-設(shè)計樣機(jī)圖-

案例實操

最后一個案例的重要知識點是基礎(chǔ)構(gòu)圖完成后如何進(jìn)一步深化，同時這也是一個實際的商業(yè)案例，大家可以適當(dāng)?shù)膸胱约旱墓ぷ髦校梢韵人伎既绻亲约河龅皆撊绾稳ピO(shè)計這樣的畫面。

最后總結(jié) 

這篇文章我們系統(tǒng)的學(xué)習(xí)了左右分割構(gòu)圖的流程，看了這么多的案例演示，相信大家對于構(gòu)圖知識里的左右分割構(gòu)圖有了一定程度的了解，也知道如何把這樣的理論知識應(yīng)用在實際的工作中，我們學(xué)習(xí)畢竟還是要先針對實際工作的問題，也是希望能幫助咱們的設(shè)計師度過最艱難的前期。文章底部可自行下載左右分割的練習(xí)素材，最后希望我們一起共同進(jìn)步。

原文地址：設(shè)獵派（公眾號）

作者：奇掌門

構(gòu)圖是在有限的空間內(nèi)把文字、色彩、圖形等元素結(jié)合起來構(gòu)成畫面，使作品不僅具有美感，還能清晰表達(dá)設(shè)計者的目的。不同構(gòu)圖能使畫面產(chǎn)生不同的視覺變化，進(jìn)而給觀者帶來不同的心理感受。同的心理感受。本期分享的是上下構(gòu)圖的使用方法，此構(gòu)圖形式具有良好的視覺效果，也比較容易掌握，是非常實用的構(gòu)圖方式。

什么是上下構(gòu)圖？

上下構(gòu)圖形式是將版面分割為上下兩部分，或讓畫面中的元素整體呈現(xiàn)出上下的分布趨勢，主空間承載視覺點，次空間承載閱讀信息，呈現(xiàn)的視覺效果平衡而穩(wěn)定。

最典型的上下構(gòu)圖由“上圖下字”或者“上字下圖”兩部分構(gòu)成，圖片及文字各占據(jù)一部分，互不干預(yù)，能清晰明了的傳達(dá)出版面的信息。

主空間還經(jīng)常使用圖形化的標(biāo)題文字充當(dāng)畫面主體，可以很好解決畫面缺少圖片層級的問題。

上下構(gòu)圖空間劃分比較固定，為了得到豐富的視覺效果和良好的設(shè)計感，需要通過精心設(shè)計的編排來豐富版面的視覺效果。比如文字的橫豎排版，元素之間的對比、點線面的運用、巧妙的留白等。

構(gòu)圖比例

進(jìn)行上下構(gòu)圖設(shè)計時，可以根據(jù)版面內(nèi)容的信息體量劃分畫面的空間，常用的版面分割比例有：1:1、1:1.618、1:1.414、1:2、1:3等。在設(shè)計時也可以反復(fù)進(jìn)行調(diào)整，直到找到最為合適的構(gòu)圖比例。

1:1分割

把畫面平分為上下兩部分，形成對稱均衡的分割構(gòu)成。

1:1分割比例構(gòu)成方式，

多用于版面中兩部分內(nèi)容處于并列或?qū)α⒌年P(guān)系。

黃金分割

“黃金分割比例（1:1.618）”被認(rèn)為是最具美感的分割比例，具有嚴(yán)謹(jǐn)?shù)乃囆g(shù)性、和諧性，蘊藏著豐富的美學(xué)價值。

在設(shè)計中有意識地運用黃金分割比例進(jìn)行設(shè)計，

可以營造出富有美感的版式效果。

白銀分割

“白銀分割比例（1:1.414）”是日本率先采用的一種分割比例，目前廣泛運用在版式設(shè)計的布局中。

與黃金分割相比，白銀分割次空間占據(jù)的比例更大一些，能夠承載的信息量也更多。

2:1分割

采用2:1的比例，圖片主體在畫面中占據(jù)主導(dǎo)地位，視覺焦點更清晰。

主要的信息（標(biāo)題）常融入圖片中放在主空間成為畫面主體，閱讀性文字則放在次空間。

3:1分割

3:1分割的比例與2:1比例相似，但圖片在畫面中占據(jù)主導(dǎo)地位更強，主空間承載視覺點，次空間承載閱讀信息。

通過比例，可以讓版面分割更嚴(yán)謹(jǐn)。但沒有那個比例關(guān)系絕對正確，需要根據(jù)畫面的項目調(diào)性、信息體量、信息功能與圖文主體而定。如使用其它比例分割的優(yōu)秀案例：

給大家提供一個工具，可在線計算黃金比例、白銀比例、鉑金比例、青銅比例等。可在百度搜索關(guān)鍵詞“黃金比在線計算工具”。

（https://www.shejidaren.com/examples/tools/golden-ratio/index.html）

空間調(diào)整

把圖文按比例分別編排在版面上下方，是比較嚴(yán)謹(jǐn)規(guī)范的構(gòu)圖方式，但是為了避免版面的呆板，可以通過調(diào)整版面空間變換出多種編排形式。如以下幾個案例：

縮小圖片和文字空間，使留白處形成外空間，增加層次感。

在背景（繪畫作品）上重新劃出新的空間，形成內(nèi)外空間對比，既豐富了畫面層次，又讓版面變得生動有趣。

通過圖片文字的錯位排版和負(fù)空間的巧妙留白，讓原本呆板的上下構(gòu)圖變得靈活多變，充滿個性。

讓圖片位置重心偏移，打破均衡穩(wěn)定的構(gòu)圖形式。標(biāo)題的破圖處理，也增加了版面的靈活性與豐富性。         

在上方空間上劃分出新的空間，這樣的手法可以很好讓空間具有多變性，也可以讓我們的設(shè)計更加靈動。

靈活運用

上下構(gòu)圖的框架看似比較固定，但是也能通過設(shè)計手法，變換出多種編排形式，巧妙破除上下分割的單一性與呆板感。

曲線分割

把生硬的直線改為呈現(xiàn)出動態(tài)的曲線或斜線進(jìn)行畫面的分割，版面顯得更生動活潑。

圖片裁切

把方形圖片裁切為其他形狀，使上下構(gòu)圖沒有明顯的分割線，也可以呈現(xiàn)出良好的視覺效果。

文字破圖

使用文字串聯(lián)起上下兩個空間，

破除上下構(gòu)圖版面的單一性。

元素串聯(lián)

利用圖形、色塊等元素串聯(lián)空間，讓主次空間建立起聯(lián)系，具有豐富的視覺效果和良好的設(shè)計感。

圖片退底

把圖片主體進(jìn)行退底處理，重新營造場景，

弱化空間的分區(qū)。

空間留白

使用留白破除兩個空間的間隙，拉開畫面的空間感，

具有良好的視覺效果。

總結(jié)

1.上下構(gòu)圖是將版面分割為上下兩部分，或讓畫面中的元素整體呈現(xiàn)出上下的分布趨勢，主空間承載視覺點，次空間承載閱讀信息，呈現(xiàn)的視覺效果平衡而穩(wěn)定，是非常實用的構(gòu)圖方式;

2.進(jìn)行上下構(gòu)圖設(shè)計時，可以根據(jù)版面內(nèi)容的信息體量劃分畫面的空間，常用的版面分割比例有：1:1、1:1.618、1:1.414、1:2、1:3等;

3.為了避免版面的呆板，可以通過調(diào)整版面空間變換出多種編排形式;

4.可以通過曲線分割、圖片裁切、文字破圖、元素串聯(lián)、圖片退底、空間留白等手法，變換出多種編排形式，巧妙破除上下分割的單一性與呆板感。

原文地址：藝海拾貝Design

作者：鄧海貝

一、構(gòu)圖的類型

攝影創(chuàng)作離不開構(gòu)圖，同樣平面設(shè)計也需要構(gòu)圖。構(gòu)圖的主要作用是將視覺元素安排在合適的比例上，從而形成平衡的視覺感，因此構(gòu)圖在海報設(shè)計上起到重要的作用。海報的構(gòu)圖方式主要表現(xiàn)為四種:左右構(gòu)圖、上下構(gòu)圖、對角構(gòu)圖和中心構(gòu)圖，當(dāng)然還有其他的構(gòu)圖形式。

當(dāng)然并不是所有的海報，需要到這么明確的構(gòu)圖來完成的，也有些只單純使用對齊／正負(fù)空間等方式編排，只要版面各元素達(dá)到視覺平衡和順利傳達(dá)信息即可。

二、實操演示

說了這么多，不知你是否感覺到構(gòu)圖的重要性。如果還是感受不了，下面我們來實操一下。
 

由上面的案例解析后，構(gòu)圖對版面還是起到很大的作用。所以想要設(shè)計一張好的海報，還是需要懂構(gòu)圖。這些構(gòu)圖表現(xiàn)鮮明，最重要的是能輔助你確定元素位置，使畫面平衡。

原文：版式設(shè)計很簡單

作者：周妙妍

好的頁面構(gòu)圖能夠讓你頁面更出彩，也能讓你做設(shè)計更事半功倍。下面，我們就來看看一些好的專題都是怎么構(gòu)圖的。

(以下例子均來自互聯(lián)網(wǎng))
 

1. 幾何切割

在現(xiàn)實生活與自然界中，我們隨處可見幾何圖形的存在，簡單的三角形、正方形、長方形和圓形甚至幾根線條就可以組成很多有趣的圖形，也很符合現(xiàn)代審美需求，適當(dāng)?shù)漠嬅媲懈钅軌蚪o頁面帶來動感與節(jié)奏感。加入幾根線條，幾個塊面就能令頁面起到意想不到的效果。
實現(xiàn)的時候需要注意的是素材不適合太過復(fù)雜和花哨，一般會是純色大塊搭配漸變，主要突出形狀和區(qū)塊。

A. 簡單切割

用一個形狀或者素材切分整個頁面，畫面瞬時變得有趣生動起來，內(nèi)容區(qū)域也能得到有效劃分。
這類構(gòu)圖方式對內(nèi)容沒有過多要求，可隨意安排。具體排版可根據(jù)內(nèi)容來處理，也是現(xiàn)在專題頁面用得最多，最普遍的一種構(gòu)圖方式。
 

B. 對稱切割

這種構(gòu)圖方式的前提一般是內(nèi)容分主要兩部分，并且這兩部分是對立關(guān)系的情況下，比如說：對戰(zhàn)，男女，冷熱等等。頁面一分為二，內(nèi)容劃分明確也更加具有視覺沖擊力。
 

C. 組合切割

集中而規(guī)律的排列，從整體上抓住人們的視覺。這種構(gòu)圖方式適合那種每個區(qū)塊中的內(nèi)容屬于平級關(guān)系的專題，例如示例中的幾個功能點和分類，都是屬于同一級的內(nèi)容，所占的比例也相同，用這種組合的排列能夠保持各內(nèi)容的關(guān)系，也能讓布局更有創(chuàng)意。
 

D. 多重切割

不規(guī)則的構(gòu)圖，穩(wěn)定而銳利，干凈的排版，易于識別，不規(guī)則的構(gòu)圖方式，避免了畫面生硬，不易產(chǎn)生審美疲勞。不同的形狀和排列，呈現(xiàn)出來的視覺效果也不一樣。這種構(gòu)圖方式使用最多的一般是為了體現(xiàn)時尚感，科技感，與鋒利感覺的專題，例如時裝，家電，以及游戲戰(zhàn)斗類的專題等等。
 

2. 主體輪廓

活動的專題年年做，沒有新意，想更與眾不同？那就這樣處理吧，根據(jù)專題的主要內(nèi)容，從整體上構(gòu)建一個邊界或外形線，形成一個大的輪廓，將專題內(nèi)容巧妙的填充進(jìn)去。這種處理方式能夠讓用戶一眼就能了解到一些信息，符合專題主題，并且能夠讓頁面更有設(shè)計感，生動且活潑。需要提醒的是設(shè)計的時候?qū)⑿螤畋M量輪廓化，加以強調(diào)突出，主體不需要太具象，舍棄一些繁瑣的、次要的元素，以免影響用戶閱讀內(nèi)容。從個人經(jīng)驗來說，小編一般會在拿到需求的時候先進(jìn)行腦暴發(fā)散聯(lián)想，提取出一些有用的信息，再從中挑選出適合元素去尋找一些圖片，通過圖片素材來激發(fā)創(chuàng)意。

















這類構(gòu)圖方式一般針對那種主體內(nèi)容很明確以及具象，能夠用物品或輪廓直接代表，比如:端午可以用龍舟、粽子；中秋可以用月餅、玉兔；會員可以用皇冠，鉆石等等等等，可根據(jù)具體的內(nèi)容來進(jìn)行嘗試。
 

3. 放射及透視

通過整體放射狀加透視構(gòu)圖，使畫面呈現(xiàn)立體與空間感，視覺焦點明確，畫面沖擊力強，富有動感。需要注意的是放射狀的排版不太適合文字閱讀，要注意文字排版。建議在文字?jǐn)?shù)量較少的情況下選擇此種構(gòu)圖。一般游戲激戰(zhàn)類的專題會較多的使用這種構(gòu)圖，突出動感。









 

4. 整體場景

專題內(nèi)容不多，要突出趣味性，又怕用戶無聊，那就設(shè)計成一副美妙的插畫吧！讓用戶迅速置身在搭建的場景中，帶動情緒，參與互動，直觀獲取有用信息。這種處理方式會使頁面信息表現(xiàn)的更加準(zhǔn)確順暢，快速有效的把目標(biāo)用戶帶入到頁面氛圍當(dāng)中。不過需要注意的是場景搭建對素材的要求比較高，明暗，陰影，透視以及層次感，體積都需要用心處理。這類專題大多都會搭配動畫一起實現(xiàn)，在帶入感上更進(jìn)一層。在設(shè)計的時候，對專題內(nèi)容頭腦里要有畫面感，先搭建大的畫面關(guān)系，再往里頭添細(xì)節(jié)和內(nèi)容，切記場景不要搶了內(nèi)容的視覺焦點，在適當(dāng)?shù)臅r候做些減法。









 

5. 流程圖

如果你拿到的專題是漸進(jìn)以及流向又或者是展示各節(jié)點的內(nèi)容，用別的形式總感覺不夠具象，那何不干脆做成一個個性化的流程圖？俗話說，千言萬語不如一張圖，專題運用這種構(gòu)圖方式能夠?qū)⒉襟E，關(guān)系，各個節(jié)點以及整體流向展示清楚，配合圖片展示，一個枯燥的流程瞬間變得個性十足，用戶瀏覽簡單又明了，并且充滿了趣味性。












在網(wǎng)頁設(shè)計越來越注重個性、趣味性以及視覺沖擊力的今天，專題頁面的構(gòu)圖也已經(jīng)千變?nèi)f化，以上只是列舉出了其中較常見的一部分，不同的主題，不同的內(nèi)容，構(gòu)圖排版的出發(fā)點也不盡相同，上面列舉出來的方法也可以搭配使用，在拿到需求的時候，先不著急下手，構(gòu)思的時候可以大膽嘗試，考慮內(nèi)容和風(fēng)格，先確定構(gòu)圖，再往里面添加內(nèi)容，充分考慮到內(nèi)容的排版，盡量做到讓一個專題有大創(chuàng)意的同時又具有小細(xì)節(jié)，實現(xiàn)整體形式感的完美和諧的統(tǒng)一。
另外最后提醒一下：所謂構(gòu)圖就是將表現(xiàn)主題的各個構(gòu)成要素按照主次關(guān)系放置在畫面相應(yīng)的區(qū)域，形成視覺感受，達(dá)到設(shè)計意圖。所有的構(gòu)圖方式追根究底都是為內(nèi)容服務(wù)，構(gòu)圖必須要服從主題表現(xiàn)的要求，設(shè)計師在設(shè)計的時候要注意在追求創(chuàng)意構(gòu)圖的同時也別影響到用戶閱讀內(nèi)容。

VIA：百度MUX