對(duì)于攝影師來說，構(gòu)圖的三步法是一個(gè)非常熟悉的概念。雖然這是一個(gè)引人入勝的概念，但很少有人在設(shè)計(jì)網(wǎng)頁時(shí)使用三分法則作為示例。當(dāng)然，這并不是說不可能，只是這種跨類的東西很少有人注意到。

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

為什么是三分？

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

三分法僅來自傳統(tǒng)藝術(shù)，目前特別用于攝影。縱橫，將整個(gè)布局分為9個(gè)相等的塊，水平和垂直有2個(gè)邊框。三分法則規(guī)定，為了盡可能吸引觀看者的注意力，視覺重心或最吸引人的東西應(yīng)盡可能靠近四條線的交點(diǎn)。

您可以在WDD 的這篇文章中找到一個(gè)很好的示例。在很多情況下，非對(duì)稱布局可以讓所有的頁面變得更有趣，但這并不意味著非對(duì)稱布局應(yīng)該一直使用，因?yàn)橛行┑胤綄?duì)稱布局更有趣，而在這一點(diǎn)上，三法則沒有多大意義。

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

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

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

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

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

值得注意的是，將三分法應(yīng)用于分析網(wǎng)頁設(shè)計(jì)更多的是用戶體驗(yàn)設(shè)計(jì)的概念，而不是完整的設(shè)計(jì)指南。因此，如果想用這個(gè)概念來分析網(wǎng)頁設(shè)計(jì)，建議在閱讀器中打開網(wǎng)頁后的截圖進(jìn)行分析處理。完整的網(wǎng)頁太長，用戶總是基于屏幕閱讀，而不是一次查看整個(gè)頁面。不需要申請(qǐng)到所有頁面，截圖就夠了。如果設(shè)計(jì)還處于原型階段，建議截圖并參考屏幕比例進(jìn)行分析。

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

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

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

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

好在這個(gè)測試方法很適用也很簡單，而且不選軟件。截圖分析后，可以在PS中畫虛線。 GIMP 等開源免費(fèi)軟件也可以輕松幫助您。有問題的話可以直接在屏幕上畫個(gè)九宮格分析一下。（據(jù)說盲狙剛玩CS的時(shí)候就用這么傻的方法~）反正可以幫你建個(gè)九宮格分析工具，可以幫你找到正確的設(shè)計(jì)方向。

完成初稿，用三分法測試，然后進(jìn)行下一步。隨著時(shí)間的推移，您將更好地了解如何將視覺元素放置在正確的位置。

處置的對(duì)稱性

有時(shí)在頁面中正確應(yīng)用對(duì)稱元素非常有用。但如果在網(wǎng)頁設(shè)計(jì)處處采用對(duì)稱設(shè)計(jì)，那就太盲目了。事實(shí)上，在藝術(shù)和攝影領(lǐng)域，不對(duì)稱布局的應(yīng)用仍然占據(jù)主導(dǎo)地位，這種布局相對(duì)大小和適當(dāng)?shù)木嚯x更令人賞心悅目，這也證明了不平衡的視覺設(shè)計(jì)更能吸引我們的注意力。

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

　　三等分法的優(yōu)點(diǎn)是可以兼容非對(duì)稱布局，也可以用來優(yōu)化對(duì)稱布局。兩種布局巧妙搭配，借助三點(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ū)別，但并不是對(duì)立的。誠然，按照規(guī)則，你可以設(shè)計(jì)出更符合人們口味的作品，但打破規(guī)則，充滿個(gè)性和藝術(shù)感的設(shè)計(jì)作品，給人的印象并不深刻。

我們專注高端建站，小程序開發(fā)、軟件系統(tǒng)定制開發(fā)、BUG修復(fù)、物聯(lián)網(wǎng)開發(fā)、各類API接口對(duì)接開發(fā)等。十余年開發(fā)經(jīng)驗(yàn)，每一個(gè)項(xiàng)目承諾做到滿意為止，多一次對(duì)比，一定讓您多一份收獲！