來源:南充領跑網(wǎng)絡技術有限公司 發(fā)布時間:2016-07-27
這篇文章,相信會打開你的設計思路,你看完會后可能會說:“哇!網(wǎng)頁原來還可以這樣設計。”
玩攝影的同學應該都知道取景布局三分法,這是非常熟悉的概念。但是在進行網(wǎng)頁設計的時候,幾乎沒有人會拿三分法來說事兒。當然,這并不意味著不可能,只是這種跨領域的事情很少被注意到罷了。
所以,在今天的文章里我想解釋一下三分法,并且分享一些將其運用到網(wǎng)頁設計時的技巧和經(jīng)驗。不過三分法并不一定適合所有人,畢竟提升設計和設計流程的技巧和方法有很多。不過作為一項基本的排版布局規(guī)則,三分法本身是絕對值得學習的,并且在網(wǎng)頁設計中也頗為實用。
為何三分?
也許你會問,為什么一定要三分呢?這種奇怪的設定到底是從何而來?還好,我可以很高興地告訴你這玩意和數(shù)學定理抑或復雜的邏輯推理都沒有關系,也沒有太多的必要在這個東西的來源上過度深究。
三分法僅僅是來自于傳統(tǒng)藝術,目前在攝影中運用得尤其多。縱橫三分,整個布局被分為9個平均的區(qū)塊,橫向縱向各有2條分界線。三分法規(guī)定,為了盡可能吸引觀者的注意力,視覺重心或者最吸引人的東西應該盡量靠近四條線相交處。
你可以在WDD的這篇文章中找到絕佳的實例。很多時候非對稱的布局常常能讓整個頁面更加富有生趣,但是這并不意味著著任何時候都得用非對稱布局,因為在有的場合,對稱布局會更有意思,而在這個時候,三分法則意義并不大。
攝影的時候,最理想的目標是一獨特的視角捕捉到一些能吸引人的場景,而非對稱的布局使得視野中的一些元素比其他的更加突出,而這些突出的元素通常壓在之前所說的四個交點上。
那么重新回到網(wǎng)頁設計的問題上,三分法和網(wǎng)頁設計到底是如何結合到一起的呢?正如同攝影時三分法下的布局能夠吸引觀者一樣,符合三分法的網(wǎng)頁也一樣能讓瀏覽者更加關注焦點內(nèi)容。
了解三分法的柵格
四條線,四個焦點,九個區(qū)塊,這就是三分法下的柵格框架。許多網(wǎng)站的首頁設計都符合F式布局或者Z式布局,用戶也已經(jīng)習慣了這樣的瀏覽方式,通常視覺的起點都是左上角,這也是設計師需要關注的首個區(qū)塊。
這也就意味著,左上方的交點處應該與頁面的某個重要內(nèi)容相重疊。交點處并不是非要放置鏈接或者圖片(當然非要放也并非不可),它更像是一個標記,用以區(qū)分布局的一個重要節(jié)點。比如頁面標題的起始點可以與之重疊,整個標題與橫向第一條線相齊平,然后在標題下放置Banner圖之類的內(nèi)容。
值得注意的是,使用三分法來分析網(wǎng)頁設計更多的是一個用戶體驗設計上的概念,而非一項完整的設計準則。所以,如果你想借助這一概念來分析網(wǎng)頁設計的話,建議將網(wǎng)頁在瀏覽器中打開之后截圖分析處理,完整的網(wǎng)頁太長,而且用戶瀏覽永遠是基于屏幕而非一次看完整個頁面,所以也沒有必要使用整個頁面,截圖足以。如果設計尚處于原型階段,那么建議參考屏幕比例來截取分析。
所以,你應該從用戶的瀏覽習慣出發(fā),結合三分法來進行分析優(yōu)化。當用戶瀏覽網(wǎng)頁的時候會下意識注意到關鍵部位,正確的使用三分法來設計頁面,你會發(fā)現(xiàn)這種3×3的柵格能幫你帶來極具啟發(fā)性的設計。
小調(diào)整而非重設計
了解三分法的柵格的運用方式之后,你還需要明白更重要的一點:三分法帶來的并非是一個無可挑剔的網(wǎng)頁設計架構,而是一個用來微調(diào)現(xiàn)有設計的布局測試框架。
有太多的免費的柵格系統(tǒng)可以幫你設計網(wǎng)頁,比如960GS之類的,但是三分法的九宮格柵格系統(tǒng)是一個幫你微調(diào)整個網(wǎng)頁布局的,比如調(diào)整導航欄的高度,把Logo挪近一點或者遠一點。
值得慶幸的是,這種測試方法很實用,并且很簡單,也不挑軟件。你可以截圖之后在PS里面畫虛線來分析,諸如GIMP這樣的開源免費軟件也可以輕松幫你搞定,再不濟你還可以直接用記號筆在屏幕上畫一個九宮格來分析嘛……(話說當初打CS的時候盲狙也用過這等笨辦法~)反正能幫你構建出九宮格分析的工具都能帶你走向正確的設計方向。
完成初稿,用三分法測試,然后走向下一步。隨著時間的推移,你會更加清楚如何將視覺元素置于對的地方。
處理對稱性
有的時候,在頁面中適當?shù)厥褂脤ΨQ性的元素還是頗為有用的。不過如果在設計中哪哪兒都用對稱式設計的話,這也未免太瞎了點。事實上,在藝術和攝影領域,非對稱式布局的運用還是占據(jù)主流的,大小相對,遠近相宜,更加令人賞心悅目,這也證明非平衡的視覺設計更能吸引我們的注意力。
其實在版式設計中,也有類似的原則和規(guī)范。比如,當你在頁面頂部使用大Banner圖的時候,它通常會占據(jù)頁面大概2/3的高,類似的,標題和正文的字體大小也需要大小對比,讀者會自然而然地注意到更大的Banner圖、標題和副標題。大小對比是一方面,另外一方面還需要考慮頁面上圖片和文字的位置。簡單的使用三分法并不能確保構圖的飽滿,將九宮格置于頁面上,適當?shù)卣{(diào)整頁面的元素的位置和中心之后,會好不少。
三分法的優(yōu)勢在于它可以兼容非對稱式布局,也可以用來優(yōu)化對稱式布局。兩種布局靈活搭配,借助三分法來突出頁面重點,也掌握頁面平衡,如此才能調(diào)教出優(yōu)秀的網(wǎng)頁。
最后的思考
絕大多數(shù)的藝術形式其實并沒有固定的規(guī)則,但是有規(guī)律可以參考,設計也正是基于這些規(guī)律而不斷進步。掌握類似三分法這樣的規(guī)律,了解這個規(guī)律的目的所在,深入理解,即使沒有刻意去運用,它也會從你的設計中自然而然地展現(xiàn)出來,形同第二本能。這個時候,你就具備了打破規(guī)則的潛力了!
雖然說設計和藝術有著根本的區(qū)別,但是兩者并非對立的關系。誠然依著規(guī)則可以設計出更符合大眾口味的作品,但是打破規(guī)則,充滿個性和藝術感的設計作品又何嘗不會令人印象深刻呢?
網(wǎng)站建設品牌服務商
網(wǎng)絡營銷整合專家
企業(yè)官方網(wǎng)站建設 品牌創(chuàng)意網(wǎng)站建設 電子商務網(wǎng)站開發(fā) 大型門戶類網(wǎng)站建開發(fā) 電子商務網(wǎng)站代運營 城市征信系統(tǒng)開發(fā) 企業(yè)CRM開發(fā) 企業(yè)ERP開發(fā) 微信官網(wǎng)建設 微信紅包活動 微信點餐系統(tǒng)開發(fā) 微信外賣系統(tǒng)開發(fā) 微信商城開發(fā) 其他微信應用開發(fā)
12年專業(yè)互聯(lián)網(wǎng)服務經(jīng)驗 南充最專業(yè)網(wǎng)站團隊 500強企業(yè)互聯(lián)網(wǎng)供應商 B2C營銷型網(wǎng)站建設領先者 服務行業(yè)領袖超過70個 品牌傳播與互聯(lián)網(wǎng)技術并重 多項互聯(lián)網(wǎng)設計傳播大獎
領跑網(wǎng)絡致力于打造四川互聯(lián)網(wǎng)服務品牌,目前主要業(yè)務區(qū)域為南充、遂寧、巴中、廣安、達州!公司專業(yè)領域包括網(wǎng)站建設、電子商務、移動互聯(lián)網(wǎng)營銷、微信應用開發(fā),目前已經(jīng)有多款成熟產(chǎn)品上市銷售!
與其他網(wǎng)站建設及系統(tǒng)開發(fā)公司不同,我們的整合解決方案結合了領跑網(wǎng)絡品牌建設經(jīng)驗和互聯(lián)網(wǎng)整合營銷的理念,并將策略和執(zhí)行緊密結合,且不斷評估并優(yōu)化我們的方案,為客戶提供一體化全方位的互聯(lián)網(wǎng)品牌整合方案!
業(yè)務電話:156-0827-8880180-8154-3787
業(yè)務合作: 278422624 地圖導航: 點擊查看
E-mail: lingpaonc@qq.com 渠道合作 : 278422624
當對手還在將注意力停留在碎片化的互聯(lián)網(wǎng)設計或程序實現(xiàn)時,領跑早已開始將數(shù)字品牌的建設和傳播進一步整合。只有通過整體的互聯(lián)網(wǎng)品牌分析,幫助品牌建立互聯(lián)網(wǎng)品牌傳播價值,并圍繞價值建立品牌粘性,提升品牌與用戶的互動,更好的幫助品牌傳播,觸發(fā)用戶的行動力才是我們工作的終極目標,這正是一流品牌的成功秘訣。
不可否認,建立互聯(lián)網(wǎng)品牌傳播價值的確是門藝術,但互聯(lián)網(wǎng)不同于藝術涂鴉,企業(yè)投資品牌絕不是希望品牌成為某個藝術家的實驗品?;ヂ?lián)網(wǎng)傳播的對象是用戶,用戶擁有自己的文化體系,群落共性才是互聯(lián)網(wǎng)品牌傳播創(chuàng)意的源頭,如果我們不能幫助企業(yè)激發(fā)目標用戶的共鳴,產(chǎn)生購買沖動,那將是品牌的悲??!
因此,互聯(lián)網(wǎng)傳播必須建立品牌傳播價值,為夢想者創(chuàng)造夢想品牌,領跑與您同行!