建站常識(shí)
網(wǎng)頁(yè)設(shè)計(jì)技巧系列之二 淺談布局
2006-11-29 08:42:00
關(guān)于布局也許是大家最不放在眼里的地方,其地位如同文字的排版一樣,隨便可布,布即隨便。但是看過(guò)我上篇《網(wǎng)頁(yè)設(shè)計(jì)技巧》的朋友也許就會(huì)清楚,其實(shí)文字排版是一種不起眼但卻非常重要的細(xì)節(jié)。做好了會(huì)讓作品更為精細(xì)漂亮,做不好也許就成為作品失改的重要原因。其實(shí)布局也是一樣,需要我們足夠的重視起來(lái)。下面我要講的不是網(wǎng)頁(yè)布置成“左中右”、“左右”、“上中下”之類的問(wèn)題。而是講位置的重心與位置之間的對(duì)比關(guān)系。
眾所周知,國(guó)外有一種叫黃金分割率的概念。下面我引用一段非常專業(yè)的解釋:“黃金分割最早見(jiàn)于古希臘和古埃及。黃金分割又稱黃金率、中外比,即把一根線段分為長(zhǎng)短不等的a、b兩段,使其中長(zhǎng)線段的比(即a+b)等于短線段b對(duì)長(zhǎng)線段a的比,列式即為a:(a+b)=b:a,其比值為0.6180339……這種比例在造型上比較悅目,因此,0.618又被稱為黃金分割率。”大家也看清楚了什么叫黃金分割。我們中國(guó)也有一種類似于這樣的概念叫九宮格。這個(gè)也許就有一些朋友不清楚了,這是一種用以臨寫(xiě)碑帖的一種界格紙?;拘问且粋€(gè)長(zhǎng)方形等分九格。在這個(gè)九宮格中中間部分就產(chǎn)生了四個(gè)交叉點(diǎn),這四個(gè)交叉點(diǎn)就是視覺(jué)中心點(diǎn)。
圖示:九宮格
好了,我們?yōu)槭裁匆v這兩個(gè)概念呢?是因?yàn)檫@兩個(gè)概念是設(shè)計(jì)的決竅之所在。我們很多時(shí)間喜歡把重要的東西放在正中心,表示重視想吸引目光注意。但是我要告訴大家。正中心屬于盲點(diǎn)區(qū)。也就是說(shuō)按人的視覺(jué)習(xí)慣來(lái)講正中心是常常被忽視的。并且放在正中心也不會(huì)引起視覺(jué)刺激。用句玩笑話來(lái)侃一下:兩眼中間是看不清楚的。不信拿你的手指指著鼻尖看你的手。那什么地方是視覺(jué)中心點(diǎn)呢,這就要用到上面的概念了。不過(guò)什么a:(a+b)=b:a都太麻煩了誰(shuí)會(huì)那么細(xì)致的去算呢。這里用中國(guó)的九宮格原理就清楚得多了。四個(gè)視覺(jué)中心點(diǎn)很顯然大家也清楚是什么位置了。
那么在實(shí)際應(yīng)用中我們要怎么用呢。這點(diǎn)很重要,實(shí)戰(zhàn)意義要比空談概念重要得多。下面我們就來(lái)說(shuō)一下實(shí)戰(zhàn)中的應(yīng)用,這里雖說(shuō)是《網(wǎng)頁(yè)設(shè)計(jì)技巧》不過(guò)同樣可以應(yīng)用在平面設(shè)計(jì)與攝影或是其它的設(shè)計(jì)中,但是必竟是講網(wǎng)頁(yè)設(shè)計(jì)這里主要還是舉網(wǎng)頁(yè)例。我們先從大布局來(lái)談,然后再講小布局,最后講設(shè)計(jì)圖片的布局。
大布局 基本上網(wǎng)頁(yè)的布局分為,上中下、左中右、左右、上下、與上下左右之混合幾類。同時(shí)我們還要思考的是分辨率與網(wǎng)頁(yè)大小的關(guān)系?,F(xiàn)在大部分的機(jī)器都是1024以上的分辨率了,那我們的寬度是不是一定也要順應(yīng)變得寬一點(diǎn)呢。個(gè)人觀點(diǎn)是大可不必。因?yàn)榫W(wǎng)頁(yè)本身也會(huì)與瀏覽器產(chǎn)生視覺(jué)對(duì)比。如果塞得太滿勢(shì)必也不是很好看。如果留下空隙網(wǎng)面與留出來(lái)的空白也可形成一定的對(duì)比,其比例也較接近黃金分割率。所以我覺(jué)得還是不要塞滿瀏覽器為好,給網(wǎng)頁(yè)一個(gè)可以呼吸的空間。那網(wǎng)頁(yè)自身的上下左右布局呢?同樣的,如只是上下或是左右結(jié)構(gòu)我們不能把上下或是左右平分,而是最好采用黃金分割比來(lái)進(jìn)行劃分。如果是上中下或是左中右呢。我們同樣不能平分,我們我們要注意三者之間的關(guān)系,比如上中下結(jié)構(gòu),我們很清楚中間是主要內(nèi)容需要大一點(diǎn)的空間,那么中空間的部分會(huì)盡量的點(diǎn)有大比例,一般來(lái)講我們會(huì)讓中間占大約百分之六十。而上面占百分之三十,下面占百分之十。那也就是說(shuō),下面是上面的三分之一,上面是中間的三分一。這樣的分割就會(huì)比平面看起來(lái)要舒服很多。但是左中右的結(jié)構(gòu)就不能這么分了。因?yàn)榘俜种膶挾葧?huì)很難放得下什么內(nèi)容。一般左中右結(jié)構(gòu)會(huì)有另一種分法:左占百分之四十,中右各占百分之三十?;蚴亲笥艺及俜葜?,中間占百分之四十。也可以進(jìn)行532、622、442、的分配。也就是說(shuō)大布局上要盡量避免平分的局面。
小布局 也可以說(shuō)是細(xì)節(jié)上的布局。我們可以把網(wǎng)頁(yè)看成是由很多個(gè)小塊組合而成的。通常要注意的就是標(biāo)題與內(nèi)容的關(guān)系以及這些塊放置的位置。比如最核心的內(nèi)容不要放在最頂、最后、或是最中間。而是頂部與中間的中部位置,有些人喜歡排位,并且會(huì)把最重要的放在最上面,其實(shí)不然啊,放在最上面的未必是最核心的位置。比如我們看一下各大門戶網(wǎng)站的頭條新聞的位置,是不是沒(méi)有放在最頂部的?當(dāng)然由于分辨率的問(wèn)題目,這些頭條可能位置也會(huì)有所變化。在800下頭條是偏下的,而1024是居中一點(diǎn),1600就偏上一點(diǎn)。但是從瀏覽器的大角度來(lái)看,這些頭條也都是處于視覺(jué)中心點(diǎn)的。
圖片 我們?cè)谔幚韴D片的時(shí)候也會(huì)用到布局,比如我們的文字放在什么地方,標(biāo)志放在什么地方這些都是布局的范疇。這里也要應(yīng)用上述的概念,重要的要核心不要放在正中或是過(guò)于偏向角落。當(dāng)然也會(huì)遇到重心的東西很大,基本上都占滿了畫(huà)面,下面讓大家來(lái)看一張招貼:
大家看這圖的重點(diǎn)是那個(gè)MP4,但是這個(gè)對(duì)象很大,不過(guò)沒(méi)關(guān)系,把這個(gè)MP4的圖做得有透視性,左右的重量就不一樣了。這樣向左去一點(diǎn),那么重心就向左去了,再加上MP4偏上,這個(gè)MP4就正好在視覺(jué)中心點(diǎn)上了。而主要的信息文字同樣也處在視覺(jué)中心的位置上。而一些不重要的文字都放在了角度去冷落他。
好了,關(guān)于布局就說(shuō)這么多,這里總覺(jué)得這里還少些東西,細(xì)想可能是視覺(jué)平衡方面的問(wèn)題。這里講得很多了,視覺(jué)平衡方面的問(wèn)題目就再想想過(guò)些日子再整理出來(lái)。
近期更新
- [2023-06-25 23:22:29] 優(yōu)秀網(wǎng)站設(shè)計(jì)的五大特點(diǎn)
- [2023-04-27 14:05:55] Html 5 響應(yīng)式網(wǎng)站設(shè)計(jì)制作
- [2023-04-10 11:07:30] 網(wǎng)站建設(shè)制作流程知多少
- [2022-10-14 10:11:30] 做網(wǎng)站設(shè)計(jì)應(yīng)該更看重框架搭建還是視覺(jué)觀感?
- [2022-08-09 15:57:48] 以“產(chǎn)品”思維搭建網(wǎng)站!
- [2022-08-08 09:12:57] 一家公司的網(wǎng)站應(yīng)該有哪些板塊內(nèi)容?
- [2022-08-05 09:28:06] 企業(yè)網(wǎng)站建設(shè)為什么要設(shè)置新聞板塊?
- [2022-07-04 15:58:06] 網(wǎng)站首頁(yè)設(shè)計(jì)的好看,這個(gè)網(wǎng)站就成功了一大半!
- [2022-05-20 09:34:19] 網(wǎng)站后臺(tái)管理系統(tǒng)是什么?有什么作用?
- [2022-05-17 11:29:32] 作為消費(fèi)者,應(yīng)該如何選擇一家水平高的網(wǎng)站建設(shè)公司
- [2022-05-17 11:27:01] 高端網(wǎng)站定制與模板化網(wǎng)站應(yīng)該怎么選擇?
- [2022-04-22 16:00:41] 現(xiàn)在高端的網(wǎng)站設(shè)計(jì)都有哪些新的趨勢(shì)?
延伸閱讀
- [2006-11-29 08:40:00] 網(wǎng)頁(yè)設(shè)計(jì)技巧系列之三 再談布局
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計(jì)解決方案 機(jī)械行業(yè)網(wǎng)站設(shè)計(jì)解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 科技企業(yè)網(wǎng)站設(shè)計(jì)解決方案 電子家電網(wǎng)站設(shè)計(jì)解決方案 食品行業(yè)網(wǎng)站設(shè)計(jì)解決方案 集團(tuán)公司網(wǎng)站設(shè)計(jì)解決方案 企事業(yè)單位網(wǎng)站設(shè)計(jì)解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 健身運(yùn)動(dòng)網(wǎng)站設(shè)計(jì)解決方案 美容與化妝品網(wǎng)站設(shè)計(jì)解決方案 建筑設(shè)計(jì)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 物流行業(yè)網(wǎng)站設(shè)計(jì)解決方案
TAGS關(guān)鍵字
網(wǎng)站設(shè)計(jì) 微信小程序 手機(jī)網(wǎng)站 青島好的網(wǎng)站優(yōu)化公司 集團(tuán)官網(wǎng) SEO優(yōu)化 青島SEO 青島網(wǎng)站制作 青島網(wǎng)頁(yè)制作 青島網(wǎng)站優(yōu)化 青島輪胎網(wǎng)站設(shè)計(jì)公司 建站常識(shí) 青島海洋投資集團(tuán) 膠南網(wǎng)站建設(shè)公司 網(wǎng)站規(guī)劃 微信營(yíng)銷的優(yōu)勢(shì) 搜索引擎蜘蛛 青島高端網(wǎng)站建設(shè) 營(yíng)銷策略 網(wǎng)站制作 搜索引擎 空白和簡(jiǎn)潔的設(shè)計(jì) SEO 官網(wǎng)建設(shè) 網(wǎng)站優(yōu)化 營(yíng)銷型網(wǎng)站 H5定制設(shè)計(jì) php程序 青島輪胎網(wǎng)站設(shè)計(jì) H5