新聞資訊
精品主題，實戰(zhàn)科普，最新行業(yè)熱點話題，隨時掌握云上咨訊。
如何用攝影三分法來優(yōu)化網(wǎng)頁設(shè)計？
來源：中科服 發(fā)布時間：2014-12-31 文章分類：行業(yè)動態(tài)
分享：
對于攝影師而言，取景布局三分法是非常熟悉的概念。盡管它是非常引人入勝的概念，但是在進行網(wǎng)頁設(shè)計的時候，幾乎沒有人會拿三分法來說事兒。當(dāng)然，這并不意味著不可能，只是這種跨領(lǐng)域的事情很少被注意到罷了。
所以，在今天的文章里我想解釋一下三分法，并且分享一些將其運用到網(wǎng)頁設(shè)計時的技巧和經(jīng)驗。不過三分法并不一定適合所有人，畢竟提升設(shè)計和設(shè)計流程的技巧和方法有很多。不過作為一項基本的排版布局規(guī)則，三分法本身是絕對值得學(xué)習(xí)的，并且在網(wǎng)頁設(shè)計中也頗為實用。
為何三分？
也許你會問，為什么一定要三分呢？這種奇怪的設(shè)定到底是從何而來？還好，我可以很高興地告訴你這玩意和數(shù)學(xué)定理抑或復(fù)雜的邏輯推理都沒有關(guān)系，也沒有太多的必要在這個東西的來源上過度深究。
三分法僅僅是來自于傳統(tǒng)藝術(shù)，目前在攝影中運用得尤其多?？v橫三分，整個布局被分為9個平均的區(qū)塊，橫向縱向各有2條分界線。三分法規(guī)定，為了盡可能吸引觀者的注意力，視覺重心或者最吸引人的東西應(yīng)該盡量靠近四條線相交處。
你可以在WDD的這篇文章中找到絕佳的實例。很多時候非對稱的布局常常能讓整個頁面更加富有生趣，但是這并不意味著著任何時候都得用非對稱布局，因為在有的場合，對稱布局會更有意思，而在這個時候，三分法則意義并不大。
攝影的時候，最理想的目標(biāo)是一獨特的視角捕捉到一些能吸引人的場景，而非對稱的布局使得視野中的一些元素比其他的更加突出，而這些突出的元素通常壓在之前所說的四個交點上。
那么重新回到網(wǎng)頁設(shè)計的問題上，三分法和網(wǎng)頁設(shè)計到底是如何結(jié)合到一起的呢？正如同攝影時三分法下的布局能夠吸引觀者一樣，符合三分法的網(wǎng)頁也一樣能讓瀏覽者更加關(guān)注焦點內(nèi)容。
了解三分法的柵格
四條線，四個焦點，九個區(qū)塊，這就是三分法下的柵格框架。許多網(wǎng)站的首頁設(shè)計都符合F式布局或者Z式布局，用戶也已經(jīng)習(xí)慣了這樣的瀏覽方式，通常視覺的起點都是左上角，這也是設(shè)計師需要關(guān)注的首個區(qū)塊。
這也就意味著，左上方的交點處應(yīng)該與頁面的某個重要內(nèi)容相重疊。交點處并不是非要放置鏈接或者圖片（當(dāng)然非要放也并非不可），它更像是一個標(biāo)記，用以區(qū)分布局的一個重要節(jié)點。比如頁面標(biāo)題的起始點可以與之重疊，整個標(biāo)題與橫向第一條線相齊平，然后在標(biāo)題下放置Banner圖之類的內(nèi)容。
值得注意的是，使用三分法來分析網(wǎng)頁設(shè)計更多的是一個用戶體驗設(shè)計上的概念，而非一項完整的設(shè)計準(zhǔn)則。所以，如果你想借助這一概念來分析網(wǎng)頁設(shè)計的話，建議將網(wǎng)頁在瀏覽器中打開之后截圖分析處理，完整的網(wǎng)頁太長，而且用戶瀏覽永遠是基于屏幕而非一次看完整個頁面，所以也沒有必要使用整個頁面，截圖足以。如果設(shè)計尚處于原型階段，那么建議參考屏幕比例來截取分析。
所以，你應(yīng)該從用戶的瀏覽習(xí)慣出發(fā)，結(jié)合三分法來進行分析優(yōu)化。當(dāng)用戶瀏覽網(wǎng)頁的時候會下意識注意到關(guān)鍵部位，正確的使用三分法來設(shè)計頁面，你會發(fā)現(xiàn)這種3×3的柵格能幫你帶來極具啟發(fā)性的設(shè)計。
小調(diào)整而非重設(shè)計
了解三分法的柵格的運用方式之后，你還需要明白更重要的一點：三分法帶來的并非是一個無可挑剔的網(wǎng)頁設(shè)計架構(gòu)，而是一個用來微調(diào)現(xiàn)有設(shè)計的布局測試框架。
有太多的免費的柵格系統(tǒng)可以幫你設(shè)計網(wǎng)頁，比如960GS之類的，但是三分法的九宮格柵格系統(tǒng)是一個幫你微調(diào)整個網(wǎng)頁布局的，比如調(diào)整導(dǎo)航欄的高度，把Logo挪近一點或者遠一點。
值得慶幸的是，這種測試方法很實用，并且很簡單，也不挑軟件。你可以截圖之后在PS里面畫虛線來分析，諸如GIMP這樣的開源免費軟件也可以輕松幫你搞定，再不濟你還可以直接用記號筆在屏幕上畫一個九宮格來分析嘛……（話說當(dāng)初打CS的時候盲狙也用過這等笨辦法~）反正能幫你構(gòu)建出九宮格分析的工具都能帶你走向正確的設(shè)計方向。
完成初稿，用三分法測試，然后走向下一步。隨著時間的推移，你會更加清楚如何將視覺元素置于對的地方。
處理對稱性
有的時候，在頁面中適當(dāng)?shù)厥褂脤ΨQ性的元素還是頗為有用的。不過如果在設(shè)計中哪哪兒都用對稱式設(shè)計的話，這也未免太瞎了點。事實上，在藝術(shù)和攝影領(lǐng)域，非對稱式布局的運用還是占據(jù)主流的，大小相對，遠近相宜，更加令人賞心悅目，這也證明非平衡的視覺設(shè)計更能吸引我們的注意力。
其實在版式設(shè)計中，也有類似的原則和規(guī)范。比如，當(dāng)你在頁面頂部使用大Banner圖的時候，它通常會占據(jù)頁面大概2/3的高，類似的，標(biāo)題和正文的字體大小也需要大小對比，讀者會自然而然地注意到更大的Banner圖、標(biāo)題和副標(biāo)題。大小對比是一方面，另外一方面還需要考慮頁面上圖片和文字的位置。簡單的使用三分法并不能確保構(gòu)圖的飽滿，將九宮格置于頁面上，適當(dāng)?shù)卣{(diào)整頁面的元素的位置和中心之后，會好不少。
三分法的優(yōu)勢在于它可以兼容非對稱式布局，也可以用來優(yōu)化對稱式布局。兩種布局靈活搭配，借助三分法來突出頁面重點，也掌握頁面平衡，如此才能調(diào)教出優(yōu)秀的網(wǎng)頁。
最后的思考
絕大多數(shù)的藝術(shù)形式其實并沒有固定的規(guī)則，但是有規(guī)律可以參考，設(shè)計也正是基于這些規(guī)律而不斷進步。掌握類似三分法這樣的規(guī)律，了解這個規(guī)律的目的所在，深入理解，即使沒有刻意去運用，它也會從你的設(shè)計中自然而然地展現(xiàn)出來，形同第二本能。這個時候，你就具備了打破規(guī)則的潛力了！
雖然說設(shè)計和藝術(shù)有著根本的區(qū)別，但是兩者并非對立的關(guān)系。誠然依著規(guī)則可以設(shè)計出更符合大眾口味的作品，但是打破規(guī)則，充滿個性和藝術(shù)感的設(shè)計作品又何嘗不會令人印象深刻呢？
返回列表
所以，在今天的文章里我想解釋一下三分法，并且分享一些將其運用到網(wǎng)頁設(shè)計時的技巧和經(jīng)驗。不過三分法并不一定適合所有人，畢竟提升設(shè)計和設(shè)計流程的技巧和方法有很多。不過作為一項基本的排版布局規(guī)則，三分法本身是絕對值得學(xué)習(xí)的，并且在網(wǎng)頁設(shè)計中也頗為實用。
為何三分？
也許你會問，為什么一定要三分呢？這種奇怪的設(shè)定到底是從何而來？還好，我可以很高興地告訴你這玩意和數(shù)學(xué)定理抑或復(fù)雜的邏輯推理都沒有關(guān)系，也沒有太多的必要在這個東西的來源上過度深究。
三分法僅僅是來自于傳統(tǒng)藝術(shù)，目前在攝影中運用得尤其多?？v橫三分，整個布局被分為9個平均的區(qū)塊，橫向縱向各有2條分界線。三分法規(guī)定，為了盡可能吸引觀者的注意力，視覺重心或者最吸引人的東西應(yīng)該盡量靠近四條線相交處。
你可以在WDD的這篇文章中找到絕佳的實例。很多時候非對稱的布局常常能讓整個頁面更加富有生趣，但是這并不意味著著任何時候都得用非對稱布局，因為在有的場合，對稱布局會更有意思，而在這個時候，三分法則意義并不大。
攝影的時候，最理想的目標(biāo)是一獨特的視角捕捉到一些能吸引人的場景，而非對稱的布局使得視野中的一些元素比其他的更加突出，而這些突出的元素通常壓在之前所說的四個交點上。
那么重新回到網(wǎng)頁設(shè)計的問題上，三分法和網(wǎng)頁設(shè)計到底是如何結(jié)合到一起的呢？正如同攝影時三分法下的布局能夠吸引觀者一樣，符合三分法的網(wǎng)頁也一樣能讓瀏覽者更加關(guān)注焦點內(nèi)容。
了解三分法的柵格
四條線，四個焦點，九個區(qū)塊，這就是三分法下的柵格框架。許多網(wǎng)站的首頁設(shè)計都符合F式布局或者Z式布局，用戶也已經(jīng)習(xí)慣了這樣的瀏覽方式，通常視覺的起點都是左上角，這也是設(shè)計師需要關(guān)注的首個區(qū)塊。
這也就意味著，左上方的交點處應(yīng)該與頁面的某個重要內(nèi)容相重疊。交點處并不是非要放置鏈接或者圖片（當(dāng)然非要放也并非不可），它更像是一個標(biāo)記，用以區(qū)分布局的一個重要節(jié)點。比如頁面標(biāo)題的起始點可以與之重疊，整個標(biāo)題與橫向第一條線相齊平，然后在標(biāo)題下放置Banner圖之類的內(nèi)容。
值得注意的是，使用三分法來分析網(wǎng)頁設(shè)計更多的是一個用戶體驗設(shè)計上的概念，而非一項完整的設(shè)計準(zhǔn)則。所以，如果你想借助這一概念來分析網(wǎng)頁設(shè)計的話，建議將網(wǎng)頁在瀏覽器中打開之后截圖分析處理，完整的網(wǎng)頁太長，而且用戶瀏覽永遠是基于屏幕而非一次看完整個頁面，所以也沒有必要使用整個頁面，截圖足以。如果設(shè)計尚處于原型階段，那么建議參考屏幕比例來截取分析。
所以，你應(yīng)該從用戶的瀏覽習(xí)慣出發(fā)，結(jié)合三分法來進行分析優(yōu)化。當(dāng)用戶瀏覽網(wǎng)頁的時候會下意識注意到關(guān)鍵部位，正確的使用三分法來設(shè)計頁面，你會發(fā)現(xiàn)這種3×3的柵格能幫你帶來極具啟發(fā)性的設(shè)計。
小調(diào)整而非重設(shè)計
了解三分法的柵格的運用方式之后，你還需要明白更重要的一點：三分法帶來的并非是一個無可挑剔的網(wǎng)頁設(shè)計架構(gòu)，而是一個用來微調(diào)現(xiàn)有設(shè)計的布局測試框架。
有太多的免費的柵格系統(tǒng)可以幫你設(shè)計網(wǎng)頁，比如960GS之類的，但是三分法的九宮格柵格系統(tǒng)是一個幫你微調(diào)整個網(wǎng)頁布局的，比如調(diào)整導(dǎo)航欄的高度，把Logo挪近一點或者遠一點。
值得慶幸的是，這種測試方法很實用，并且很簡單，也不挑軟件。你可以截圖之后在PS里面畫虛線來分析，諸如GIMP這樣的開源免費軟件也可以輕松幫你搞定，再不濟你還可以直接用記號筆在屏幕上畫一個九宮格來分析嘛……（話說當(dāng)初打CS的時候盲狙也用過這等笨辦法~）反正能幫你構(gòu)建出九宮格分析的工具都能帶你走向正確的設(shè)計方向。
完成初稿，用三分法測試，然后走向下一步。隨著時間的推移，你會更加清楚如何將視覺元素置于對的地方。
處理對稱性
有的時候，在頁面中適當(dāng)?shù)厥褂脤ΨQ性的元素還是頗為有用的。不過如果在設(shè)計中哪哪兒都用對稱式設(shè)計的話，這也未免太瞎了點。事實上，在藝術(shù)和攝影領(lǐng)域，非對稱式布局的運用還是占據(jù)主流的，大小相對，遠近相宜，更加令人賞心悅目，這也證明非平衡的視覺設(shè)計更能吸引我們的注意力。
其實在版式設(shè)計中，也有類似的原則和規(guī)范。比如，當(dāng)你在頁面頂部使用大Banner圖的時候，它通常會占據(jù)頁面大概2/3的高，類似的，標(biāo)題和正文的字體大小也需要大小對比，讀者會自然而然地注意到更大的Banner圖、標(biāo)題和副標(biāo)題。大小對比是一方面，另外一方面還需要考慮頁面上圖片和文字的位置。簡單的使用三分法并不能確保構(gòu)圖的飽滿，將九宮格置于頁面上，適當(dāng)?shù)卣{(diào)整頁面的元素的位置和中心之后，會好不少。
三分法的優(yōu)勢在于它可以兼容非對稱式布局，也可以用來優(yōu)化對稱式布局。兩種布局靈活搭配，借助三分法來突出頁面重點，也掌握頁面平衡，如此才能調(diào)教出優(yōu)秀的網(wǎng)頁。
最后的思考
絕大多數(shù)的藝術(shù)形式其實并沒有固定的規(guī)則，但是有規(guī)律可以參考，設(shè)計也正是基于這些規(guī)律而不斷進步。掌握類似三分法這樣的規(guī)律，了解這個規(guī)律的目的所在，深入理解，即使沒有刻意去運用，它也會從你的設(shè)計中自然而然地展現(xiàn)出來，形同第二本能。這個時候，你就具備了打破規(guī)則的潛力了！
雖然說設(shè)計和藝術(shù)有著根本的區(qū)別，但是兩者并非對立的關(guān)系。誠然依著規(guī)則可以設(shè)計出更符合大眾口味的作品，但是打破規(guī)則，充滿個性和藝術(shù)感的設(shè)計作品又何嘗不會令人印象深刻呢？
相關(guān)推薦
- 1、建設(shè)網(wǎng)絡(luò)專家?guī)齑龠M區(qū)域智庫服務(wù)
- 2、中科服｜協(xié)會saas軟件，如何幫助商會實現(xiàn)數(shù)字化轉(zhuǎn)型？
- 3、2.5萬家參展企業(yè)網(wǎng)上展出約180萬件出口商品
- 4、術(shù)業(yè)專攻，如何選擇一款專業(yè)的商協(xié)會管理系統(tǒng)？
- 5、新型智庫知行合一的力作
- 6、高職院校新型智庫建設(shè)的務(wù)實舉措
- 7、中科服管理系統(tǒng)軟件，打造商協(xié)會凝聚力和影響力
- 8、中科服管理系統(tǒng)軟件，打造商協(xié)會凝聚力和影響力
- 9、商會如何避免會員的流失？
- 10、商會如何避免會員的流失？
相關(guān)推薦
- 1、建設(shè)網(wǎng)絡(luò)專家?guī)齑龠M區(qū)域智庫服務(wù)
- 2、中科服｜協(xié)會saas軟件，如何幫助商會實現(xiàn)數(shù)字化轉(zhuǎn)型？
- 3、2.5萬家參展企業(yè)網(wǎng)上展出約180萬件出口商品
- 4、術(shù)業(yè)專攻，如何選擇一款專業(yè)的商協(xié)會管理系統(tǒng)？
- 5、新型智庫知行合一的力作
- 6、高職院校新型智庫建設(shè)的務(wù)實舉措
- 7、中科服管理系統(tǒng)軟件，打造商協(xié)會凝聚力和影響力
- 8、中科服管理系統(tǒng)軟件，打造商協(xié)會凝聚力和影響力
- 9、商會如何避免會員的流失？
- 10、商會如何避免會員的流失？