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

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

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

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

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

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

構(gòu)圖比例

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

1. 1:1分割

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

1:1分割比例構(gòu)成方式，多用于版面中兩部分內(nèi)容處于并列或?qū)α⒌年P(guān)系。

2. 黃金分割

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

在設(shè)計(jì)中有意識(shí)地運(yùn)用黃金分割比例進(jìn)行設(shè)計(jì)，可以營(yíng)造出富有美感的版式效果。

3. 白銀分割

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

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

4. 2:1分割

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

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

5. 3:1分割

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

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

空間調(diào)整

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

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

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

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

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

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

靈活運(yùn)用

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

1. 曲線分割

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

2. 圖片裁切

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

3. 文字破圖

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

4. 元素串聯(lián)

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

5. 圖片退底

把圖片主體進(jìn)行退底處理，重新?tīng)I(yíng)造場(chǎng)景，弱化空間的分區(qū)。

6. 空間留白

使用留白破除兩個(gè)空間的間隙，拉開(kāi)畫(huà)面的空間感，具有良好的視覺(jué)效果。

總結(jié)

• 上下構(gòu)圖是將版面分割為上下兩部分，或讓畫(huà)面中的元素整體呈現(xiàn)出上下的分布趨勢(shì)，主空間承載視覺(jué)點(diǎn)，次空間承載閱讀信息，呈現(xiàn)的視覺(jué)效果平衡而穩(wěn)定，是非常實(shí)用的構(gòu)圖方式;
• 進(jìn)行上下構(gòu)圖設(shè)計(jì)時(shí)，可以根據(jù)版面內(nèi)容的信息體量劃分畫(huà)面的空間，常用的版面分割比例有：1:1、1:1.618、1:1.414、1:2、1:3等;
• 為了避免版面的呆板，可以通過(guò)調(diào)整版面空間變換出多種編排形式;
• 可以通過(guò)曲線分割、圖片裁切、文字破圖、元素串聯(lián)、圖片退底、空間留白等手法，變換出多種編排形式，巧妙破除上下分割的單一性與呆板感。

文章來(lái)源：優(yōu)設(shè)    作者：藝海拾貝Design

藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)