元伸網頁設計公司,網頁設計十餘年
提供各式專業的客製化網站設計服務。
包含網頁設計、程式設計、網站優化。
Knowledge
資訊分享 網頁設計技巧-佈局篇

網頁設計技巧-佈局篇

關於網頁設計佈局也許是大家最不放在眼裏的地方,其地位如同文字的排版一樣,隨便可佈,佈即隨便。其實文字排版是一種不起眼但卻非常重要的細節。做好了會讓作品更爲精細漂亮,做不好也許就成爲作品失改的重要原因。其實佈局也是一樣,需要我們足夠的重視起來。下面我要講的不是網頁佈置成''左中右''、''左右''、''上中下''之類的問題。而是講位置的重心與位置之間的對比關係。

衆所周知,國外有一種叫黃金分割率的概念。下面我引用一段非常專業的解釋:''黃金分割最早見於古希臘和古埃及。黃金分割又稱黃金率、中外比,即把一根線段分爲長短不等的a、b兩段,使其中長線段的比(即a+b)等於短線段b對長線段a的比,列式即爲a:(a+b)=b:a,其比值爲0.6180339……這種比例在造型上比較悅目,因此,0.618又被稱爲黃金分割率。''大家也看清楚了什麽叫黃金分割。我們中國也有一種類似於這樣的概念叫九宮格。這個也許就有一些朋友不清楚了,這是一種用以臨寫碑帖的一種界格紙。基本形是一個長方形等分九格。在這個九宮格中中間部分就産生了四個交叉點,這四個交叉點就是視覺中心點。

好了,我們爲什麽要講這兩個概念呢?是因爲這兩個概念是設計的決竅之所在。我們很多時間喜歡把重要的東西放在正中心,表示重視想吸引目光注意。但是我要告訴大家。正中心屬於盲點區。也就是說按人的視覺習慣來講正中心是常常被忽視的。並且放在正中心也不會引起視覺刺激。用句玩笑話來侃一下:兩眼中間是看不清楚的。不信拿你的手指指著鼻尖看你的手。那什麽地方是視覺中心點呢,這就要用到上面的概念了。不過什麽a:(a+b)=b:a都太麻煩了誰會那麽細緻的去算呢。這裏用中國的九宮格原理就清楚得多了。四個視覺中心點很顯然大家也清楚是什麽位置了。

 

那麽在實際應用中我們要怎麽用呢。這點很重要,實戰意義要比空談概念重要得多。下面我們就來說一下實戰中的應用,這裏雖說是《網頁設計技巧》不過同樣可以應用在平面設計與攝影或是其他的設計中,但是必竟是講網頁設計這裏主要還是舉網頁例。我們先從大佈局來談,然後再講小佈局,最後講設計圖片的佈局。

 

大佈局基本上網頁的佈局分爲,上中下、左中右、左右、上下、與上下左右之混合幾類。同時我們還要思考的是解析度與網頁大小的關係。現在大部分的螢幕都是1024以上的解析度了,那我們的寬度是不是一定也要順應變得寬一點呢。個人觀點是大可不必。因爲網頁本身也會與瀏覽器産生視覺對比。如果塞得太滿勢必也不是很好看。如果留下空隙網面與留出來的空白也可形成一定的對比,其比例也較接近黃金分割率。所以我覺得還是不要塞滿瀏覽器爲好,給網頁一個可以呼吸的空間。那網頁自身的上下左右佈局呢?同樣的,如只是上下或是左右結構我們不能把上下或是左右平分,而是最好採用黃金分割比來進行劃分。如果是上中下或是左中右呢。我們同樣不能平分,我們我們要注意三者之間的關係,比如上中下結構,我們很清楚中間是主要內容需要大一點的空間,那麽中空間的部分會儘量的點有大比例,一般來講我們會讓中間占大約百分之六十。而上面占百分之三十,下面占百分之十。那也就是說,下面是上面的三分之一,上面是中間的三分一。這樣的分割就會比平面看起來要舒服很多。但是左中右的結構就不能這麽分了。因爲百分之十的寬度會很難放得下什麽內容。一般左中右結構會有另一種分法:左占百分之四十,中右各占百分之三十。或是左右占百份之三十,中間占百分之四十。也可以進行532、622、442、的分配。也就是說大佈局上要儘量避免平分的局面。

小佈局 也可以說是細節上的佈局。我們可以把網頁看成是由很多個小塊組合而成的。通常要注意的就是標題與內容的關係以及這些塊放置的位置。比如最核心的內容不要放在最頂、最後、或是最中間。而是頂部與中間的中部位置,有些人喜歡排位,並且會把最重要的放在最上面,其實不然啊,放在最上面的未必是最核心的位置。比如我們看一下各大門戶網站的頭條新聞的位置,是不是沒有放在最頂部的?當然由於解析度的問題目,這些頭條可能位置也會有所變化。在800下頭條是偏下的,而1024是居中一點,1600就偏上一點。但是從瀏覽器的大角度來看,這些頭條也都是處於視覺中心點的。

圖片 我們在處理圖片的時候也會用到佈局,比如我們的文字放在什麽地方,標誌放在什麽地方這些都是佈局的範疇。這裏也要應用上述的概念,重要的要核心不要放在正中或是過於偏向角落。當然也會遇到重心的東西很大,基本上都占滿了畫面。

好了,關於佈局就說這麽多,這裏總覺得這裏還少些東西,細想可能是視覺平衡方面的問題。這裏講得很多了,視覺平衡方面的問題目就再想想過些日子再整理出來。

轉自: http://bbs.blueidea.com/viewthread.php?tid=2660151