經典推薦：網頁設計構圖技巧

一篇開拓網頁設計思路的文章，雖然有些年代了，但是其中分享的構圖技巧到現在依然是非常受用的，如果你能領悟個中精髓，融會貫通。那么今后你設計出來的網站，一定會從格局形勢上讓客戶眼前一亮！

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

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

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

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

此網站把圓角矩形巧妙地與信息模塊穿插在一起，在營造了網站的主體富有節奏的形狀之外，更加強了頁面的層次感，使頁面不在枯燥單調。

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

同樣是圓角矩形的穿插結合， 色彩填充的圖形交集既展示了重要信息又勾勒出整個網站的風格形態。

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

更多類似的例子：

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

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

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

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

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

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

更多類似的例子:

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

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

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

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

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

更多類似的例子：

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

原文地址：edu.dogame.com.cn
本文由優設網@好一朵大柚子編輯發布

 
================關于優設網================
“優設網uisdc.com“是一個分享網頁設計、無線端設計以及PS教程的干貨網站。

【特色推薦】
設計講座：定期邀請國內互聯網公司的設計前輩及行業總監在群內及YY語音（YY頻道：15335158）分享實戰經驗。
設計微博：擁有粉絲量26萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的”福利”嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：