網(wǎng)站建設(shè)淺談網(wǎng)頁設(shè)計中的構(gòu)圖發(fā)布者：本站     時間：2022-03-30 11:03:40

網(wǎng)頁給人最直觀的感受就是它的頁面框架與構(gòu)造，就像一座大樓的主體框架與形態(tài)，你可能記不起東方明珠塔和艾菲爾鐵塔是用什么顏色或什么材料涂的外墻，但我想你一定記得起它們的什么樣的形狀。同樣，網(wǎng)頁設(shè)計中的構(gòu)圖也足以影響到整個網(wǎng)站給人的感受，雖然比喻并不十分恰當(dāng)，但就網(wǎng)頁其構(gòu)圖而言，些許的改變和簡單的創(chuàng)新也許就能起到事半功倍的效果，讓網(wǎng)站給人的視覺感受耳目一新。

如何將網(wǎng)頁這座樓蓋的漂亮？以下就例舉一些在網(wǎng)頁設(shè)計上能起到事半功倍的構(gòu)圖技巧。個人拙見，希望能夠拋磚引玉。

【一】堅實的地基-幾何圖形的力量。

幾何圖形在頁面中往往能起到大梁的作用，也是網(wǎng)頁內(nèi)容最為常用的承載面板。這些圖形合理的搭配和有效的穿插，能使頁面除了信息傳達外，更具層次感和觀賞性。

淺談網(wǎng)頁設(shè)計中的構(gòu)圖

此網(wǎng)站圓角矩形巧妙的結(jié)合信息模塊穿插在一起，除了營造了網(wǎng)站的主體富有節(jié)奏的形狀之外，更加強了頁面的層次感，不會顯得頁面枯燥和單調(diào)。

淺談網(wǎng)頁設(shè)計中的構(gòu)圖

圓形和橢圓形的結(jié)合搭載了輪播廣告和重要信息，使得整個頁面既有亮點又不失簡潔。

淺談網(wǎng)頁設(shè)計中的構(gòu)圖

同樣是圓角矩形的穿插結(jié)合， 色彩填充的圖形交集既能展示重要信息又勾勒出整個網(wǎng)站的風(fēng)格形態(tài)。

淺談網(wǎng)頁設(shè)計中的構(gòu)圖

豎著的大圓角矩形和線條勾勒出整個完整的畫面，各種信息鑲嵌于各個形狀只中，既不顯得亂又使其相得益彰。

更多類似的例子：

淺談網(wǎng)頁設(shè)計中的構(gòu)圖

【二】鋼筋上的鉚釘―破格而出的素材

素材應(yīng)用的好，往往能起到畫龍點睛的作用，而素材起點綴頁面和表達主題之外，還能作為構(gòu)圖中的一種主要元素存在，這些素材通常破格而出作為連接頁面的紐帶，使頁面結(jié)構(gòu)更加的穩(wěn)固，故稱其為“鉚釘”。

淺談網(wǎng)頁設(shè)計中的構(gòu)圖

素材看似隨機的擺放，其實是有意的將素材擺放于左上和右下兩個對角點，視覺上俗稱的暗線，左下角信息內(nèi)容的圖片和右上角的登錄窗口組成了另外一條對角暗線， 兩者并組成了X結(jié)構(gòu)，而四個素材起到到了固定和壓軸的作用，穩(wěn)固而又美觀。


淺談網(wǎng)頁設(shè)計中的構(gòu)圖

飛躍的人越于頁面之上，護目鏡掛于導(dǎo)航欄之上。這兩個素材的使用使整個頁面既貼切于主題又生動，而在構(gòu)圖上人連接穿插了1、2兩個板塊，而護目鏡所在的2板塊鏈接了3、4板塊，視覺上的感官延續(xù)讓頁面脈絡(luò)清晰不脫節(jié)，切富有節(jié)奏感。

淺談網(wǎng)頁設(shè)計中的構(gòu)圖

頁面非常簡單，除了圖形構(gòu)筑的基礎(chǔ)形，就是幾朵起到“鉚釘”作用的花兒，花朵破框而出，使得素材有機的融于框內(nèi)又搭于整個頁面之上 ，讓人有種花是由圓洞內(nèi)長到頁面之上的錯覺，簡單而富有層次。

淺談網(wǎng)頁設(shè)計中的構(gòu)圖

這個頁面的素材和主體框架的結(jié)合很巧妙，破框而出的噴濺牛奶和靜態(tài)的巧克力、杯子的動靜結(jié)合于頁面頭部，使得整個頁面主次清晰而又連貫。

更多類似的例子:

淺談網(wǎng)頁設(shè)計中的構(gòu)圖


【三】打造斜塔之美―斜的視覺張力

比薩斜塔之斜是地質(zhì)沙化下沉還是設(shè)計師故意為之，至今還是有人在爭論，拋開爭議，斜塔的美似乎讓許多人都想來到它身邊一睹這位傾斜美人之容，湊巧的是，在浩瀚的宇宙中最美麗的星球，也就是地球，也斜著身子對著太陽轉(zhuǎn)著。話題扯的比較遠(yuǎn)，斜線，或者說是斜著的物體，似乎天生有一種張力。在網(wǎng)頁設(shè)計中亦是如此，而在這里所表現(xiàn)的為視覺的張力，是種視覺心里上的延伸力而非物理上的。當(dāng)頁面過于平均，畫面平平毫無亮點時，打破平均打破通體的平均尤為重要，打破平均的方式有很多，而斜線似乎是網(wǎng)頁設(shè)計中慣用的一招，屢試不爽。

淺談網(wǎng)頁設(shè)計中的構(gòu)圖

斜線的張力讓整個頁面富有動感和延伸性，即可為頁面起到修飾的作用，又能做為信息的承載模塊，兩者有機的融合并不讓人覺得傾斜的標(biāo)題不好識別或者有礙閱讀，反之更能讓整個頁面富有形式感和表現(xiàn)力。

淺談網(wǎng)頁設(shè)計中的構(gòu)圖

斜線的運用加上素材和圓形的穿插結(jié)合，讓整個頁面具有動感，同時視線又隨著斜線的走向帶入至素材和標(biāo)題之上 ，具有張力的同時又讓這些線起到一個很好到視覺導(dǎo)向作用。

淺談網(wǎng)頁設(shè)計中的構(gòu)圖

以斜線為暗線排版而成的信息組件和右邊斜線切割而成的圖片形成形態(tài)上的互補，又形成節(jié)奏上虛實和疏密的對比，使得整個畫面既有斜線帶來的張力和動感之外，又不乏整體的穩(wěn)固和均衡。

更多類似的例子：

淺談網(wǎng)頁設(shè)計中的構(gòu)圖


以上簡單的介紹了網(wǎng)頁設(shè)計中的一個步驟：構(gòu)圖，羅列了一些比較常用而又有效果的方法，除此之外，應(yīng)該還有很多，希望大家補充，但我相信無論構(gòu)圖也好，色彩搭配也好，亦或是節(jié)奏旋律等等。它們總是圍繞著一個共同點去進行，那就是使頁面在信息順利傳達的前提下變的美觀而生動，有了這一大準(zhǔn)則，我想設(shè)計頁面的時候需要的不是一大堆技法和技巧，而是一顆永不停止探索美和創(chuàng)造美的心。