網(wǎng)頁(yè)設(shè)計(jì)教程(8):網(wǎng)頁(yè)層次和空間設(shè)計(jì)

2024-08-30 08:33:32

字體：大中小

供稿：網(wǎng)友

上一篇：網(wǎng)頁(yè)設(shè)計(jì)教程(7):提高網(wǎng)頁(yè)制作效率
一：很有必要的嘮叨。
有秩序，有規(guī)律，有特殊。叫層次！
層次的迭代，表達(dá)出空間的存在感。點(diǎn)，線，面。點(diǎn)動(dòng)成線，線動(dòng)成面，面動(dòng)成體，多個(gè)體的復(fù)雜構(gòu)成。即為空間。當(dāng)然，這里說(shuō)的是數(shù)學(xué)空間或邏輯空間。可不是什么哲學(xué)空間。
二：離不開的感覺--透視；
之前寫過一篇關(guān)于透視的文章，這里再配幾張圖輔助理解。
透視并不是最重要的，但它是很必要的！

三：最常用的表現(xiàn)手法--虛實(shí)和對(duì)比；

這是一張很常見的XP里的一張圖片，看它的層次。近大遠(yuǎn)小--近實(shí)遠(yuǎn)虛--近重遠(yuǎn)輕。

看變化。字的本身，所在的場(chǎng)景。遠(yuǎn)近、交替、虛實(shí)的變化。（留個(gè)作業(yè)，嘗試一下所謂是web2.0風(fēng)格，應(yīng)用在文字上面）

再看虛實(shí)，層疊！

方向！

看，就這幾個(gè)簡(jiǎn)單的元素！
三：老生長(zhǎng)談--色彩、色彩層次；

真不想畫這圖！
色相與層次的關(guān)系。
設(shè)計(jì)離不開層次，離不開色彩。講到色彩必然離不開色彩的三要素，即色相、明度和純度。在色相的處理上，不同的色彩會(huì)令人產(chǎn)生不同的感覺。
如果將各種不同的色彩放在一個(gè)畫面上，那么他們就會(huì)產(chǎn)生層次。
該突出的部分突出，該減弱的部分減弱，那么就要靈活運(yùn)用不同的色彩感覺來(lái)進(jìn)行處理。不同色相的顏色搭配在一起產(chǎn)生不同的視覺效果，產(chǎn)生不同的色彩層次。是暖色與冷色或是不同色相的暖色或是不同色相的冷色之間的搭配將會(huì)產(chǎn)生出豐富多彩的層次。
明度與層次的關(guān)系。在色彩的明度處理方面，明度對(duì)比是比較重要的。除了考慮色彩的感情外，還必須考慮配色中的黑、白、灰的層次感。這就是色彩配置的明度關(guān)系。不同的明度的色彩配置在一起時(shí)將產(chǎn)生變化萬(wàn)千的層次感。白色在色彩中的明度最高，黑色最低，如果將它們配置在一起則會(huì)形成強(qiáng)烈對(duì)比的層次。
而將紅色和橙色明度比較接近的色彩配置在一起時(shí)，其層次感相對(duì)較弱。純度與層次的關(guān)系。
當(dāng)色彩純度高的色彩與純度低的色彩配置在一起時(shí)，純度高的色彩更鮮艷而純度低的色彩則更暗濁。那么。純度高的色彩就會(huì)有一種向前的傾向，而暗濁的色彩則會(huì)有退后之感，這樣，色彩層次很分明。當(dāng)然在考慮用色彩的純度來(lái)達(dá)到設(shè)計(jì)的層次要求時(shí)，自然要將色彩的色相、明度考慮進(jìn)去。
不管用哪種色彩，如何配置，色相、明度、純度是很難分開的，也不能孤立的。色彩面積與層次的關(guān)系。
構(gòu)圖時(shí)，必然要認(rèn)真考慮各部分的位置、大小。這就牽涉到色彩的面積的篩。為了達(dá)到一個(gè)統(tǒng)一和諧的色調(diào)，一般以一種顏色為主調(diào)，并占據(jù)畫面的主要位置，即較大的面積，而其它色彩自然占較小面積。這樣做，不但可以保持其主色調(diào)，而且還會(huì)產(chǎn)生對(duì)比層次，使畫面既統(tǒng)一又有變化。
這一段很和諧。教科書般的和諧！
說(shuō)幾個(gè)判斷方法：
（一）：裸奔。可不是無(wú)CSS的裸奔，而是在設(shè)計(jì)稿出來(lái)后，合并所有圖層，轉(zhuǎn)換為黑白或lab模式查看黑白灰的感覺。
瞇上眼睛看。
閉眼，猛的睜開看。
盯著某樣?xùn)|西到視覺模糊后切換過來(lái)看！
（請(qǐng)諸位自行對(duì)自己的眼睛負(fù)責(zé)！！！！）
（二）：反相。
通過反面對(duì)比來(lái)察覺層次中的弱點(diǎn)。
（三）：切斷。
按照構(gòu)圖，將設(shè)計(jì)稿切成N個(gè)部分，用以上兩種方法查看。這個(gè)，對(duì)web設(shè)計(jì)師，相對(duì)重要點(diǎn)！
四：空間感覺--展示平臺(tái)的融合與超越；
看圖，原地址：http://shyls.longfor.com.cn/main.html

很典型了，構(gòu)圖、色彩，很有味道，層次雖然不突出，但感覺很和諧！
無(wú)論是平面還是網(wǎng)頁(yè)，總是要突出重點(diǎn)。然而在網(wǎng)頁(yè)內(nèi)突出重點(diǎn)。一般采用顏色、體積等簡(jiǎn)單的方式。而使用突出空間體積感的手法不被經(jīng)常用到。或者說(shuō)局限性很大，用于展示類的站點(diǎn)，特別是FLASH的站點(diǎn)。這里借用一張圖，源地址http://www.chengshiwen.com/attachments/month_0808/z200883102438.jpg，沒經(jīng)過作者同意，若有意見，我立刻將之拿下。

質(zhì)感、細(xì)節(jié)、布局都是上上之選，但最后的遠(yuǎn)山，卻不符合視覺習(xí)慣！有點(diǎn)繁瑣，而藍(lán)色的天空，應(yīng)該可以再深入一點(diǎn)。
讓人物從顯示平臺(tái)上跳出來(lái)！
其實(shí)很簡(jiǎn)單，把思維習(xí)慣反過來(lái)即可。一般情況下，比如某個(gè)人，是在限定的一個(gè)區(qū)域內(nèi)。那么，我們把它們反過來(lái)，讓人物的體積大于區(qū)域，讓人物顯示正常，讓區(qū)域進(jìn)行透視！
當(dāng)渲染出一個(gè)厚重、層次感強(qiáng)的背景的時(shí)候，近的東西放大，突出比重。一樣可以得到同樣的效果！
好，看圖，demo，做的不用心，表達(dá)出我的意思就可以了：

網(wǎng)絡(luò)上有關(guān)于很特異的廣告牌的照片。同學(xué)們可以找來(lái)看看！
揚(yáng)州杭集鎮(zhèn)是全國(guó)有名的牙刷、旅游用品生產(chǎn)基地。鎮(zhèn)子的高速公路的入口，現(xiàn)在應(yīng)該是高露潔的大立柱吧，上邊的牙刷，刷頭出來(lái)，后邊用鋼架固定，遠(yuǎn)遠(yuǎn)看去，牙刷頭就在空中。雖然這樣做成本比較高，但效果著實(shí)好！
揚(yáng)州育才小學(xué)東邊一點(diǎn)，一排店面的店牌，全部統(tǒng)一的深朱紅背景，古典的花紋，隸屬的字。雖然設(shè)計(jì)含量沒多少，但連著幾十上百家都一樣，倒也很壯觀！感覺很和諧，很統(tǒng)一！
『設(shè)計(jì)就在你身邊，經(jīng)常看看路邊的公交廣告、站臺(tái)廣告、包括門店牌，甚至是散發(fā)的傳單，商店里的壁畫、布置等等等等....會(huì)讓你的能力在無(wú)形中得到提高！自己想一下，自己收集的素材全部在自己的腦海里，把他們與實(shí)際生活結(jié)合起來(lái)......』
顏色也可以立體

球？光？

前景物體（即為要突出的物體）與背景之間的關(guān)系
若背景為云、光纖、圈光等非實(shí)際、視覺重量較輕的抽象類的風(fēng)格的時(shí)候，那么，前景物體則盡量使用與之相對(duì)的具象的、清晰的表達(dá)手法。
若背景為具象的、視覺重量較重的，比如地圖？風(fēng)景？等，需要注意的是版面的搭配，背景從哪里開始到哪里結(jié)束。顏色是否與前景物體的顏色沖突或相近。
另外，文字的大小對(duì)比，并不僅是為了突出某個(gè)字，也并不僅是為了構(gòu)圖。在具象的背景下，復(fù)雜的、無(wú)法控制的很多顏色的環(huán)境下。文字的大小錯(cuò)落排列，可以讓閱讀更順暢！
/**************結(jié)束的分割線***************/
這一篇醞釀了很久，前后4次動(dòng)手，足有一個(gè)月的時(shí)間！很多想法未能及時(shí)記錄下來(lái)，導(dǎo)致我現(xiàn)在短時(shí)間內(nèi)無(wú)法用適當(dāng)?shù)奈淖诌M(jìn)行清晰的描述！而且中間又臨時(shí)增加一篇，網(wǎng)頁(yè)設(shè)計(jì)教程(7):提高網(wǎng)頁(yè)制作效率！其實(shí)這一篇原本應(yīng)該是章七的......
發(fā)就發(fā)了，那么多廢話，大不了以后再改！
哦，配個(gè)標(biāo)題圖！
本章所用素材及demo源文件下載：第八章層次、空間(透視、立體)的淺入.rar

上一篇：阿里巴巴中秋logo結(jié)合網(wǎng)頁(yè)的設(shè)計(jì)過程

下一篇：網(wǎng)頁(yè)設(shè)計(jì)教程(7):提高網(wǎng)頁(yè)制作效率