在網(wǎng)站設(shè)計(jì)中，許多企業(yè)都看重網(wǎng)站布局，網(wǎng)站布局好壞，決定了整個(gè)網(wǎng)站策劃的成敗。無(wú)規(guī)矩不正方圓，網(wǎng)站設(shè)計(jì)也是如此，是需要遵循它的規(guī)則的，今天我們眾騰網(wǎng)絡(luò)講解一下網(wǎng)站設(shè)計(jì)之三分法的概念。對(duì)于攝影師而言，取景布局三分法是非常熟悉的概念。盡管它是非常引人入勝的概念，但是在進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)的時(shí)候，幾乎沒有人會(huì)拿三分法來(lái)說(shuō)事兒。當(dāng)然，這并不意味著不可能，只是這種跨領(lǐng)域的事情很少被注意到罷了。

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

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

     三分法僅僅是來(lái)自于傳統(tǒng)藝術(shù)，目前在攝影中運(yùn)用得尤其多。縱橫三分，整個(gè)布局被分為9個(gè)平均的區(qū)塊，橫向縱向各有2條分界線。三分法規(guī)定，為了盡可能吸引觀者的注意力，視覺重心或者最吸引人的東西應(yīng)該盡量靠近四條線相交處。我們用下面的網(wǎng)站設(shè)計(jì)稿做為絕佳的實(shí)例。很多時(shí)候非對(duì)稱的布局常常能讓整個(gè)頁(yè)面更加富有生趣，但是這并不意味著著任何時(shí)候都得用非對(duì)稱布局，因?yàn)樵谟械膱?chǎng)合，對(duì)稱布局會(huì)更有意思，而在這個(gè)時(shí)候，三分法則意義并不大。

    攝影的時(shí)候，最理想的目標(biāo)是一獨(dú)特的視角捕捉到一些能吸引人的場(chǎng)景，而非對(duì)稱的布局使得視野中的一些元素比其他的更加突出，而這些突出的元素通常壓在之前所說(shuō)的四個(gè)交點(diǎn)上。那么重新回到網(wǎng)頁(yè)設(shè)計(jì)的問題上，三分法和網(wǎng)頁(yè)設(shè)計(jì)到底是如何結(jié)合到一起的呢？正如同攝影時(shí)三分法下的布局能夠吸引觀者一樣，符合三分法的網(wǎng)頁(yè)也一樣能讓瀏覽者更加關(guān)注焦點(diǎn)內(nèi)容。

了解三分法的柵格

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


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

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

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

    今天我們就先講到這里了，下一篇文章，我們將講解一下，三分法在網(wǎng)站設(shè)計(jì)中的運(yùn)用及實(shí)例展示。


轉(zhuǎn)載聲明：本文由桂林眾騰網(wǎng)絡(luò)原創(chuàng)文章
轉(zhuǎn)載請(qǐng)注明來(lái)源： http://zt-web.com/shows.php?id=324