如何利用攝影三分法優(yōu)化網(wǎng)頁設(shè)計(jì)？

　　對于攝影師來說，分三步走的取景布局法是一個(gè)非常熟悉的概念。雖然是一個(gè)引人入勝的概念，但是在設(shè)計(jì)網(wǎng)頁的時(shí)候，幾乎沒有人會(huì)拿三分法來舉例。當(dāng)然，這并不意味著不可能，但這種跨范疇的事情很少被人注意到。

　　所以，在今天的文章中，我就來講解一下三點(diǎn)法，分享一些將其運(yùn)用到網(wǎng)頁設(shè)計(jì)中的技巧和經(jīng)驗(yàn)。但是二分法不一定適合所有人，推廣設(shè)計(jì)和設(shè)計(jì)過程的技巧和方法有很多。但是三分法作為一種基本的布局規(guī)則，它本身肯定是值得學(xué)習(xí)的，在網(wǎng)頁設(shè)計(jì)中也是相當(dāng)適用的。

　　為什么是三分？

　　也許你會(huì)問，為什么一定要拿三分？這個(gè)奇怪的設(shè)定是從哪里來的？幸運(yùn)的是，我可以很高興的告訴你，這個(gè)東西和數(shù)學(xué)定理或者復(fù)雜的邏輯推理沒有任何關(guān)系，也沒有太多必要過分深究這個(gè)東西的來歷。

　　三分法只來源于傳統(tǒng)藝術(shù)，目前在攝影中特別使用。縱向和橫向，整個(gè)布局分為9個(gè)平均區(qū)塊，橫向和縱向有2個(gè)邊界。三分法規(guī)定，為了盡可能地吸引觀看者的注意力，視覺重心或者最吸引人的東西，應(yīng)該盡可能地靠近四條線的交點(diǎn)。

　　你可以在WDD的這篇文章中找到一個(gè)很好的例子。在很多情況下，非對稱布局可以讓所有頁面都更有趣，但這并不意味著非對稱布局應(yīng)該一直使用，因?yàn)樵谀承┑胤?，對稱布局會(huì)更有趣，而此時(shí)，三點(diǎn)法則意義不大。

　　攝影時(shí)，最富于幻想的目的是以一種奇特的視角捕捉一些有吸引力的場景，而不對稱的布局使得視野中的某些元素比其他元素更為突出，而這些突出的元素通常會(huì)壓在前面提到的四個(gè)交點(diǎn)上。

　　那么，回到網(wǎng)頁設(shè)計(jì)的問題，三部曲法和網(wǎng)頁設(shè)計(jì)是如何結(jié)合在一起的？就像攝影中三分法下的布局可以吸引觀眾一樣，符合三分法的網(wǎng)頁也可以讓讀者更加關(guān)注聚焦的內(nèi)容。

　　知道三等分 的網(wǎng)格

　　四行四重點(diǎn)九塊，是三分法下的網(wǎng)格框架。很多網(wǎng)站的首頁設(shè)計(jì)都是符合F型布局或者Z型布局的，用戶已經(jīng)習(xí)慣了這種閱讀方式。通常視覺起點(diǎn)在左上角，是設(shè)計(jì)師首先要注意的區(qū)塊。

　　這意味著左上角的交叉點(diǎn)應(yīng)該與頁面的一些主要內(nèi)容重疊。沒有必要在路口放置鏈接或者圖片(當(dāng)然不是必不可少的)，更像是一個(gè)標(biāo)志，用來區(qū)分布局的一個(gè)主要節(jié)點(diǎn)。例如，頁面標(biāo)題的起點(diǎn)可以與其重疊，所有標(biāo)題與第一條水平線齊平，然后橫幅圖形等放置在標(biāo)題下方。

　　值得注意的是，三分法分析網(wǎng)頁設(shè)計(jì)的應(yīng)用，更多的是用戶體驗(yàn)設(shè)計(jì)的概念，而不是一個(gè)完整的設(shè)計(jì)準(zhǔn)則。所以，如果要用這個(gè)概念來分析網(wǎng)頁設(shè)計(jì)，建議在閱讀器中打開網(wǎng)頁后，對截圖進(jìn)行分析和處理。完整的網(wǎng)頁太長，用戶總是基于屏幕閱讀，而不是一次看整個(gè)頁面，不需要應(yīng)用所有頁面，截圖就夠了。如果設(shè)計(jì)還在原型階段，建議參照屏幕比例截取分析。

　　所以你要從用戶的閱讀習(xí)慣出發(fā)，結(jié)合三點(diǎn)法進(jìn)行分析優(yōu)化。用戶在閱讀網(wǎng)頁時(shí)，會(huì)下意識地注意到問題的癥結(jié)所在，準(zhǔn)確地運(yùn)用三點(diǎn)法設(shè)計(jì)頁面。你會(huì)發(fā)現(xiàn)這個(gè)3×3的格子可以幫你帶來很有啟發(fā)性的設(shè)計(jì)。

　　小調(diào)整而不是重新設(shè)計(jì)

　　在你知道如何應(yīng)用三分法的網(wǎng)格之后，你需要明確更重要的一點(diǎn):三分法帶來的不是無懈可擊的網(wǎng)頁設(shè)計(jì)框架，而是對現(xiàn)有設(shè)計(jì)進(jìn)行微調(diào)的布局測試框架。

　　可以幫你設(shè)計(jì)網(wǎng)頁的免費(fèi)網(wǎng)格系統(tǒng)太多了，比如960GS，但是基于三分法的九格網(wǎng)格系統(tǒng)可以幫你稍微調(diào)整一下網(wǎng)頁的布局，比如調(diào)整導(dǎo)航欄的高度，把Logo移近或移遠(yuǎn)。

　　好在這種測試方法非常適用簡單，而且不選擇軟件。截圖分析后可以在PS里畫一條虛線。GIMP等開源免費(fèi)軟件也能輕松幫到你。如果出了什么問題，可以直接在屏幕上畫一個(gè)九宮格來分析...(據(jù)說盲狙擊手在一開始玩CS的時(shí)候就用了這么蠢的方法~)反正能幫你搭建九宮格分析的工具，能幫你找到準(zhǔn)確的設(shè)計(jì)方向。

　　完成初稿，用三點(diǎn)法測試，然后進(jìn)入下一步。隨著時(shí)間的推移，你會(huì)更清楚地知道如何將視覺元素放在正確的位置。

　　處置的對稱性

　　有時(shí)候，在頁面中恰當(dāng)?shù)貞?yīng)用對稱元素是相當(dāng)有用的。但是如果網(wǎng)頁設(shè)計(jì)中處處使用對稱設(shè)計(jì)，那就太盲目了。事實(shí)上，在藝術(shù)和攝影領(lǐng)域，不對稱布局的應(yīng)用仍然占據(jù)主流，因?yàn)樗南鄬Τ叽绾秃线m的距離而更加令人愉悅，這也證明了不平衡的視覺設(shè)計(jì)更能吸引我們的注意力。

　　其實(shí)布局設(shè)計(jì)也有類似的原則和規(guī)范。例如，當(dāng)您在頁面頂部應(yīng)用一個(gè)大橫幅圖形時(shí)，它通常占據(jù)頁面高度的大約2/3。同樣，標(biāo)題和文本的字體大小需要比較，讀者自然會(huì)注意到更大的橫幅圖形、標(biāo)題和副標(biāo)題。尺寸對比是一方面，另一方面要考慮圖片和文字在頁面上的位置。三分法的簡單應(yīng)用并不能保證構(gòu)圖的豐滿。把九宮格放在頁面上，適當(dāng)調(diào)整頁面上元素的位置和中心，會(huì)好很多。

　　三等分法的優(yōu)點(diǎn)是可以兼容非對稱布局，也可以用來優(yōu)化對稱布局。兩種布局巧妙搭配，借助三點(diǎn)法突出頁面重點(diǎn)，同時(shí)也控制頁面平衡，可以訓(xùn)練出優(yōu)秀的網(wǎng)頁。

　　最后的想法

　　大部分藝術(shù)情境沒有固定的規(guī)則，但是有規(guī)則可以參考，設(shè)計(jì)也是在這些規(guī)則的基礎(chǔ)上不斷完善的。像類似三等分一樣控制規(guī)律，明白這個(gè)規(guī)律的目標(biāo)，深刻理解即使不是刻意應(yīng)用，也自然會(huì)在你的設(shè)計(jì)中展現(xiàn)出來，類似于第二本能。這個(gè)時(shí)候，你就有打破規(guī)則的潛力了！

　　設(shè)計(jì)和藝術(shù)雖然有基本的區(qū)別，但并不是對立的。誠然，按照規(guī)則，你可以設(shè)計(jì)出更符合人們口味的作品，但打破規(guī)則，充滿個(gè)性和藝術(shù)感的設(shè)計(jì)作品，給人的印象并不深刻。