久久久久影院美女国产主播_在线精品自偷自拍无码图_国产自产21区视频一区_年轻富婆私密推油到高潮

他山之石可攻玉!教你用攝影三分法來優(yōu)化網(wǎng)頁

來源:南充領(lǐng)跑網(wǎng)絡(luò)技術(shù)有限公司   發(fā)布時(shí)間:2016-07-27

 

rule-of-thirds-in-webdesign-1

 

  這篇文章,相信會(huì)打開你的設(shè)計(jì)思路,你看完會(huì)后可能會(huì)說:“哇!網(wǎng)頁原來還可以這樣設(shè)計(jì)。”

  玩攝影的同學(xué)應(yīng)該都知道取景布局三分法,這是非常熟悉的概念。但是在進(jìn)行網(wǎng)頁設(shè)計(jì)的時(shí)候,幾乎沒有人會(huì)拿三分法來說事兒。當(dāng)然,這并不意味著不可能,只是這種跨領(lǐng)域的事情很少被注意到罷了。

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

  為何三分?

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

  三分法僅僅是來自于傳統(tǒng)藝術(shù),目前在攝影中運(yùn)用得尤其多。縱橫三分,整個(gè)布局被分為9個(gè)平均的區(qū)塊,橫向縱向各有2條分界線。三分法規(guī)定,為了盡可能吸引觀者的注意力,視覺重心或者最吸引人的東西應(yīng)該盡量靠近四條線相交處。

  你可以在WDD的這篇文章中找到絕佳的實(shí)例。很多時(shí)候非對(duì)稱的布局常常能讓整個(gè)頁面更加富有生趣,但是這并不意味著著任何時(shí)候都得用非對(duì)稱布局,因?yàn)樵谟械膱?chǎng)合,對(duì)稱布局會(huì)更有意思,而在這個(gè)時(shí)候,三分法則意義并不大。

  

 

  攝影的時(shí)候,最理想的目標(biāo)是一獨(dú)特的視角捕捉到一些能吸引人的場(chǎng)景,而非對(duì)稱的布局使得視野中的一些元素比其他的更加突出,而這些突出的元素通常壓在之前所說的四個(gè)交點(diǎn)上。

  那么重新回到網(wǎng)頁設(shè)計(jì)的問題上,三分法和網(wǎng)頁設(shè)計(jì)到底是如何結(jié)合到一起的呢?正如同攝影時(shí)三分法下的布局能夠吸引觀者一樣,符合三分法的網(wǎng)頁也一樣能讓瀏覽者更加關(guān)注焦點(diǎn)內(nèi)容。

  

 

  了解三分法的柵格

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

  

 

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

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

  

 

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

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

  了解三分法的柵格的運(yùn)用方式之后,你還需要明白更重要的一點(diǎn):三分法帶來的并非是一個(gè)無可挑剔的網(wǎng)頁設(shè)計(jì)架構(gòu),而是一個(gè)用來微調(diào)現(xiàn)有設(shè)計(jì)的布局測(cè)試框架。

  有太多的免費(fèi)的柵格系統(tǒng)可以幫你設(shè)計(jì)網(wǎng)頁,比如960GS之類的,但是三分法的九宮格柵格系統(tǒng)是一個(gè)幫你微調(diào)整個(gè)網(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ì)方向。

  完成初稿,用三分法測(cè)試,然后走向下一步。隨著時(shí)間的推移,你會(huì)更加清楚如何將視覺元素置于對(duì)的地方。

  處理對(duì)稱性

  有的時(shí)候,在頁面中適當(dāng)?shù)厥褂脤?duì)稱性的元素還是頗為有用的。不過如果在設(shè)計(jì)中哪哪兒都用對(duì)稱式設(shè)計(jì)的話,這也未免太瞎了點(diǎn)。事實(shí)上,在藝術(shù)和攝影領(lǐng)域,非對(duì)稱式布局的運(yùn)用還是占據(jù)主流的,大小相對(duì),遠(yuǎn)近相宜,更加令人賞心悅目,這也證明非平衡的視覺設(shè)計(jì)更能吸引我們的注意力。

  

 

  其實(shí)在版式設(shè)計(jì)中,也有類似的原則和規(guī)范。比如,當(dāng)你在頁面頂部使用大Banner圖的時(shí)候,它通常會(huì)占據(jù)頁面大概2/3的高,類似的,標(biāo)題和正文的字體大小也需要大小對(duì)比,讀者會(huì)自然而然地注意到更大的Banner圖、標(biāo)題和副標(biāo)題。大小對(duì)比是一方面,另外一方面還需要考慮頁面上圖片和文字的位置。簡(jiǎn)單的使用三分法并不能確保構(gòu)圖的飽滿,將九宮格置于頁面上,適當(dāng)?shù)卣{(diào)整頁面的元素的位置和中心之后,會(huì)好不少。

  三分法的優(yōu)勢(shì)在于它可以兼容非對(duì)稱式布局,也可以用來優(yōu)化對(duì)稱式布局。兩種布局靈活搭配,借助三分法來突出頁面重點(diǎn),也掌握頁面平衡,如此才能調(diào)教出優(yōu)秀的網(wǎng)頁。

  最后的思考

  絕大多數(shù)的藝術(shù)形式其實(shí)并沒有固定的規(guī)則,但是有規(guī)律可以參考,設(shè)計(jì)也正是基于這些規(guī)律而不斷進(jìn)步。掌握類似三分法這樣的規(guī)律,了解這個(gè)規(guī)律的目的所在,深入理解,即使沒有刻意去運(yùn)用,它也會(huì)從你的設(shè)計(jì)中自然而然地展現(xiàn)出來,形同第二本能。這個(gè)時(shí)候,你就具備了打破規(guī)則的潛力了!

  雖然說設(shè)計(jì)和藝術(shù)有著根本的區(qū)別,但是兩者并非對(duì)立的關(guān)系。誠(chéng)然依著規(guī)則可以設(shè)計(jì)出更符合大眾口味的作品,但是打破規(guī)則,充滿個(gè)性和藝術(shù)感的設(shè)計(jì)作品又何嘗不會(huì)令人印象深刻呢?

 

   
標(biāo)簽:
上一篇:最佳Discuz!主機(jī)挑選指南
下一篇:建站寶盒告訴你,制作一個(gè)成功的企業(yè)網(wǎng)站應(yīng)注

網(wǎng)站建設(shè)知識(shí)網(wǎng)站建設(shè)知識(shí)

企業(yè)官方網(wǎng)站建設(shè) 品牌創(chuàng)意網(wǎng)站建設(shè) B2C電子商務(wù)網(wǎng)站建設(shè) 其他web應(yīng)用開發(fā)
微信官網(wǎng)建設(shè) 微信影響活動(dòng) 微信點(diǎn)餐系統(tǒng) 其他微信應(yīng)用開發(fā)

更多 +聯(lián)系我們

業(yè)務(wù)范圍:南充、遂寧、巴中、廣安、達(dá)州

業(yè)務(wù)電話:156-0827-8880180-8154-3787

業(yè)務(wù)合作:  278422624 地圖導(dǎo)航: 點(diǎn)擊查看

E-mail:  lingpaonc@qq.com 渠道合作 : 278422624

我們的認(rèn)知

當(dāng)對(duì)手還在將注意力停留在碎片化的互聯(lián)網(wǎng)設(shè)計(jì)或程序?qū)崿F(xiàn)時(shí),領(lǐng)跑早已開始將數(shù)字品牌的建設(shè)和傳播進(jìn)一步整合。只有通過整體的互聯(lián)網(wǎng)品牌分析,幫助品牌建立互聯(lián)網(wǎng)品牌傳播價(jià)值,并圍繞價(jià)值建立品牌粘性,提升品牌與用戶的互動(dòng),更好的幫助品牌傳播,觸發(fā)用戶的行動(dòng)力才是我們工作的終極目標(biāo),這正是一流品牌的成功秘訣。
不可否認(rèn),建立互聯(lián)網(wǎng)品牌傳播價(jià)值的確是門藝術(shù),但互聯(lián)網(wǎng)不同于藝術(shù)涂鴉,企業(yè)投資品牌絕不是希望品牌成為某個(gè)藝術(shù)家的實(shí)驗(yàn)品?;ヂ?lián)網(wǎng)傳播的對(duì)象是用戶,用戶擁有自己的文化體系,群落共性才是互聯(lián)網(wǎng)品牌傳播創(chuàng)意的源頭,如果我們不能幫助企業(yè)激發(fā)目標(biāo)用戶的共鳴,產(chǎn)生購(gòu)買沖動(dòng),那將是品牌的悲?。? 因此,互聯(lián)網(wǎng)傳播必須建立品牌傳播價(jià)值,為夢(mèng)想者創(chuàng)造夢(mèng)想品牌,領(lǐng)跑與您同行!