網頁設計事半功倍的構圖技巧

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

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

幾何圖形在頁面中往往能起到大樑的作用，也是網頁內容最為常用的承載面板。這些圖形合理的搭配和有效的穿插，能使頁面除了資訊傳達外，更具層次感和觀賞性。

此**圓角矩形巧妙的結合資訊模組穿插在一起，除了營造了**的主體富有節奏的形狀之外，更加強了頁面的層次感，不會顯得頁面枯燥和單調。

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

同樣是圓角矩形的穿插結合，色彩填充的圖形交集既能展示重要資訊又勾勒出整個**的風格形態。

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

更多類似的例子：

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

素材應用的好，往往能起到畫龍點睛的作用，而素材起點綴頁面和表達主題之外，還能作為構圖中的一種主要元素存在，這些素材通常破格而出作為連線頁面的紐帶，使頁面結構更加的穩固，故稱其為「鉚釘」。

素材看似隨機的擺放，其實是有意的將素材擺放於左上和右下兩個對角點，視覺上俗稱的暗線，左下角資訊內容的**和右上角的登入視窗組成了另外一條對角暗線，兩者並組成了x結構，而四個素材起到到了固定和壓軸的作用，穩固而又美觀。

飛躍的人越於頁面之上，護目鏡掛於導航欄之上。這兩個素材的使用使整個頁面既貼切於主題又生動，而在構圖上人連線穿插了1、2兩個板塊，而護目鏡所在的2板塊鏈結了3、4板塊，視覺上的感官延續讓頁面脈絡清晰不脫節，切富有節奏感。

頁面非常簡單，除了圖形構築的基礎形，就是幾朵起到「鉚釘」作用的花兒，花朵破框而出，使得素材有機的融於框內又搭於整個頁面之上，讓人有種花是由圓洞內長到頁面之上的錯覺，簡單而富有層次。

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