網(wǎng)站設(shè)計過程方法簡述

多媒體網(wǎng)站設(shè)計

2021/5/91網(wǎng)頁設(shè)計師是一個新興職業(yè)。國內(nèi)網(wǎng)頁設(shè)計制作的狀況。網(wǎng)站出資人，網(wǎng)絡(luò)工程師，美術(shù)設(shè)計師。個人主頁及B2B、B2C、C2C的電子商務(wù)網(wǎng)站。一、網(wǎng)站設(shè)計概述2021/5/92平面設(shè)計與網(wǎng)頁設(shè)計之比較分辨率

色彩模式

RGB、CMYK（CMYK即代表印刷上用的四種油墨色，C代表青色，M代表洋紅色，Y代表黃色，K--黑色。）例：黑色在印刷與網(wǎng)頁制作中的不同

圖像大小成功的網(wǎng)頁設(shè)計師必須在網(wǎng)頁的美觀和速度之間找到一個平衡點，目前的狀況得以改善。鏈接、動畫、按鈕。

二、平面設(shè)計與網(wǎng)頁設(shè)計之比較2021/5/93網(wǎng)站的色彩網(wǎng)站的色彩是構(gòu)成網(wǎng)站CI的重要組成部分，成功的網(wǎng)站，網(wǎng)站風(fēng)格的定位是從其基本色彩開始的(調(diào)子)，不同的色彩基調(diào)傳達(dá)給人不同的感受，即影響瀏覽者的情緒也界定了改網(wǎng)站的風(fēng)格。色彩的基本知識：色相、純度、亮度、冷暖。色彩心理學(xué)色彩搭配原則：合理性；獨(dú)特性；藝術(shù)性。大企業(yè)的成功色彩形象：IBM、可口可樂、奧迪。三、網(wǎng)站的形象設(shè)計與CI策劃2021/5/94四、網(wǎng)站的形象設(shè)計與CI策劃

CI，是借用的廣告術(shù)語。

CI(corporateidentity)，意思是通過視覺來統(tǒng)一企業(yè)的形象。現(xiàn)實生活中的CI策劃比比皆是，杰出的例子如：可口可樂公司，全球統(tǒng)一的標(biāo)志，色彩和產(chǎn)品包裝，給我們的印象極為深刻。更多的例子如SONY，三菱，麥當(dāng)勞等等。2021/5/951.設(shè)計網(wǎng)站的標(biāo)志(logo).設(shè)計制作一個網(wǎng)站的標(biāo)志(logo)。就如同商標(biāo)一樣，logo是站點特色和內(nèi)涵的集中體現(xiàn)，看見logo就讓大家聯(lián)想起你的站點。

1.LOGO是與其它網(wǎng)站鏈接以及讓其它網(wǎng)站鏈接的標(biāo)志和門戶。

2.LOGO是網(wǎng)站形象的重要體現(xiàn)。

3.LOGO的國際標(biāo)準(zhǔn)規(guī)范。

88*31互聯(lián)網(wǎng)上最普遍的LOGO規(guī)格，以下舉例均是這種大小

120*60用于一般大小的LOGO

120*90用于大型LOGO。2021/5/962021/5/97

(1).網(wǎng)站有代表性的人物，動物，花草，可以用它們作為設(shè)計的藍(lán)本，加以卡通化和藝術(shù)化。例如迪斯尼的米老鼠，搜狐的卡通狐貍，鯊?fù)w壇的籃球鯊魚。

(2).網(wǎng)站有專業(yè)性的，可以以本專業(yè)有代表的物品作為標(biāo)志。如：中國銀行的銅板標(biāo)志，奔馳汽車的方向盤標(biāo)志。

(3).最常用和最簡單的方式是用網(wǎng)站的英文名稱作標(biāo)志。采用不同的字體，字母的變形，字母的組合可以很容易制作好自己的標(biāo)志。2021/5/982021/5/992021/5/9102021/5/9112021/5/9122.設(shè)計網(wǎng)站的標(biāo)準(zhǔn)色彩網(wǎng)站給人的第一印象來自視覺沖擊，確定網(wǎng)站的標(biāo)準(zhǔn)色彩是相當(dāng)重要的一步。不同的色彩搭配產(chǎn)生不同的效果，并可能影響到訪問者的情緒。

“標(biāo)準(zhǔn)色彩”指能體現(xiàn)網(wǎng)站型象和延伸內(nèi)涵的色彩。例如：IBM的深藍(lán)色，肯得基的紅色條型，windows視窗標(biāo)志上的紅藍(lán)黃綠色塊，都使我們覺得很貼切，很和諧。2021/5/9132021/5/9142021/5/915一般來說，一個網(wǎng)站的標(biāo)準(zhǔn)色彩不超過3種，太多則讓人眼花繚亂。標(biāo)準(zhǔn)色彩要用于網(wǎng)站的標(biāo)志，標(biāo)題，主菜單和主色塊。給人以整體統(tǒng)一的感覺。至于其它色彩也可以使用，只是作為點綴和襯托，絕不能喧賓奪主。一般來說，適合于網(wǎng)頁標(biāo)準(zhǔn)色的顏色有：藍(lán)色，黃/橙色，黑/灰/白色三大系列色。2021/5/9162021/5/9173.設(shè)計網(wǎng)站的標(biāo)準(zhǔn)字體

標(biāo)準(zhǔn)字體指用于標(biāo)志，標(biāo)題，主菜單的特有字體。一般網(wǎng)頁默認(rèn)的字體是宋體。為了體現(xiàn)站點的“與眾不同”和特有風(fēng)格，可以根據(jù)需要選擇一些特別字體。

例如，為了體現(xiàn)專業(yè)可以使用粗仿宋體，體現(xiàn)設(shè)計精美可以用廣告體，體現(xiàn)親切隨意可以用手寫體等等。目前常見的中文字體有二三十種，常見的英文字體有近百種，網(wǎng)絡(luò)上還有許多專用英文藝術(shù)字體下載。

說明：使用非默認(rèn)字體只能用圖片的形式，因為很可能瀏覽者的PC里沒有安裝你的特別字體。2021/5/918五.確定網(wǎng)站的目錄結(jié)構(gòu)和鏈接結(jié)構(gòu)１.網(wǎng)站的目錄結(jié)構(gòu)

●不要將所有文件都存放在根目錄下?！癜礄谀績?nèi)容建立子目錄。

●在每個主目錄下都建立獨(dú)立的images目錄?！衲夸浀膶哟尾灰睢?/p>

建議不要超過3層。

原因：維護(hù)管理方便。2021/5/919

研究網(wǎng)站的鏈接結(jié)構(gòu)的目的：用最少的鏈接，使得瀏覽最有效率。一般建立網(wǎng)站的鏈接結(jié)構(gòu)有兩種基本方式：２.網(wǎng)站的鏈接結(jié)構(gòu)

1.樹狀鏈接結(jié)構(gòu)(一對一)。類似DOS的目錄結(jié)構(gòu)，首頁鏈接指向一級頁面，一級頁面鏈接指向二級頁面。這樣的鏈接結(jié)構(gòu)瀏覽時，一級級進(jìn)入，一級級退出。

優(yōu)點：條理清晰，訪問者明確知道自己在什么位置，不會“迷”路。

缺點：瀏覽效率低，一個欄目下的子頁面到另一個欄目下的子頁面，必須繞經(jīng)首頁。2021/5/9202.星狀鏈接結(jié)構(gòu)（一對多）類似網(wǎng)絡(luò)服務(wù)器的鏈接，每個頁面相互之間都建立有鏈接。

優(yōu)點：瀏覽方便，隨時可以到達(dá)自己喜歡的頁面。

缺點：鏈接太多，容易使瀏覽者迷路，搞不清自己在什么位置，看了多少內(nèi)容。2021/5/921在實際的網(wǎng)站設(shè)計中，總是將這兩種結(jié)構(gòu)混合起來使用。最好的辦法：首頁和一級頁面之間用星狀鏈接結(jié)構(gòu)，一級和二級頁面之間用樹狀鏈接結(jié)構(gòu)。例子：一個新聞?wù)军c的頁面結(jié)構(gòu)：

一級頁面二級頁面

財經(jīng)新聞頁--[財經(jīng)新聞1，財經(jīng)新聞2...]

/|

首頁--娛樂新聞頁--[娛樂新聞1，娛樂新聞2...]

\|

IT新聞頁--[IT新聞1，IT新聞2...]2021/5/922以上是對的三級頁面舉例。如果所建站點內(nèi)容龐大，分類明細(xì)，需要超過三級頁面，那么建議在頁面里顯示導(dǎo)航條，幫助瀏覽者明確自己所處的位置。

例如：經(jīng)常看到許多網(wǎng)站頁面頂部的，類似這樣：“您現(xiàn)在的位置是：首頁->財經(jīng)新聞->股市信息->深圳股->深發(fā)展”2021/5/923六.版面布局與首頁設(shè)計草案

建議先用一張白紙和一支鉛筆，用作圖軟件photoshop等也可以。這時，不講究細(xì)膩工整，不必考慮細(xì)節(jié)功能，只以粗陋的線條勾畫出創(chuàng)意的輪廓即可。盡量可能多畫幾張，最后選定一個滿意的作為繼續(xù)創(chuàng)作的腳本。2021/5/924常用到的版面布局形式1.“T”結(jié)構(gòu)布局

結(jié)構(gòu)：頁面頂部為橫條網(wǎng)站標(biāo)志+廣告條，下方左面為主菜單，右面顯示內(nèi)容的布局，因為菜單條背景較深，整體效果類似英文字母“T。這是網(wǎng)頁設(shè)計中用的最廣返的一種布局方式。優(yōu)點：頁面結(jié)構(gòu)清晰，主次分明。初學(xué)者最容易上手。

缺點：規(guī)矩呆板，如果細(xì)節(jié)色彩上不注意，很容易“讓人看之無味”。2021/5/9252.“口”型布局

結(jié)構(gòu)：頁面一般上下各有一個廣告條，左面是主菜單，右面放友情鏈接等，中間是主要內(nèi)容。

優(yōu)點：充分利用版面，信息量大。

缺點：頁面擁擠，不夠靈活。也有將四邊空出，只用中間的窗口型設(shè)計。2021/5/9263.對稱對比布局

結(jié)構(gòu)：采取左右或者上下對稱的布局，一半深色，一半淺色，一般用于設(shè)計型站點。

優(yōu)點：視覺沖擊力強(qiáng)。

缺點：將兩部分有機(jī)的結(jié)合比較困難。2021/5/9274.POP布局(自由布局)

結(jié)構(gòu)：頁面布局象一張宣傳海報，以一張精美圖片作為頁面的設(shè)計中心。常用于時尚類站點，比如ELLE.com。

優(yōu)點：漂亮吸引人。

缺點：速度慢。2021/5/928首頁的設(shè)計

主頁的設(shè)計是一個網(wǎng)站成功與否的關(guān)鍵。人們往往看到第一頁就已經(jīng)對你的站點有一個整體的感覺。是不是能夠促使瀏覽者繼續(xù)點擊進(jìn)入，是否能夠吸引瀏覽者留在站點上，全憑首頁設(shè)計的“功力”。

所以，首頁的設(shè)計和制作是絕對要重視和花心思的。首頁的制作風(fēng)格也決定了整個網(wǎng)站將要延續(xù)的風(fēng)格。一般首頁設(shè)計和制作占整個制作時間相當(dāng)大的比重。2021/5/929首頁的主要類型書籍封面式首頁有些大型網(wǎng)站往往有一個書籍封面式的首頁，上面只有一個“進(jìn)入”的鏈接，點擊之后才可進(jìn)入到網(wǎng)站。這種首頁設(shè)計精美、考究。2021/5/930例12021/5/931例22021/5/932例32021/5/933首頁的主要類型期刊雜志式首頁與書刊封面式首頁相似，但在首頁上有網(wǎng)站全部內(nèi)容的目錄索引，圖文并茂，看上去就像期刊雜志的封面，即漂亮，又使網(wǎng)站的主要內(nèi)容一目了然，是一種值得推薦的形式。2021/5/934例12021/5/935例22021/5/936例32021/5/937首頁的主要類型報紙式首頁許多電子商務(wù)網(wǎng)站、搜索引擎網(wǎng)站和新聞信息網(wǎng)站更加務(wù)實，為了速度和操作的簡便，往往采用報紙式的首頁設(shè)計，將欄目索引、功能模塊、具體內(nèi)容一并顯示在首頁，看上去就像報紙的頭版一樣。2021/5/938例12021/5/939七.網(wǎng)頁色彩的搭配色彩是人的視覺最敏感的東西。主頁的色彩處理得好，可以錦上添花，達(dá)到事半功倍的效果。色彩總的應(yīng)用原則應(yīng)該是“總體協(xié)調(diào)，局部對比”。

即：主頁的整體色彩效果應(yīng)該是和諧的，只有局部的、小范圍的地方可以有一些強(qiáng)烈色彩的對比。在色彩的運(yùn)用上，可以根據(jù)主頁內(nèi)容的需要，分別采用不同的主色調(diào)。2021/5/9401.色彩的心理感受色彩與人的心理感覺和情緒也有一定的關(guān)系。一般情況下，各種色彩給人的感覺是：

紅色代表熱情、活潑、熱鬧、溫暖、幸福、吉祥；

橙色代表光明、華麗、興奮、甜蜜、快樂；橙色較溫和,

是一種很活潑、輝煌的色彩、富足的、快樂的色彩，稍加黑則較穩(wěn)重，藍(lán)橙對比時較生動；

黃色代表明朗、愉快、高貴、希望；

綠色代表新鮮、平靜、和平、柔和、安逸、青春；

藍(lán)色代表深遠(yuǎn)、永恒、沉靜、理智、誠實、寒冷；

紫色代表優(yōu)雅、高貴、魅力、自傲；2021/5/941

白色代表純潔、純真、樸素、神圣、明快；

灰色代表憂郁、消極、謙虛、平凡、沉默、中庸、寂寞；

灰色是色彩中最被動的顏色。受有彩色影響極大,

靠鄰近的色彩獲得自己的生命，近冷則暖,

近暖則冷。

黑色代表崇高、堅實、嚴(yán)肅、剛健、粗莽；

黑與白:非常對立而又有共性,

是色彩最后的抽象.能夠用來表達(dá)富有哲理性的東西。2021/5/9422.網(wǎng)頁色彩搭配的原則1.使用單色網(wǎng)站設(shè)計要避免采用單一色彩，以免產(chǎn)生單調(diào)的感覺，但通過調(diào)整色彩的飽和度和透明度也可以產(chǎn)生變化，使網(wǎng)站避免單調(diào)。2.使用鄰近色鄰近色，是在色帶上相鄰近的顏色，例如綠色和藍(lán)色，紅色和黃色。采用鄰近色設(shè)計網(wǎng)頁可以使網(wǎng)頁避免色彩雜亂，易于達(dá)到頁面的和諧統(tǒng)一。2021/5/9433.使用對比色對比色可以突出重點，產(chǎn)生強(qiáng)烈的視覺效果，通過合理使用對比色能夠使網(wǎng)站特色鮮明、重點突出。在設(shè)計時一般以一種顏色為主色調(diào)，對比色作為點綴，可以起到畫龍點睛的作用。4.背景色的使用一般采用素淡清雅的色彩，避免采用花紋復(fù)雜的圖片和純度很高的色彩作為背景色，同時背景色要與文字的色彩對比強(qiáng)烈一些。2021/5/944

⑴紅色的色感溫暖，性格剛烈而外向，是一種對人刺激性很強(qiáng)的色。

紅色容易引起人的注意，也容易使人興奮、激動、緊張、沖動、還是一種容易造成人視覺疲勞的色。

①在紅色中加入少量的黃，會使其熱力強(qiáng)盛，趨于躁動、不安。

②在紅色中加入少量的藍(lán)，會使其熱性減弱，趨于文雅、柔和。

③在紅色中加入少量的黑，會使其性格變的沉穩(wěn)，趨于厚重、樸實。

④在紅中加入少量的白，會使其性格變的溫柔，趨于含蓄、羞澀、嬌嫩。2021/5/945

⑵黃色的性格冷漠、高傲、敏感、具有擴(kuò)張和不安寧的視覺印象。

黃色是各種色彩中，最為嬌氣的一種色。只要在純黃色中混入少量的其它色，其色相感和色性格均會發(fā)生較大程度變化。

①在黃色中加入少量的藍(lán)，會使其轉(zhuǎn)化為一種鮮嫩的綠色。其高傲的性格也隨之消失，趨于一種平和、潮潤的感覺。

②在黃色中加入少量的紅，則具有明顯的橙色感覺，其性格也會從冷漠、高傲轉(zhuǎn)化為一種有分寸感的熱情、溫暖。

③在黃色中加入少量的黑，其色感和色性變化最大，成為一種具有明顯橄欖綠的復(fù)色印象。其色性也變的成熟、隨和。

④在黃色中加入少量的白，其色感變的柔和，其性格中的冷漠、高傲被淡化，趨于含蓄，易于接近。2021/5/946

⑶藍(lán)色的色感冷靜，性格樸實而內(nèi)向，是一種有助于人頭腦冷靜的色。

藍(lán)色的樸實、內(nèi)向性格，常為那些性格活躍、具有較強(qiáng)擴(kuò)張力的色彩，提供一個深遠(yuǎn)、廣埔、平靜的空間，成為襯托活躍色彩的友善而謙虛的朋友。藍(lán)色還是一種在淡化后仍然似能保持較強(qiáng)