對(duì)于攝影師而言，取景布局三分法是非常熟悉的概念。盡管它是非常引人入勝的概念，但是在進(jìn)行網頁設計的時候，幾乎沒(méi)有人會拿三分法來說事(shì)兒。當然，這(zhè)并不意味著(zhe)不可能(néng)，隻是這(zhè)種(zhǒng)跨領域的事(shì)情很少被(bèi)注意到罷了。

　　所以，在今天的文章裡(lǐ)我想解釋一下三分法，并且分享一些將(jiāng)其運用到網頁設計時的技巧和經(jīng)驗。不過(guò)三分法并不一定适合所有人，畢竟提升設計和設計流程的技巧和方法有很多。不過(guò)作爲一項基本的排版布局規則，三分法本身是絕對(duì)值得學(xué)習的，并且在網頁設計中也頗爲實用。

　　爲何三分？

　　也許你會問，爲什麼(me)一定要三分呢？這(zhè)種(zhǒng)奇怪的設定到底是從何而來？還(hái)好(hǎo)，我可以很高興地告訴你這(zhè)玩意和數學(xué)定理抑或複雜的邏輯推理都(dōu)沒(méi)有關系，也沒(méi)有太多的必要在這(zhè)個東西的來源上過(guò)度深究。

　　三分法僅僅是來自于傳統藝術，目前在攝影中運用得尤其多。縱橫三分，整個布局被(bèi)分爲9個平均的區塊，橫向(xiàng)縱向(xiàng)各有2條分界線。三分法規定，爲了盡可能(néng)吸引觀者的注意力，視覺重心或者最吸引人的東西應該盡量靠近四條線相交處。

　　你可以在WDD的這(zhè)篇文章中找到絕佳的實例。很多時候非對(duì)稱的布局常常能(néng)讓整個頁面(miàn)更加富有生趣，但是這(zhè)并不意味著(zhe)著(zhe)任何時候都(dōu)得用非對(duì)稱布局，因爲在有的場合，對(duì)稱布局會更有意思，而在這(zhè)個時候，三分法則意義并不大。

　　攝影的時候，最理想的目标是一獨特的視角捕捉到一些能(néng)吸引人的場景，而非對(duì)稱的布局使得視野中的一些元素比其他的更加突出，而這(zhè)些突出的元素通常壓在之前所說的四個交點上。

　　那麼(me)重新回到網頁設計的問題上，三分法和網頁設計到底是如何結合到一起(qǐ)的呢？正如同攝影時三分法下的布局能(néng)夠吸引觀者一樣(yàng)，符合三分法的網頁也一樣(yàng)能(néng)讓浏覽者更加關注焦點内容。

　　了解三分法的栅格

　　四條線，四個焦點，九個區塊，這(zhè)就是三分法下的栅格框架。許多網站的首頁設計都(dōu)符合F式布局或者Z式布局，用戶也已經(jīng)習慣了這(zhè)樣(yàng)的浏覽方式，通常視覺的起(qǐ)點都(dōu)是左上角，這(zhè)也是設計師需要關注的首個區塊。

　　這(zhè)也就意味著(zhe)，左上方的交點處應該與頁面(miàn)的某個重要内容相重疊。交點處并不是非要放置鏈接或者圖片（當然非要放也并非不可），它更像是一個标記，用以區分布局的一個重要節點。比如頁面(miàn)标題的起(qǐ)始點可以與之重疊，整個标題與橫向(xiàng)第一條線相齊平，然後(hòu)在标題下放置Banner圖之類的内容。

　　值得注意的是，使用三分法來分析網頁設計更多的是一個用戶體驗設計上的概念，而非一項完整的設計準則。所以，如果你想借助這(zhè)一概念來分析網頁設計的話，建議將(jiāng)網頁在浏覽器中打開(kāi)之後(hòu)截圖分析處理，完整的網頁太長(cháng)，而且用戶浏覽永遠是基于屏幕而非一次看完整個頁面(miàn)，所以也沒(méi)有必要使用整個頁面(miàn)，截圖足以。如果設計尚處于原型階段，那麼(me)建議參考屏幕比例來截取分析。

　　所以，你應該從用戶的浏覽習慣出發(fā)，結合三分法來進(jìn)行分析優化。當用戶浏覽網頁的時候會下意識注意到關鍵部位，正确的使用三分法來設計頁面(miàn)，你會發(fā)現這(zhè)種(zhǒng)3×3的栅格能(néng)幫你帶來極具啓發(fā)性的設計。

　　小調整而非重設計

　　了解三分法的栅格的運用方式之後(hòu)，你還(hái)需要明白更重要的一點：三分法帶來的并非是一個無可挑剔的網頁設計架構，而是一個用來微調現有設計的布局測試框架。

　　有太多的免費的栅格系統可以幫你設計網頁，比如960GS之類的，但是三分法的九宮格栅格系統是一個幫你微調整個網頁布局的，比如調整導航欄的高度，把Logo挪近一點或者遠一點。

　　值得慶幸的是，這(zhè)種(zhǒng)測試方法很實用，并且很簡單，也不挑軟件。你可以截圖之後(hòu)在PS裡(lǐ)面(miàn)畫虛線來分析，諸如GIMP這(zhè)樣(yàng)的開(kāi)源免費軟件也可以輕松幫你搞定，再不濟你還(hái)可以直接用記号筆在屏幕上畫一個九宮格來分析嘛……（話說當初打CS的時候盲狙也用過(guò)這(zhè)等笨辦法~）反正能(néng)幫你構建出九宮格分析的工具都(dōu)能(néng)帶你走向(xiàng)正确的設計方向(xiàng)。

　　完成(chéng)初稿，用三分法測試，然後(hòu)走向(xiàng)下一步。随著(zhe)時間的推移，你會更加清楚如何將(jiāng)視覺元素置于對(duì)的地方。

　　處理對(duì)稱性

　　有的時候，在頁面(miàn)中适當地使用對(duì)稱性的元素還(hái)是頗爲有用的。不過(guò)如果在設計中哪哪兒都(dōu)用對(duì)稱式設計的話，這(zhè)也未免太瞎了點。事(shì)實上，在藝術和攝影領域，非對(duì)稱式布局的運用還(hái)是占據主流的，大小相對(duì)，遠近相宜，更加令人賞心悅目，這(zhè)也證明非平衡的視覺設計更能(néng)吸引我們的注意力。

　　其實在版式設計中，也有類似的原則和規範。比如，當你在頁面(miàn)頂部使用大Banner圖的時候，它通常會占據頁面(miàn)大概2/3的高，類似的，标題和正文的字體大小也需要大小對(duì)比，讀者會自然而然地注意到更大的Banner圖、标題和副标題。大小對(duì)比是一方面(miàn)，另外一方面(miàn)還(hái)需要考慮頁面(miàn)上圖片和文字的位置。簡單的使用三分法并不能(néng)确保構圖的飽滿，將(jiāng)九宮格置于頁面(miàn)上，适當地調整頁面(miàn)的元素的位置和中心之後(hòu)，會好(hǎo)不少。

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

　　最後(hòu)的思考

　　絕大多數的藝術形式其實并沒(méi)有固定的規則，但是有規律可以參考，設計也正是基于這(zhè)些規律而不斷進(jìn)步。掌握類似三分法這(zhè)樣(yàng)的規律，了解這(zhè)個規律的目的所在，深入理解，即使沒(méi)有刻意去運用，它也會從你的設計中自然而然地展現出來，形同第二本能(néng)。這(zhè)個時候，你就具備了打破規則的潛力了！

　　雖然說設計和藝術有著(zhe)根本的區别，但是兩(liǎng)者并非對(duì)立的關系。誠然依著(zhe)規則可以設計出更符合大衆口味的作品，但是打破規則，充滿個性和藝術感的設計作品又何嘗不會令人印象深刻呢？