站點(diǎn)分類及解析-課件

站點(diǎn)分類及解析一、

新聞、搜索二、

女性、男性、兒童、時(shí)尚、生活、體育三、IT、政府、財(cái)經(jīng)、醫(yī)療、旅游、短信四、

娛樂、游戲、節(jié)慶、通知五、

企業(yè)、電子商務(wù)

六、

文學(xué)、教育、藝術(shù)七、

電子郵局、社區(qū)、論壇、留言、電子報(bào)八、

個人主頁九、

門戶站點(diǎn)一

新聞、搜索1.新聞類站點(diǎn)新聞網(wǎng)頁設(shè)計(jì)和報(bào)紙排版的感覺很類似。新聞類站點(diǎn)受傳統(tǒng)媒體的影響，當(dāng)頁面排版感覺類似報(bào)紙時(shí)，便會讓絕大部分瀏覽者感到親切，很容易習(xí)慣和接受。新浪、163等的頁面幾乎沒有空隙地排滿了信息，如圖1所示。圖1新浪新聞和pcweek網(wǎng)絡(luò)報(bào)紙2.搜索頁面門戶類、搜索引擎類站點(diǎn)對搜索的頁面有較高的要求，應(yīng)盡量采用開放式的框架結(jié)構(gòu)，色彩沒有太多要求。不過要注意搜索框等CSS設(shè)置，以小的環(huán)節(jié)達(dá)到美化頁面的效果，同時(shí)確立頁面風(fēng)格。值得一提的是簡單的Google網(wǎng)站(見圖2)，該站點(diǎn)的精彩之處是它的標(biāo)志。根據(jù)不同節(jié)慶、事件，Google擁有多套標(biāo)志更換，如圖3所示。圖2Google搜索圖3Google的Logo二、女性、男性、兒童、時(shí)尚、生活、體育1.女性、男性站點(diǎn)女性站點(diǎn)在網(wǎng)絡(luò)上占很重要的地位。女性網(wǎng)民幾乎達(dá)到上網(wǎng)人數(shù)的45％左右。女性站點(diǎn)的內(nèi)容包括了內(nèi)容較多，從美容、化裝、時(shí)尚、服裝、健美、醫(yī)療、飲食、旅游到兒童、文學(xué)、教育、生活等等。女性關(guān)注的事物不僅僅跟女性有關(guān)，和生活也密切相關(guān)，這類站點(diǎn)信息面可以鋪得很大，網(wǎng)站可以做得很大。

針對女性站點(diǎn)，設(shè)計(jì)可柔美、高雅、時(shí)尚感強(qiáng)，采用曲線的框架結(jié)構(gòu)，插圖的選取宜唯美、俏皮，色彩可以以純度低的色相系為主，或高雅的流行色為主等。擺放一些可愛的頁面小飾物，女孩子們會很喜歡。為了盡可能地出“新”出“奇”，風(fēng)格設(shè)計(jì)可以走時(shí)尚路線。注意流行色的搭配，框架大膽一些。例如，she做得就非常好(見圖4)。圖4she2.兒童類、卡通類站點(diǎn)兒童類站點(diǎn)以色彩鮮亮、活潑為主(見圖5)，網(wǎng)頁可以采用無骨架的設(shè)計(jì)，這樣更自由一些?？ㄍ愓军c(diǎn)的顏色則沒有限制，根據(jù)內(nèi)容框架也可以理智一些或感性一些。網(wǎng)站均可以選擇全Flash來制作，這樣更顯特色。圖5迪斯尼英文網(wǎng)站3.時(shí)尚類、生活類站點(diǎn)時(shí)尚類站點(diǎn)最主要的是要表現(xiàn)時(shí)尚感，而生活類站點(diǎn)要體現(xiàn)生活氣息。色彩上，時(shí)尚類站點(diǎn)要注意流行色彩，如灰、黑、棕、米色等；生活類站點(diǎn)則要溫和一些，選用一些淡雅的顏色，如藍(lán)、紫、米色等。插圖的選用：時(shí)尚類站點(diǎn)選擇時(shí)尚類的圖片，以及有速度感和張力感的插圖；生活類站點(diǎn)要選擇一些和生活相關(guān)、貼近生活的圖片。這兩類站點(diǎn)都需要注意細(xì)節(jié)的地方，運(yùn)用細(xì)節(jié)調(diào)節(jié)頁面氛圍，渲染頁面氣息，如圖6、圖7所示。圖6esprit圖7vidalsassoon4.體育新聞類、運(yùn)動產(chǎn)品類站點(diǎn)體育新聞類站點(diǎn)和純新聞類站點(diǎn)有相同之處。國內(nèi)外各類體育比賽報(bào)道、體育明星新聞以及賽場風(fēng)云等每日信息量也很大。與純新聞類站點(diǎn)不同的是，體育類站點(diǎn)更突出時(shí)代感、運(yùn)動精神以及緊迫感。競技精神一定要在標(biāo)志、頁面中強(qiáng)烈突出。

運(yùn)動產(chǎn)品類的網(wǎng)站頁面設(shè)計(jì)要有時(shí)尚感，因?yàn)轶w育運(yùn)動也是當(dāng)今很時(shí)尚的活動。頁面設(shè)計(jì)要輕松有張力，色彩應(yīng)多元化，插圖可以隨意一些，這些應(yīng)根據(jù)產(chǎn)品的消費(fèi)傾向去選取?？蚣茉O(shè)計(jì)可根據(jù)信息要求確定。頁面的張力感可以用運(yùn)動產(chǎn)品的攝影圖片來巧妙地實(shí)現(xiàn)。讀者也可以借鑒著名品牌nike、adidas的網(wǎng)站設(shè)計(jì)(見圖8和圖9)。圖8nikefootball圖9adidas三IT、政府、財(cái)經(jīng)、醫(yī)療、旅游、短信1.IT資訊類站點(diǎn)數(shù)碼感、時(shí)代感、互動感是IT給人們的感覺。IT咨詢類站點(diǎn)在職能上類似于新聞類站點(diǎn)，但是注意氣氛不要太擁擠。色彩可以選擇清爽的藍(lán)色、綠色，灰色，黃色等，如圖10所示。圖10tiendapc2.政府站點(diǎn)政府類網(wǎng)站講究莊重的氣氛和地區(qū)的特色，應(yīng)根據(jù)具體政府網(wǎng)特色選擇適當(dāng)?shù)念伾?，不能一概而論?？蚣茉O(shè)計(jì)上應(yīng)盡可能地選擇三欄式結(jié)構(gòu)，這種開放式的結(jié)構(gòu)顯得大氣，很適合政府類網(wǎng)，如圖11所示。圖11濱海政府網(wǎng)的第二、三版首頁3.財(cái)經(jīng)站點(diǎn)財(cái)經(jīng)網(wǎng)站頁面氣氛應(yīng)屬于較緊張的感覺，選擇以暖色為主的配色，會有助于緩解緊張和壓力。框架設(shè)計(jì)應(yīng)根據(jù)信息空間的大小而定，大站則可以選擇分欄式結(jié)構(gòu)，小一些的站可以選擇區(qū)域排版，如圖12所示。圖12大鵬證券4.醫(yī)療站點(diǎn)綠色、藍(lán)色等素雅的顏色很適合醫(yī)療類的網(wǎng)站，而大紅大黃給人的感覺過于興奮，不適宜在醫(yī)療類的站點(diǎn)上使用。醫(yī)療健康網(wǎng)站的插圖應(yīng)選擇較為舒適的圖片，不要制造緊張感，如果有動畫，節(jié)拍要放慢。5.旅游站點(diǎn)一想到旅游，很容易讓人聯(lián)想到天空、大地、海洋等，綠色、黃色、藍(lán)色都很適合旅游類站點(diǎn)。旅游類站點(diǎn)的插圖很容易選擇，名勝古跡、風(fēng)土人情等各種圖片拿到頁面上都會給人帶來憧憬。頁面設(shè)計(jì)要輕松，條理清晰，不要給人嘈雜的感覺。6.短信站點(diǎn)韓國的短信類網(wǎng)站設(shè)計(jì)都相當(dāng)出色(見圖13)，我們可以借鑒一下，多利用像素風(fēng)格或是金屬感覺，動態(tài)圖片多一些，色彩隨意，Sms.163的粉紅色就很成功。圖13韓國的短信站點(diǎn)四

娛樂、游戲、節(jié)慶、通知1.娛樂類、游戲類站點(diǎn)娛樂類站點(diǎn)瀏覽者的視線通常被那些明星的各類新聞所吸引，這類站點(diǎn)最突出的不是時(shí)尚感，而是娛樂圈的紛亂的味道，以及音樂的感覺和電影的感覺，還有就是互動感。這類感覺很容易達(dá)到，插圖選用明星照片、電影海報(bào)、CDCover，自然就可以達(dá)到想要的感覺。

色彩選擇艷麗一些的即可。娛樂網(wǎng)站圖片較多，圖片設(shè)計(jì)和字體排版設(shè)計(jì)顯得尤為重要，把握不準(zhǔn)時(shí)可以參考一下港臺設(shè)計(jì)的一些娛樂網(wǎng)站。另外，加一點(diǎn)動態(tài)效果，感覺會很好，如圖14所示。游戲類站點(diǎn)可以選擇金屬、像素風(fēng)格，也可添加游戲主角作為插圖。黑色背景能增加神秘感和科幻感，這種頁面效果一定很精彩。圖14now.hk2.慶典頁面中國人注重節(jié)日慶典，每當(dāng)春節(jié)、勞動節(jié)、國慶節(jié)、母親節(jié)、父親節(jié)時(shí)，都會要求設(shè)計(jì)相應(yīng)的慶典頁面。設(shè)計(jì)這些頁面要抓住民族特色，并根據(jù)節(jié)日的特點(diǎn)來設(shè)計(jì)，設(shè)計(jì)的時(shí)候要考慮到如何烘托好節(jié)日氣氛，并選擇合適的插圖和背景，如圖15所示。對于網(wǎng)站周年慶之類紀(jì)念日，可根據(jù)各自的信息類型來設(shè)計(jì)慶典頁面，或者采用彈出式窗口，或者添加一個歡迎界面等。圖1521cn賀年3.通知頁面針對緊急通知，經(jīng)常采用以下三種方式來設(shè)計(jì)頁面：

(1)利用彈出式窗口。由于很多人不太注意，所以效果不是很好。

(2)利用橫幅廣告條。與小窗口相比，其效果能好一些。可設(shè)計(jì)成動態(tài)效果，也可以采用跳躍性的色彩和吸引人的廣告用語。

(3)在頁面的某個位置打小廣告、發(fā)新聞或者利用滾動文字。這些方式可能不夠顯眼，可根據(jù)通知的重要性來選擇合適的方式。五

企業(yè)、電子商務(wù)1.企業(yè)類站點(diǎn)企業(yè)類站點(diǎn)(見圖16)在網(wǎng)絡(luò)上占很大比例，但是往往宣傳力度不夠，大部分網(wǎng)站的訪問量都很低。根據(jù)各自的特點(diǎn)，有針對性地進(jìn)行一些宣傳是有必要的。圖16金山電線電纜股份有限公司

設(shè)計(jì)企業(yè)站點(diǎn)，應(yīng)該注意以下事項(xiàng)：

(1)根據(jù)企業(yè)類型選擇合適的插圖和風(fēng)格定位。

(2)根據(jù)客戶要求和訪問者需求選擇信息。

(3)針對企業(yè)的形象，最好運(yùn)用CI色系，搭配合適風(fēng)格的頁面設(shè)計(jì)。

(4)若信息量少，可盡量選用字號大的文字。

(5)如果有英文版，應(yīng)該有針對英文版的設(shè)計(jì)方案。針對兩種語言的不同特點(diǎn)，設(shè)計(jì)頁面也不盡相同。(6)如果大型企業(yè)站點(diǎn)中包含很多行業(yè)信息，最好采取開放式框架，這可以給人以親切的感覺，對企業(yè)形象也很有幫助。所以要選擇清爽的顏色，盡量不要含有個人色彩。2.微型企業(yè)站點(diǎn)一部分小型企業(yè)只需要有一個宣傳性的網(wǎng)站(見圖17)，網(wǎng)站中欄目較少，信息量也很少，頁面比較空，這時(shí)最需要注意的是頁面框架和頁面背景。頁面框架可以采用通欄，盡量做得細(xì)致，以刻畫企業(yè)形象，給瀏覽者樹立良好的感覺。另外，可以根據(jù)具體情況選擇一些時(shí)代感、科技感強(qiáng)的插圖。圖17信息量小的企業(yè)站點(diǎn)3.電子商務(wù)類站點(diǎn)電子商務(wù)類站點(diǎn)，尤其是在線買賣商務(wù)站點(diǎn)(見圖18)，應(yīng)該多注意一些細(xì)節(jié)問題。圖18gap六

文學(xué)、教育、藝術(shù)1.文學(xué)、教育類站點(diǎn)文學(xué)、教育類的網(wǎng)站應(yīng)加強(qiáng)功能性設(shè)計(jì)。這類站點(diǎn)中主要是文字類信息(見圖19)，而且在線閱讀量很大，加強(qiáng)易用性，會給瀏覽者親切舒適的感覺。網(wǎng)頁的色彩要柔和，不要傷眼睛，盡力選擇白為底色，配黑色的字體顏色；網(wǎng)頁主色調(diào)應(yīng)根據(jù)具體情況來定，插圖則選擇大氣自然的圖片，頁面干凈整潔很重要(見圖20)。圖19bookzone圖20榕樹下2.常規(guī)型藝術(shù)類站點(diǎn)藝術(shù)站點(diǎn)常規(guī)與否主要表現(xiàn)在框架設(shè)計(jì)上。常規(guī)的藝術(shù)類網(wǎng)站在頁面格局上多選擇分欄式或區(qū)域排版式的框架設(shè)計(jì)(見圖21)?。

這樣的站點(diǎn)適合藝術(shù)類信息網(wǎng)站。瀏覽這部分信息的人對美感要求較高，所以這類網(wǎng)站的頁面設(shè)計(jì)應(yīng)注意細(xì)節(jié)修飾，給人精致的感覺。圖21neuegalerie(newyork)3.非常規(guī)型藝術(shù)類站點(diǎn)非常規(guī)的藝術(shù)類網(wǎng)站在頁面格局上選擇無骨架設(shè)計(jì)的結(jié)構(gòu)(見圖22)。這樣的站點(diǎn)風(fēng)格自由、怪異、新穎,??讓信息內(nèi)容決定頁面設(shè)計(jì)，不過如果圖片量多，應(yīng)注意考慮下載速度等。

圖22zoorex七

電子郵局、社區(qū)、論壇、留言、電子報(bào)1.電子郵局國內(nèi)電子郵局類站點(diǎn)的設(shè)計(jì)都十分簡陋(見圖23)。電子郵局頁面設(shè)計(jì)應(yīng)特別注意圖標(biāo)、按鈕等小細(xì)節(jié)物件的設(shè)計(jì)，充分利用這些小物件確立頁面風(fēng)格。圖23hotmail2.社區(qū)網(wǎng)絡(luò)社區(qū)不等同于論壇，社區(qū)中包含的內(nèi)容較多。社區(qū)頁面設(shè)計(jì)和社區(qū)的程序設(shè)計(jì)密不可分，設(shè)計(jì)受到程序的影響。具體設(shè)計(jì)時(shí)，應(yīng)根據(jù)社區(qū)的具體性質(zhì)來確定頁面設(shè)計(jì)的顏色、框架。圖24的卡哆家族是一個頁面設(shè)計(jì)較為新穎的社區(qū)，值得學(xué)習(xí)借鑒。圖24kaduo3.論壇配色現(xiàn)在網(wǎng)絡(luò)中到處都是VBB代碼的論壇(見圖25)。這類論壇的框架風(fēng)格一樣，可以修改的是論壇的表格配色、圖片背景、超級鏈接的顏色等，最重要的是，還可以修改論壇圖標(biāo)，如圖26所示。圖25VBB論壇

值得一提的是，ultrashock討論區(qū)(ultrashock/)是最酷的VBB(見圖28)，論壇頁面和Flash框架感覺完全融合在一起，感覺很棒。圖26論壇圖標(biāo)圖27refresh.newthread圖28ultrashock4.留言本風(fēng)格對于留言本的風(fēng)格，可以多學(xué)習(xí)借鑒日本的留言本(見圖29)。日本的留言本都很有特點(diǎn)，而且很精致、漂亮?？梢栽谌毡狙呕⑸纤阉饕幌绿峁┟赓M(fèi)程序的站點(diǎn)，查找留言本即可。如果有技術(shù)支持的站點(diǎn)設(shè)計(jì)，論壇、留言本、社區(qū)均應(yīng)該與頁面設(shè)計(jì)統(tǒng)一風(fēng)格?，F(xiàn)在使用Flash制作的留言本等互動程序也逐漸多起來，如圖30所示。圖29bbs圖30bimbern留言本5.電子報(bào)電子報(bào)可以當(dāng)作報(bào)紙來設(shè)計(jì)。如Pchome活動?？?見圖31)選擇了帶有pop海報(bào)的風(fēng)格設(shè)計(jì)，給人一種海報(bào)的感覺。“阿貴?？?見圖32)則美術(shù)設(shè)計(jì)強(qiáng)一些，更符合網(wǎng)絡(luò)新媒體的形式味道。圖33中的“精彩購物”偏向傳統(tǒng)報(bào)紙的感覺。應(yīng)根據(jù)電子報(bào)內(nèi)容的不同來設(shè)計(jì)合適的報(bào)紙風(fēng)格，不要千篇一律。圖31PChome活動?？瘓D32阿貴電子報(bào)圖33精彩購物6.聊天室國內(nèi)的聊天室絕大部分還屬于HTML的形式，這種聊天室的版式設(shè)計(jì)大致雷同，主要注意按鈕設(shè)計(jì)、圖標(biāo)繪制等方面即可(見圖34)。另外，程序設(shè)計(jì)師要開放更多的功能，為網(wǎng)民服務(wù)。圖34普通聊天室的按鈕

現(xiàn)在國外已經(jīng)有了很多Flash風(fēng)格的聊天室(見圖35)，你可以自己選擇卡通角色，并且任意走動到某個角落，采用虛擬現(xiàn)實(shí)的方法“搭訕”、“問好”和“聊天”。有興趣或有技術(shù)條件的設(shè)計(jì)者可以嘗試一下Flash風(fēng)格的聊天室設(shè)計(jì)。圖35Flash聊天室八

個人主頁1.內(nèi)容豐富型內(nèi)容比較豐富的個人站點(diǎn)可以選擇大氣的骨架設(shè)計(jì)，開放式的結(jié)構(gòu)，外加較柔和的配色(見圖36)。具體情況根據(jù)信息內(nèi)容而定。由于是個人主頁，設(shè)計(jì)可以大膽一些，除去條條框框，盡可能體現(xiàn)特色。一部分大型的個人站點(diǎn)，已經(jīng)走向商業(yè)化發(fā)展之路。無論怎樣，個人站點(diǎn)必須保證網(wǎng)站特色，網(wǎng)站才能持久發(fā)展下去。圖36andy雜志2.內(nèi)容適中型根據(jù)自己的能力儲備信息，欲速則不達(dá)。在沒有大容量信息儲備時(shí)，頁面設(shè)計(jì)可以不要太過大氣，可選擇區(qū)域排版的骨架設(shè)計(jì)(見圖37)。當(dāng)