當(dāng)前位置: 首頁 > 設(shè)計(jì)資訊 > 理論文摘 > 正文

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

2017-12-05 2224 5

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

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

沒有邊界

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

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

1.jpg

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

2.jpg

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

3.jpg

邊界所造成的局限就是你的思維,你將會習(xí)慣在這個(gè)框架內(nèi)去思考解決方案,如果你想要躲過這個(gè)陷阱,就是學(xué)會越過框架去思考。就算你做好了框架,也要認(rèn)識到這不過是一個(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è)元素的對齊工作。而藝術(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)的辦法有很多,簡言之,就是制造沖突。想象你在一個(gè)人群稀疏的大廳,突然有兩個(gè)人高聲爭論什么,這時(shí)引起了幾個(gè)人圍觀,這個(gè)情景就在原本安靜的人流中制造了一個(gè)關(guān)注焦點(diǎn)。同樣,在視覺領(lǐng)域也是如此,利用對比沖突應(yīng)該是一種最有效的制造焦點(diǎn)的方式。

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

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

4.jpg

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

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

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

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

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

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

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

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

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

  8. 顏色:黑色-彩色、亮-暗、暖色-冷色、明度-暗度、天然-人造、飽和(深色)-無色(素色)

  9. 密度:透明-晦暗、稠密-稀薄、液體-固體

  10. 重力:輕-重、穩(wěn)定-不穩(wěn)定

(摘自《平面設(shè)計(jì)原理》一書)

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

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

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

5.jpg

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

6.jpg

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

7.jpg

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

8.jpg

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

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

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

9.jpg

保持比例

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

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

10.jpg

加入了50px的網(wǎng)格線后你就會明白它們正好合乎原子單位的比例

11.jpg

以上說明了比例這件事,無論是一比三還是五比二,其中的道理都是從這個(gè)原子單位衍生過來的。在網(wǎng)頁設(shè)計(jì)中,為了保持比例可以采用網(wǎng)格作為輔助線。在Photoshop中可以任意設(shè)置網(wǎng)格的大小,網(wǎng)格的大小最好能和你的文檔成比例關(guān)系。比如你的新建文檔寬度是1600px,那么網(wǎng)格可以設(shè)置為80px或者160px等。根據(jù)網(wǎng)格線進(jìn)行大小尺寸和位置對齊,網(wǎng)格線越小,最終的結(jié)果也就越靈活。但也要注意網(wǎng)格如果太小其實(shí)就并沒有發(fā)揮太大的作用。

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

下面這個(gè)表現(xiàn)疊疊樂游戲趣味的設(shè)計(jì)就是采用網(wǎng)格才能讓每個(gè)色塊各得其所。它的不對稱布局隨時(shí)給人一種傾塌的緊張,更需要背后有比例的支撐。

12.jpg

魔幻幾何

網(wǎng)頁布局幾乎都是由幾何構(gòu)成的,加之顯示屏本身就是矩形,因此在布局時(shí)最常用到的也是矩形。

矩形

給人以穩(wěn)重、踏實(shí)、秩序之感,因此,比較予人一種信賴。在網(wǎng)頁設(shè)計(jì)中,不僅可以將圖片設(shè)計(jì)為矩形,文字段落也可以為矩形。如下面的例子中左文右圖的版式的圖文分別都為矩形

13.jpg14.jpg

作為矩形,還有直角矩形和圓角矩形之分,這兩種矩形分別傳遞出不同的感覺,圓角矩形相對沒那么尖銳,它往往更柔和圓潤。

除圖文以外,還有作為色塊所出現(xiàn)的矩形,一般為強(qiáng)調(diào)視覺重點(diǎn)所用。如下面例子中左邊的矩形方框用于聚焦文字段落

15.jpg

三角

三角有一種穩(wěn)定性,因?yàn)殛P(guān)于三角最多的聯(lián)想是一座山或金字塔,這種結(jié)構(gòu)本身就能抵抗外在環(huán)境的侵害。你的潛意識會把一個(gè)正三角看成一種庇護(hù)。三角形的力量上的穩(wěn)健感覺常常用在建筑等有著人工痕跡的領(lǐng)域。

16.jpg

三角的出現(xiàn)所呈現(xiàn)的穩(wěn)定人心的氣場不應(yīng)被干擾,因此,以三角作為圖片出現(xiàn)時(shí),它就是全場的焦點(diǎn)。當(dāng)然,如果僅僅作為圖案出現(xiàn)的三角例外。這也表現(xiàn)出三角形的某種霸氣和孤立。

由于三角其實(shí)也是矩形的一半,因此用三角形來引申出矩形的意向,經(jīng)過巧妙地構(gòu)圖安排,同樣可以發(fā)揮矩形布局的效果。

圓是完滿,也象征著周而復(fù)始,可以說圓是很東方風(fēng)格的符號元素。圓有一種柔性的豁達(dá),因此它比起三角的尖銳來說力量感稍弱,而顯得更為活潑。如果你的頁面中充滿圓點(diǎn),無疑,這個(gè)頁面勢必讓人聯(lián)想到這是以兒童或少女為受眾的網(wǎng)頁。

圓的魅力在于圓融,所以它能和在任何版式中都適用,而且它也能形成一種聚焦

17.jpg

因?yàn)槲覀儗τ趫A有種流動(dòng)性,因此,它并不具備穩(wěn)定這樣一個(gè)特征,在布局上如果采用圓進(jìn)行布局,在它四周的布局表達(dá)都會受到影響,因此,在圓形的使用上我們都需要進(jìn)一步改良。比如保持圓形的尺寸不易過大,因?yàn)檫^大的圓形容易擠壓本身屏幕的邊緣線,對四周產(chǎn)生一種壓迫感。

在利用幾何進(jìn)行布局設(shè)計(jì)時(shí),往往文字段落都是用矩形版式居多,這樣也就是說在配圖以及圖案造型時(shí)需要利用幾何本身的魔力進(jìn)行排版。其實(shí)自然界本身的結(jié)構(gòu)都可以簡化為幾何造型,甚至一張圖片本身就帶著幾何造型的特征。因此你可以將圖片內(nèi)容本身和幾何結(jié)合起來運(yùn)用。

有些幾何造型并不單純,比如矩形經(jīng)過傾斜角度就變成了平行四邊形。兩個(gè)三角形相疊加就變成了六角星形。四邊形多增加一個(gè)邊就是五邊形,依次增加就變成了多邊形。幾何間經(jīng)過巧妙地組合還能形成新的造型,這幾乎讓幾何擁有了無窮無盡的魔力。

如本例中將角變圓后,圖形的尖銳感沒有了,給整個(gè)圖形增添了一份靈動(dòng)

18.jpg

后記

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

設(shè)計(jì)最好玩的是,永遠(yuǎn)沒有標(biāo)準(zhǔn)答案。一件即使被稱為大師的杰作也等待有人能突破它,或許我們也應(yīng)該放棄“突破”這個(gè)競技式的思維表達(dá),而應(yīng)該說,不同的人應(yīng)該演繹不同的風(fēng)格。


17
評論區(qū)(0)
正在加載評論...