優(yōu)秀的排版是構圖、圖片、配色、字體等各方協(xié)調的共同結果，設計其實(shí)是沒(méi)有規則可循，審美從來(lái)都不在約束內發(fā)生。要想讓整個(gè)版式內容豐富又充滿(mǎn)呼吸的空間，需要我們整個(gè)的思考方式都流動(dòng)起來(lái)。錦州網(wǎng)站建設華睿科技同您一同分享網(wǎng)頁(yè)設計靈動(dòng)布局之相對自由式。
沒(méi)有邊界
一段文字和一張圖片，甚至一個(gè)圖標……在你進(jìn)行布局的時(shí)候，就像這樣一個(gè)布局，只是畫(huà)出了一個(gè)大致的框架圖，也許你只是想說(shuō)這只是框架，因為設計規劃前期很多素材還并不完善。
然而，很有可能你就會(huì )因此而將頁(yè)面設計成這樣
當然，你會(huì )說(shuō)這樣其實(shí)并沒(méi)有什么不好，因為幾乎我們所有看到的扁平化網(wǎng)頁(yè)都是這個(gè)樣式，但可以肯定的是，這個(gè)網(wǎng)頁(yè)并沒(méi)有多少呼吸的空間，整個(gè)網(wǎng)頁(yè)都被信息所填滿(mǎn)，如果稍微改變一下布局的元素大小和位置，其實(shí)就會(huì )展示出不一樣的版面效果（下圖），而很顯而易見(jiàn)后者的排版是更為靈活的。
邊界所造成的局限就是你的思維，你將會(huì )習慣在這個(gè)框架內去思考解決方案，如果你想要躲過(guò)這個(gè)陷阱，就是學(xué)會(huì )越過(guò)框架去思考。就算你做好了框架，也要認識到這不過(guò)是一個(gè)前期的不確定方向的試探，你完全可以改變框架的構造。
創(chuàng )造焦點(diǎn)
這么說(shuō)也許有點(diǎn)夸張，但任何一件好的平面作品，一定是有焦點(diǎn)的。就像我們談到過(guò)，十字準星型的視覺(jué)結構習慣將焦點(diǎn)置于中心位置，要制造一個(gè)焦點(diǎn)的辦法有很多，簡(jiǎn)言之，就是制造沖突。想象你在一個(gè)人群稀疏的大廳，突然有兩個(gè)人高聲爭論什么，這時(shí)引起了幾個(gè)人圍觀(guān)，這個(gè)情景就在原本安靜的人流中制造了一個(gè)關(guān)注焦點(diǎn)。同樣，在視覺(jué)領(lǐng)域也是如此，利用對比沖突應該是一種最有效的制造焦點(diǎn)的方式。
這個(gè)頁(yè)面設計中，字母與靜物交相融合的區域位于正中，成為虛焦點(diǎn)，而利用色彩的對比，那副黃色眼鏡又從虛焦點(diǎn)的區域突出出來(lái)成為實(shí)焦點(diǎn)
除了色彩，其他任何屬性都可以經(jīng)由對比形成焦點(diǎn)，這時(shí)你要做的，就是注意焦點(diǎn)不應太多。也因此，除了焦點(diǎn)以外，設計中的其他元素都要保持一種相似性。
空間：充滿(mǎn)-空置、積極活躍-消極被動(dòng)、前進(jìn)-后退、近-遠、二維-三維、封閉-開(kāi)放
形式：簡(jiǎn)單-復雜、美-丑、抽象-具象、清晰-模糊、幾何形式-有機形式、直線(xiàn)-曲線(xiàn)、對稱(chēng)-非對稱(chēng)、完整-破碎
結構：井井有條-混亂無(wú)序、排列成序-隨意放置、襯線(xiàn)字體-無(wú)襯線(xiàn)字體、機械-手工
紋理：細-粗、平滑-粗糙、反光-啞光、滑-黏、銳-鈍
位置：頂部-底部、高-低、右-左、上-下、前-后、有節奏-隨意、單獨-分組、接近-遠離、中心-邊緣、整齊排列-互不關(guān)聯(lián)、內-外
方向：垂直-水平、垂直線(xiàn)-對角線(xiàn)、向前-向后、穩定-活動(dòng)、內聚-分散、順時(shí)針?lè )较?逆時(shí)針?lè )较颉夹?凸形、正體字-斜體字
尺寸：大-小、長(cháng)-短、窄-寬、擴大-收縮、深-淺
顏色：黑色-彩色、亮-暗、暖色-冷色、明度-暗度、天然-人造、飽和（深色）-無(wú)色（素色）
密度：透明-晦暗、稠密-稀薄、液體-固體
重力：輕-重、穩定-不穩定
焦點(diǎn)突出的前提是非焦點(diǎn)區域的元素盡量保持一致。制造沖突似乎手到擒來(lái)，但是要保持一致卻需要步步為營(yíng)。
例如下圖頁(yè)面正中的圖案也是整個(gè)頁(yè)面的焦點(diǎn)所在
可以看到虛焦點(diǎn)區域是這個(gè)由手繪花朵、幾何圖案數字以及其他手繪圖案組成的這個(gè)圖案幾何體，實(shí)焦點(diǎn)卻是落在了最大的手繪花朵上。這時(shí)，手繪花朵的有機與相鄰的幾何形有了一個(gè)對比，這就是幾何形式與有機形式的對比。
三角的幾何形與數字的位置剛好都是三角。再仔細觀(guān)察整個(gè)彩繪花朵的材質(zhì)和圖中的幾何形以及數字的材質(zhì)都相同，而與手繪的大腦的繪畫(huà)材質(zhì)有明顯的差別，它們彼此間相互對比，而彼此又有統一。
經(jīng)過(guò)分析觀(guān)察，一個(gè)焦點(diǎn)的構造也沒(méi)有想象那么簡(jiǎn)單。如果把對比和統一看作一個(gè)天平的兩極，那么所有元素間的關(guān)系都是在它們之間取值，此消彼長(cháng)最后達到平衡。這完全可以看作是一種力學(xué)。
如果你的畫(huà)面中元素越多，越需要你加強整個(gè)畫(huà)面的統一的力量。
下面這個(gè)設計是由許多小插畫(huà)所聚合的一個(gè)頁(yè)面，一不小心就陷入凌亂，而設計師將這些插畫(huà)分為三塊內容，每塊內容用背景色分區，形成三個(gè)矩形，這是形狀的統一。這些插畫(huà)的材質(zhì)和風(fēng)格也統一，同時(shí)插畫(huà)的物體所展示的方向也都是往斜下方，也形成了一種統一。因此，你可以看到這個(gè)畫(huà)面的對比的力量相對較弱，焦點(diǎn)是左邊的矩形這一點(diǎn)沒(méi)有人懷疑，而這個(gè)焦點(diǎn)里的插畫(huà)可以看到是一件男士襯衫和女士襯衫，男女用品的形成了對比。這個(gè)對比相對而言并不十分強烈。
保持比例
說(shuō)起比例，難免和數學(xué)公式扯上關(guān)系。其實(shí)，簡(jiǎn)單一點(diǎn)來(lái)看，我們完全可以把比例看作一個(gè)視覺(jué)的原子單位，一切位置、大小的關(guān)系都以這個(gè)原子單位為標桿。
比如我確定一個(gè)原子單位是50px的正方形，那么以這個(gè)矩形為基準來(lái)創(chuàng )作一個(gè)圖形，這個(gè)圖形就是又這個(gè)正方形所搭建的，有點(diǎn)類(lèi)似我們玩的拼圖游戲。
加入了50px的網(wǎng)格線(xiàn)后你就會(huì )明白它們正好合乎原子單位的比例
圖片在Photoshop中可以任意設置網(wǎng)格的大小，網(wǎng)格的大小最好能和你的文檔成比例關(guān)系。比如你的新建文檔寬度是1600px，那么網(wǎng)格可以設置為80px或者160px等。根據網(wǎng)格線(xiàn)進(jìn)行大小尺寸和位置對齊，網(wǎng)格線(xiàn)越小，最終的結果也就越靈活。但也要注意網(wǎng)格如果太小其實(shí)就并沒(méi)有發(fā)揮太大的作用。
比例會(huì )讓你的網(wǎng)頁(yè)設計形成某種看不見(jiàn)的穩定感，每個(gè)元素恰如其分的表現在所應該出現的位置，如果你選采用對稱(chēng)的布局，由于對稱(chēng)本身就具穩定性，因此，網(wǎng)格在非對稱(chēng)的布局中發(fā)揮作用更大。
下面這個(gè)表現疊疊樂(lè )游戲趣味的設計就是采用網(wǎng)格才能讓每個(gè)色塊各得其所。它的不對稱(chēng)布局隨時(shí)給人一種傾塌的緊張，更需要背后有比例的支撐。
魔幻幾何
網(wǎng)頁(yè)布局幾乎都是由幾何構成的，加之顯示屏本身就是矩形，因此在布局時(shí)最常用到的也是矩形。
矩形
給人以穩重、踏實(shí)、秩序之感，因此，比較予人一種信賴(lài)。在網(wǎng)頁(yè)設計中，不僅可以將圖片設計為矩形，文字段落也可以為矩形。如下面的例子中左文右圖的版式的圖文分別都為矩形
作為矩形，還有直角矩形和圓角矩形之分，這兩種矩形分別傳遞出不同的感覺(jué)，圓角矩形相對沒(méi)那么尖銳，它往往更柔和圓潤。
除圖文以外，還有作為色塊所出現的矩形，一般為強調視覺(jué)重點(diǎn)所用。如下面例子中左邊的矩形方框用于聚焦文字段落
三角
三角有一種穩定性，因為關(guān)于三角最多的聯(lián)想是一座山或金字塔，這種結構本身就能抵抗外在環(huán)境的侵害。你的潛意識會(huì )把一個(gè)正三角看成一種庇護。三角形的力量上的穩健感覺(jué)常常用在建筑等有著(zhù)人工痕跡的領(lǐng)域。
三角的出現所呈現的穩定人心的氣場(chǎng)不應被干擾，因此，以三角作為圖片出現時(shí)，它就是全場(chǎng)的焦點(diǎn)。當然，如果僅僅作為圖案出現的三角例外。這也表現出三角形的某種霸氣和孤立。
由于三角其實(shí)也是矩形的一半，因此用三角形來(lái)引申出矩形的意向，經(jīng)過(guò)巧妙地構圖安排，同樣可以發(fā)揮矩形布局的效果。
圓
圓是完滿(mǎn)，也象征著(zhù)周而復始，可以說(shuō)圓是很東方風(fēng)格的符號元素。圓有一種柔性的豁達，因此它比起三角的尖銳來(lái)說(shuō)力量感稍弱，而顯得更為活潑。如果你的頁(yè)面中充滿(mǎn)圓點(diǎn)，無(wú)疑，這個(gè)頁(yè)面勢必讓人聯(lián)想到這是以?xún)和蛏倥疄槭鼙姷木W(wǎng)頁(yè)。
圓的魅力在于圓融，所以它能和在任何版式中都適用，而且它也能形成一種聚焦
因為我們對于圓有種流動(dòng)性，因此，它并不具備穩定這樣一個(gè)特征，在布局上如果采用圓進(jìn)行布局，在它四周的布局表達都會(huì )受到影響，因此，在圓形的使用上我們都需要進(jìn)一步改良。比如保持圓形的尺寸不易過(guò)大，因為過(guò)大的圓形容易擠壓本身屏幕的邊緣線(xiàn)，對四周產(chǎn)生一種壓迫感。
在利用幾何進(jìn)行布局設計時(shí)，往往文字段落都是用矩形版式居多，這樣也就是說(shuō)在配圖以及圖案造型時(shí)需要利用幾何本身的魔力進(jìn)行排版。其實(shí)自然界本身的結構都可以簡(jiǎn)化為幾何造型，甚至一張圖片本身就帶著(zhù)幾何造型的特征。因此你可以將圖片內容本身和幾何結合起來(lái)運用。
有些幾何造型并不單純，比如矩形經(jīng)過(guò)傾斜角度就變成了平行四邊形。兩個(gè)三角形相疊加就變成了六角星形。四邊形多增加一個(gè)邊就是五邊形，依次增加就變成了多邊形。幾何間經(jīng)過(guò)巧妙地組合還能形成新的造型，這幾乎讓幾何擁有了無(wú)窮無(wú)盡的魔力。
如本例中將角變圓后，圖形的尖銳感沒(méi)有了，給整個(gè)圖形增添了一份靈動(dòng)
設計最好玩的是，永遠沒(méi)有標準答案。一件即使被稱(chēng)為大師的杰作也等待有人能突破它，或許我們也應該放棄“突破”這個(gè)競技式的思維表達，而應該說(shuō)，不同的人應該演繹不同的風(fēng)格。
以上是錦州網(wǎng)站建設華睿科技同您一同分享網(wǎng)頁(yè)設計靈動(dòng)布局之相對自由式，希望幫到大家。想要了解更多關(guān)于網(wǎng)站建設/小程序開(kāi)發(fā)、APP開(kāi)發(fā)、SEO優(yōu)化等互聯(lián)網(wǎng)信息，您可以通過(guò)微信電話(huà)咨詢(xún)13941609031——錦州網(wǎng)站建設華睿科技一直致力于為各大企業(yè)解決互聯(lián)網(wǎng)難題，為您提供全網(wǎng)平臺解決方案。
