網(wǎng)站設(shè)計(jì)中圖片三分法如何劃分—網(wǎng)站設(shè)計(jì)分享如何設(shè)計(jì)網(wǎng)頁

< 對(duì)攝影師而言，取景布局三分法是十分熟悉的概念。只管它是十分惹人入勝的概念，然而在進(jìn)行網(wǎng)頁設(shè)計(jì)的時(shí)候，多少乎不人會(huì)拿三分法來說事兒。當(dāng)然，這并不象征著不可能，只是這種跨范疇的事件很少被留神到罷了。

所以，在今天的文章里我想說明一下三分法，并且分享一些將其應(yīng)用到網(wǎng)頁設(shè)計(jì)時(shí)的技能跟教訓(xùn)。不過三分法并不一定適合所有人，究竟晉升設(shè)計(jì)跟設(shè)計(jì)流程的技能跟方法有很多。不過作為一項(xiàng)基本的排版布局規(guī)矩，三分法自身是絕對(duì)值得學(xué)習(xí)的，并且在網(wǎng)頁設(shè)計(jì)中也頗為實(shí)用。
為何三分？
興許你會(huì)問，為什么一定要三分呢？這種奇怪的設(shè)定到底是從何而來？還好，我可能很愉快地告訴你這玩意跟數(shù)學(xué)定理抑或龐雜的邏輯推理都不關(guān)聯(lián)，也不太多的必要在這個(gè)貨色的來源上適度深究。
三分法僅僅是來自于傳統(tǒng)藝術(shù)，目前在攝影中應(yīng)用得尤其多?？v橫三分，全部布局被分為9個(gè)均勻的區(qū)塊，橫向縱向各有2條分界線。三分法劃定，為了盡可能吸引觀者的留神力，視覺重心或者吸惹人的貨色應(yīng)當(dāng)盡量湊近四條線相交處。
你可能在WDD的這篇文章中找到絕佳的實(shí)例。很多時(shí)候非對(duì)稱的布局經(jīng)常能讓全部頁面更加富有生趣，然而這并不象征著著任何時(shí)候都得用非對(duì)稱布局，因?yàn)樵谟械膱?chǎng)合，對(duì)稱布局會(huì)更有意思，而在這個(gè)時(shí)候，三分法令意思并不大。

攝影的時(shí)候，幻想的目標(biāo)是一奇特的視角捕獲到一些能吸惹人的場(chǎng)景，而非對(duì)稱的布局使得視線中的一些元素比其余的更加凸起，而這些凸起的元素通常壓在之前所說的四個(gè)交點(diǎn)上。
那么從新回到網(wǎng)頁設(shè)計(jì)的問題上，三分法跟網(wǎng)頁設(shè)計(jì)到底是如何結(jié)合到一起的呢？正如同攝影時(shí)三分法下的布局可能吸引觀者一樣，合乎三分法的網(wǎng)頁也一樣能讓瀏覽者更加關(guān)注焦點(diǎn)內(nèi)容。網(wǎng)站設(shè)計(jì)要能充分吸引訪問者的注意力，讓訪問者產(chǎn)生視覺上的愉悅感。因此在網(wǎng)頁創(chuàng)作的時(shí)候就必須將網(wǎng)站的整體設(shè)計(jì)與網(wǎng)頁設(shè)計(jì)的相關(guān)原理緊密結(jié)合起來。

理解三分法的柵格
四條線，四個(gè)焦點(diǎn)，九個(gè)區(qū)塊，這就是三分法下的柵格框架。很多網(wǎng)站的頁設(shè)計(jì)都合乎F式布局或者Z式布局，用戶也已經(jīng)習(xí)慣了這樣的瀏覽方法，通常視覺的出發(fā)點(diǎn)都是左上角，這也是設(shè)計(jì)師須要關(guān)注的個(gè)區(qū)塊。
這也就象征著，左上方的交點(diǎn)處應(yīng)當(dāng)與頁面的某個(gè)重要內(nèi)容相重疊。交點(diǎn)處并不是非要放置鏈接或者圖片（當(dāng)然非要放也并非不可），它更像是一個(gè)標(biāo)記，用以辨別布局的一個(gè)重要節(jié)點(diǎn)。比方頁面題目的起始點(diǎn)可能與之重疊，全部題目與橫向條線相齊平，而后在題目下放置Banner圖之類的內(nèi)容。
值得留神的是，利用三分法來剖析網(wǎng)頁設(shè)計(jì)更多的是一個(gè)用戶閉會(huì)設(shè)計(jì)上的概念，而非一項(xiàng)完全的設(shè)計(jì)準(zhǔn)則。所以，假如你想借助這一律念來剖析網(wǎng)頁設(shè)計(jì)的話，倡導(dǎo)將網(wǎng)頁在瀏覽器中打開之后截圖剖析處理，完全的網(wǎng)頁太長(zhǎng)，而且用戶瀏覽永遠(yuǎn)是基于屏幕而非一次看完全個(gè)頁面，所以也不必要利用全部頁面，截圖足以。假如設(shè)計(jì)尚處于原型階段，那么倡導(dǎo)參考屏幕比例來截取剖析。

所以，你應(yīng)當(dāng)從用戶的瀏覽習(xí)慣出發(fā)，結(jié)合三分法來進(jìn)行剖析優(yōu)化。當(dāng)用戶瀏覽網(wǎng)頁的時(shí)候會(huì)下意識(shí)留神到要害部位，正確的利用三分法來設(shè)計(jì)頁面，你會(huì)發(fā)明這種3×3的柵格能幫你帶來極具啟發(fā)性的設(shè)計(jì)。
小調(diào)劑而非重設(shè)計(jì)
理解三分法的柵格的應(yīng)用方法之后，你還須要明白更重要的一點(diǎn)：三分法帶來的并非是一個(gè)無可抉剔的網(wǎng)頁設(shè)計(jì)架構(gòu)，而是一個(gè)用來微調(diào)現(xiàn)有設(shè)計(jì)的布局測(cè)試框架。
有太多的免費(fèi)的柵格體系可能幫你設(shè)計(jì)網(wǎng)頁，比方960GS之類的，然而三分法的九宮格柵格體系是一個(gè)幫你微調(diào)全部網(wǎng)頁布局的，比方調(diào)劑導(dǎo)航欄的高度，把Logo挪近一點(diǎn)或者遠(yuǎn)一點(diǎn)。

值得慶幸的是，這種測(cè)試方法很實(shí)用，并且很簡(jiǎn)單，也不挑軟件。你可能截圖之后在PS里面畫虛線來剖析，諸如GIMP這樣的開源免費(fèi)軟件也可能輕松幫你搞定，再不濟(jì)你還可能直接用記號(hào)筆在屏幕上畫一個(gè)九宮格來剖析嘛……（話說當(dāng)初打CS的時(shí)候盲狙也用過這等笨辦法~）反正能幫你構(gòu)建出九宮格剖析的工具都能帶你走向正確的設(shè)計(jì)方向。
實(shí)現(xiàn)初稿，用三分法測(cè)試，而后走向下一步。隨著時(shí)光的推移，你會(huì)更加明白如何將視覺元素置于對(duì)的處所。
處理對(duì)稱性
有的時(shí)候，在頁面中恰當(dāng)天時(shí)用對(duì)稱性的元素還是頗為有用的。不過假如在設(shè)計(jì)中哪哪兒都用對(duì)稱式設(shè)計(jì)的話，這也不免太瞎了點(diǎn)。事實(shí)上，在藝術(shù)跟攝影范疇，非對(duì)稱式布局的應(yīng)用還是盤踞主流的，大小絕對(duì)，遠(yuǎn)近適宜，更加令人賞心悅目，這也證明非均衡的視覺設(shè)計(jì)更能吸引咱們的留神力。

切實(shí)在版式設(shè)計(jì)中，也有類似的準(zhǔn)則跟標(biāo)準(zhǔn)。網(wǎng)站設(shè)計(jì)要能充分吸引訪問者的注意力，讓訪問者產(chǎn)生視覺上的愉悅感。因此在網(wǎng)頁創(chuàng)作的時(shí)候就必須將網(wǎng)站的整體設(shè)計(jì)與網(wǎng)頁設(shè)計(jì)的相關(guān)原理緊密結(jié)合起來。比方，當(dāng)你在頁面頂部利用大Banner圖的時(shí)候，它通常會(huì)盤踞頁面大略2/3的高，類似的，題目跟解釋的字體大小也須要大小對(duì)比，讀者會(huì)天然而然地留神到更大的Banner圖、題目跟副題目。大小對(duì)比是一方面，另外一方面還須要考慮頁面上圖片跟文字的位置。簡(jiǎn)單的利用三分法并不能確保構(gòu)圖的飽滿，將九宮格置于頁面上，恰當(dāng)?shù)卣{(diào)劑頁面的元素的位置跟中心之后，會(huì)好不少。
三分法的上風(fēng)在于它可能兼容非對(duì)稱式布局，也可能用來優(yōu)化對(duì)稱式布局。兩種布局機(jī)動(dòng)搭配，借助三分法來凸起頁面重點(diǎn)，也控制頁面均衡，如此才干調(diào)教出優(yōu)良的網(wǎng)頁。
后的思考
絕大多數(shù)的藝術(shù)情勢(shì)切實(shí)并不固定的規(guī)矩，然而有法則可能參考，設(shè)計(jì)也恰是基于這些法則而一直進(jìn)步?？刂祁愃迫址ㄟ@樣的法則，理解這個(gè)法則的目標(biāo)所在，深刻理解，即便不刻意去應(yīng)用，它也會(huì)從你的設(shè)計(jì)中天然而然地展示出來，形同第二本能。這個(gè)時(shí)候，你就具備了攻破規(guī)矩的潛力了！
誠(chéng)然說設(shè)計(jì)跟藝術(shù)有著基本的差別，然而兩者并非對(duì)破的關(guān)聯(lián)。誠(chéng)然依著規(guī)矩可能設(shè)計(jì)出更合乎民眾口味的作品，然而攻破規(guī)矩，充斥個(gè)性跟藝術(shù)感的設(shè)計(jì)作品又何嘗不會(huì)令人印象深刻呢？
http://m.lawyerfranchise.com/
>