網(wǎng)頁設(shè)計(jì)靈動布局之相對自由式

我們?nèi)祟惽饲妫趺撮L都不會偏離骨骼。因此，保持了內(nèi)在的堅(jiān)固恒久性，外表就一出戲，相對自由式的進(jìn)行視覺想象編結(jié)。布局排版說來很容易，無非就是整理好網(wǎng)頁的元素清單，然后一一放上版面即可。其實(shí)就因?yàn)樽杂纱钆涞姆绞角Р钊f別，我們總為知名解決方案心懸一線，其實(shí)后的結(jié)果又馬馬虎虎。

優(yōu)秀的排版是構(gòu)圖、圖片、配色、字體等各方協(xié)調(diào)的共同結(jié)果，設(shè)計(jì)其實(shí)是沒有規(guī)則可循，審美從來都不在約束內(nèi)發(fā)生。要想讓整個版式內(nèi)容豐富又充滿呼吸的空間，需要我們整個的思考方式都流動起來。

沒有邊界

一段文字和一張圖片，甚至一個圖標(biāo)……在你進(jìn)行布局的時候，由于你的素材并不是立刻手到擒來，你的布局總是喜歡用一個個矩形來代表一段文字或一張圖片，這本沒有錯，但這個做法也會讓你陷入“框架陷阱”。

就像這樣一個布局，只是畫出了一個大致的框架圖，也許你只是想說這只是框架，因?yàn)樵O(shè)計(jì)規(guī)劃前期很多素材還并不完善。

然而，很有可能你就會因此而將頁面設(shè)計(jì)成這樣

當(dāng)然，你會說這樣其實(shí)并沒有什么不好，因?yàn)閹缀跷覀兯锌吹降谋馄交W(wǎng)頁都是這個樣式，但可以肯定的是，這個網(wǎng)頁并沒有多少呼吸的空間，整個網(wǎng)頁都被信息所填滿，如果稍微改變一下布局的元素大小和位置，其實(shí)就會展示出不一樣的版面效果（下圖），而很顯而易見后者的排版是更為靈活的。

邊界所造成的局限就是你的思維，你將會習(xí)慣在這個框架內(nèi)去思考解決方案，如果你想要躲過這個陷阱，就是學(xué)會越過框架去思考。就算你做好了框架，也要認(rèn)識到這不過是一個前期的不確定方向的試探，你完全可以改變框架的構(gòu)造。

很多設(shè)計(jì)師自詡為美術(shù)民工，而覺得自己離藝術(shù)家這個范疇越來越遠(yuǎn)，其本質(zhì)的差別就是，工匠只是重復(fù)一項(xiàng)勞動，在創(chuàng)造之前它就已經(jīng)知道了目標(biāo)。比如設(shè)計(jì)網(wǎng)頁前，已經(jīng)知道終網(wǎng)頁做成什么樣，那么你的工作就僅僅是按部就班完成每個元素的對齊工作。而藝術(shù)家則是在事前并不知道結(jié)果，往往是一步一試探去尋找更加有效的解決方案，藝術(shù)創(chuàng)作類似于一種冒險。設(shè)計(jì)師其實(shí)是取乎其中，也就是兩個身份兼有的理想結(jié)合。

創(chuàng)造焦點(diǎn)

這么說也許有點(diǎn)夸張，但任何一件好的平面作品，一定是有焦點(diǎn)的。就像我們談到過，十字準(zhǔn)星型的視覺結(jié)構(gòu)習(xí)慣將焦點(diǎn)置于中心位置，要制造一個焦點(diǎn)的辦法有很多，簡言之，就是制造沖突。想象你在一個人群稀疏的大廳，突然有兩個人高聲爭論什么，這時引起了幾個人圍觀，這個情景就在原本安靜的人流中制造了一個關(guān)注焦點(diǎn)。同樣，在視覺領(lǐng)域也是如此，利用對比沖突應(yīng)該是一種有效的制造焦點(diǎn)的方式。

對于焦點(diǎn)的認(rèn)識我們也不應(yīng)局限于是一個“點(diǎn)”，它是一塊正吸引你的視線所投射的區(qū)域。它還可以分為實(shí)焦點(diǎn)和虛焦點(diǎn)，實(shí)焦點(diǎn)是在虛焦點(diǎn)之上更為精準(zhǔn)的投射存在。

這個頁面設(shè)計(jì)中，字母與靜物交相融合的區(qū)域位于正中，成為虛焦點(diǎn)，而利用色彩的對比，那副黃色眼鏡又從虛焦點(diǎn)的區(qū)域突出出來成為實(shí)焦點(diǎn)

除了色彩，其他任何屬性都可以經(jīng)由對比形成焦點(diǎn)，這時你要做的，就是注意焦點(diǎn)不應(yīng)太多。也因此，除了焦點(diǎn)以外，設(shè)計(jì)中的其他元素都要保持一種相似性。

這里我們總結(jié)一下能用于進(jìn)行對比屬性，這些屬性之間形成的對比越大，沖突越大。

空間：充滿-空置、積極活躍-消極被動、前進(jìn)-后退、近-遠(yuǎn)、二維-三維、封閉-開放

形式：簡單-復(fù)雜、美-丑、抽象-具象、清晰-模糊、幾何形式-有機(jī)形式、直線-曲線、對稱-非對稱、完整-破碎

結(jié)構(gòu)：井井有條-混亂無序、排列成序-隨意放置、襯線字體-無襯線字體、機(jī)械-手工

紋理：細(xì)-粗、平滑-粗糙、反光-啞光、滑-黏、銳-鈍

位置：頂部-底部、高-低、右-左、上-下、前-后、有節(jié)奏-隨意、單獨(dú)-分組、接近-遠(yuǎn)離、中心-邊緣、整齊排列-互不關(guān)聯(lián)、內(nèi)-外

方向：垂直-水平、垂直線-對角線、向前-向后、穩(wěn)定-活動、內(nèi)聚-分散、順時針方向-逆時針方向、凹形-凸形、正體字-斜體字

尺寸：大-小、長-短、窄-寬、擴(kuò)大-收縮、深-淺

顏色：黑色-彩色、亮-暗、暖色-冷色、明度-暗度、天然-人造、飽和（深色）-無色（素色）

密度：透明-晦暗、稠密-稀薄、液體-固體

重力：輕-重、穩(wěn)定-不穩(wěn)定

設(shè)計(jì)師在做設(shè)計(jì)時，其實(shí)并不會將這些規(guī)范提前設(shè)定在大腦中，而是經(jīng)過經(jīng)驗(yàn)的積累而形成一種潛在的直覺，這份清單的意義并不是需要你記下它，而是瀏覽完后，在設(shè)計(jì)的任何場合的提醒。比如一份作品完成后，可以看看究竟焦點(diǎn)是否足夠吸引，哪些元素需要進(jìn)一步調(diào)整。

焦點(diǎn)突出的前提是非焦點(diǎn)區(qū)域的元素盡量保持一致。制造沖突似乎手到擒來，但是要保持一致卻需要步步為營。

例如下圖頁面正中的圖案也是整個頁面的焦點(diǎn)所在

可以看到虛焦點(diǎn)區(qū)域是這個由手繪花朵、幾何圖案數(shù)字以及其他手繪圖案組成的這個圖案幾何體，實(shí)焦點(diǎn)卻是落在了大的手繪花朵上。這時，手繪花朵的有機(jī)與相鄰的幾何形有了一個對比，這就是幾何形式與有機(jī)形式的對比。

大的實(shí)心花朵的尺寸大小剛好和右下方手繪的大腦的尺寸相同，而它們之間也存在色彩與無色彩的對比。

三角的幾何形與數(shù)字的位置剛好都是三角。再仔細(xì)觀察整個彩繪花朵的材質(zhì)和圖中的幾何形以及數(shù)字的材質(zhì)都相同，而與手繪的大腦的繪畫材質(zhì)有明顯的差別，它們彼此間相互對比，而彼此又有統(tǒng)一。

經(jīng)過分析觀察，一個焦點(diǎn)的構(gòu)造也沒有想象那么簡單。如果把對比和統(tǒng)一看作一個天平的兩極，那么所有元素間的關(guān)系都是在它們之間取值，此消彼長后達(dá)到平衡。這完全可以看作是一種力學(xué)。

如果你的畫面中元素越多，越需要你加強(qiáng)整個畫面的統(tǒng)一的力量。

這個設(shè)計(jì)是由許多小插畫所聚合的一個頁面，一不小心就陷入凌亂，而設(shè)計(jì)師將這些插畫分為三塊內(nèi)容，每塊內(nèi)容用背景色分區(qū)，形成三個矩形，這是形狀的統(tǒng)一。這些插畫的材質(zhì)和風(fēng)格也統(tǒng)一，同時插畫的物體所展示的方向也都是往斜下方，也形成了一種統(tǒng)一。因此，你可以看到這個畫面的對比的力量相對較弱，焦點(diǎn)是左邊的矩形這一點(diǎn)沒有人懷疑，而這個焦點(diǎn)里的插畫可以看到是一件男士襯衫和女士襯衫，男女用品的形成了對比。這個對比相對而言并不十分強(qiáng)烈。

網(wǎng)站名稱：網(wǎng)頁設(shè)計(jì)靈動布局之相對自由式
URL網(wǎng)址：http://www.bm7419.com/news33/210783.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、網(wǎng)站導(dǎo)航、外貿(mào)建站、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站收錄、App開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)