如何打造豐富而充滿呼吸感的網(wǎng)頁設(shè)計(jì)布局？

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

沒有邊界

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

就像一個(gè)布局，只是畫出了一個(gè)大致的框架圖，也許你只是想說這只是框架，因?yàn)樵O(shè)計(jì)規(guī)劃前期很多素材還并不完善。然而，很有可能一些設(shè)計(jì)師就會(huì)因此而將頁面設(shè)計(jì)成在框架圖基礎(chǔ)上的簡(jiǎn)單補(bǔ)色。

當(dāng)然，你會(huì)說這樣其實(shí)并沒有什么不好，因?yàn)閹缀跷覀兯锌吹降谋馄交W(wǎng)頁都是這個(gè)樣式，但可以肯定的是，這個(gè)網(wǎng)頁并沒有多少呼吸的空間，整個(gè)網(wǎng)頁都被信息所填滿，如果稍微改變一下布局的元素大小和位置，其實(shí)就會(huì)展示出不一樣的版面效果，而很顯而易見后者的排版是更為靈活的。
邊界所造成的局限就是一些設(shè)計(jì)的固有思維，它將會(huì)習(xí)慣在這個(gè)框架內(nèi)去思考解決方案，如果想要躲過這個(gè)陷阱，就是學(xué)會(huì)越過框架去思考。就算做好了框架，也要認(rèn)識(shí)到這不過是一個(gè)前期的不確定方向的試探，完全可以改變框架的構(gòu)造。
很多設(shè)計(jì)師自詡為美術(shù)民工，而覺得自己離藝術(shù)家這個(gè)范疇越來越遠(yuǎn)，其本質(zhì)的差別就是，工匠只是重復(fù)一項(xiàng)勞動(dòng)，在創(chuàng)造之前它就已經(jīng)知道了目標(biāo)。比如設(shè)計(jì)網(wǎng)頁前，已經(jīng)知道最終網(wǎng)頁做成什么樣，那么你的工作就僅僅是按部就班完成每個(gè)元素的對(duì)齊工作。而藝術(shù)家則是在事前并不知道結(jié)果，往往是一步一試探去尋找更加有效的解決方案，藝術(shù)創(chuàng)作類似于一種冒險(xiǎn)。設(shè)計(jì)師其實(shí)是取乎其中，也就是兩個(gè)身份兼有的理想結(jié)合。

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

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

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

除了色彩，其他任何屬性都可以經(jīng)由對(duì)比形成焦點(diǎn)，這時(shí)你要做的，就是注意焦點(diǎn)不應(yīng)太多。也因此，除了焦點(diǎn)以外，設(shè)計(jì)中的其他元素都要保持一種相似性。
這里我們總結(jié)一下能用于進(jìn)行對(duì)比屬性，這些屬性之間形成的對(duì)比越大，沖突越大。
空間：充滿-空置、積極活躍-消極被動(dòng)、前進(jìn)-后退、近-遠(yuǎn)、二維-三維、封閉-開放
形式：簡(jiǎn)單-復(fù)雜、美-丑、抽象-具象、清晰-模糊、幾何形式-有機(jī)形式、直線-曲線、對(duì)稱-非對(duì)稱、完整-破碎
結(jié)構(gòu)：井井有條-混亂無序、排列成序-隨意放置、襯線字體-無襯線字體、機(jī)械-手工
紋理：細(xì)-粗、平滑-粗糙、反光-啞光、滑-黏、銳-鈍
位置：頂部-底部、高-低、右-左、上-下、前-后、有節(jié)奏-隨意、單獨(dú)-分組、接近-遠(yuǎn)離、中心-邊緣、整齊排列-互不關(guān)聯(lián)、內(nèi)-外
方向：垂直-水平、垂直線-對(duì)角線、向前-向后、穩(wěn)定-活動(dòng)、內(nèi)聚-分散、順時(shí)針方向-逆時(shí)針方向、凹形-凸形、正體字-斜體字
尺寸：大-小、長(zhǎng)-短、窄-寬、擴(kuò)大-收縮、深-淺
顏色：黑色-彩色、亮-暗、暖色-冷色、明度-暗度、天然-人造、飽和（深色）-無色（素色）
密度：透明-晦暗、稠密-稀薄、液體-固體
重力：輕-重、穩(wěn)定-不穩(wěn)定
保持比例

說起比例，難免和數(shù)學(xué)公式扯上關(guān)系。其實(shí)，簡(jiǎn)單一點(diǎn)來看，我們完全可以把比例看作一個(gè)視覺的原子單位，一切位置、大小的關(guān)系都以這個(gè)原子單位為標(biāo)桿。

比如我確定一個(gè)原子單位是50px的正方形，那么以這個(gè)矩形為基準(zhǔn)來創(chuàng)作一個(gè)圖形，這個(gè)圖形就是又這個(gè)正方形所搭建的，有點(diǎn)類似我們玩的拼圖游戲。

比例會(huì)讓你的網(wǎng)頁設(shè)計(jì)形成某種看不見的穩(wěn)定感，每個(gè)元素恰如其分的表現(xiàn)在所應(yīng)該出現(xiàn)的位置，如果你選采用對(duì)稱的布局，由于對(duì)稱本身就具穩(wěn)定性，因此，網(wǎng)格在非對(duì)稱的布局中發(fā)揮作用更大。
后記

靈動(dòng)本身是一個(gè)極富感染力的詞匯，也許源于此很多人以為這就需要煞費(fèi)苦心，其實(shí)往往越用力越欲速而不達(dá)，只要明確了設(shè)計(jì)的目標(biāo)，你就只需要跟隨目標(biāo)而進(jìn)入過程。這里不得不提及，很多看似簡(jiǎn)單的可操作性的技巧都未必能真正幫到你，比如“運(yùn)用黃金比例就能獲得好效果”“非對(duì)稱布局一定比對(duì)稱布局更具動(dòng)感”“一個(gè)頁面的色彩不得超過三種顏色”“字體用藍(lán)色閱讀體驗(yàn)不佳”……類似這樣的經(jīng)驗(yàn)總結(jié)之所以會(huì)誤導(dǎo)你的原因，并非它本身不正確，而是由于它并沒有為初學(xué)者提供一個(gè)外部環(huán)境，他們只給出了基于他們?cè)O(shè)計(jì)現(xiàn)場(chǎng)里出現(xiàn)的問題的解決方案，而換個(gè)環(huán)境就未必適合你。

網(wǎng)頁題目：如何打造豐富而充滿呼吸感的網(wǎng)頁設(shè)計(jì)布局？
URL網(wǎng)址：http://muchs.cn/news/190729.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、品牌網(wǎng)站制作、云服務(wù)器、網(wǎng)站策劃、微信小程序、做網(wǎng)站

廣告

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