《網(wǎng)站模板設(shè)計(jì)》第9單元 網(wǎng)頁賞析

第9單元網(wǎng)頁賞析教學(xué)要求知識要點(diǎn)能力要求關(guān)聯(lián)知識網(wǎng)頁欣賞提高藝術(shù)審美和設(shè)計(jì)標(biāo)準(zhǔn)網(wǎng)頁制作思路、網(wǎng)頁配色、網(wǎng)頁風(fēng)格網(wǎng)站欣賞掌握網(wǎng)站的整體設(shè)計(jì)思路與風(fēng)格網(wǎng)站風(fēng)格、網(wǎng)站版式、網(wǎng)站設(shè)計(jì)思路第9單元網(wǎng)頁賞析9.1

網(wǎng)頁賞析

如圖9.1所示，當(dāng)我們看網(wǎng)頁里面四個(gè)圖片的時(shí)候，好像每個(gè)圖片都有具體的內(nèi)容，其實(shí)這四張圖片就是將一張圖片分割成四部分，在設(shè)計(jì)的時(shí)候一個(gè)很好的圖片可能會將其分為幾部分，每一部分都隱藏著一個(gè)“故事”，都傳達(dá)著各自的信息。一張圖片，就能排版出這么棒的效果。不但有意境，而且還有設(shè)計(jì)感！圖9.1

網(wǎng)頁截圖第9單元網(wǎng)頁賞析圖9.2

網(wǎng)頁截圖9.1

網(wǎng)頁賞析

如圖9.2所示，網(wǎng)頁設(shè)計(jì)精美，讓人看了，心曠神怡，賞心悅目。第9單元網(wǎng)頁賞析圖9.3

網(wǎng)頁截圖9.1

網(wǎng)頁賞析

如圖9.3所示，網(wǎng)頁的設(shè)計(jì)充滿了趣味性，用一種寓意來設(shè)計(jì)！就像我們之間丟了一個(gè)伙伴一樣，找不到了。第9單元網(wǎng)頁賞析圖9.4

網(wǎng)頁截圖9.1

網(wǎng)頁賞析

圖9.4所示的網(wǎng)頁背景采用漸變設(shè)計(jì)，漸變的形式給人很強(qiáng)的節(jié)奏感和審美情趣。導(dǎo)航設(shè)計(jì)得很有特點(diǎn)和個(gè)性，整個(gè)網(wǎng)頁設(shè)計(jì)風(fēng)格較活潑和有趣。第9單元網(wǎng)頁賞析圖9.5

網(wǎng)頁截圖9.1

網(wǎng)頁賞析

圖9.5所示的網(wǎng)頁是一個(gè)典型的商業(yè)化網(wǎng)站風(fēng)格，中規(guī)中矩的版式與紫色的搭配有國際化網(wǎng)站之風(fēng)范，彩帶式的導(dǎo)航菜單又顯示其時(shí)尚。商業(yè)網(wǎng)頁設(shè)計(jì)注重大眾化和通用化。圖9.6

網(wǎng)頁截圖第9單元網(wǎng)頁賞析9.1

網(wǎng)頁賞析

如圖9.6所示，網(wǎng)頁運(yùn)用了時(shí)尚運(yùn)動(dòng)的造型，圖形大小、畫面比例協(xié)調(diào)，將細(xì)節(jié)放大，更容易突出強(qiáng)調(diào)的內(nèi)容。畫面比較講究視覺效果的舒適度，在視覺效果舒適度方面主要是采用九宮格設(shè)計(jì)。圖9.7

網(wǎng)頁截圖第9單元網(wǎng)頁賞析9.1

網(wǎng)頁賞析

如圖9.7、9.8所示，卡通類網(wǎng)頁追求能夠營造出強(qiáng)烈愉快感的設(shè)計(jì)。通過有效運(yùn)用好的圖片創(chuàng)造出新穎的設(shè)計(jì)，卡通類網(wǎng)頁最重要的是適當(dāng)?shù)拇钆淠軉酒鹑藗兣d趣和好奇心的要素，使界面的構(gòu)成不至于讓人產(chǎn)生厭倦感。圖9.8

網(wǎng)頁截圖第9單元網(wǎng)頁賞析9.1

網(wǎng)頁賞析

如圖9.7、9.8所示，卡通類網(wǎng)頁追求能夠營造出強(qiáng)烈愉快感的設(shè)計(jì)。通過有效運(yùn)用好的圖片創(chuàng)造出新穎的設(shè)計(jì)，卡通類網(wǎng)頁最重要的是適當(dāng)?shù)拇钆淠軉酒鹑藗兣d趣和好奇心的要素，使界面的構(gòu)成不至于讓人產(chǎn)生厭倦感。圖9.9

網(wǎng)頁截圖第9單元網(wǎng)頁賞析9.1

網(wǎng)頁賞析

如圖9.9所示，動(dòng)感的導(dǎo)航設(shè)計(jì)和網(wǎng)頁的風(fēng)格切合主題，黑色背景象征著神秘感，而藍(lán)色又象征著科技和深遠(yuǎn)。外加車表盤的設(shè)計(jì)又有著統(tǒng)一、整體的感覺。圖9.10

網(wǎng)頁截圖第9單元網(wǎng)頁賞析9.1

網(wǎng)頁賞析

如圖9.10所示，網(wǎng)頁使用大幅配圖，一張好圖片非常直觀反應(yīng)問題，勝過千言萬語，使用大圖的設(shè)計(jì)，瀏覽者如身臨其境，并留下深刻的印象。圖9.11

網(wǎng)頁截圖第9單元網(wǎng)頁賞析9.1

網(wǎng)頁賞析

如圖9.11所示，版面設(shè)計(jì)清新而又自然，內(nèi)容豐富而不雜亂，網(wǎng)頁的每個(gè)板塊都圖文并貌，而且給人的感覺就是：增加一分則太長，少之一分則太短，恰到好處。圖9.12網(wǎng)頁截圖第9單元網(wǎng)頁賞析9.1

網(wǎng)頁賞析

如圖9.12所示，網(wǎng)頁本身內(nèi)容偏多，圖像較多，但是采用深灰色背景可以避免其雜亂，圖片在深灰色的背景下顯得更漂亮、更出彩。圖9.13網(wǎng)頁截圖第9單元網(wǎng)頁賞析9.1

網(wǎng)頁賞析

如圖9.13、9.14、9.15所示，這幾個(gè)網(wǎng)頁都采用了淺灰色背景，賦予網(wǎng)頁高雅的氣質(zhì)，而且都采用了空間留白的設(shè)計(jì)手法，空間留白是良好設(shè)計(jì)非常重要的一部分，給眼睛留有一個(gè)休息的地方，給人想象空間，不強(qiáng)人所難，讓瀏覽者感覺很舒適、愜意，很自然的就提高了設(shè)計(jì)質(zhì)量，而且通過元素間距更容易表達(dá)他們之間的關(guān)聯(lián)性，網(wǎng)頁采用黃金分割設(shè)計(jì)方法。圖9.14網(wǎng)頁截圖第9單元網(wǎng)頁賞析9.1

網(wǎng)頁賞析

圖9.15網(wǎng)頁截圖第9單元網(wǎng)頁賞析9.1

網(wǎng)頁賞析

圖9.16網(wǎng)頁截圖第9單元網(wǎng)頁賞析9.1

網(wǎng)頁賞析如圖9.16所示，網(wǎng)頁的導(dǎo)航條通過變異而顯示網(wǎng)站Logo，起到突出強(qiáng)調(diào)的作用，導(dǎo)航和背景采用漸變的填充方式，又巧加一個(gè)人物更強(qiáng)調(diào)了主題，有很強(qiáng)的立體感。

圖9.17網(wǎng)頁截圖第9單元網(wǎng)頁賞析9.1

網(wǎng)頁賞析圖9.17所示的大標(biāo)題更有吸引力和明晰的構(gòu)成能力，縮略圖的使用也是現(xiàn)在網(wǎng)頁設(shè)計(jì)的一個(gè)趨勢，通過鼠標(biāo)點(diǎn)擊或者滑過，縮略圖就會放大，而是富有動(dòng)感、活力，增加了網(wǎng)頁的互動(dòng)。使瀏覽者產(chǎn)生濃厚的興趣。圖9.18網(wǎng)頁截圖第9單元網(wǎng)頁賞析9.1

網(wǎng)頁賞析圖9.18所示的是典型的飲料類網(wǎng)頁，一般此類網(wǎng)頁配色較清涼，清新，而風(fēng)格一般較活潑，動(dòng)感，現(xiàn)在很多網(wǎng)頁采用藍(lán)天、白云、山、水做背景，突出人類對自然的渴望，同時(shí)也增加了網(wǎng)頁的深度和高度。

圖9.19網(wǎng)頁截圖第9單元網(wǎng)頁賞析9.1

網(wǎng)頁賞析圖9.19所示個(gè)人網(wǎng)頁屬于個(gè)人網(wǎng)站類別，這個(gè)類別的網(wǎng)頁一般要能夠有效地表現(xiàn)出每個(gè)人與眾不同的個(gè)性，因此網(wǎng)站的設(shè)計(jì)應(yīng)該是新穎而又有創(chuàng)意的。

圖9.20網(wǎng)頁截圖第9單元網(wǎng)頁賞析9.1

網(wǎng)頁賞析賓館酒店、度假村、房屋建筑、休閑類的網(wǎng)頁風(fēng)格給人的感覺大同小異，大多數(shù)網(wǎng)頁給人高級和親切的感覺，圖像優(yōu)雅而且格調(diào)較高，如圖9.20所示的網(wǎng)頁，網(wǎng)頁充滿活力和歡樂的氣氛，這樣會增加用戶對目標(biāo)的期待和興趣。圖9.21網(wǎng)頁截圖第9單元網(wǎng)頁賞析9.1

網(wǎng)頁賞析圖9.21所示的網(wǎng)頁屬于食品類，背景采用藍(lán)白漸變，網(wǎng)頁顯得干凈、清新，令人心情舒暢，胃口大開，網(wǎng)頁運(yùn)用九宮格的藝術(shù)設(shè)計(jì)手法，看起來很舒適，另外有一些網(wǎng)頁元素運(yùn)用產(chǎn)品自身帶的一些包裝效果，顯得非常親切和諧。圖9.22網(wǎng)頁截圖第9單元網(wǎng)頁賞析9.1

網(wǎng)頁賞析賓館酒店、度假村、房屋建筑、休閑類的網(wǎng)頁風(fēng)格給人的感覺大同小異，大多數(shù)網(wǎng)頁給人高級和親切的感覺，圖像優(yōu)雅而且格調(diào)較高，如圖9.22所示的網(wǎng)頁，網(wǎng)頁充滿活力和歡樂的氣氛，這樣會增加用戶對目標(biāo)的期待和興趣。圖9.23網(wǎng)頁截圖第9單元網(wǎng)頁賞析9.1

網(wǎng)頁賞析圖9.23所示是韓國一家電訊公司網(wǎng)頁，該設(shè)計(jì)突破了中規(guī)中矩的風(fēng)格，一般網(wǎng)頁版式都是從上到下幾行幾列，而本網(wǎng)頁是以圓形為核心布局，體現(xiàn)本公司的主題和核心，網(wǎng)頁布局整體看起來如同一個(gè)地球，上面有著諸多的通訊元素，而且運(yùn)用透視的原理，網(wǎng)頁有較強(qiáng)的空間立體感。圖9.24網(wǎng)頁截