優(yōu)秀的排版是構圖、圖片、配色、字體等協調的共同結果。其實網頁設計是沒有規(guī)律可循的，審美從來不會發(fā)生在約束之內。為了讓整個布局內容豐富，充滿喘息的空間，需要整個思維方式流動。

　　沒有界限

　　一段文字，一張圖片，甚至一個圖標……當你做一個布局的時候，就像這個布局一樣，你只畫一個大概的框架圖?？赡苣阒皇窍胝f這只是一個框架，因為很多設計策劃前期的材料并不完美。

　　但是，您很可能會這樣設計頁面

　　當然，你會說這沒有錯，因為我們看到的平面網頁幾乎都是這種風格，但可以肯定的是，這個網頁沒有太多的喘息空間，整個網頁充斥著信息。如果稍微改變布局元素的大小和位置，實際上會顯示出不同的布局效果(下圖)，顯然后者的布局更加靈活。

　　界限造成的局限就是你的思維。你會習慣在這個框架內思考解決方案。想要逃離這個陷阱，就要學會跳出框架思考。即使你把框架做好了，也要意識到這只是一個方向不確定的前期測試，完全可以改變框架的結構。

　　創(chuàng)建焦點

　　這可能有點夸張，但任何好的平面作品都必須有一個重點。我們已經說過，十字準線視覺結構是用來把焦點放在中心的，有很多方法可以創(chuàng)建一個焦點，簡而言之，就是制造沖突。想象你在一個人煙稀少的大廳里，突然兩個人大聲爭論著什么，導致幾個人圍觀。這一幕在原本安靜的人群中制造了一個關注的焦點。同樣，在視野中，使用對比沖突應該是創(chuàng)造焦點最有效的方式。

　　在這個頁面設計中，字母和靜物融合在一起的區(qū)域位于中間，成為虛擬焦點。通過使用顏色的對比，黃色眼鏡從虛擬焦點區(qū)域突出，并成為真正的焦點

　　除了顏色，其他任何屬性都可以通過對比形成焦點。這個時候你要做的就是注意不要太過專注。因此，除了焦點，設計中的其他元素應該保持一種相似性。

　　空間：全空，主動-被動，向前-向后，近-遠，2D-3D，封閉-開放

　　形式：簡單-復雜，美麗-丑陋，抽象-具體，清晰-模糊，幾何-有機，直曲線，對稱-不對稱，完全破碎

　　結構：有序-無序，有序-隨意擺放，襯線字體-無襯線字體，機械-手動

　　質地：細-粗，光滑-粗糙，反射-啞光，滑-粘，尖-鈍位置：上下、高低、左右、上下、前后、有節(jié)奏-隨機、分開-分組、靠近、居中-邊緣、有序排列-不相關、內外

　　方向：垂直-水平、垂直-對角、向前-向后、穩(wěn)定-活躍、內聚-分散、順時針-逆時針、凹凸、規(guī)則-斜體

　　大?。捍?小，長-短，窄-寬，擴-縮，深-淺

　　顏色：黑色、亮-暗、暖-冷、亮-暗、自然-人工、飽和(暗)-無色(普通)

　　密度：透明-暗淡，致密-稀薄，液-固

　　重力：輕-重，穩(wěn)定-不穩(wěn)定

　　突出重點的前提是非重點區(qū)域的元素要盡可能一致。似乎很容易產生沖突，但需要一步一步的方法來保持一致性。

　　比如下面頁面中間的圖案也是整個頁面的焦點

　　可以看出，虛擬焦點區(qū)域是由手繪花卉、幾何圖案數字等手繪圖案組成的圖案幾何圖形，而真實焦點落在最大的手繪花卉上。這時手繪花卉的有機形態(tài)和相鄰的幾何形態(tài)就形成了對比，即幾何形態(tài)和有機形態(tài)的對比。

　　三角形的幾何形狀和數字的位置只是三角形。經過仔細觀察，整個畫花的材料與畫面中的幾何形狀和圖形相同，但與手繪腦圖明顯不同。它們相互對比，相互統(tǒng)一。

　　經過分析觀察，一個焦點的結構并不像想象的那么簡單。如果把對比和統(tǒng)一看成一個平衡的兩極，那么所有元素之間的關系就是取它們之間的值，最終達到平衡。這可以算是一種力學。

　　你的畫面元素越多，就越需要加強整個畫面的統(tǒng)一性。

　　下面的設計是一個由很多小插圖聚合而成的頁面，一不小心就陷入一片混亂。設計師將這些插畫分為三段內容，每段內容用背景色分割成三個長方形，就是形狀的統(tǒng)一。這些插畫的材質和風格也是統(tǒng)一的，同時插畫中展示的物體方向也是向下傾斜的，也形成了一種統(tǒng)一。所以你可以看到這張圖的對比力比較弱，沒有人懷疑焦點是左邊的長方形，但是這個焦點里的插圖可以看到是一件男式襯衫和一件女式襯衫，這就形成了男女產品的對比。這種對比相對不是很強烈。

　　保持比例

　　說到比例，難免和數學公式有關系。其實簡單來說，我們可以把尺度看作一個視覺上的原子單位，位置和大小的所有關系都是以這個原子單位為基礎的。

　　舉個例子，如果我確定一個原子單位是一個50px大小的正方形，我會基于這個矩形創(chuàng)建一個圖形，這個矩形是由這個正方形構建的，有點像我們玩的拼圖游戲。添加50px網格線后，您會明白它們只是與原子單位成比例

　　您可以在Photoshop中隨意設置網格的大小，網格的大小應該與您的文檔成比例。例如，如果您的新文檔的寬度是1600px，網格可以設置為80px或160px。根據網格線，網格線越小，最終結果就越靈活。但是也要注意，如果網格太小，就起不到很大的作用。

　　比例會讓你的網頁設計形成一種無形的穩(wěn)定感，每一個元素都適當的顯示在它適當的位置。如果選擇對稱布局，因為對稱本身是穩(wěn)定的，所以網格在不對稱布局中起著更重要的作用。

　　下面這個展示棧音樂游戲樂趣的設計是用網格讓每個色塊各就各位。它不對稱的布局總給人一種崩潰的張力，背后需要比例的支撐。

　　神奇幾何

　　網頁的布局幾乎都是由幾何圖形組成的，顯示屏本身是矩形的，所以最常用的布局是矩形。

　　矩形

　　它給人一種安定、踏實、有序的感覺，所以給人一種信任。在網頁設計中，不僅圖片可以設計成矩形，文本段落也可以是矩形。例如，在以下示例中，左圖片和右圖片布局中的圖形和文本分別是矩形

　　作為矩形，也有直角矩形和圓角矩形，分別傳達不同的感受。圓角矩形相對不那么尖銳，更趨于柔和和圓潤。

　　除了圖文，還有長方形作為色塊，一般用來強調視覺重點。如下例所示，左邊的矩形框用于聚焦文本段落

　　三角形的

　　三角形有一種穩(wěn)定性，因為關于三角形的關聯最多的是一座山或者金字塔，而這種結構本身就能抵御外界環(huán)境的入侵。你的潛意識會把一個正三角形看作是一種庇護。三角冪的穩(wěn)定感，常用在有人工痕跡的領域，比如建筑。

　　三角的出現所呈現的穩(wěn)定人心的氣場，是不應該被打擾的。所以當三角形作為一個畫面出現的時候，就是全場的焦點。當然，只以圖案形式出現的三角形除外。這也表現出了一些霸氣和三角的孤立。

　　由于三角形實際上是矩形的一半，所以矩形的意圖可以通過三角形來擴展，矩形布局的效果也可以通過巧妙的構圖安排來發(fā)揮。

　　圈

　　圓是完美的，也象征著循環(huán)?？梢哉f圈子是東方風格的象征元素。圓靈活豁達，所以力量感比三角形的銳度弱，但更活潑。如果你的頁面全是點點，毫無疑問，這一頁必然會讓人覺得是針對孩子或者女生的。

　　圓的魅力在于和諧，所以它可以用于任何布局，也可以形成一種焦點因為我們對于圓有流動性，所以它不具有穩(wěn)定性的特征。如果使用圓形進行布局，其周圍的布局表達式將受到影響。因此，我們需要進一步提高圓的使用。比如圓的尺寸不容易保持太大，因為太大的圓容易擠壓屏幕本身的邊緣線，在周圍造成壓迫感。

　　在使用幾何圖形進行版面設計時，大部分文字段落都是矩形版面，也就是說在繪圖和圖案造型時，要利用幾何圖形本身的魔力進行排版。自然界本身的結構其實可以簡化為幾何造型，甚至一張圖片本身就具有幾何造型的特點。因此，您可以將圖像內容本身與幾何圖形相結合。

　　有些幾何形狀并不簡單。比如矩形傾斜后變成平行四邊形。兩個三角形疊加在一起，就變成了六角星。四邊形多一條邊就是五邊形，然后就變成多邊形了。幾何可以巧妙地組合成新的形狀，這幾乎使幾何擁有無窮的魔力。

　　例如，在這個例子中，拐角被圓角后，圖形的銳度消失了，這給整個圖形增加了靈活性

　　設計最搞笑的是從來沒有一個標準答案。哪怕是一部叫做大師的杰作，也在等待著有人來突破。也許我們應該放棄“突破”的競爭思維表達，但應該說，不同的人應該解讀不同的風格。