站點分類及解析-課件

站點分類及解析一、

新聞、搜索二、

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

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

企業(yè)、電子商務

六、

文學、教育、藝術七、

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

個人主頁九、

門戶站點一

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

圖22zoorex七

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

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

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

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