網(wǎng)頁設(shè)計(jì)調(diào)研報(bào)告

網(wǎng)頁設(shè)計(jì)調(diào)研報(bào)告隨著經(jīng)濟(jì)的發(fā)展，電腦已經(jīng)成了生活必備品，當(dāng)上網(wǎng)變成一件很平常的事情，網(wǎng)站的發(fā)展就會(huì)日新月異了，而網(wǎng)頁設(shè)計(jì)作為一種視覺語言，不僅影響到視覺，還慢慢的滲透到聽覺，甚至嗅覺。一個(gè)好的網(wǎng)站必定擁有優(yōu)秀的網(wǎng)頁設(shè)計(jì)，好的網(wǎng)頁設(shè)計(jì)首先必須符合人的視覺需求，而相應(yīng)的排版布局，色彩搭配也要符合人們的心理需求，在這個(gè)商業(yè)與個(gè)性遍布的時(shí)代，網(wǎng)頁設(shè)計(jì)能否突出企業(yè)或個(gè)人的形象是擺在大家面前的一個(gè)問題，網(wǎng)頁的設(shè)計(jì)也涵蓋了很多方面，需要多方面的了解和調(diào)查，在設(shè)計(jì)網(wǎng)頁之前先做一番調(diào)查和思考非常有必要。

包設(shè)0814班尹祎雯網(wǎng)頁設(shè)計(jì)調(diào)研報(bào)告全文共26頁，當(dāng)前為第1頁。網(wǎng)頁設(shè)計(jì)的基本知識(shí)點(diǎn)1.網(wǎng)頁設(shè)計(jì)的要點(diǎn)2.網(wǎng)頁設(shè)計(jì)的工具3.網(wǎng)頁設(shè)計(jì)的版式和色彩4.網(wǎng)頁設(shè)計(jì)的理念5.網(wǎng)頁設(shè)計(jì)需要注意的問題網(wǎng)頁設(shè)計(jì)調(diào)研報(bào)告全文共26頁，當(dāng)前為第2頁。網(wǎng)頁設(shè)計(jì)的要點(diǎn)網(wǎng)頁設(shè)計(jì)的兩大要點(diǎn)是：整體風(fēng)格和色彩搭配。一、確定網(wǎng)站的整體風(fēng)格

1．將你的標(biāo)志logo，盡可能的放在每個(gè)頁面上最突出的位置。

2．突出你的標(biāo)準(zhǔn)色彩。

3．總結(jié)一句能反映貴站精髓的宣傳標(biāo)語！

4．相同類型的圖像采用相同效果，比如說標(biāo)題字都采用陰影效果，那么在網(wǎng)站中出現(xiàn)的所有標(biāo)題字的陰影效果的設(shè)置應(yīng)該是完全一致的！二、網(wǎng)頁色彩的搭配

1．用一種色彩。這里是指先選定一種色彩，然后調(diào)整透明度或者飽和度，這樣的頁面看起來色彩統(tǒng)一，有層次感。

2．用兩種色彩。先選定一種色彩，然后選擇它的對(duì)比色。

3．用一個(gè)色系。簡單的說就是用一個(gè)感覺的色彩，例如淡藍(lán)，淡黃，淡綠；或者土黃，土灰，土藍(lán)。在網(wǎng)頁配色中，還要切記一些誤區(qū)：

1．不要將所有顏色都用到，盡量控制在三至五種色彩以內(nèi)。

2．背景和前文的對(duì)比盡量要大(絕對(duì)不要用花紋繁復(fù)的圖案作背景)，以便突出主要文字內(nèi)容。網(wǎng)頁設(shè)計(jì)調(diào)研報(bào)告全文共26頁，當(dāng)前為第3頁。網(wǎng)頁設(shè)計(jì)的工具1.dreamweaver,用與編輯HTML、ASP、JSP、PHP時(shí)的輔助工具2.Frontpage跟dreamweaver一樣，不過個(gè)人感覺還是dreamweaver好。3.FLASH網(wǎng)頁需要畫面流動(dòng)時(shí)的首選擇4.PS圖象處理軟件，一般網(wǎng)頁都需要有圖片相搭配，PS是款很強(qiáng)大的工具。5.FW跟PS一樣都是圖象處理軟件，但FW偏向與對(duì)網(wǎng)頁的處理。[個(gè)人喜歡PS]網(wǎng)頁設(shè)計(jì)調(diào)研報(bào)告全文共26頁，當(dāng)前為第4頁。網(wǎng)頁設(shè)計(jì)的版式網(wǎng)頁布局類型網(wǎng)頁布局大致可分為“國”字型、拐角型、標(biāo)題正文型、左右框架型、上下框架型、綜合框架型、封面型、Flash型、變化型，下面分別論述。

1、“國”字型：也可以稱為“同”字型，是一些大型網(wǎng)站所喜歡的類型，即最上面是網(wǎng)站的標(biāo)題以及橫幅廣告條，接下來就是網(wǎng)站的主要內(nèi)容，左右分列一些兩小條內(nèi)容，中間是主要部分，與左右一起羅列到底，最下面是網(wǎng)站的一些基本信息、聯(lián)系方式、版權(quán)聲明等。這種結(jié)構(gòu)是我們在網(wǎng)上見到的差不多最多的一種結(jié)構(gòu)類型。

2、拐角型：這種結(jié)構(gòu)與上一種其實(shí)只是形式上的區(qū)別，其實(shí)是很相近的，上面是標(biāo)題及廣告橫幅，接下來的左側(cè)是一窄列鏈接等，右列是很寬的正文，下面也是一些網(wǎng)站的輔助信息。在這種類型中，一種很常見的類型是最上面是標(biāo)題及廣告，左側(cè)是導(dǎo)航鏈接。

3、標(biāo)題正文型：這種類型即最上面是標(biāo)題或類似的一些東西，下面是正文，比如一些文章頁面或注冊頁面等就是這種類。

4、左右框架型：這是一種左右為分別兩頁的框架結(jié)構(gòu)，一般左面是導(dǎo)航鏈接，有時(shí)最上面會(huì)有一個(gè)小的標(biāo)題或標(biāo)致，右面是正文。我們見到的大部分的大型論壇都是這種結(jié)構(gòu)的，有一些企業(yè)網(wǎng)站也喜歡采用。這種類型結(jié)構(gòu)非常清晰，一目了然。

5、上下框架型：與上面類似，區(qū)別僅僅在于是一種上下分為兩頁的框架。

6、綜合框架型：上頁兩種結(jié)構(gòu)的結(jié)合，相對(duì)復(fù)雜的一種框架結(jié)構(gòu)，較為常見的是類似于“拐角型”結(jié)構(gòu)的，只是采用了框架結(jié)構(gòu)。

7、封面型：這種類型基本上是出現(xiàn)在一些網(wǎng)站的首頁，大部分為一些精美的平面設(shè)計(jì)結(jié)合一些小的動(dòng)畫，放上幾個(gè)簡單的鏈接或者僅是一個(gè)“進(jìn)入”的鏈接甚至直接在首頁的圖片上做鏈接而沒有任何提示。這種類型大部分出現(xiàn)在企業(yè)網(wǎng)站和個(gè)人主頁，如果說處理的好，會(huì)給人帶來賞心悅目的感覺。網(wǎng)頁設(shè)計(jì)調(diào)研報(bào)告全文共26頁，當(dāng)前為第5頁。網(wǎng)頁設(shè)計(jì)的色彩一）網(wǎng)頁配色基本概念

（1）白紙黑字是永遠(yuǎn)的主題，誰都說不出不好來。

（2）網(wǎng)頁最常用流行色

·蘭色——藍(lán)天白云，沉靜整潔的顏色。

·綠色——綠白相間，雅致而有生氣。

·橙色——活潑熱烈，標(biāo)準(zhǔn)商業(yè)色調(diào)。

·暗紅——寧重、嚴(yán)肅、高貴，需要配黑和灰來壓制刺激的紅色，

（3）顏色的忌諱

·忌臟——背景與文字內(nèi)容對(duì)比不強(qiáng)烈，灰暗的背景令人沮喪！

·忌純——艷麗的純色對(duì)人的刺激太強(qiáng)烈抗議，缺乏內(nèi)涵。

·忌跳——再好看的顏色，也不能脫離整體。脫離群眾是自取其辱！

·忌花——要有一種主色貫穿其中，主色并不時(shí)面積最大的顏色，而是最重要，最能揭示和反映主題的顏色，就象領(lǐng)導(dǎo)者一樣，雖然在人數(shù)上居少數(shù)，但起決定作用。

·忌粉——顏色淺固然顯的干凈，但如果對(duì)比過弱，整得蒼白無力了，就象病夫一樣無可救藥。

·藍(lán)色忌純，綠色忌黃，紅色忌艷。

（4）幾種固定搭配

·藍(lán)白橙——藍(lán)為主調(diào)。白底，藍(lán)標(biāo)題欄，橙色按鈕或ICON做點(diǎn)綴。

·綠白蘭——綠為主調(diào)。白底，綠標(biāo)題欄，蘭色或橙色按鈕或ICON做點(diǎn)綴。

·橙白紅——橙為主調(diào)。白底，橙標(biāo)題欄，暗紅或桔紅色按鈕或ICON做點(diǎn)綴。

·暗紅黑——暗紅主調(diào)。黑或灰底，暗紅標(biāo)題欄，文字內(nèi)容背景為淺灰色。網(wǎng)頁設(shè)計(jì)調(diào)研報(bào)告全文共26頁，當(dāng)前為第6頁。網(wǎng)頁設(shè)計(jì)的理念（1）內(nèi)容決定形式

先把內(nèi)容充實(shí)上，再分區(qū)塊，再定色調(diào)，再處理細(xì)節(jié)。

（2）先整體，后局部，最后回歸到整體。

全局考慮，把能填上的都填上，占位置。然后定基調(diào)，分模塊設(shè)計(jì)。最后調(diào)整不滿意的幾個(gè)局部細(xì)節(jié)。

（3）功能決定設(shè)計(jì)方向

·看網(wǎng)站的用途，決定設(shè)計(jì)思路.商業(yè)性的就要突出贏利目的；政府型的就要突出形象和權(quán)威性的文章；教育性的，就要突出師資和課程。網(wǎng)頁設(shè)計(jì)調(diào)研報(bào)告全文共26頁，當(dāng)前為第7頁。網(wǎng)頁設(shè)計(jì)需要注意的問題１、頁面內(nèi)容要新穎網(wǎng)頁內(nèi)容的選擇要不落俗套，要重點(diǎn)突出一個(gè)“新”字，這個(gè)原則要求我們在設(shè)計(jì)網(wǎng)站內(nèi)容時(shí)不能照抄別人的內(nèi)容，要結(jié)合自身的實(shí)際情況創(chuàng)作出一個(gè)獨(dú)一無二的網(wǎng)站。我們在設(shè)計(jì)網(wǎng)頁時(shí)，要把功夫下在選材上。選材要盡量做到“少”而“精”,又必須突出“新”

２、網(wǎng)頁命名要簡潔３、要及時(shí)更新網(wǎng)頁４、注意視覺效果設(shè)計(jì)Web頁面時(shí)，一定要用1024*768的分辨率來分別觀察。許多瀏覽器使用1024*768的分辨率，盡管在1280*1024高分辨率下一些Web頁面看上去很具吸引力，但在1024*768的模式下可能會(huì)黯然失色。作一點(diǎn)小小的努力，設(shè)計(jì)一個(gè)在不同分辨率下都能正常顯示的網(wǎng)頁。5、網(wǎng)頁內(nèi)容要易讀6、善用表格來布局不要把一個(gè)網(wǎng)站的內(nèi)容象作報(bào)告似的一二三四地羅列出來，要注意多用表格把網(wǎng)站內(nèi)容的層次性和空間性突出顯示出來，使人一眼就能看出你的網(wǎng)站重點(diǎn)突出，結(jié)構(gòu)分明。網(wǎng)頁設(shè)計(jì)調(diào)研報(bào)告全文共26頁，當(dāng)前為第8頁。網(wǎng)頁設(shè)計(jì)需要注意的問題7、少用特殊字體8、多學(xué)習(xí)和使用HTML9、盡量少用Java程序不要使用大幅面的Java程序,能夠用javascript替代效果的則盡量不要使用java.因?yàn)槟壳皝碇vjava的運(yùn)行速度實(shí)在慢的讓人無法忍受，往往使瀏覽者沒有耐心等頁面全部顯示出來，這樣你的精心設(shè)計(jì)便毫無效果啦。10、少放網(wǎng)站地圖網(wǎng)頁設(shè)計(jì)調(diào)研報(bào)告全文共26頁，當(dāng)前為第9頁。網(wǎng)頁設(shè)計(jì)需要注意的問題１1、要為圖片附加注釋文字12.不宜多用閃爍文字１3、每個(gè)頁面都要有導(dǎo)航按鈕１4、避免長文本頁面１5、網(wǎng)頁風(fēng)格要統(tǒng)一你網(wǎng)頁上所有的圖像、文字，包括像背景顏色、區(qū)分線、字體、標(biāo)題、注腳什么的，要統(tǒng)一風(fēng)格，貫穿全站。這樣子讀者看起來舒服、順暢，會(huì)對(duì)你的網(wǎng)站留下一個(gè)“很專業(yè)”的印象。16、動(dòng)畫最多只用一個(gè)２０、善用圖像用戶在網(wǎng)上四處漫游，你必須設(shè)法吸引和維護(hù)他們對(duì)你的主頁的注意力。主頁上最好有醒目的圖像、新穎的畫面、美觀的字款，使其別具特色，令人過目不忘。圖像的內(nèi)容應(yīng)有一定的實(shí)際作用，切忌虛飾浮夸。注意圖畫可以彌補(bǔ)文字之不足，但并不能夠完全取代文字。制作主頁時(shí)，必須注意將圖像所連接的重要信息或聯(lián)接其他頁面的指示用文字重復(fù)表達(dá)幾次，同時(shí)要注意避免使用過大的圖像，如果不得不放置大的圖像在網(wǎng)站上，就最好使用Thumbnails軟件，把圖像的縮小版本的預(yù)覽效果顯示出來，這樣用戶就不必浪費(fèi)金錢和時(shí)間去下載他們根本不想看的大圖像。網(wǎng)頁設(shè)計(jì)調(diào)研報(bào)告全文共26頁，當(dāng)前為第10頁。網(wǎng)頁設(shè)計(jì)需要注意的問題２１、網(wǎng)站導(dǎo)航要清晰２２、最好不用記數(shù)器２３、不能忽視錯(cuò)別字２４、不要用框架２５、使用著名的插件２６、使網(wǎng)站具有交互功能一個(gè)靜態(tài)網(wǎng)頁始終給人一種呆板的感覺，缺少一種活力和生氣。最好在網(wǎng)站上提供一些回答問題的工具以及其他具有交互性能的設(shè)計(jì)，使得訪問者能從網(wǎng)站上獲得交互的信息，從而使訪問者有一種參與網(wǎng)絡(luò)建設(shè)的新鮮感和成就感。網(wǎng)頁設(shè)計(jì)調(diào)研報(bào)告全文共26頁，當(dāng)前為第11頁。進(jìn)度表2011年11月3日—2011年11月10日收集整理資料2011年11月11日2011年11月18日調(diào)研2011年11月18日2011年11月25日設(shè)計(jì)草圖2011年11月26日2011年12月1日定稿2011年12月1日2011年12月10日總結(jié)制作PPT2011年12月11日2011年12月25日制作網(wǎng)頁網(wǎng)頁設(shè)計(jì)調(diào)研報(bào)告全文共26頁，當(dāng)前為第12頁。資料分析我搜集了一些自己比較喜歡的網(wǎng)站做了分析，我打算用插畫的形式做網(wǎng)頁設(shè)計(jì)，所以搜集的大多是插畫風(fēng)格的網(wǎng)站，而風(fēng)格大多是簡潔風(fēng)格，一目了然。網(wǎng)頁設(shè)計(jì)調(diào)研報(bào)告全文共26頁，當(dāng)前為第13頁?？蓯埏L(fēng)格這個(gè)網(wǎng)站屬于可愛風(fēng)格的網(wǎng)站，運(yùn)用插畫做背景，風(fēng)格清新簡潔，顏色運(yùn)用不大明顯的對(duì)比色，既和諧又有對(duì)比。導(dǎo)航一目了然，結(jié)構(gòu)清晰。主體突出網(wǎng)頁設(shè)計(jì)調(diào)研報(bào)告全文共26頁，當(dāng)前為第14頁?，F(xiàn)代時(shí)尚風(fēng)格這是國外的一個(gè)個(gè)人網(wǎng)站，很有特色，背景是低調(diào)的黑色，字體用高級(jí)灰，既醒目對(duì)比又不會(huì)太強(qiáng)烈，而當(dāng)用戶開始瀏覽時(shí)字體則變成了白色，在灰色字體中很醒目便于查找，導(dǎo)航的設(shè)計(jì)很有創(chuàng)意，整個(gè)設(shè)計(jì)風(fēng)格時(shí)尚現(xiàn)代。網(wǎng)頁設(shè)計(jì)調(diào)研報(bào)告全文共26頁，當(dāng)前為第15頁。個(gè)性風(fēng)格這也是國外的一個(gè)個(gè)人網(wǎng)站，網(wǎng)頁設(shè)計(jì)的很有個(gè)性，頁面背景都是一樣的，改變的只是照片和旁邊的文字，設(shè)計(jì)簡潔，操作簡單，很有個(gè)人特色。網(wǎng)頁設(shè)計(jì)調(diào)研報(bào)告全文共26頁，當(dāng)前為第16頁。源畫堂個(gè)人網(wǎng)頁設(shè)計(jì)賞析源畫堂的個(gè)人網(wǎng)頁設(shè)計(jì)是非常簡潔的，首頁就是網(wǎng)站名稱、圖和menu網(wǎng)頁設(shè)計(jì)調(diào)研報(bào)告全文共26頁，當(dāng)前為第17頁。這是二級(jí)頁面，是個(gè)人作品展示，用一些整齊的小方格來排列自己的作品，雖然方便瀏覽，但是稍顯單調(diào)，如果有大有小會(huì)比較有律動(dòng)感，也不會(huì)讓人覺得乏味。網(wǎng)頁設(shè)計(jì)調(diào)研報(bào)告全文共26頁，當(dāng)前為第18頁。這是最后一級(jí)頁面，是個(gè)人的資料，也是從上至下的排版方式，簡潔明了，也很有個(gè)人風(fēng)格。網(wǎng)頁設(shè)計(jì)調(diào)研報(bào)告全文共26頁，當(dāng)前為第19頁。網(wǎng)頁設(shè)計(jì)草圖這是主頁面，由三個(gè)部分組成，一個(gè)是關(guān)于我個(gè)人的介紹，一個(gè)是我的插畫集，還有一個(gè)是我的攝影集網(wǎng)頁設(shè)計(jì)調(diào)研報(bào)告全文共26頁，當(dāng)前為第20頁。網(wǎng)頁設(shè)計(jì)草圖這個(gè)是介紹我個(gè)人的頁面，點(diǎn)返回可以回到主菜單網(wǎng)頁設(shè)計(jì)調(diào)研報(bào)告全文共26頁，當(dāng)前為第21頁。網(wǎng)頁設(shè)計(jì)草圖這個(gè)是我的插畫集，我只鏈接了一個(gè)頁面，點(diǎn)擊古風(fēng)少年可進(jìn)入下一個(gè)頁面觀看我的插畫，點(diǎn)擊左上角的返回可回到主頁。網(wǎng)頁設(shè)計(jì)調(diào)研報(bào)告全文共26頁，當(dāng)前為第22頁。網(wǎng)頁設(shè)計(jì)草圖這是插畫集的內(nèi)頁，點(diǎn)擊返回可回到插畫集主頁面網(wǎng)頁設(shè)計(jì)調(diào)研報(bào)告全文共26頁，當(dāng)前為第23頁。