<code id="wiciw"></code>
UI設(shè)計是隨著智能設(shè)備的飛速發(fā)展、互聯(lián)網(wǎng)行業(yè)的發(fā)展以及農(nóng)林牧漁傳統(tǒng)行業(yè)的急于轉(zhuǎn)向而興起。主要是企業(yè)對移動設(shè)備交互界面的重視。在企業(yè)越來越重視界面設(shè)計的今天。傳統(tǒng)的平面設(shè)計能為現(xiàn)在我們的UI設(shè)計提供哪些參考呢，我們能從中借鑒的技巧有哪些？今天就從版式設(shè)計說起。
在UI設(shè)計中版式設(shè)計不言而喻是非常重要的。版式設(shè)計就如同蓋房子先要搭好框架一樣。一款A(yù)PP視覺呈現(xiàn)是不是符合商業(yè)性并兼具審美。其中的版式設(shè)計是其核心。而在平面設(shè)計中版式設(shè)計也是一個作品的核心。平面設(shè)計長時間的發(fā)展積淀了相當(dāng)多實用的技巧和方法。
版式設(shè)計中形勢方法指的是、畫面的表現(xiàn)方法和原理。說白了就是畫面要出什么效果就用什么表現(xiàn)手法而已。平面設(shè)計中形勢方法可以分為。虛空留白、比例適度、對比調(diào)和、變化統(tǒng)一、變異秩序、節(jié)奏韻律、重復(fù)交錯、對稱均衡等。今天我們舉例分析一下前四個。
1、虛空留白（適合現(xiàn)在極簡設(shè)計風(fēng)格）
這種版式設(shè)計主要是突出主題，給人以輕松愉悅的感覺。適合文藝范的和有逼格的app界面使用，能夠營造出高品質(zhì)的界面風(fēng)格。但是如果一旦運(yùn)用不得當(dāng)容易出現(xiàn)界面空或單調(diào)的感覺。
2、比例適度（協(xié)調(diào)UI中各部分內(nèi)容）
平面設(shè)計中所說的比例適度主要是整體和部分的協(xié)調(diào)，采用合理的比例方法，如：黃金比例、等差等比。去協(xié)調(diào)各部分的關(guān)系使各部分要素產(chǎn)生聯(lián)系。在UI版面布局中正是需要調(diào)節(jié)和有機(jī)的組合各要素在有限的界面里的合理性。
3、對比調(diào)和（UI中信息層級的表現(xiàn)）
對比調(diào)和在平面設(shè)計中是經(jīng)常用到的，整體版面要調(diào)和，局部版面要對比。對比是強(qiáng)調(diào)主次關(guān)系。對比調(diào)和用到UI設(shè)計中可以做到設(shè)計內(nèi)容在主次關(guān)系的層級化。在統(tǒng)一調(diào)和的界面里又充滿了對比的小情調(diào)。這正是平面不平之所在，也是一個優(yōu)秀的界面所必備的。
4、變化與統(tǒng)一（是UI突破同質(zhì)化的一種方法）
變化與統(tǒng)一是形式美法則的總則。是其他方法方式的一個總結(jié)。變化所說的就是在設(shè)計中要有所創(chuàng)新不能總墨守成規(guī)，統(tǒng)一是設(shè)計要做到視覺上的愉悅而不是雖然有局部吸引人的眼球但是整體一看卻是辣眼睛。變化和統(tǒng)一也許是突破現(xiàn)在APP同質(zhì)化的一種方法。在現(xiàn)在APP同質(zhì)化嚴(yán)重的情況下我們能做到APP的風(fēng)格統(tǒng)一又不墨守成規(guī)尋求變化才是營造自己風(fēng)格的一種方法。
這些平面設(shè)計里的形式美法則在UI設(shè)計中同樣受用。這些表面形式在做banner圖構(gòu)圖和創(chuàng)意上也特別有用。
版式設(shè)計的基本類型有特別多。我們這里著重分析其中對UI設(shè)計最有幫助的骨骼型、左右分割、曲線型、滿版型這幾個基本類型。
1、骨骼型（類似網(wǎng)格構(gòu)圖）
這里說的骨骼型就是在版式構(gòu)圖中，進(jìn)行橫豎向的分欄。能容嚴(yán)格按照分欄排列。版面效果沉穩(wěn)厚重，井然有序，如果橫豎分欄交叉排列還可制造靈動活潑的版面氣氛。非常類似網(wǎng)格構(gòu)圖的方法。在UI設(shè)計中也很受用，可以很好的規(guī)范個元素的位置。（如果你對目前的界面設(shè)計一籌莫展，不妨可以試試這種方法）
2、左右分割型（瀑布流）
左右分割不外乎就是把版面左右分開在配之以圖文。在UI中的應(yīng)用是隨著扁平化卡片化的興起，在移動端界面尺寸的限制下，開始進(jìn)行了信息的分割處理。橫向的卡片式布局使得一屏內(nèi)所看到的信息受到了極大的限制（不利于用戶體驗，卡片式并非萬能）。所以就應(yīng)用的左右分割的布局。左右分割有利于信息的呈現(xiàn)，可以與瀑布流結(jié)合。
3、曲線型（UI方向1）
曲線型主要表現(xiàn)的是韻律和節(jié)奏，可能符合一部分小眾APP設(shè)計界面設(shè)計，充滿了特色和戲劇性。我覺得有特色的界面設(shè)計是這些小眾APP的設(shè)計核心?？梢岳昧眍惖男”姷脑O(shè)計做吸引。
4、滿版型（UI方向2）
滿版設(shè)計在平面設(shè)計中主要表達(dá)大方、舒展的設(shè)計風(fēng)格。在UI移動端界面設(shè)計中寸土寸金?，F(xiàn)在的扁平化，極簡設(shè)計風(fēng)格都在留白提升逼格。但是未來極簡設(shè)計終將過去，我們面對的還是海量信息。
版式設(shè)計是平面設(shè)計的一部分，也應(yīng)該是UI設(shè)計的一部分。這里僅僅是說出了版式設(shè)計的一點點內(nèi)容，部分的形式美法則和版式設(shè)計的基本類型。還有很多很多對UI設(shè)計有利的點沒有發(fā)掘。站在巨人的肩上可以看的更遠(yuǎn)，平面設(shè)計就是我們前進(jìn)的加速劑。
本文由 @彪形大漢 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
蘭亭妙微(www.1leven.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan
今天來優(yōu)化一張作品
今天我們來看一下學(xué)員作品并且優(yōu)化一下！
在優(yōu)化之前，你們能不能看出作品還存在什么問題呢？
是不是感覺已經(jīng)是一張完成度很高的作品了，那它能不能更好呢？
當(dāng)然可以！我們來看看如何優(yōu)化。
原圖的構(gòu)圖雖然感覺挺有意思，但是并沒有做到位，對于新手來說，這種構(gòu)圖也是相對比較難的，前期我建議大家可以選擇一些相對不易出錯的構(gòu)圖方式，比如元素圍繞主體，營造畫面沖擊力的居中構(gòu)圖。
1.可以把元素聚集到中心周圍，讓畫面緊湊，飽滿，做出向外沖出的效果。
2.可以添加兩根前后貫穿空間的光帶，增強(qiáng)沖擊力，讓構(gòu)圖更有張力！
這樣的構(gòu)圖簡單并且容易出效果！
1.飽和度：
原版畫面中這一層次看起來是不是特別重，導(dǎo)致畫面的節(jié)奏一下有點亂掉了。而且整體飽和度相對比較高，有點油膩！
我們要適當(dāng)降低畫面中部分層次的飽和度，這樣才會使整體更加高級，可以看下優(yōu)化之后的效果：
是不是舒服多了。
2.統(tǒng)一色調(diào)：
我們做圖的時候主體和環(huán)境要有一些呼應(yīng)，這個飛碟飛碟正面有點太綠了，缺少一些呼應(yīng)環(huán)境的顏色，這樣就會感覺和畫面有些割裂感，可以增加一些環(huán)境色，使其統(tǒng)一呼應(yīng)到一起。
我們看下前后優(yōu)化的對比效果：
這樣就和諧多了！
首先我們來看原圖，是不是會覺得畫面中心有一點空，元素都在外部，導(dǎo)致整體不夠飽滿：
所以我們在優(yōu)化的時候，把元素平均的分布在畫面的每一個地方，使空間看起來更加的均衡：
現(xiàn)在元素雖然均衡了，但是并沒有產(chǎn)生前后關(guān)系，所以我們讓后面的元素更弱一些，分幾個層次。
如下圖：
當(dāng)我們把這樣的元素層次放在畫面里之后，看起來就會更加的精致飽滿，空間感十足：
其實增加趣味性的方法有很多，比如我們在這個畫面融入了很多表情，可以讓畫面更加生動。
除了這樣的方法，其實一些小小的改動有時候也可以讓畫面變得更加趣味一些。
比如：
原版的飛碟太正了，顯得呆呆的，這個時候我們可以把主體歪一下，一下子它就活潑了。
再比如：
有時候元素直接漏出來顯得比較生硬，如果我們利用一層一層的波紋，藏住元素，或許也可以巧妙地增加畫面趣味性：
效果還不錯吧！
最后我們加上文字，看看整體優(yōu)化前后的效果！這是不是要比之前的穩(wěn)很多呢：
最后，我們再來總結(jié)一些知識點吧：
1.構(gòu)圖：構(gòu)圖的時候就要要注意整體的飽滿度，畫面穩(wěn)定，元素分得太分散就會不聚焦了。
2.顏色的飽和度：主體>元素>背景。
3.空間：畫面不能太空，要有節(jié)奏的把畫面每一個角落都照顧到，其次我們要在視覺上有前有后，增強(qiáng)縱向空間上的層次感。
4.趣味性：增加畫面趣味性除了利用表情以外，還可以用一些微小的變化去實現(xiàn)，比如歪著的可能比正的活潑一點，再比如元素的穿插互動也可以讓畫面增趣不少，大家可以多多嘗試！
以上就是今天和大家分享的內(nèi)容，希望對大家有所幫助！
我們在設(shè)定界面風(fēng)格的時候，少不了顏色的配比，但顏色一定是講究平衡的，其中一個最重要的平衡就是明暗的平衡，如果你的界面全屏都是很亮的顏色，那就會導(dǎo)致非常的刺眼，比如像瑞文同學(xué)的這個顏色設(shè)定：
就是過于明亮了，其實當(dāng)我們的顏色過于明亮?xí)r，最常用的一種方式就是，直接用黑色去壓住亮色，像下面這組圖標(biāo)的做法一樣，減少亮部顏色，直接增加黑色：
這樣就不會那么刺眼了，當(dāng)我們明白了底層原理之后，再去優(yōu)化配色，我們看前后的變化：
這樣就會比之前舒服很多，當(dāng)然，也可以試試頭圖變成黑色，按鈕變成綠色，把重色面積繼續(xù)加大，但不管哪一種，都會比之前全是亮色要好很多！
小A同學(xué)是一個非常有潛力的同學(xué)，但是最開始交上來的吉祥物作業(yè)，也不是很理想，效果如下：
話不多說，我們就改動一個點，五官緊湊，看看前后效果對比：
可愛的程度完全不在一個檔次，我們再看看小A同學(xué)后面的延展效果：
比之前強(qiáng)了很多很多倍，就是因為一個五官緊湊。
我們在做練習(xí)的時候，很重要的一個鍛煉點就是視覺敏銳度，能夠敏銳的發(fā)現(xiàn)哪里不舒服，這個真的很重要。
而視覺敏銳度里面就有一個維度是顏色，比如我們在看下面一兜糖同學(xué)做的質(zhì)感圖標(biāo)作業(yè)：
我們應(yīng)該快速的看出，第一個圖標(biāo)顏色不是很和諧，沒有后面兩個那么舒服，主要是那個藍(lán)色有點臟，我們看優(yōu)化后的三個圖標(biāo)：
就比之前要統(tǒng)一舒服很多。
當(dāng)我們的練習(xí)達(dá)到一定量時，敏銳度自然就會提高很多，所以一定要多去練習(xí)，把敏銳度這一塊提高上來。
這是潘子同學(xué)的疑惑點：
他感覺綠色好難啊，第一次交上來的作業(yè)如下：
先不說造型問題，就光說顏色，就有點單薄，也有點太亮了，還有就是顏色比較正。
其實我們在配綠色的時候，只要把綠色加一點藍(lán)色，或者加一點黃色就會讓顏色好看很多。
后來潘子同學(xué)把顏色進(jìn)行了優(yōu)化：
這樣就比之前還要多了。
還有包括檸檬同學(xué)用的綠色:
也是比較好看的。
這回再用綠色的時候，大家清楚怎么好看了吧！
以上就是今天和大家分享的一些知識點啦，大部分是關(guān)于顏色的，顏色敏銳度、綠色怎么配，明暗的對比等等，顏色是一個非常重要的視覺維度，希望大家都能重視，并且多多練習(xí)。提高自己的色感！
在任何時候，海報的圖片處理都是設(shè)計師不可避免的一個步驟，運(yùn)用對色調(diào)的處理，構(gòu)圖的改變，甚至于風(fēng)格化處理來調(diào)整圖片，使之能夠更加的適合版面，我們今天分享的就是通過對圖片的處理來塑造不同風(fēng)格海報的設(shè)計。
01-
酸性液體金屬效果處理
酸性風(fēng)格它的體現(xiàn)形式通常是鐳射紋理，金屬玻璃材質(zhì)，3D物體材質(zhì)等，其中很多人都好奇金屬玻璃材質(zhì)的做法，也就是如何將普通的圖片轉(zhuǎn)換成酸性圖片，接下來我們將講解酸性圖片效果的處理方法，二話不說，先上效果圖：
步驟一/step 01
導(dǎo)入已經(jīng)摳好的素材，快捷鍵ctrl+shift+u作去色處理
步驟二/step 02
ctrl+j復(fù)制一層，ctrl+i反向一下，并設(shè)置模式為【差值】，ctrl+e合并這兩個圖層，這一步驟要重復(fù)2-3次左右，會形成這樣的效果，做好后的效果有點丑，但是沒關(guān)系，我們接著往下做。
步驟三/step 03
將圖形轉(zhuǎn)化為智能對象，執(zhí)行命令：濾鏡-模糊-表面迷糊（數(shù)值自定，具體數(shù)值可以自行修改，主要將黑白部分過度更加柔和一些）
步驟四/step 04
執(zhí)行命令：濾鏡-風(fēng)格化-油畫（數(shù)值自定，這一步驟可以將黑白之間的過渡更加柔和，形成液體金屬的最終效果）
步驟五/step 05
執(zhí)行命令：濾鏡-濾鏡庫-塑料包裝（數(shù)值自定，這一步驟還是處理黑白之間的過渡，使之更加柔和），最后可以調(diào)整一下亮度和對比度，使之與金屬更加相似。
步驟六/step 06
最后排版上文字，海報就完成啦。
02-
復(fù)古潮流風(fēng)藝術(shù)海報
半調(diào)網(wǎng)屏模式作為印刷中的重要方法，有著其特殊的處理藝術(shù)效果。在ps中，通過色彩模式可以將圖片的效果處理成半調(diào)網(wǎng)屏的像素狀效果。它有著復(fù)古潮流的藝術(shù)效果，下面我將講解如何在ps中給圖片添加半調(diào)網(wǎng)屏藝術(shù)效果，同上，先上效果圖：
步驟一/step 01
在PS中導(dǎo)入圖片，在這種潮流海報中，我們追求特殊風(fēng)格海報設(shè)計，可以在摳圖時故意粗糙的摳圖出來，并執(zhí)行命令：圖像-調(diào)整-黑白
步驟二/step 02
執(zhí)行命令：圖像-模式-灰度，再次執(zhí)行命令：圖像-模式-位圖，調(diào)整參數(shù)像素設(shè)為300，方法使用半調(diào)網(wǎng)屏，點擊確定；
步驟三/step 03
在上一步點擊確定后出現(xiàn)以下界面，頻率越小，效果越強(qiáng)烈，越大效果越輕，角度設(shè)置像素格的旋轉(zhuǎn)角度，形狀可以自行嘗試選擇，我這里選擇的是菱形；
步驟四/step 04
我們需要把位圖模式轉(zhuǎn)換成RGB,需要執(zhí)行兩次命令，第一次執(zhí)行：圖像-模式-灰度，第二次執(zhí)行：圖像-模式-RGB
接著是將弄好的圖片去掉白色底背景，在通道面板，按住ctrl鍵，鼠標(biāo)左鍵點擊其中一個通道，得到白色選區(qū)，快捷鍵：ctrl+shife+i反選選區(qū)，快捷鍵：ctrl+j復(fù)制圖層，隱藏下面的圖層，得到了一個半調(diào)網(wǎng)屏的圖片。
步驟五/step 05
最后排版上文字，就可以得到一張復(fù)古潮流藝術(shù)風(fēng)海報。
03-
炸裂風(fēng)格圖片處理
接下來休息下，我們來做一個非常簡單，但又非常好看且具有形式感的圖片處理方法，炸裂風(fēng)格圖片海報，調(diào)整比較細(xì)的方塊可以有刺繡效果，非常具有視覺沖擊力，同時也能使版面產(chǎn)生非常強(qiáng)烈的層次感與形式感。先看最終效果：
步驟一/step 01
只需將圖片導(dǎo)入PS，執(zhí)行濾鏡-風(fēng)格化-凸出，這里可以自行調(diào)整參數(shù)
步驟二/step 02
在版面上排版圖片和文案，這樣一張炸裂風(fēng)格的海報就做好了。
04-
長虹玻璃風(fēng)格海報
長虹玻璃效果顧名思義，就是像玻璃樣式的效果，他能給人一種朦朧的美感，與“模糊”有點類似，它比較適合潮流時尚的一些產(chǎn)品海報設(shè)計時使用，尤其在電商海報中特別常見，接下來我們來詳細(xì)講解這種效果的做法吧，先上效果圖：
步驟一/step 01
在ps中新建一個畫布，填充一個50%的中性灰，用矩形工具繪制一個細(xì)長的矩形，填充顏色為黑白的線形漸變；
步驟二/step 02
復(fù)制漸變的矩形框，填滿整個畫布，全選復(fù)制出來的矩形框，郵件轉(zhuǎn)換為智能對象，快捷鍵ctrl+shift+s存儲為psd文件，注這是后期用來置換的文件
步驟三/step 03
在畫布中倒入我們準(zhǔn)備好的圖片文件，復(fù)制一層，執(zhí)行命令：濾鏡-模糊-高斯模糊；
步驟四/step 04
執(zhí)行命令：濾鏡-扭曲-置換，在跳出的頁面設(shè)置水平和s垂直比例都為50，置換圖：拼貼，未定義區(qū)域：折回，點擊確定后選擇剛存儲的用來置換的文件；
步驟五/step 05
將剛才線形漸變的矩形置于最上層，混合模式改為柔光，并且調(diào)節(jié)下透明度，這樣長虹玻璃效果就完成啦。
步驟六/step 06
選取工具選擇需要的部分執(zhí)行蒙版，就可以得到一半有玻璃，一半沒有玻璃的效果，然后排版上文字，海報完成！
05-
3D炫彩海報
3d炫彩海報適用于科技，創(chuàng)意等風(fēng)格呈現(xiàn)時使用，它的本質(zhì)是將一張圖進(jìn)行一種3d化處理，制作起來也是相當(dāng)?shù)暮唵?，且特別能提升版面的形式感與立體感，制作非常簡單，我們一起來做下唄，老規(guī)矩，先上圖：
步驟一/step 01
首先我們需要找一張顏色特別豐富的圖片，最好是像這種發(fā)光的海報，執(zhí)行命令：濾鏡-扭曲-旋轉(zhuǎn)扭曲，設(shè)置相應(yīng)的數(shù)值
步驟二/step 02
執(zhí)行命令：3d-從圖層新建網(wǎng)格-深度映射到-平面，把3d面板里面的預(yù)設(shè)改為【未照亮的紋理】
步驟三/step 03
在3d里面調(diào)整合適的角度后，在圖層面板選擇圖層，點擊鼠標(biāo)右鍵-柵格化3d，快捷鍵ctrl+t將圖層調(diào)整適合大?。?/p>
步驟四/step 04
最后排版上文字，海報就完成啦！
06-
塑料薄膜風(fēng)格海報
最后一種是塑料薄膜風(fēng)格海報，這種效果相對來說比較復(fù)雜，所以放在最后一個說，雖然不涉及圖片處理，但是對于海報設(shè)計來說可以說是錦上添花的一種存在，他能讓海報具有一種光澤的質(zhì)感，使其更顯層次感和形式感，這種海報在店招海報或者產(chǎn)品海報中比較實用，廢話不多說，來一起來做下吧，還是老規(guī)矩，上效果圖
步驟一/step 01
我們需要新建一個空白圖層，填充黑色，執(zhí)行命令：濾鏡-渲染-云彩
步驟二/step 02
執(zhí)行命令：濾鏡-液化，這里你可以隨意一點畫，這是將塑料膜的紋路畫出來，這是我畫的樣子；
步驟三/step 03
執(zhí)行命令：濾鏡-濾鏡庫-藝術(shù)效果-繪畫涂抹，畫筆類型選擇火花，這一步是將黑白顏色區(qū)分開來；
步驟四/step 04
再次執(zhí)行命令：濾鏡-濾鏡庫-素描-鉻黃漸變，這一步同樣是為了是將黑白顏色區(qū)分開來，只不過這次的效果更加明顯；
步驟五/step 05
點開通道面板，按住ctrl鍵，隨意單機(jī)一個通道，得到選取，回到圖層面板，快捷鍵ctrl+j復(fù)制一層，圖層模式改為濾色，調(diào)整適合的透明度，最后在下面加上圖片，排版上文字，海報就完成啦！
掌握一些有效的技巧，有時能事半功倍。
由于識別性不高，手寫的英文單詞最好是無關(guān)緊要的，主要是為了起裝飾作用。
怎么樣？以上的7個版式小技巧還不錯吧，趕緊去試一試。你們可能也發(fā)現(xiàn)了，其實它們都是巧妙運(yùn)用了設(shè)計中的對比原則，比如大小對比、粗細(xì)對比、點線面、平面與立體對比、輪廓對比、虛實對比等等。所以熟練掌握對比非常重要，你也可以在對比的基礎(chǔ)上，嘗試出很多有趣、好看的排版技巧和設(shè)計形式。
蘭亭妙微(www.1leven.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan。
在設(shè)計的創(chuàng)作重，很多設(shè)計師都喜歡追求軟件技法帶來的炫酷感，而忽略了構(gòu)圖理論知識帶來的重要性，這篇文章就是為了解決這個問題
海報設(shè)計對于初學(xué)者而言，是一個簡單入門，又容易出作品集的類目。在剛開始練習(xí)時不要天馬星空的去想象，最好的練習(xí)就是根據(jù)一定的構(gòu)圖規(guī)范，嘗試尋找規(guī)律，建立可行的秩序，讓版面具有一定的閱讀性。
-
只有在版面具有基礎(chǔ)的閱讀性，才可以根據(jù)想法思路進(jìn)行創(chuàng)意性的表現(xiàn)，而建立持續(xù)最簡單的方式之一就是運(yùn)用構(gòu)圖。當(dāng)下主流的常用構(gòu)圖，我大概總結(jié)整理有七種形式，下面我們一起來了解一下，附帶案例演示。
第一種：四周壓角構(gòu)圖→
四周壓角構(gòu)圖指的是將標(biāo)題或者重要信息放置在版面的四個邊角處,可以是圖形或者文字，其余信息元素等則放置在畫面中間區(qū)域，使其整個版面嚴(yán)謹(jǐn)有序,平衡且具有視覺的張力。壓住四角一般會結(jié)合居中式構(gòu)圖來呈現(xiàn)版面,可以產(chǎn)生視覺聚焦。
①
將信息壓在四個角之內(nèi)
②
將信息超出頁面四角一部分
③
將信息沿四周環(huán)繞排版
第二種：對稱式構(gòu)圖→
對稱式構(gòu)圖指的是將版面分成上下或者左右兩個部分,上下或左右兩部分比重相同,排版相似,對稱式構(gòu)圖可以使版面更加有秩序感,適合處理信息較多,層級較為復(fù)雜的內(nèi)容。對稱式構(gòu)圖可以很快速的塑造出版面的平衡，視覺上的平衡幾乎就等于完成了版面的50%設(shè)計目的。是初學(xué)者中最為常見的形式之一，對稱之間互相呼應(yīng)，信息處理可以從中快速打破呆板狀態(tài)，讓版面具有靈活性。
①
上下對稱式構(gòu)圖
②
左右對稱式構(gòu)圖
第三種：居中式構(gòu)圖→
居中式構(gòu)圖也叫中心式構(gòu)圖，是指把主體信息放在版心中間,這樣容易產(chǎn)生視覺聚焦,其他信息圍繞版面中心來進(jìn)行排版設(shè)計,放在版面中心的可以是文字、圖片、圖形或者文字等。使用居中式構(gòu)圖，需要多注意畫面整體的平衡和元素之間的留白關(guān)系，讓元素組合之間留有足夠的對比與閱讀性。
第四種：S型式構(gòu)圖→
S型式構(gòu)圖,將主要元素按照S型排版,版面更加的自由生動,非常具有表現(xiàn)力,是一種很常見的靈活構(gòu)圖手法,主要元素可以是圖像、圖形、標(biāo)題文字、slogan等。S型式構(gòu)圖是講曲線與版面進(jìn)行結(jié)合，可以快速的創(chuàng)造出靈活的版面視覺以及節(jié)奏感，可以很好的提高版面的形式感，同時也可以有效的引導(dǎo)觀眾讀者的視線。
第五種：三分式構(gòu)圖→
三分式構(gòu)圖是指將版面分割成相等或不等的三塊區(qū)域,每個區(qū)域放置相應(yīng)的信息,三分式構(gòu)圖分垂直三分法和水平三分法,三分之后版面更有秩序感,適合處理文案較多,層級較為復(fù)雜的內(nèi)容。難度較高，同時容易讓版面連貫性斷層，所以在運(yùn)用當(dāng)中需要額外留意元素與空間之間的融合表現(xiàn)。
①
水平三分式構(gòu)圖
②
垂直三分式構(gòu)圖
第六種：傾斜式構(gòu)圖→
傾斜式構(gòu)圖,是指將版面整體或者主要元素作傾斜處理,也可做透視處理或?qū)翘幚?這種構(gòu)圖使版面更靈活,更加的具有形式感，作傾斜處理的元素可以是主題、圖片等元素。傾斜與對角可以提高文字或圖片的表現(xiàn)力，能很快速的塑造整體的空間感。
第七種：散點式構(gòu)圖→
散點式構(gòu)圖,是指將元素按照規(guī)律或者不按照規(guī)律自由的放置在版面的區(qū)域,散點放置的內(nèi)容通常有文字,圖片等,通常散點式構(gòu)圖都會結(jié)合S型式構(gòu)圖搭配使用,這種構(gòu)圖形式感強(qiáng),更具有畫面表現(xiàn)力.在運(yùn)用的時候，需要特別注意文字或標(biāo)題的閱讀性，過于搶鏡會讓版面丟失主題。
光說不練假把戲，實操案例來一個，這一個案例是圍繞四周壓角構(gòu)圖來分享海報的制作操作技巧。
涉及到的知識點有:
①四周壓角構(gòu)圖的技巧;
②文字編排;
③利用文字的局部輪廓化使版面更具有形式感。
我們先來看看最終的海報效果先。
第一步：→
所選的文案是一個攝影展，所以我們找了一張具有故事性的圖片作為底圖,新建文檔,背景填充為黑色，置入圖片,確定圖片在版面中的位置，因為我們準(zhǔn)備做四周壓角構(gòu)圖型的海報，所以我們與居中式構(gòu)圖相結(jié)合,這樣能使版面的視覺聚焦。
第二步：→
根據(jù)圖片的構(gòu)圖，我們來確定整體版面的構(gòu)圖形式,由于圖片是居中偏右的，所以我們用居中式構(gòu)圖加上四周壓角構(gòu)圖來進(jìn)行整體版面的風(fēng)格呈現(xiàn)。
第三步：→
將主題文案“無限的山峰”以四周壓角構(gòu)圖的方式放置在版面的四個角上,我們使用的是壓在版面以內(nèi)的壓角構(gòu)圖,并結(jié)合居中構(gòu)圖的方式，這樣能使版面更加的規(guī)整有序,而且具有視覺張力,注意圖片和文字的聯(lián)系。
第四步：→
現(xiàn)在我們來進(jìn)一步進(jìn)行處理，由于主題文案相離較遠(yuǎn)，接下來就是增強(qiáng)主題文字之間的聯(lián)系，我們嘗試用線來處理,線的作用就是連接與分割,我們用線將主題文字連接起來,并加上一些漢語拼音元素,使線條不會那么單調(diào)，并且更具有形式感。
第五步：→
先不急著下一步，我們先來觀察下版面，現(xiàn)在的版面被我們分割成了四份,我們把剩下的信息分別在指定的區(qū)域內(nèi)進(jìn)行排版。
第六步：→
我們將剩下的文案分別進(jìn)行排版，重要的信息我們需要放大處理,不重要的信息可以偏小一些,重要的信息比如:參展藝術(shù)家、日期、地址等,這里要注意層級之間的劃分,要使版面顯得井然有序。
第七步：→
其實版面到這里已經(jīng)處理的差不多了,但是主標(biāo)題看起來稍顯平凡,跟內(nèi)文的文字一樣，沒有什么特征特色，所以我們可以做更多的變化,拆分主題文字的一些筆畫,并使其輪廓化,我們還可以傾斜或放大一些筆畫，或者局部模糊，打散等等眾多效果都可以嘗試。
第八步：→
其最后把整體的細(xì)節(jié)稍微調(diào)整下,這樣，一張具有形式感的海報就形成了,這張海報用到了四周壓角構(gòu)圖，居中式構(gòu)圖,所以可得出結(jié)論,七種構(gòu)圖方式之間是可以交叉使用的,只要能使版面更加的好看,更具有形式感就行。
→ 完成??！
蘭亭妙微(www.1leven.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan。
藍(lán)藍(lán)設(shè)計的小編 http://www.1leven.cn
<cite id="usmsk"></cite>