• 
• 
• 
• 
• 
• 
• 

知識普及 ? 網(wǎng)頁布局的位置重心與位置間的對比關系

網(wǎng)頁布局的位置重心與位置間的對比關系

網(wǎng)站工程師 于2020-04-10 11:43發(fā)表 閱讀次數(shù) 2489次

網(wǎng)頁的布局也許是大家最不放在眼里的地方，其實布局地位如同文字的排版一樣，隨便可布，布即隨便。但是看過我上篇《網(wǎng)頁設計技巧系列之文本排版》的朋友也許就會清楚，文字排版是一種不起眼但卻非常重要的細節(jié)。做好了會讓作品更為精細漂亮，做不好也許就成為作品失敗的重要原因。 　　布局也是一樣，需要我們足夠的重視。下面我要講的不是網(wǎng)頁布置成“左中右”、“左右”、“上中下”之類的問題，而是位置的重心與位置之間的對比關系。 　　黃金分割率的概念大家都知道。下面我引用一段非常專業(yè)的解釋：“黃金分割最早見于古希臘和古埃及。黃金分割又稱黃金率、中外比，即把一根線段分為長短不等的a、b兩段，使其中長線段的比(即a+b)等于短線段b對長線段a的比，列式即為a:(a+b)=b:a，其比值為0.6180339……這種比例在造型上比較悅目，因此，0.618又被稱為黃金分割率?！贝蠹乙部辞宄耸裁唇悬S金分割。 　　我們中國也有一種類似于這樣的概念叫九宮格。這個也許就有一些朋友不清楚了，這是一種用以臨寫碑帖的一種界格紙?；拘问且粋€長方形等分九格。在這個九宮格中中間部分就產(chǎn)生了四個交叉點，這四個交叉點就是視覺中心點。 　　圖示:九宮格 　　我們?yōu)槭裁匆v這兩個概念呢?是因為這兩個概念是設計的決竅之所在。我們很多時間喜歡把重要的東西放在正中心，表示重視想吸引目光注意。但是我要告訴大家。正中心屬于盲點區(qū)。也就是說按人的視覺習慣來講正中心是常常被忽視的。并且放在正中心也不會引起視覺刺激。用句玩笑話來侃一下:兩眼中間是看不清楚的。不信拿你的手指指著鼻尖看你的手。那什么地方是視覺中心點呢，這就要用到上面的概念了。不過什么a:(a+b)=b:a都太麻煩了誰會那么細致的去算呢。這里用中國的九宮格原理就清楚得多了。四個視覺中心點很顯然大家也清楚是什么位置了。 　　那么在實際應用中我們要怎么用呢。這點很重要，實戰(zhàn)意義要比空談概念重要得多。下面我們就來說一下實戰(zhàn)中的應用，這里雖說是“網(wǎng)頁設計技巧”，同樣可以應用在平面設計與攝影或是其它的設計中，但是必竟是講網(wǎng)頁設計，所以主要還是舉網(wǎng)頁例。我們先從大布局來談，然后再講小布局，最后講設計圖片的布局。 　　大布局 　　基本上網(wǎng)頁的布局分為，上中下、左中右、左右、上下、與上下左右之混合幾類。同時我們還要思考的是分辨率與網(wǎng)頁大小的關系?，F(xiàn)在大部分的機器都是1024以上的分辨率了，那我們的寬度是不是一定也要順應變得寬一點呢。個人觀點是大可不必。因為網(wǎng)頁本身也會與瀏覽器產(chǎn)生視覺對比。如果塞得太滿勢必也不是很好看。如果留下空隙網(wǎng)面與留出來的空白也可形成一定的對比，其比例也較接近黃金分割率。所以我覺得還是不要塞滿瀏覽器為好，給網(wǎng)頁一個可以呼吸的空間。那網(wǎng)頁自身的上下左右布局呢?同樣的，如只是上下或是左右結構我們不能把上下或是左右平分，而是最好采用黃金分割比來進行劃分。如果是上中下或是左中右呢。我們同樣不能平分，我們我們要注意三者之間的關系，比如上中下結構，我們很清楚中間是主要內(nèi)容需要大一點的空間，那么中空間的部分會盡量的點有大比例，一般來講我們會讓中間占大約百分之六十。而上面占百分之三十，下面占百分之十。那也就是說，下面是上面的三分之一，上面是中間的三分一。這樣的分割就會比平面看起來要舒服很多。但是左中右的結構就不能這么分了。因為百分之十的寬度會很難放得下什么內(nèi)容。一般左中右結構會有另一種分法:左占百分之四十，中右各占百分之三十。或是左右占百份之三十，中間占百分之四十。也可以進行532、622、442、的分配。也就是說大布局上要盡量避免平分的局面。

網(wǎng)頁布局的位置重心與位置間的對比關系相關標簽：網(wǎng)站建造，網(wǎng)站優(yōu)化，開發(fā)網(wǎng)站，企業(yè)做網(wǎng)站

相關熱點推薦

交互設計模式——分頁 html5與網(wǎng)站優(yōu)化 網(wǎng)站首頁設計的好看，這 網(wǎng)頁設計中的圖片運用與 青島網(wǎng)站建設布局好關鍵 網(wǎng)站關鍵詞擺放的四個關 青島網(wǎng)站設計哪家好 常見的排版方式與表現(xiàn)類 優(yōu)化用戶體驗，讓網(wǎng)站呈 影響網(wǎng)站排名的一些不必 青島網(wǎng)站設計容易犯的幾 用戶體驗中溝通的技巧 如何計算搜索引擎關鍵詞 網(wǎng)頁設計中的版式原理- 做網(wǎng)站的一些定律 為什么網(wǎng)站制作價格越來 網(wǎng)頁配色密碼 響應式網(wǎng)頁你了解嗎？ 如何創(chuàng)建一個用戶體驗良 店鋪推廣之SEO入門 寫給在職設計師們 分類目錄 一個好的網(wǎng)站應該同時具 網(wǎng)頁設計制作應注意的問 網(wǎng)頁界面設計教程四：色 化妝品的網(wǎng)站策劃分析 網(wǎng)站設計如何做好風格統(tǒng) 網(wǎng)站重建怎么保護已有的 頻繁改版引發(fā)的合意性思 迅速提高網(wǎng)站流量的方法 企業(yè)建站誤區(qū) 防止IE主頁被修改的辦 WEB設計經(jīng)驗 網(wǎng)站推廣技巧之鏈接策略 如何做出創(chuàng)意設計的網(wǎng)站 網(wǎng)頁的版式設計—文字的 平度網(wǎng)站設計公司哪家好

奈薇建站網(wǎng)青島網(wǎng)站建設公司/青島網(wǎng)站制作公司，專業(yè)提供"氣質(zhì)"型網(wǎng)站建設及精美網(wǎng)站制作服務，同時歡迎各地網(wǎng)站建設公司、網(wǎng)站制作公司代理我們的奈薇建站系統(tǒng)共同發(fā)展

熱點地區(qū)：青島網(wǎng)站建設價格 青島即墨網(wǎng)站制作公司 開發(fā)區(qū)信息港 山東在線門戶