對(duì)于攝影(yǐng)師(shī)而言，取景布局三分(fēn)法是(shì)非常 ×熟悉的(de)概念。盡管它是(shì)非常引人(rén)入勝的(de)概念，但(dàn)是(≠↔shì)在進行(xíng)網頁設計(jì)的(de)時(shí)候，幾乎沒Ω≥¥有(yǒu)人(rén)會(huì)拿(ná)三分(fēn☆&)法來(lái)說(shuō)事(shì)兒λ÷±Ω(ér)。當然，這(zhè)并不(bù)意味σπ著(zhe)不(bù)可(kě)能(néng)，隻© >✔是(shì)這(zhè)種跨領域的(de)事(shì)情很(hěn)少(shǎo)被注意到(dàφα​÷o)罷了(le)。

　　所以，在今天的(de)文(wén)章(zhā↑β∑ng)裡(lǐ)我想解釋一(yī)下(xià)三分(fēn)₽↓γ法，并且分(fēn)享一(yī)些(xiē)将其運用(yòng)到₽✘γ€(dào)網頁設計(jì)時(shí)的(de)技(jì)巧‌↔≠Ω和(hé)經驗。不(bù)過三分(fēn)法并不(bù)一(yī)定适≈≠£合所有(yǒu)人(rén)，畢竟提升設計(jì)和(hé)設計(‌πjì)流程的(de)技(jì)巧和(hé)方法有(yǒu)很(h←‍ěn)多(duō)。不(bù)過作(zuò)為(wèi)一(yī)項基本的(de)排版布局規則÷≠ ，三分(fēn)法本身(shēn)是(shì)絕對(duì)值得(de)學習(xí)的£λ(de)，并且在網頁設計(jì)中也(yě)頗為(wèi)實'♥≈用(yòng)。

　　為(wèi)何三分(fēn)？

　　也(yě)許你(nǐ)會(huì)問(wèn)，為(wèi)什(shén)麽一(yī)定要(‌Ω♦yào)三分(fēn)呢(ne)？這(zhè)種奇怪♥®的(de)設定到(dào)底是(shì)從(cóng)何而☆&≤來(lái)？還(hái)好(hǎo)，我可(kě)以很(hěn)高(gāo)興地(dìσ©♥)告訴你(nǐ)這(zhè)玩(wán)意和(hé)數(shù±βλ§)學定理(lǐ)抑或複雜(zá)的(de)邏輯推理(lǐ)都(dōu)沒有(yǒu)關系，<‍也(yě)沒有(yǒu)太多(duō)的(de)必要(yào)在這(♠₩ zhè)個(gè)東(dōng)西(xī)的(de)♦"來(lái)源上(shàng)過度深究。

　　三分(fēn)法僅僅是(shì)來(lái)≈™×自(zì)于傳統藝術(shù)，目前在攝影(yǐng)中運用(yòng)得(de)λφ↑尤其多(duō)。縱橫三分(fēn)，整個(gè)布局被分(fēn)₩₹為(wèi)9個(gè)平均的(de)區(≤↓≈qū)塊，橫向縱向各有(yǒu)2條分(fēn)界線。三分(fēn)法規定，為(w©"èi)了(le)盡可(kě)能(néng)吸引觀者的(de)注意力，視(shì)₽≥δ$覺重心或者最吸引人(rén)的(de)東(dōng)西(xī)應該盡量靠近εΩσ(jìn)四條線相(xiàng)交處。

　　你(nǐ)可(kě)以在WDD的(de)這(zhè)篇​"文(wén)章(zhāng)中找到(dào₩π)絕佳的(de)實例。很(hěn)多(duō)時(shí)候∑¥非對(duì)稱的(de)布局常常能(néng)讓整個(gè)頁面更加富有(yǒu)生(sh∑≈¥©ēng)趣，但(dàn)是(shì)這(zπ≤hè)并不(bù)意味著(zhe)著(zhe)任何時(shí)候都(dōu)得(★<de)用(yòng)非對(duì)稱布局，因為(wèi)在有(yǒu)的✔₹(de)場(chǎng)合，對(duì)稱布局會(huì)更有(yǒu)>' 意思，而在這(zhè)個(gè)時(shí)候，三分(fēn)♦'π法則意義并不(bù)大(dà)。

　　攝影(yǐng)的(de)時(shí)候，最理(lǐΩ•✘)想的(de)目标是(shì)一(yī)獨特的(de)視(shì)角捕捉到(®±dào)一(yī)些(xiē)能(néng)吸引人(rén)的(de)場(chǎng↓≈λ∑)景，而非對(duì)稱的(de)布局使得(de)視(shì)野中的(de)一(yī<γ€♠)些(xiē)元素比其他(tā)的(de)更加突出，而這(zhè)些(xiē)突出的(de)元素&‌λ通(tōng)常壓在之前所說(shuō)的(de)¥&四個(gè)交點上(shàng)。

　　那(nà)麽重新回到(dào)網頁設計(jì)的(de)問(wèn)題上(s ®×γhàng)，三分(fēn)法和(hé)網頁設計(>δ♣λjì)到(dào)底是(shì)如(rú)何結合到(dào)一(yī)起的(de)呢(∏±σne)？正如(rú)同攝影(yǐng)時(shí)三分(fēn)法下(xià)的"'(de)布局能(néng)夠吸引觀者一(yī)樣，符合三分♣φ(fēn)法的(de)網頁也(yě)一(yī)樣能(néng)讓浏覽者更加關注焦點內(nèi§φ)容。

　　了(le)解三分(fēn)法的(de)栅格

　　四條線，四個(gè)焦點，九個(gè)區(qū)塊，這(zhè)就(jiù)是(♦∑≥shì)三分(fēn)法下(xià)的(de)栅格框架。許多(du'✘ō)網站(zhàn)的(de)首頁設計(jì)都(dōu)符合F式布局或者Z式布局，用(•&yòng)戶也(yě)已經習(xí)慣了(le)這(zhè)樣的(de)浏覽方式，通(tō☆ ng)常視(shì)覺的(de)起點都(d£¶♣ōu)是(shì)左上(shàng)角，這(zhè♥♠§)也(yě)是(shì)設計(jì)師(shī)需要(yào)關注的(de)"ε α首個(gè)區(qū)塊。

　　這(zhè)也(yě)就(jiù)意₩&味著(zhe)，左上(shàng)方的(de)交點處應該與頁面的(de)某個(gè)重要(y₩™•ào)內(nèi)容相(xiàng)重疊。交點處并不(ε‌bù)是(shì)非要(yào)放(fàng)♣✔®置鏈接或者圖片（當然非要(yào)放(fàng)也(yě)并非不(b☆λ€↓ù)可(kě)），它更像是(shì)一(yī)個(gè)标記，用(yòng)‌↕ 以區(qū)分(fēn)布局的(de)一(yī)個(gè)重要(yào)節點。比如(rú"≠)頁面标題的(de)起始點可(kě)以與之重疊，♠≤ §整個(gè)标題與橫向第一(yī)條線相(xiàng)齊平，然後在标題下(xià)放(fàng)置<λ☆‌Banner圖之類的(de)內(nèi)容。

　　值得(de)注意的(de)是(shì)，使用(yòng)三分(fēn)法來♦★(lái)分(fēn)析網頁設計(jì)更多(duγ&♣ō)的(de)是(shì)一(yī)個(gè)用(yδ₩‍"òng)戶體(tǐ)驗設計(jì)上(shàng)的(de)概念，而非一(yī)項¥ ♥‌完整的(de)設計(jì)準則。所以，如(rú)↕±果你(nǐ)想借助這(zhè)一(yī)概念來(lái)分(fēn)析網頁設計≈γ★&(jì)的(de)話(huà)，建議(yì)将網頁在浏覽器(qì₩♣​)中打開(kāi)之後截圖分(fēn)析處理(lǐ)，完整的(de)網頁太長(c↑₹háng)，而且用(yòng)戶浏覽永遠(yuǎn)是(sh•∏♦ì)基于屏幕而非一(yī)次看(kàn)完整個(gè)頁面，所以也(yě)沒有(yǒu✔☆​®)必要(yào)使用(yòng)整個(gè)頁面，截圖足以。如(r$★÷γú)果設計(jì)尚處于原型階段，那(nà)麽建議(yì)≥α 參考屏幕比例來(lái)截取分(fēn)析。

　　所以，你(nǐ)應該從(cóng)用(≥₹yòng)戶的(de)浏覽習(xí)慣出λ<發，結合三分(fēn)法來(lái)進行(xíng)分(fēn)析優化(huπ↓π♥à)。當用(yòng)戶浏覽網頁的(de)時(shí)候會(huì)下(xià)意↔Ω©∑識注意到(dào)關鍵部位，正确的(de)使用(yòng)三分(fē∑↔"≠n)法來(lái)設計(jì)頁面，你(nǐ)會(huì)發現(xi₹σ©àn)這(zhè)種3×3的(de)栅格能(néng)幫你(nǐ)帶來(lái) ™極具啓發性的(de)設計(jì)。

　　小(xiǎo)調整而非重設計(jì)

　　了(le)解三分(fēn)法的(de)栅格的(de)運用(∞™ ÷yòng)方式之後，你(nǐ)還(hái)需要(yào)明(míng)白(bái)↔©≠<更重要(yào)的(de)一(yī)點：三分(fēn)法帶來(lái)的(d↕→↔πe)并非是(shì)一(yī)個(gè)無可(kě)挑Ω€≤剔的(de)網頁設計(jì)架構，而是(shì)一(yī)個(gè)用(yòng)來(l↑πái)微(wēi)調現(xiàn)有(yǒu)設計(jì)的(de)布局測試∞←框架。

　　有(yǒu)太多(duō)的(de)免費(fèi)的(d‍>e)栅格系統可(kě)以幫你(nǐ)設計(jì)網頁，比如(rú)960 €ΩGS之類的(de)，但(dàn)是(shì)三分(fēn)法的(de)九宮格栅格系統₹&≤是(shì)一(yī)個(gè)幫你(nǐ)微(wēi)調整個(gè)網頁布局的(d₽"e)，比如(rú)調整導航欄的(de)高(gāo)度，把Logo✔β←挪近(jìn)一(yī)點或者遠(yuǎnβ✔)一(yī)點。

　　值得(de)慶幸的(de)是(shì)，這(zhè)種測試方法很(hěn)λ®實用(yòng)，并且很(hěn)簡單，也(yě)不(bù)挑軟件(↔₩≤jiàn)。你(nǐ)可(kě)以截圖之後在PS裡(lǐ)面畫(huà)虛線來 ∑(lái)分(fēn)析，諸如(rú)GIMP這(zhè)樣的(de)開(kāi)源免費(fèi®♠§σ)軟件(jiàn)也(yě)可(kě)以輕松幫你(nǐ)搞定，再不(bù)濟你(nǐλ "™)還(hái)可(kě)以直接用(yòng)記号筆↑← δ(bǐ)在屏幕上(shàng)畫(huà)一(yī)個(gè)九宮格來(lái)分(fēn↑↔δ)析嘛……（話(huà)說(shuō)當初打CS的(de)時(shí)候盲狙也(yě)用(yòn✘£g)過這(zhè)等笨辦法~）反正能(néng)幫你(nǐ)構建出九宮格分(fēn)析的(≈λ&de)工(gōng)具都(dōu)能(néng)帶你♠☆≈©(nǐ)走向正确的(de)設計(jì)方向。

　　完成初稿，用(yòng)三分(fēn)法測試，然後走向下(xià)一(yī)步。随著(zα✔he)時(shí)間(jiān)的(de)推移，你(nǐ)會(huì)更加清楚如(rú)何将♦‌↔<視(shì)覺元素置于對(duì)的(de)地(dì)方。

　　處理(lǐ)對(duì)稱性

　　有(yǒu)的(de)時(shí)候，在頁面中适當地(dì)使用(yòng)對(duì)↑♠稱性的(de)元素還(hái)是(shì)頗為(wèi)§↔有(yǒu)用(yòng)的(de)。不(bù)過如(✘≥‌rú)果在設計(jì)中哪哪兒(ér)都(dōu)用(yòng)★£對(duì)稱式設計(jì)的(de)話(®§→♠huà)，這(zhè)也(yě)未免太瞎了(le)點。事(shì)λΩ ‌實上(shàng)，在藝術(shù)和(hé)攝影(yǐng)領域，非對(σ∞ ★duì)稱式布局的(de)運用(yòng)還(hái)是(shì)占據主流的(de)，★↔✘大(dà)小(xiǎo)相(xiàng)對(duì)，遠(y✘₽ uǎn)近(jìn)相(xiàng)宜，更加令人(≠↔'rén)賞心悅目，這(zhè)也(yě)證明(míng)非平衡的(de)視(shì)覺設計(jì$↕™)更能(néng)吸引我們的(de)注意力。

　　其實在版式設計(jì)中，也(yě)有(yǒu)類似&≠的(de)原則和(hé)規範。比如(rú)，當你(₹↓ε"nǐ)在頁面頂部使用(yòng)大(dà)Banner圖的(de)時(shí)候，它通(tōng)≤‌常會(huì)占據頁面大(dà)概2/3的(de)高(gāo£σδ)，類似的(de)，标題和(hé)正文(wén)的(de)字體(tǐ)大(dà)小≥ δ (xiǎo)也(yě)需要(yào)大(dà)小(xiǎo)對 ↓"(duì)比，讀(dú)者會(huì)自(zì)然而然地(dì)注意到®↑≠£(dào)更大(dà)的(de)Banner圖、标題和(hé)副标題。大(dà)小(xiǎoβ±)對(duì)比是(shì)一(yī)方面↑•，另外(wài)一(yī)方面還(hái)需要(y♣₹γào)考慮頁面上(shàng)圖片和(hé)文(wén)字的(de)≈♠位置。簡單的(de)使用(yòng)三分(fēn)法并不(bù)δ& 能(néng)确保構圖的(de)飽滿，将九宮格置于頁面£¶♦α上(shàng)，适當地(dì)調整頁面的(de)元素的(de)位置和(♣✔hé)中心之後，會(huì)好(hǎo)不(bù)少(shǎo)。

　　三分(fēn)法的(de)優勢在于它可(kě)以兼容非對(duì)稱式布局，也(yě)可(kě•®$)以用(yòng)來(lái)優化(huà)對(duì)稱式布局。兩種布局靈活搭✘&∑配，借助三分(fēn)法來(lái)突出頁面重點，也(yě)掌握頁面平衡，如(rú•÷•)此才能(néng)調教出優秀的(de)網頁。

　　最後的(de)思考

　　絕大(dà)多(duō)數(shù)的(de)藝術(shù)形式其實并沒有(yǒu)固定的©γ£↓(de)規則，但(dàn)是(shì)有(yǒu)規律可(kě)以參考，設計(jì)也(yě)正"✘ ♠是(shì)基于這(zhè)些(xiē)規律而不(bù)斷進步。掌握類似三分∞©(fēn)法這(zhè)樣的(de)規律，了(le)解這(zhè)個(gè☆©₹→)規律的(de)目的(de)所在，深入理(lǐ)解，即使沒有(yǒu)刻意去(qù)Ω♦運用(yòng)，它也(yě)會(huì)從(cóng)你(nǐ)的(de)設計₹ ↕(jì)中自(zì)然而然地(dì)展現(xiàn)出來(lái)，形同第二本能(nén∞  λg)。這(zhè)個(gè)時(shí)候，★  你(nǐ)就(jiù)具備了(le)打破規則的(de) ♣₹≈潛力了(le)！

　　雖然說(shuō)設計(jì)和(hé)藝術(shù)有α​β(yǒu)著(zhe)根本的(de)區(qū)别，但(dàn)是(shì)兩♥<者并非對(duì)立的(de)關系。誠然依著(zhe)規則可(kě)以設計(jì)出更符合大♣₩∞(dà)衆口味的(de)作(zuò)品，但(dàn)是(shì)打破規則，充滿個(gè)性和₽<(hé)藝術(shù)感的(de)設計(jì‌‌≈¶)作(zuò)品又(yòu)何嘗不(bù ₹♣σ)會(huì)令人(rén)印象深刻呢(ne)？