站點分類及解析-課件

站點分類及解析一、

新聞、搜索二、

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

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

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

六、

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

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

個人主頁九、

門戶站點站點分類及解析一、新聞、搜索一

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

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

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

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

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

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

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

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

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

設(shè)計企業(yè)站點，應(yīng)該注意以下事項：

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

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

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

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

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

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

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

3.非常規(guī)型藝術(shù)類站點圖22zoorex圖22zoorex七

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

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

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

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