目前很多網站的布局都是非常標準的模塊化的，當然如果網頁設計要做創(chuàng)意，創(chuàng)新的排版布局，就要來了解一下如何從視覺上解剖一個網頁設計。網頁設計也有所謂的支撐其視覺效果的框架，這個框架在早期的網頁設計的視覺上是非常明顯的。盡管隨著網頁設計的個性化發(fā)展，其框架慢慢漸隱，但從設計眼光，看出內在的門道，一起來學習。

設計的框架：視覺解剖

早之前大部分網站的首頁設計，可以清晰的看到這種矩形塊狀的整形切割。

隨著網頁設計的發(fā)展，其框架也慢慢漸隱，但它依然發(fā)揮著支撐起整個視線框架。這里，有人會與柵格系統(tǒng)聯(lián)系起來。網頁的柵格系統(tǒng)更多發(fā)揮的是對齊元素的作用，而框架的功能會更加籠統(tǒng)。

網站建設中頁面設計的框架，針對的是每一頁面的框架。每一個網站都會有不同的頁面，我們會把頁面分級為首頁——二級頁面——三級頁面。通常來說，首頁運用一個框架，二級頁面、三級頁面也分別有一個框架。首頁的框架有時還會根據分屏展示的不同展示不同的框架樣式。但無論有多少變化，一個網站的諸多頁面的框架之間，都會存在一種內在的視覺統(tǒng)一。

首頁的視覺框架尤其重要，因為首頁承擔著網頁的第一印象，還主導著整個網站的風格方向，因此確定好首頁的視覺框架，是設計最初最難明確的問題。很多設計師在設計最初所耗費最多時間，用于實驗各種頁面版式的類型以期最完美的效果展現(xiàn)，而事實上，最完美其實是個偽命題，在有限的時間精力內，你需要做得就是找好自己的表達目標，每個頁面設置好一個視覺焦點，根據焦點來表達你的重點內容。換句話說，你最希望用戶了解什么？這個問題的答案應該是要無比清晰的在大腦中伴隨設計全過程。

中心展現(xiàn)方式-瞄準視覺

人的視線總是集中在頁面中心，因此將焦點設置在中心位置最迎合視線的做法。例如將網站的簡介放置于頁面中心，為了讓頁面更豐富，可以增加大圖的背景加強表達的維度。十字線條經過的地方即是視線引導的路徑，因此需要在線條的位置放上重要的元素。中心的位置其實也是一個期待點，瞄準視覺期待點，對設計師來說最大的便利就是省力。

無論網頁的導航等其他元素放置于頁面的哪個位置（盡量圍繞線條經過的方向），這兩個頁面都是屬于十字準星型的框架結構，焦點始終位于正中，導航無論居于哪里，都屬于次要的視覺地位。

正中的地位帶來絕對的穩(wěn)定感，它也是設計師最容易做到的表達。這種框架結構，相對比較穩(wěn)定，因此在需要在細節(jié)上營造一些驚喜，來打破這種相對靜止的版式。

左右分欄式-雙面一體

將一個網頁分成兩欄并不意味著均分，它們是按照垂直方向形成了兩列的不同布局。常見的的確是平均分配的表現(xiàn)情況，網頁的焦點內容可以選擇任一側，另一側作為補充。簡稱雙面一體是因為，你不能制造兩個焦點，分兩個部分，它們也應該共同營造一個焦點。

雙欄式的頁面設計表現(xiàn)比較靈活，通常會有一偏倚輕重這，樣就能確立好視覺焦點，形成對比，制造情景沖突。視覺重點在某一側，利用背景色的不同加強視覺重量的對比。

兩列縮略圖垂直排列，讓版式活躍起來的方法就是增加某一處高度的不同，強調一點細微的變化。

有序與無序排列

這種框架樣式通常是基于某一個網格而搭建內容，網格的表現(xiàn)形式多樣，每個網格都用以展示不同的內容，可以是比較規(guī)范的網格，也可以是錯落有致……雖說每個網頁都可以基于網格而設計，但是網頁的表現(xiàn)未必要嚴格遵循網格本身。

規(guī)范的網格通常比較傾向古典懷舊，它傳遞出一種相對嚴格的秩序之美。

相對有些錯落變換的網格，更具現(xiàn)代風格，規(guī)則與反規(guī)則的交錯。

傾斜式表現(xiàn)

傾斜的線條容易形成動感的張力，利用這一點所形成的視覺框架就能很好表現(xiàn)與“運動”“沖擊力”等動感較強的內容頁面。

斜向的頁面所制造的墜落式的沖擊力應該和配圖樣式相關，因此對慎選斜向的配圖非常重要，尤其是當大部分圖片其實都只適合正向方向的展示。

這些所謂的框架原理在于隱藏于表層下方的最基地的視覺結構，事實上，其他的元素通常并不嚴格局限于某個區(qū)域，這就讓頂層的枝葉更加豐富。

在我們著手進行頁面設計前，確定好一個視覺框架的方向至關重要，這讓我們并不依賴于運氣去“撞”到某個好的表達，并且你也不需要單獨設定某個固定的框架，還可以兩兩并用，一個網站有多個頁面，多個頁面都可以擁有不同的布局。同一個頁面，也會因為內容的不同采用不同的視覺結構表達。

每個頁面都根據不同的焦點表現(xiàn)形態(tài)選擇了不同的布局，框架總是為內容而服務的。

始終要承認的是，內容應該是高于形式的，設計時的任何視覺框架都是為內容而服務的，因此內容可以以任何外在的形式來表現(xiàn)。網頁設計的視覺也就是我們平時說的“顏值”，至于網站的布局框架設計好之后，內容的設計也是非常重要的，放什么圖片，怎么放都是有講究的。