玩攝影的同學(xué)應(yīng)該都知道取景布局三分法，這是非常熟悉的概念。但是在進(jìn)行網(wǎng)頁設(shè)計(jì)的時(shí)候，幾乎沒有人會(huì)拿三分法來說事兒。當(dāng)然，這并不意味著不可能，只是這種跨范疇的事情很少被留意到而已。

或許你會(huì)問，為什么一定要三分呢？這種奇異的設(shè)定到底是從何而來？還好，我可以很高興地告訴你這玩意和數(shù)學(xué)定理或者復(fù)雜的邏輯推理都沒有關(guān)系，也沒有太多的必要在這個(gè)東西的來源上過度深究。

三分法僅僅是來自于傳統(tǒng)藝術(shù)，目前在攝影中運(yùn)用得特別多?？v橫三分，整個(gè)布局被分為9個(gè)平均的區(qū)塊，橫向縱向各有2條分界線。三分法規(guī)定，為了盡可能吸引觀眾的注意力，視覺重心或者最吸收人的東西應(yīng)該盡量靠近四條線相交處。

那么網(wǎng)頁設(shè)計(jì)的問題上，三分法和網(wǎng)頁設(shè)計(jì)到底是如何結(jié)合到一起的呢？正如同攝影時(shí)三分法下的布局可以吸收觀者一樣，符合三分法的網(wǎng)頁也一樣能讓瀏覽者更加關(guān)注焦點(diǎn)內(nèi)容。

四條線，四個(gè)焦點(diǎn)，九個(gè)區(qū)塊，這就是三分法下的柵格框架。許多網(wǎng)站的首頁設(shè)計(jì)都符合F式布局或者Z式布局，用戶也已經(jīng)習(xí)慣了這樣的瀏覽方式，通常視覺的起點(diǎn)都是左上角，這也是設(shè)計(jì)師需要關(guān)注的首個(gè)區(qū)塊。

這也就意味著，左上方的交點(diǎn)處應(yīng)該與頁面的某個(gè)重要內(nèi)容相重疊。交點(diǎn)處并不是非要放置鏈接或者圖片（當(dāng)然非要放也并非不可），它更像是一個(gè)標(biāo)記，用以區(qū)分布局的一個(gè)重要節(jié)點(diǎn)。比如頁面標(biāo)題的起始點(diǎn)可以與之重疊，整個(gè)標(biāo)題與橫向第一條線相齊平，然后在標(biāo)題下放置Banner圖之類的內(nèi)容。

值得注意的是，使用三分法來分析網(wǎng)頁設(shè)計(jì)更多的是一個(gè)用戶體驗(yàn)設(shè)計(jì)上的概念，而非一項(xiàng)完整的設(shè)計(jì)準(zhǔn)則。所以，如果你想借助這一概念來分析網(wǎng)頁設(shè)計(jì)的話，建議將網(wǎng)頁在瀏覽器中打開之后截圖分析處理，完整的網(wǎng)頁太長(zhǎng)，而且用戶瀏覽永遠(yuǎn)是基于屏幕而非一次看完整個(gè)頁面，所以也沒有必要使用整個(gè)頁面，截圖足以。如果設(shè)計(jì)尚處于原型階段，那么建議參考屏幕比例來截取分析。

所以，你應(yīng)該從用戶的瀏覽習(xí)慣出發(fā)，結(jié)合三分法來進(jìn)行分析優(yōu)化。當(dāng)用戶瀏覽網(wǎng)頁的時(shí)候會(huì)下意識(shí)注意到關(guān)鍵部位，正確的使用三分法來設(shè)計(jì)頁面，你會(huì)發(fā)現(xiàn)這種3×3的柵格能幫你帶來極具啟發(fā)性的設(shè)計(jì)。

了解三分法的柵格的運(yùn)用方式之后，你還需要明白更重要的一點(diǎn)：三分法帶來的并非是一個(gè)無可挑剔的網(wǎng)頁設(shè)計(jì)架構(gòu)，而是一個(gè)用來微調(diào)現(xiàn)有設(shè)計(jì)的布局測(cè)試框架。

有太多的免費(fèi)的柵格系統(tǒng)可以幫你設(shè)計(jì)網(wǎng)頁，比方960GS之類的，但是三分法的九宮格柵格系統(tǒng)是一個(gè)幫你微調(diào)整個(gè)網(wǎng)頁布局的，比如調(diào)整導(dǎo)航欄的高度，把Logo挪近一點(diǎn)或者遠(yuǎn)一點(diǎn)。

完成初稿，用三分法測(cè)試，然后走向下一步。隨著時(shí)間的推移，你會(huì)更加清楚如何將視覺元素置于對(duì)的地方。

處置對(duì)稱性

有的時(shí)候，在頁面中適當(dāng)?shù)厥褂脤?duì)稱性的元素還是頗為有用的。不過如果在設(shè)計(jì)中哪哪兒都用對(duì)稱式設(shè)計(jì)的話，這也未免太瞎了點(diǎn)。事實(shí)上，在藝術(shù)和攝影領(lǐng)域，非對(duì)稱式布局的運(yùn)用還是占據(jù)主流的，大小相對(duì)，遠(yuǎn)近相宜，更加令人賞心悅目，這也證明非平衡的視覺設(shè)計(jì)更能吸引我們的注意力。

三分法的優(yōu)勢(shì)在于它可以兼容非對(duì)稱式布局，也可以用來優(yōu)化對(duì)稱式布局。兩種布局靈活搭配，借助三分法來突出頁面重點(diǎn)，也掌握頁面平衡，如此才能調(diào)教出優(yōu)秀的網(wǎng)頁。