網(wǎng)頁(yè)美工設計

鄭州網(wǎng)頁(yè)設計培訓講述網(wǎng)頁(yè)設計布局技巧

編輯：時(shí)間：2011-10-22 20:52:19

關(guān)于布局也許是大家最不放在眼里的地方，其地位如同文字的排版一樣，隨便可布，布即隨便。但是看過(guò)我上篇《網(wǎng)頁(yè)設計技巧》的朋友也許就會(huì )清楚，其實(shí)文字排版是一種不起眼但卻非常重要的細節。做好了會(huì )讓作品更為精細漂亮，做不好也許就成為作品失改的重要原因。其實(shí)布局也是一樣，需要我們足夠的重視起來(lái)。下面我要講的不是網(wǎng)頁(yè)布置成“左中右”、“左右”、“上中下”之類(lèi)的問(wèn)題。而是講位置的重心與位置之間的對比關(guān)系。

眾所周知，國外有一種叫黃金分割率的概念。下面我引用一段非常專(zhuān)業(yè)的解釋?zhuān)?ldquo;黃金分割最早見(jiàn)于古希臘和古埃及。黃金分割又稱(chēng)黃金率、中外比，即把一根線(xiàn)段分為長(cháng)短不等的a、b兩段，使其中長(cháng)線(xiàn)段的比（即a+b）等于短線(xiàn)段b對長(cháng)線(xiàn)段a的比，列式即為a:(a+b)=b:a，其比值為0.6180339……這種比例在造型上比較悅目，因此，0.618又被稱(chēng)為黃金分割率。”大家也看清楚了什么叫黃金分割。我們中國也有一種類(lèi)似于這樣的概念叫九宮格。這個(gè)也許就有一些朋友不清楚了，這是一種用以臨寫(xiě)碑帖的一種界格紙。基本形是一個(gè)長(cháng)方形等分九格。在這個(gè)九宮格中中間部分就產(chǎn)生了四個(gè)交叉點(diǎn)，這四個(gè)交叉點(diǎn)就是視覺(jué)中心點(diǎn)。

好了，我們?yōu)槭裁匆v這兩個(gè)概念呢？是因為這兩個(gè)概念是設計的決竅之所在。我們很多時(shí)間喜歡把重要的東西放在正中心，表示重視想吸引目光注意。但是我要告訴大家。正中心屬于盲點(diǎn)區。也就是說(shuō)按人的視覺(jué)習慣來(lái)講正中心是常常被忽視的。并且放在正中心也不會(huì )引起視覺(jué)刺激。用句玩笑話(huà)來(lái)侃一下：兩眼中間是看不清楚的。不信拿你的手指指著(zhù)鼻尖看你的手。那什么地方是視覺(jué)中心點(diǎn)呢，這就要用到上面的概念了。不過(guò)什么a:(a+b)=b:a都太麻煩了誰(shuí)會(huì )那么細致的去算呢。這里用中國的九宮格原理就清楚得多了。四個(gè)視覺(jué)中心點(diǎn)很顯然大家也清楚是什么位置了。

圖片我們在處理圖片的時(shí)候也會(huì )用到布局，比如我們的文字放在什么地方，標志放在什么地方這些都是布局的范疇。這里也要應用上述的概念，重要的要核心不要放在正中或是過(guò)于偏向角落。當然也會(huì )遇到重心的東西很大，基本上都占滿(mǎn)了畫(huà)面。

那么在實(shí)際應用中我們要怎么用呢。這點(diǎn)很重要，實(shí)戰意義要比空談概念重要得多。下面我們就來(lái)說(shuō)一下實(shí)戰中的應用，這里雖說(shuō)是《網(wǎng)頁(yè)設計技巧》不過(guò)同樣可以應用在平面設計與攝影或是其它的設計中，但是必竟是講網(wǎng)頁(yè)設計這里主要還是舉網(wǎng)頁(yè)例。我們先從大布局來(lái)談，然后再講小布局，最后講設計圖片的布局。

大布局基本上網(wǎng)頁(yè)的布局分為，上中下、左中右、左右、上下、與上下左右之混合幾類(lèi)。鄭州網(wǎng)頁(yè)設計培訓同時(shí)我們還要思考的是分辨率與網(wǎng)頁(yè)大小的關(guān)系。現在大部分的機器都是1024以上的分辨率了，那我們的寬度是不是一定也要順應變得寬一點(diǎn)呢。個(gè)人觀(guān)點(diǎn)是大可不必。因為網(wǎng)頁(yè)本身也會(huì )與瀏覽器產(chǎn)生視覺(jué)對比。如果塞得太滿(mǎn)勢必也不是很好看。如果留下空隙網(wǎng)面與留出來(lái)的空白也可形成一定的對比，其比例也較接近黃金分割率。所以我覺(jué)得還是不要塞滿(mǎn)瀏覽器為好，給網(wǎng)頁(yè)一個(gè)可以呼吸的空間。那網(wǎng)頁(yè)自身的上下左右布局呢？同樣的，如只是上下或是左右結構我們不能把上下或是左右平分，而是最好采用黃金分割比來(lái)進(jìn)行劃分。如果是上中下或是左中右呢。我們同樣不能平分，我們我們要注意三者之間的關(guān)系，比如上中下結構，我們很清楚中間是主要內容需要大一點(diǎn)的空間，那么中空間的部分會(huì )盡量的點(diǎn)有大比例，一般來(lái)講我們會(huì )讓中間占大約百分之六十。而上面占百分之三十，下面占百分之十。那也就是說(shuō)，下面是上面的三分之一，上面是中間的三分一。這樣的分割就會(huì )比平面看起來(lái)要舒服很多。但是左中右的結構就不能這么分了。因為百分之十的寬度會(huì )很難放得下什么內容。一般左中右結構會(huì )有另一種分法：左占百分之四十，中右各占百分之三十。或是左右占百份之三十，中間占百分之四十。也可以進(jìn)行532、622、442、的分配。也就是說(shuō)大布局上要盡量避免平分的局面。內嵌樣式是混合在HTML標記里使用的，用這種方法，可以很簡(jiǎn)單的對某個(gè)元素單獨定義樣式。內嵌樣式的使用是直接將在HTML標記里加入style參數。而style參數的內容就是CSS的屬性和值

小布局也可以說(shuō)是細節上的布局。我們可以把網(wǎng)頁(yè)看成是由很多個(gè)小塊組合而成的。通常要注意的就是標題與內容的關(guān)系以及這些塊放置的位置。比如最核心的內容不要放在最頂、最后、或是最中間。而是頂部與中間的中部位置，有些人喜歡排位，并且會(huì )把最重要的放在最上面，其實(shí)不然啊，放在最上面的未必是最核心的位置。比如我們看一下各大門(mén)戶(hù)網(wǎng)站的頭條新聞的位置，是不是沒(méi)有放在最頂部的？當然由于分辨率的問(wèn)題目，這些頭條可能位置也會(huì )有所變化。在800下頭條是偏下的，而1024是居中一點(diǎn)，1600就偏上一點(diǎn)。但是從瀏覽器的大角度來(lái)看，這些頭條也都是處于視覺(jué)中心點(diǎn)的。

大家看這圖的重點(diǎn)是那個(gè)MP4，但是這個(gè)對象很大，不過(guò)沒(méi)關(guān)系，把這個(gè)MP4的圖做得有透視性，左右的重量就不一樣了。這樣向左去一點(diǎn)，那么重心就向左去了，再加上MP4偏上，這個(gè)MP4就正好在視覺(jué)中心點(diǎn)上了。而主要的信息文字同樣也處在視覺(jué)中心的位置上。而一些不重要的文字都放在了角度去冷落他。

好了，關(guān)于布局就說(shuō)這么多，這里總覺(jué)得這里還少些東西，細想可能是視覺(jué)平衡方面的問(wèn)題。這里講得很多了，視覺(jué)平衡方面的問(wèn)題目就再想想過(guò)些日子再整理出來(lái)。

<< 上一篇：鄭州SEO培訓淺談網(wǎng)站優(yōu)化小竅門(mén)

>> 下一篇：鄭州網(wǎng)頁(yè)設計培訓教你怎么包容不良的設計決策

推薦資訊