上次我們說(shuō)了視覺(jué)設(shè)計(jì)方向中的文字編排，文字編排只是版式和文字應(yīng)用的一部分，也是版式組成中不可或缺的一部分，除此之外，對(duì)版式來(lái)說(shuō)還有另外一個(gè)方面，就是版面的編排，版面中除了會(huì)出現(xiàn)文字信息之外，還會(huì)有主體和其他元素出現(xiàn)，本篇文章將立足于版式的基礎(chǔ)上之上，用一種簡(jiǎn)單明了的編排形式，讓大家對(duì)版式編排了解更深入一些，同時(shí)學(xué)會(huì)一種形式多方面應(yīng)用的方式，以敬畏之心，嘗試更多的可能；

 · 什么是畫(huà)中框 · 

面中框即是挖版圖，角版，出血版三種版面構(gòu)成結(jié)合使用的視覺(jué)表現(xiàn)，也可稱之為框版，即是在有限的版面空間內(nèi)重新創(chuàng)建一個(gè)內(nèi)容的載體，是承載畫(huà)面主體并加以強(qiáng)調(diào)的，有力的版面編排形式，也是基于網(wǎng)格系統(tǒng)最有效，最直接，最快速的版面劃分，亦是與背景和畫(huà)面中其他元素區(qū)分的直觀視覺(jué)表現(xiàn)，對(duì)要強(qiáng)調(diào)的內(nèi)容有著最為直接的影響和突出作用；

圖1：

全屏版面是設(shè)計(jì)中最常見(jiàn)也是最常用的一種版面編排，是在整個(gè)空間大小的基礎(chǔ)上對(duì)其進(jìn)

行一定的劃分，即涵蓋整個(gè)版面版面，可以給人一種整體統(tǒng)一的感覺(jué)，并且大面積的留白

也可以給人一種想象的空間，但對(duì)于版面的劃分和整體的把控相對(duì)較難一些；

圖2:

面中框則是在整個(gè)全屏版面的基礎(chǔ)上延伸出的另一種版面形式，其變化靈活，可操作性較

強(qiáng)，相較于全屏對(duì)版面的劃分和視覺(jué)的鎖定更加直觀容易一些，在基于網(wǎng)格的各種劃分上

可以更加直接和快速的幫助我們穩(wěn)定版面，確定主體內(nèi)容的載體區(qū)域并豐富版面視覺(jué)形式；

在整個(gè)版面版面編排中，框在穩(wěn)定整體版面的情況下則可以靈活多變，以不同的視覺(jué)形態(tài)滿足不同的需求，同時(shí)也是版面編排的另一種表達(dá)形式；

在相同的版面中，把畫(huà)面的主體以框的形式進(jìn)行強(qiáng)調(diào)并做區(qū)分，使其與文字之間形成獨(dú)立

的個(gè)體，但同時(shí)又是在整個(gè)版面中占據(jù)不同的比例，也是對(duì)整個(gè)版面進(jìn)行合理的劃分，使

其在視覺(jué)上看起來(lái)更加直觀清晰，也讓版面具有一定的穩(wěn)定性；

在整個(gè)版面版面編排中，框在穩(wěn)定整體版面的情況下則可以靈活多變，在有限的空間內(nèi)靈活的創(chuàng)造不同的表現(xiàn)形式，同時(shí)也可以讓整個(gè)畫(huà)面比較穩(wěn)定，在變化中尋求穩(wěn)定，并對(duì)其他內(nèi)容加以有效區(qū)分；以不同的視覺(jué)形態(tài)滿足不同的需求，同時(shí)也是版面編排的另一種表達(dá)形式；

 · 畫(huà)中框的作用 · 

 · 有邊距與無(wú)邊距 · 

在版面中我們把其分為全版型和框版型兩種版面編排表現(xiàn)，在以框的形式作為視覺(jué)表現(xiàn)時(shí)，不管對(duì)版面采用什么樣的劃分方法都離不開(kāi)無(wú)邊與有邊的形式，無(wú)邊即是版面中所創(chuàng)建的載體框一邊或者多邊與版面對(duì)齊不留邊距；有邊則是載體框四周以等邊距或者不等邊距與版面留有一定距離；兩者相輔相成，在共用的情況下可以使整個(gè)版面更加豐富；

< 無(wú)邊距="">

框版在版面中的使用無(wú)邊距的情況下，其主要是為了在全版和框版之間尋找一種平衡，即能展現(xiàn)出全版簡(jiǎn)潔的特征，同時(shí)又有框版聚焦的特征，而不同無(wú)邊距的框版演變也會(huì)傳遞出不一樣的視覺(jué)感受，具體則需要根據(jù)需求的實(shí)際情況選擇不同的無(wú)邊距框；

在無(wú)邊距的框版演變中可以看出，無(wú)邊距的一面則是版面起始的地方通過(guò)不同方向的邊距調(diào)整，則可以整個(gè)為版面帶來(lái)不同的視覺(jué)方向引導(dǎo)，從而傳遞出不同的視覺(jué)感受，無(wú)邊距并不是真的沒(méi)有邊距，而是以文字的安全邊距為基準(zhǔn)對(duì)框進(jìn)行無(wú)形的劃分，同時(shí)也是融合工整與突破的雙重性格；

< 有邊距="">

在有邊距的框版中可以讓主體內(nèi)容更加的明確突出，從而與文字信息形成兩個(gè)相對(duì)較為獨(dú)立的個(gè)體，讓版面的視覺(jué)看起來(lái)更加簡(jiǎn)潔明了，而有邊距的演變則是不管任何情況下都始終與整個(gè)版面的邊緣保持一定的距離，同時(shí)還需要注意兩者之間的色彩搭配關(guān)系；

框版的邊距可以隨著編排進(jìn)行變化調(diào)整，在穩(wěn)定性和規(guī)整性較強(qiáng)的情況下，依然可以創(chuàng)作出較為個(gè)性且不拘一格的版面形式，其關(guān)鍵在于框的運(yùn)用和形態(tài)；

 · 框版是用來(lái)打破的 · 

在設(shè)計(jì)中打破常規(guī)是每個(gè)設(shè)計(jì)師都應(yīng)該思考的問(wèn)題，而很多設(shè)計(jì)師甚至連規(guī)則都不清楚就想著打破，這是很不科學(xué)的想法，要打破框首先要去創(chuàng)建框，這也是很多大師會(huì)經(jīng)常使用到的設(shè)計(jì)表現(xiàn)手段，而框版則是實(shí)現(xiàn)打破常規(guī)的其中一個(gè)重要設(shè)計(jì)手段，是通過(guò)對(duì)框版的調(diào)整使其具有一定的視覺(jué)假象現(xiàn)象，在打破框的同時(shí)增添版面的個(gè)性；

圖1:

在全版的情況下要想打破現(xiàn)有的版式是很難做到的，其載體本身就是相對(duì)較為固定的大小

只能在修飾素材的修飾上做一些視覺(jué)的延伸，給人一種向外一直擴(kuò)張的感覺(jué)，但想要給人

一種打破現(xiàn)有版面的情況是不太可能的；

圖2:

在這種情況下我們?cè)囍诎婷嬷兄匦聞?chuàng)建一個(gè)框，調(diào)整好左右的邊距大小，然后把最下面的底色顏色與環(huán)境色融為一體，在保證主體內(nèi)容較為穩(wěn)定的情況下，修飾元素則會(huì)給人一種騰空的感覺(jué)，相較于左邊更加個(gè)性；

延伸之后的效果依然具有打破常規(guī)的效果，框的形態(tài)同時(shí)也可以做相應(yīng)的變化，同時(shí)文字也可以放在內(nèi)框的外邊，以營(yíng)造更加強(qiáng)烈的視覺(jué)差，且保證畫(huà)面的穩(wěn)定性；

 · 畫(huà)中框的表現(xiàn) · 

對(duì)稱型就是把整個(gè)版面用框的形式將其劃分成同樣大小不同的等份，而載體框則與文字形成對(duì)稱的形式，以相對(duì)穩(wěn)定的版面形式，其編排方式大多數(shù)是依據(jù)框的形式進(jìn)行排布；

【 案例演示 】

在設(shè)計(jì)中面中框作為版面的另一種表現(xiàn)形式，即是把版面中出現(xiàn)的圖片和文字以更加清晰直觀的形式展現(xiàn)在觀者眼前的一種形式，其在版面中有著不可忽視的作用，同時(shí)也讓版面的劃分更加清晰，便于理解；如果說(shuō)網(wǎng)格是一直隱藏在版面里的，那么框版就是依據(jù)網(wǎng)格系統(tǒng)用不同的方法讓網(wǎng)格可視化的表現(xiàn)，是對(duì)整個(gè)版面清晰梳理的另一種版面表現(xiàn)形式；

圖1:

先把素材素材復(fù)制一層，在版面中畫(huà)一個(gè)框，以上下對(duì)稱分割的形式置于版面，然后對(duì)其中一層執(zhí)行去色，并調(diào)整圖層樣式為顏色減淡剪貼蒙板到矩形框里面得出效果；

圖2:

把復(fù)制的圖層移至到下半部分并轉(zhuǎn)為智能對(duì)象，框底選擇深藍(lán)色并剪貼蒙板進(jìn)去，然后對(duì)素材執(zhí)行色相飽和度，調(diào)整素材的色彩并把圖層樣式選擇為顏色減淡；

圖1:

把素材處理好之后，針對(duì)整個(gè)版面進(jìn)行分析得出，素材的視覺(jué)效果并不是太理想，出血版式的延伸讓視覺(jué)不容易鎖定版面的主體，反而造成松散的視覺(jué)效果；

圖2:

在此基礎(chǔ)上適當(dāng)?shù)恼{(diào)整一下框版的邊距，使其把背景色顯示出來(lái)以作為區(qū)分但同時(shí)又不影響整體的視覺(jué)效果，之后把文字置入到版面當(dāng)中，并以對(duì)稱形式編排以貼合整體畫(huà)面；

居中型則是不管框版的大小均是以中心位置為基礎(chǔ)對(duì)版面進(jìn)行適當(dāng)?shù)膭澐?，在平衡版面的同時(shí)也可讓版面更加的個(gè)性；居中型較為常用的劃分法則是三分法和對(duì)稱型結(jié)合；

【 案例演示 】

框版通常會(huì)伴隨著主體的大小而對(duì)框做相應(yīng)的大小調(diào)整，在設(shè)計(jì)中很多情況下會(huì)受到主體的限制，或大或小，或?qū)捇蛘?，?duì)于框版來(lái)說(shuō)則可以作為很好的內(nèi)容載體以滿足畫(huà)面，我們把較小的人物素材置入到畫(huà)面當(dāng)中，然后對(duì)其進(jìn)行相應(yīng)的處理；

圖1:

對(duì)人物素材執(zhí)行相應(yīng)的處理手段，并創(chuàng)建框使其以上下居中的形式，并把人物素材剪貼蒙板到框里面以為文字編排留下可操作的空間，同時(shí)則需要注意文字編排也可以壓蓋在上

圖2:

把文字編排置入到畫(huà)面當(dāng)中，然后適當(dāng)?shù)恼{(diào)整位置文字整體均是圍繞著框進(jìn)行適當(dāng)?shù)木幣藕驼{(diào)整，以貼切整個(gè)版面的，最后加入一層紋理，覆蓋在背景和文字上面；

黃金型就是以黃金分割線為基礎(chǔ)的劃分方法，同時(shí)也是框版所占的版面面積大小，以最佳視覺(jué)呈現(xiàn)版面，在設(shè)計(jì)中也是經(jīng)常使用的最佳完美版面比例；

【 案例演示 】

當(dāng)我們拿到一個(gè)要設(shè)計(jì)的需求時(shí)，為了實(shí)現(xiàn)所要表達(dá)的目的，首先對(duì)需求進(jìn)行分析，并針對(duì)目的構(gòu)思大致的構(gòu)圖形式和風(fēng)格方向，在沒(méi)有想法的情況下可以考慮使用框版作為載體，然后對(duì)其進(jìn)行編排和創(chuàng)意的體現(xiàn)；

圖1:

把需求的主體置入到畫(huà)面當(dāng)中，在考慮以黃金劃分版面時(shí)要考慮到，黃金分割比較適合較大畫(huà)面中是針對(duì)整體的最佳視覺(jué)把控，是先對(duì)整體版面進(jìn)行劃分當(dāng)然也可以后續(xù)以此做調(diào)

整，把背景選擇合適的顏色與框版進(jìn)行區(qū)分，讓主體更加突出；

圖2:

上下左右均以黃金分割的形式以框版的形式呈現(xiàn)更加直觀，在使用時(shí)則可以在黃金分割內(nèi)適當(dāng)?shù)恼{(diào)整以滿足實(shí)際的需求，橫向要比黃金分割多出一些，而縱向要少一些，但多與少則是相同的，針對(duì)整體的版面來(lái)看，則會(huì)以角把最終形式呈現(xiàn)；

圖1:

紅色標(biāo)注則是針對(duì)整個(gè)版面的縱橫向黃金劃分，在此基礎(chǔ)上把文字置入到版面中進(jìn)行編排，并在四周留出相應(yīng)的邊距，以保證文字的可讀性，而主體框在這種情況下則不需要考

慮右邊邊距，其他信息依次進(jìn)行編排即可；

圖2:

在基本的框架確認(rèn)好之后，即可以以整體的視覺(jué)角度對(duì)其進(jìn)行審查，在審查的過(guò)程中也是細(xì)節(jié)反復(fù)調(diào)整的過(guò)程，對(duì)主體和文字信息整體再添加一些修飾性的紋理，使其更加具有視

覺(jué)效果，但要基于整體的風(fēng)格和氣質(zhì)之上調(diào)整；

 · 最后的總結(jié) · 

面中框的作為版面的另一種表現(xiàn)形式，也是基于版面編排的基礎(chǔ)上使畫(huà)面主體的視覺(jué)更加聚焦，其自身的形式也是變化多端，在實(shí)際應(yīng)用中與其他版面編排的方法并不沖突，而是多了一個(gè)內(nèi)容的載體，其需要根據(jù)不同的需求選擇不同的表現(xiàn)方式，但在不明白編排的各種分割方法時(shí)則可以用框版的形式加以練習(xí)，使其可視化增強(qiáng)自己對(duì)版面的認(rèn)知和解；