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

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

為何三分？

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

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

你可以在WDD的這篇文章中找到絕佳的實(shí)例。很多時(shí)候非對稱(chēng)的布局常常能讓整個(gè)頁(yè)面更加富有生趣，但是這并不意味著(zhù)著(zhù)任何時(shí)候都得用非對稱(chēng)布局，因為在有的場(chǎng)合，對稱(chēng)布局會(huì )更有意思，而在這個(gè)時(shí)候，三分法則意義并不大。

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

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

了解三分法的柵格

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

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

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

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

小調整而非重設計

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

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

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

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

處理對稱(chēng)性

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

其實(shí)在版式設計中，也有類(lèi)似的原則和規范。比如，當你在頁(yè)面頂部使用大Banner圖的時(shí)候，它通常會(huì )占據頁(yè)面大概2/3的高，類(lèi)似的，標題和正文的字體大小也需要大小對比，讀者會(huì )自然而然地注意到更大的Banner圖、標題和副標題。大小對比是一方面，另外一方面還需要考慮頁(yè)面上圖片和文字的位置。簡(jiǎn)單的使用三分法并不能確保構圖的飽滿(mǎn)，將九宮格置于頁(yè)面上，適當地調整頁(yè)面的元素的位置和中心之后，會(huì )好不少。

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

最后的思考

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

雖然說(shuō)設計和藝術(shù)有著(zhù)根本的區別，但是兩者并非對立的關(guān)系。誠然依著(zhù)規則可以設計出更符合大眾口味的作品，但是打破規則，充滿(mǎn)個(gè)性和藝術(shù)感的設計作品又何嘗不會(huì )令人印象深刻呢？