1、,何如利網(wǎng)站規(guī)劃與設(shè)計(jì)2012.2,網(wǎng)站策劃選題網(wǎng)站類(lèi)型（企業(yè)和非企業(yè)）網(wǎng)站結(jié)構(gòu)前奏正題,企業(yè)網(wǎng)站,是企業(yè)的網(wǎng)上窗口，在這里展示著企業(yè)文化，發(fā)布企業(yè)信息、新聞，進(jìn)行電子商務(wù)。,網(wǎng)站類(lèi)型,非企業(yè)網(wǎng)站,與前者相比，涵蓋內(nèi)容更廣泛，包括門(mén)戶(hù)網(wǎng)站、各專(zhuān)題網(wǎng)站、個(gè)人網(wǎng)站等。對(duì)于這類(lèi)網(wǎng)站，選題時(shí)要明確應(yīng)包括哪些內(nèi)容、出現(xiàn)哪些話(huà)題、哪些是自己容易入手的。,設(shè)計(jì)網(wǎng)站結(jié)構(gòu),前奏網(wǎng)站設(shè)計(jì)是一個(gè)復(fù)雜的過(guò)程，在考慮有關(guān)具體工作之前，需要考慮幾個(gè)問(wèn)題來(lái)幫助我們理清思路。,商務(wù)網(wǎng)站策劃建立網(wǎng)站的目的設(shè)想的網(wǎng)站規(guī)模網(wǎng)站的主要瀏覽人群是誰(shuí)網(wǎng)站的設(shè)計(jì)特色是怎樣的準(zhǔn)備投入的預(yù)算是多少個(gè)性網(wǎng)站策劃網(wǎng)站和其他網(wǎng)站有什么不同網(wǎng)站的色彩

2、網(wǎng)站的內(nèi)容網(wǎng)站給瀏覽者的印象以人為本，從用戶(hù)角度進(jìn)行設(shè)計(jì),設(shè)計(jì)網(wǎng)站結(jié)構(gòu),正題網(wǎng)站結(jié)構(gòu)是網(wǎng)站設(shè)計(jì)的基礎(chǔ)。所謂網(wǎng)站結(jié)構(gòu)圖就是將網(wǎng)站的架構(gòu)利用圖表的形式表現(xiàn)出來(lái)。,合理的結(jié)構(gòu)設(shè)計(jì)對(duì)于網(wǎng)站的規(guī)劃也是至關(guān)重要的。以下是三種常用的結(jié)構(gòu)類(lèi)型。,層狀結(jié)構(gòu)：類(lèi)似于目錄系統(tǒng)的樹(shù)型結(jié)構(gòu)。,線性結(jié)構(gòu)線性結(jié)構(gòu)類(lèi)似于數(shù)據(jù)結(jié)構(gòu)中的線性表，用于組織本身的線性順序形式存在的信息，可以引導(dǎo)瀏覽者按部就班地瀏覽整個(gè)網(wǎng)站文件。,Web結(jié)構(gòu)Web結(jié)構(gòu)類(lèi)似于Internet的組成結(jié)構(gòu)，各網(wǎng)頁(yè)之間形成網(wǎng)狀連接，允許用戶(hù)隨意瀏覽。,從大的門(mén)戶(hù)網(wǎng)站到小的個(gè)人站點(diǎn)，幾乎所有的網(wǎng)站都可分為不可變的和可變的兩部分。不可變的是整體風(fēng)格，可變的是不斷更

3、新的內(nèi)容和服務(wù)。網(wǎng)站結(jié)構(gòu)圖主要由網(wǎng)站邏輯模型圖和網(wǎng)頁(yè)關(guān)系圖組成。前者用來(lái)設(shè)計(jì)比較固定的網(wǎng)站架構(gòu)，后者設(shè)計(jì)林林總總的網(wǎng)站內(nèi)容，這樣可以在保持網(wǎng)站整體風(fēng)格和導(dǎo)航習(xí)慣的前提下不斷豐富網(wǎng)站的內(nèi)容，提高網(wǎng)站的適應(yīng)力。如果把網(wǎng)站比喻成一棵大樹(shù)，網(wǎng)站的邏輯模型就是大樹(shù)的枝干，網(wǎng)站的內(nèi)容就是葉子。,設(shè)計(jì)網(wǎng)站邏輯模型圖,在這一層當(dāng)中，我們工作的主要目標(biāo)是劃分信息，建立層次結(jié)構(gòu)。對(duì)龐大的信息進(jìn)行細(xì)分和合理的組織是設(shè)計(jì)網(wǎng)站的一個(gè)重要基本原則。比如在生活中，人們常使用姓名來(lái)組織電話(huà)簿，而不按電話(huà)號(hào)碼的順序來(lái)組織。建立一個(gè)網(wǎng)站花一些時(shí)間來(lái)設(shè)計(jì)一個(gè)好的合理的網(wǎng)站組織方式將事倍功半。,劃分信息的方法有兩種：自頂向下劃分：按

4、照從上到下、從粗到細(xì)的原則劃分信息塊來(lái)確定網(wǎng)站需要的分支。以旅游網(wǎng)為例：確定要說(shuō)明的幾條旅游路線細(xì)分每條路線：景點(diǎn)、住宿、特色小吃細(xì)述景點(diǎn)的詳細(xì)狀況住宿的各地點(diǎn)及環(huán)境、價(jià)位、預(yù)定情況；特色小吃的起源、品牌、價(jià)格；,自底向上劃分：這種方法與上一種正好相反，它是先將所有的信息都羅列出來(lái)然后逐步向上劃分類(lèi)別，形成網(wǎng)站的初步結(jié)構(gòu)。以護(hù)膚品網(wǎng)站為例：詳細(xì)明白各品牌的產(chǎn)品系列及適合使用情況；了解使用人群及她們的用后反饋狀況，并了解到她們有希望知道別人使用情況的需要；將涉及到的問(wèn)題概括為關(guān)于各品牌說(shuō)明的幾個(gè)方面：產(chǎn)品系列、使用反饋、使用同盟及論壇；最后確立網(wǎng)站中要涉及的護(hù)膚品品牌；,網(wǎng)頁(yè)關(guān)系,網(wǎng)站的邏輯關(guān)系

5、圖只定義了網(wǎng)站整體的一個(gè)層次關(guān)系，真正的內(nèi)容則體現(xiàn)在內(nèi)容頁(yè)面上。如果我們對(duì)自己站點(diǎn)中的一個(gè)內(nèi)容頁(yè)面如何聯(lián)系到另一個(gè)內(nèi)容頁(yè)面不清楚的話(huà)，瀏覽者會(huì)更不清楚。這將導(dǎo)致網(wǎng)站資源利用率低瀏覽者只能發(fā)現(xiàn)網(wǎng)站20%的資源甚至更低。不但瀏覽者不會(huì)對(duì)這個(gè)網(wǎng)站滿(mǎn)意，我們也會(huì)因?yàn)榫臏?zhǔn)備的內(nèi)容不能全面展現(xiàn)產(chǎn)生失落感。,順序關(guān)系：最簡(jiǎn)單的信息組織方法。通常利用“上一頁(yè)”、“下一頁(yè)”、“返回首頁(yè)”進(jìn)行導(dǎo)航。常用于信息量小的站點(diǎn)。當(dāng)信息量較大時(shí)常會(huì)使網(wǎng)站變得更復(fù)雜而不易控制。矩陣關(guān)系：組織相關(guān)變量的一個(gè)好方法。但是除非瀏覽者對(duì)網(wǎng)站內(nèi)容非常熟悉，否則比較難理解。通常利用“上一頁(yè)”、“下一頁(yè)”、“返回首頁(yè)”、“上一層”、“下

6、一層”進(jìn)行導(dǎo)航。樹(shù)形關(guān)系：組織復(fù)雜信息的最好方法之一。用這種關(guān)系組織的網(wǎng)頁(yè)可看作整個(gè)網(wǎng)站層次的一個(gè)分支。大多數(shù)瀏覽者容易理解，但也正因?yàn)槿绱耍?dāng)它的層次太多時(shí)，瀏覽者將容易迷失方向。網(wǎng)狀關(guān)系：最復(fù)雜的一種。在這種結(jié)構(gòu)中要預(yù)測(cè)瀏覽者如何進(jìn)行網(wǎng)頁(yè)之間的跳轉(zhuǎn)是十分困難的，實(shí)際上很少被使用。,網(wǎng)站設(shè)計(jì)與創(chuàng)意,網(wǎng)站思考過(guò)程網(wǎng)站創(chuàng)意設(shè)計(jì),網(wǎng)站思考過(guò)程通常網(wǎng)站創(chuàng)意的思考過(guò)程可分為以下五個(gè)階段：準(zhǔn)備期研究所搜集的資料，根據(jù)舊經(jīng)驗(yàn)，啟發(fā)新創(chuàng)意；孵化期將資料咀嚼消化，使意識(shí)自由發(fā)展，任意結(jié)合；啟示期意識(shí)發(fā)展并結(jié)合，產(chǎn)生創(chuàng)意；驗(yàn)證期將產(chǎn)生的創(chuàng)意討論修正；形成期設(shè)計(jì)制作網(wǎng)頁(yè)，將創(chuàng)意具體化。,網(wǎng)站創(chuàng)意設(shè)計(jì)基礎(chǔ)基于形態(tài)元

7、素變更常規(guī)的一部分：點(diǎn)與線組合；面的形狀變化；富有特定含義的形狀等?；谏首岊伾黄迫藗兊挠∠?，使它看起來(lái)年輕、羅曼蒂克或非常流行等?；谡w空間給瀏覽者以立體、擬人等不同的感覺(jué)。其他給它起個(gè)朗朗上口的名字，舉辦競(jìng)賽、抽獎(jiǎng)活動(dòng)吸引眼球等。,網(wǎng)頁(yè)命名原則,所有的檔名一律使用英文小寫(xiě)，就不會(huì)因?yàn)榉?wù)器系統(tǒng)不同而混淆。不可以使用中文。檔名中間不能有空格。檔名中不可以有標(biāo)點(diǎn)符號(hào)或特殊符號(hào)。,什么樣的網(wǎng)頁(yè)吸引眼球？,結(jié)構(gòu)分明、畫(huà)面簡(jiǎn)潔。切忌雜亂無(wú)章！除非是信息量巨大的網(wǎng)站，不然不要讓你的畫(huà)面擠滿(mǎn)了各種圖片、文字和圖標(biāo)。要留有一定的空間，即美術(shù)上所謂的“留白”。網(wǎng)頁(yè)的內(nèi)容有所突出，包含具視覺(jué)沖擊力的圖片

8、、flash等；即所謂的一擊即中！網(wǎng)頁(yè)整體格調(diào)和諧、顏色清新，內(nèi)容明了。讓人一眼看出你的頁(yè)面所要展示的內(nèi)容、體現(xiàn)的意思。動(dòng)靜結(jié)合一個(gè)flash或者動(dòng)態(tài)特效能讓原本呆板的靜態(tài)頁(yè)面顯得有活力動(dòng)感！而不是給人死氣沉沉的感覺(jué)。,網(wǎng)頁(yè)設(shè)計(jì)注意要點(diǎn),整體性、統(tǒng)一性記?。耗愕木W(wǎng)站是一個(gè)統(tǒng)一的整體，要協(xié)調(diào)好圖片、色塊、文字、線條之間的關(guān)系。（點(diǎn)、線、面的和諧）細(xì)節(jié)能決定一個(gè)網(wǎng)頁(yè)設(shè)計(jì)的層次與水平。再好的創(chuàng)意也要注意細(xì)節(jié)，才能得出最佳效果。設(shè)計(jì)要有自己獨(dú)特的風(fēng)格。作圖可以吸收別人好的地方，但Ctrl+c,Ctrl+v，只能解決一時(shí)問(wèn)題，要做出好作品，一定要加入自己的思想。有了思想，才能稱(chēng)之為“設(shè)計(jì)”。,頂部部分：

9、包括LOGO、MENU（導(dǎo)航欄）和一幅Banner（圖片、flash等）；內(nèi)容部分：分為側(cè)邊欄、主體內(nèi)容；詳細(xì)劃分可分為：通欄、二分欄、三分欄、四分欄等。底部：包括一些版權(quán)信息、聯(lián)系方式等。從縱向結(jié)構(gòu)上，可分為一級(jí)頁(yè)面（首頁(yè)）、二級(jí)頁(yè)面、三級(jí)頁(yè)面,普通網(wǎng)站的基本機(jī)構(gòu),文字,字體的選擇主體內(nèi)容（尤其是動(dòng)態(tài)內(nèi)容）一般用常用字體：如，宋體、黑體等。注意：并不是每臺(tái)電腦里都有你選用的字體。文字大小視具體內(nèi)容而定：網(wǎng)站標(biāo)題、logo、導(dǎo)航欄、分類(lèi)欄目標(biāo)等較重要的內(nèi)容可運(yùn)用較大號(hào)的字體；具體內(nèi)容可用常規(guī)大小，即，12號(hào)、14號(hào)等。在具體設(shè)計(jì)中，可以用不同字號(hào)、不同間距、顏色的文字排放將設(shè)計(jì)出意想不到的效果

10、！,文字顏色清新、明了、統(tǒng)一有層次感、與網(wǎng)站主體風(fēng)格相呼應(yīng)。同一性質(zhì)的主體內(nèi)容最好使用同一種顏色。切忌貪多！注意顏色的搭配：主體內(nèi)容中盡量不用大紅配大綠，大藍(lán)配大紅等，及對(duì)比十分強(qiáng)烈的顏色。實(shí)在不知道用什么，那么就最古老的白紙黑字吧！,圖片,與網(wǎng)站性質(zhì)相呼應(yīng)。切忌糊搭亂配！如：商務(wù)、企業(yè)型網(wǎng)站大多選用商業(yè)圖片；政治性含義較強(qiáng)的頁(yè)面則多選用標(biāo)志性的圖片與標(biāo)志等；學(xué)校、政府機(jī)關(guān)則多選用自身的形象照片、標(biāo)志建筑等。選用質(zhì)量較高、畫(huà)面清晰，與背景色和網(wǎng)頁(yè)其他元素相協(xié)調(diào)的圖片。最好具有有視覺(jué)沖擊力、感召力！,網(wǎng)頁(yè)顏色,主體色確定相近色選用色彩均衡原則黑白灰運(yùn)用色彩心理與情感表達(dá),網(wǎng)頁(yè)最常用流行色藍(lán)色冷靜

11、、客觀，沉靜整潔的顏色，較多用于商業(yè)網(wǎng)站；綠色環(huán)保色，雅致而有生氣，給人清新的感覺(jué)，充滿(mǎn)活力；橙色活潑熱烈，標(biāo)準(zhǔn)商業(yè)色調(diào)；暗紅寧重、嚴(yán)肅、高貴，需要配黑和灰來(lái)壓制刺激的紅色；黑色很酷很神秘，而且看起來(lái)較有深度的一種顏色。適合打造個(gè)性、時(shí)尚網(wǎng)站。,幾種固定搭配藍(lán)白橙藍(lán)為主調(diào)。白底，藍(lán)標(biāo)題欄，橙色按鈕做點(diǎn)綴。綠白藍(lán)綠為主調(diào)。白底，綠標(biāo)題欄，藍(lán)色或橙色按鈕做點(diǎn)綴。橙白紅橙為主調(diào)。白底，橙標(biāo)題欄，暗紅或桔紅色按鈕做點(diǎn)綴。暗紅黑暗紅主調(diào)。黑或灰底，暗紅標(biāo)題欄，文字內(nèi)容背景為淺灰色。,頁(yè)面標(biāo)題位于瀏覽器的標(biāo)題欄，在標(biāo)記中設(shè)置。網(wǎng)站標(biāo)志位于頁(yè)眉，體現(xiàn)特色、內(nèi)容、文化內(nèi)涵和理念。頁(yè)面尺寸版面尺寸規(guī)范化，與分辨

12、率有關(guān)。800600像素，1024768像素，12801024像素或更高。如：分辨率為800*600像素，則頁(yè)面尺寸為760*420像素較好；分辨率為1024*768像素，則頁(yè)面尺寸為955*600像素較好。,與網(wǎng)頁(yè)有關(guān)的信息,頁(yè)眉和頁(yè)腳頁(yè)眉：位于網(wǎng)頁(yè)上部，放置站點(diǎn)名字、標(biāo)志、宗旨、口號(hào)、廣告。頁(yè)腳：位于網(wǎng)頁(yè)底部，放置公司聯(lián)系方式。導(dǎo)航欄位置有4種：左側(cè)、右側(cè)、頂部、底部，增強(qiáng)對(duì)網(wǎng)站的訪問(wèn)。多媒體聲音：MIDI、WAV、MP3、AIF視頻：RM、MPEG、AV、Div、SWF,網(wǎng)頁(yè)版面設(shè)計(jì),版面編排原則,突出中心，理清主次。搭配合理，大小呼應(yīng)。圖文并茂，相得益彰。,首屏頁(yè)面的設(shè)計(jì)所謂“首屏頁(yè)面”是指打開(kāi)一個(gè)網(wǎng)站首頁(yè)時(shí)，不拖動(dòng)畫(huà)面右側(cè)的滾動(dòng)條能夠看到的部分。,注意：首屏頁(yè)面