蘭州電器網(wǎng)頁設(shè)計(jì)

蘭州電器網(wǎng)頁設(shè)計(jì)

保持比例

說起比例，難免和數(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)類似我們玩的拼圖游戲。

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

以上說明了比例這件事，無論是一比三還是五比二，其中的道理都是從這個(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)行大小尺寸和位置對(duì)齊，網(wǎng)格線越小，終的結(jié)果也就越靈活。但也要注意網(wǎng)格如果太小其實(shí)就并沒有發(fā)揮太大的作用。

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

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

魔幻幾何

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

矩形

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

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

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

三角

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

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

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

圓

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

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

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

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

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

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

后記

靈動(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)境就未必適合你。

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

【甘肅易領(lǐng)域網(wǎng)絡(luò)科技有限公司】

【網(wǎng)址】