JEE課程設(shè)計及項目實訓(xùn)教學(xué)中的項目欣賞-各種Web頁面設(shè)計效果欣賞

1、J2EE項目實訓(xùn)教學(xué)中的項目熱身各種Web頁面設(shè)計效果欣賞1、中國網(wǎng)站首頁設(shè)計有四大特色：“長，閃，擠，花”（摘錄自/forum.php?mod=viewthread&tid=2280243）（1）先說這個“長”中國網(wǎng)站的頁面真是長啊，以至于坐在電腦前瀏覽的時候經(jīng)常會想，這個頁面的最低端會不會已經(jīng)搭拉到我們的腳面上了。我們的萬里長城是第幾大奇跡來著？反正中國的網(wǎng)站應(yīng)該緊排在她后面。1）我們的大型門戶網(wǎng)站恐怕應(yīng)該是長頁面的領(lǐng)軍者吧現(xiàn)在能生存下來的大型門戶各個實力不凡，又紛紛上市，其他網(wǎng)站能與他們頁面相似應(yīng)該也能說明實力相似吧，這幾家大型門戶已經(jīng)給用戶形成了“長則是好”的印象，于是眾多網(wǎng)站都紛紛“

2、長”起來了。無論是綜合性網(wǎng)站還是專業(yè)性網(wǎng)站，只要有內(nèi)容，就能做多長就做多長，沒有內(nèi)容，抄襲別人內(nèi)容也要做長，以至于不少實力有限的網(wǎng)站只是首頁很長，到了欄目頁面（二級頁面）就簡陋的可憐了。2）長的基礎(chǔ)就是要內(nèi)容要多這些眾多的長網(wǎng)站在組織內(nèi)容的思路上基本是一致的，就是把二級頁面的內(nèi)容摘要的放在首頁上。首頁分成若干個相應(yīng)的通欄的大塊兒（這樣可以逐個部分的下載頁面，易于顯示），再在每兩塊之間加一條廣告，最后再在頁面的最上面加一個更綜合的區(qū)域，所謂的重中之重，這樣以來頁面想短都短不了?？聪旅娴?HYPERLINK / /網(wǎng)站3）按照Jakob Nielsen的說法網(wǎng)站首頁的長度不應(yīng)該超過4屏。當然這個準

3、則也未必就那么準確，但是至少應(yīng)該承認頁面不是越長越好的。（2）說說“閃”就是網(wǎng)頁上能動的東西動畫。主要是Gif動畫，flash動畫，腳本語言實現(xiàn)的圖片交替效果，還有就是彈出窗口。動畫對網(wǎng)頁表現(xiàn)本應(yīng)該是個很好的補充，但是現(xiàn)在的實際效果是對網(wǎng)頁的干擾，因為動畫從一開始就扮演著廣告的角色。雖然將各種形式的動畫應(yīng)用于網(wǎng)站在國外的網(wǎng)站上也常見，但是中國網(wǎng)站上的動畫實在是太多了?？峙乱彩且驗橹袊W(wǎng)站頁面長吧，能放動畫的空間自然也就大了。整個頁面到處都在不停的閃?？茖W(xué)家已經(jīng)證實，在月球上是看不到萬里長城的，但是我想，應(yīng)該是可以看到中國網(wǎng)頁的，它們不僅長，而且還在不停的閃爍。這些動畫通常是廣告，網(wǎng)站要生存，要

4、有經(jīng)濟效益，這是可以理解的，但卻不可接受，尤其是太多的時候。最不可接受的是一些網(wǎng)站會把自己的欄目名稱，網(wǎng)站logo之類的很重要的內(nèi)容也做成動畫，以為這樣可以更醒目，要知道，絕大多數(shù)用戶是經(jīng)驗豐富的，他們看到動畫閃來閃去就會認為那是廣告的，盡管你不是，那也活該，誰讓你亂閃來著。雖然彈出窗口里的內(nèi)容不一定是動畫，但是它“噌”的一下彈出來，著實是夠“動”的，就動畫的效果而言，絕對是最具視覺沖擊力的。還好，現(xiàn)在有越來越多的雷鋒式的好公司提供了能屏蔽彈出窗口的工具。腳本語言實現(xiàn)的圖片交替效果目前主要是用在網(wǎng)站頭條的圖片報道上，雖然是動，分散用戶的注意力，好在這種方式還是為了給用戶提供盡可能多的信息，應(yīng)該

5、值得肯定，也應(yīng)該是動畫應(yīng)用于網(wǎng)絡(luò)的發(fā)展方向，只是不知道什么時候，哪位設(shè)計師靈感突現(xiàn)，把廣告也偽裝成這種樣子，應(yīng)該能在一片罵聲中為公司贏得不少經(jīng)濟效益。（3）第三是“擠”我們的網(wǎng)站看上去滿滿當當?shù)?，比公共汽車還擠。每天早上都是擠公共汽車，然后擠地鐵，擠電梯，擠著打卡，好容易坐下了，打開電腦就不要再那么擠了，大家站開點兒吧，網(wǎng)頁上有的是地兒。與英文相比，中文本身就顯得比較復(fù)雜，對于有鏈接的文字中國網(wǎng)站又往往更傾向于傳統(tǒng)的隨時保持下劃線的方式，再加上小的幾乎不存在的行間距（顯然，這里夸張了，至少還要有劃下劃線的地兒），使得頁面看上去分外豐滿。（4）第四是“花”中國網(wǎng)站的色彩之絢爛，幾乎無以復(fù)加。前面

6、分析了首頁的構(gòu)成方式將各個欄目摘要排放在首頁上，通常每一個欄目會有一種主色調(diào)，這樣一來，首頁上的色彩自然就很豐富了。當然，分欄目確定主色調(diào)的設(shè)計方式本身并沒有錯誤，也不足以搞“花”頁面，然而實際情況卻更復(fù)雜，以文字為例，未點擊的鏈接文字有黑色和藍色，重點的文字會用紅色（重點通常還很多），點擊后的文字鏈接是紫色，無鏈接且不重要的文字是灰色，此外為了突出某一個重點內(nèi)容會添加一個醒目的背景色或文字顏色網(wǎng)頁設(shè)計師為了表明自己工作用心，會給每一個子欄目的標題部分設(shè)計一個很具有特色的背景，這些文字再與數(shù)不勝數(shù)的圖片、動畫交相輝映，使得用戶可以在一個頁面上將電腦可以顯示的全部色彩盡收眼底。網(wǎng)頁設(shè)計師實際上根

7、本不需要絞盡腦汁為頁面設(shè)定主色調(diào)了，所有的頁面色調(diào)都已經(jīng)設(shè)定好了彩色。2、為什么中國網(wǎng)站會設(shè)計成這個樣子呢？（1）造成“長，閃，擠，花”問題的實質(zhì)是一個“多”字中國網(wǎng)站首頁上內(nèi)容多，重點多，欄目多，圖片多，廣告多，該多的多，不該多的也多，要多多，有多多。 “多”是中國網(wǎng)站的特點，更是中國社會的現(xiàn)實狀況。無論是超級市場里還是購物中心里，到處是商品，到處是人潮，即使是象書店，美術(shù)館這樣的場所也是相似的場面，人們相信人多的商場里的商品會更好，人多的書店里的書會更全，人多的美術(shù)展會更有水平，賣家只能盡可能的展現(xiàn)自己的產(chǎn)品，從而證明自己的實力，而其他更高級的要求，諸如：環(huán)境，風(fēng)格，品味，服務(wù)都要為展示產(chǎn)

8、品讓路了。在目前的中國，無論是物質(zhì)產(chǎn)品還是精神產(chǎn)品，廣大受眾的需求都遠遠沒有得到滿足，所以大家都希望能看到更多產(chǎn)品，這樣就形成了“多則好”消費心理（瀏覽網(wǎng)站的消費形式顯得更間接），網(wǎng)頁設(shè)計師在應(yīng)聘時經(jīng)常會被問到：你是否能勝任“大型”網(wǎng)站的設(shè)計，即“能不能把頁面做的很長?！保?）中國網(wǎng)頁內(nèi)容多，給人忙亂的感受正象我們自己經(jīng)常會向別人抱怨自己忙的要死，以此來表示我們自己的價值。3、設(shè)計可以分為三種層次 引用Donald Norman 在emotional design一書中的理論，設(shè)計可以分為三種層次：本能水平的設(shè)計、行為水平的設(shè)計、反思水平的設(shè)計。（1）本能水平的設(shè)計是滿足人類本能審美需求的設(shè)計

9、，也就是漂亮、美觀的設(shè)計；（2）行為水平的設(shè)計是注重效用的設(shè)計，注重功能、易用性、可用性；（3）反思水平的設(shè)計注重信息、文化的作用，一件產(chǎn)品被設(shè)計的很獨特、出眾、引人矚目，用戶會因為始終這個產(chǎn)品而產(chǎn)生樂趣，產(chǎn)生滿足感。4、各種網(wǎng)站的頁面欣賞（1）豐田中國網(wǎng)站 /（2）熱貝大學(xué)分站/（3）北京大學(xué)（4）/chinese_gb.htm5、網(wǎng)站設(shè)計的基本原則（摘錄自/design/index.htm） 網(wǎng)站是企業(yè)向用戶和網(wǎng)民提供信息(包括產(chǎn)品和服務(wù))的一種方式,是企業(yè)開展電子商務(wù)的基礎(chǔ)設(shè)施和信息平臺，離開網(wǎng)站（或者只是利用第三方網(wǎng)站）去談電子商務(wù)是不可能的。企業(yè)的網(wǎng)址被稱為“網(wǎng)絡(luò)商標”，也是企業(yè)無形

10、資產(chǎn)的組成部分，而網(wǎng)站是INTERNET上宣傳和反映企業(yè)形象和文化的重要窗口。企業(yè)網(wǎng)站設(shè)計顯得極為重要，下面是一些網(wǎng)站設(shè)計中應(yīng)注意的原則。（1）明確建立網(wǎng)站的目標和用戶需求Web站點的設(shè)計是展現(xiàn)企業(yè)形象、介紹產(chǎn)品和服務(wù)、體現(xiàn)企業(yè)發(fā)展戰(zhàn)略的重要途徑，因此我們必須明確設(shè)計站點的目的和用戶需求，從而做出切實可行的設(shè)計計劃。我們會根據(jù)消費者的需求、市場的狀況、企業(yè)自身的情況等進行綜合分析，以“消費者（customer)”為中心，而不是以“美術(shù)”為中心進行設(shè)計規(guī)劃。在設(shè)計規(guī)劃時我們應(yīng)考慮：建站的目的是什么？為誰提供服務(wù)和產(chǎn)品？企業(yè)能提供什么樣的產(chǎn)品和服務(wù)？網(wǎng)站的目的消費者和受眾的特點是什么？企業(yè)產(chǎn)品和服

11、務(wù)適合什么樣的表現(xiàn)方式（風(fēng)格）？ （2）總體設(shè)計方案主題鮮明在目標明確的基礎(chǔ)上，完成網(wǎng)站的構(gòu)思創(chuàng)意即總體設(shè)計方案。對網(wǎng)站的整體風(fēng)格和特色作出定位，規(guī)劃網(wǎng)站的組織結(jié)構(gòu)。Web站點應(yīng)針對所服務(wù)對象（機構(gòu)或人）的不同而具有不同的形式。有些站點只提供簡潔文本信息；有些則采用多媒體表現(xiàn)手法，提供華麗的圖像、閃爍的燈光、復(fù)雜的頁面布置，甚至可以下載聲音和錄像片段。好的Web站點把圖形表現(xiàn)手法和有效的組織與通信結(jié)合起來。為了做到主題鮮明突出，要點明確，我們將按照客戶的要求，以簡單明確的語言和畫面體現(xiàn)站點的主題；調(diào)動一切手段充分表現(xiàn)網(wǎng)站點的個性和情趣，辦出網(wǎng)站的特點。Web站點主頁應(yīng)具備的基本成分包括：頁頭：

12、準確無誤地標識你的站點和企業(yè)標志；Email地址：用來接收用戶垂詢；聯(lián)系信息：如普通郵件地址或電話；版權(quán)信息：聲明版權(quán)所有者等。充分利用已有信息，如客戶手冊、公共關(guān)系文檔、技術(shù)手冊和數(shù)據(jù)庫等。（3）網(wǎng)站的版式設(shè)計網(wǎng)頁設(shè)計作為一種視覺語言，特別講究編排和布局，雖然主頁的設(shè)計不等同于平面設(shè)計，但它們有許多相近之處。版式設(shè)計通過文字圖形的空間組合，表達出和諧與美。多頁面站點頁面的編排設(shè)計要求把頁面之間的有機聯(lián)系反映出來，特別要處理好頁面之間和頁面內(nèi)的秩序與內(nèi)容的關(guān)系。為了達到最佳的視覺表現(xiàn)效果，我們將反復(fù)推敲整體布局的合理性，使瀏覽者有一個流暢的視覺體驗。（4）色彩在網(wǎng)頁設(shè)計中的作用色彩是藝術(shù)表現(xiàn)的

13、要素之一。在網(wǎng)頁設(shè)計中，我們的設(shè)計師根據(jù)和諧、均衡和重點突出的原則，將不同的色彩進行組合搭配來構(gòu)成美麗的頁面。 根據(jù)色彩對人們心理的影響，合理地加以運用。如果您的企業(yè)有CIS（企業(yè)形象識別系統(tǒng)），我們將按照其中的VI進行色彩運用。 （5）網(wǎng)頁形式與內(nèi)容相統(tǒng)一為了將豐富的意義和多樣的形式組織成統(tǒng)一的頁面結(jié)構(gòu)，形式語言必須符合頁面的內(nèi)容，體現(xiàn)內(nèi)容的豐富含義。靈活運用對比與調(diào)和、對稱與平衡、節(jié)奏與韻律以及留白等手段，通過空間、文字、圖形之間的相互關(guān)系建立整體的均衡狀態(tài)，產(chǎn)生和諧的美感。如對稱原則在頁面設(shè)計中，它的均衡有時會使頁面顯得呆板，但如果加入一些富有動感的文字、圖案，或采用夸張的手法來表現(xiàn)內(nèi)容

14、往往會達到比較好的效果。 點、線、面作為視覺語言中的基本元素，巧妙地互相穿插、互相襯托、互相補充構(gòu)成最佳的頁面效果，充分表達完美的設(shè)計意境。（6）三維空間的構(gòu)成和虛擬現(xiàn)實網(wǎng)絡(luò)上的三維空間是一個假想空間，這種空間關(guān)系需借助動靜變化。圖像的比例關(guān)系等空間因素表現(xiàn)出來。在頁面中，圖片、文字位置前后疊壓，或頁面位置變化所產(chǎn)生的視覺效果都各不相同。通過圖片、文字前后疊壓所構(gòu)成的空間層次不太適合網(wǎng)頁設(shè)計，根據(jù)現(xiàn)有瀏覽器的特點，網(wǎng)頁設(shè)計適合比較規(guī)范、簡明的頁面，盡管這種疊壓排列能產(chǎn)生強節(jié)奏的空間層次，視覺效果強烈。網(wǎng)頁上常見的是頁面上、下、左、右、中位置所產(chǎn)生的空間關(guān)系，以及疏密的位置關(guān)系所產(chǎn)生的空間層次，

15、這兩種位置關(guān)系使產(chǎn)生的空間層次富有彈性，同時也讓人產(chǎn)生輕松或緊迫的心理感受?，F(xiàn)在，人們已不滿足于HTML語言編制的二維Web頁面，三維世界的誘惑開始吸引更多的人，虛擬現(xiàn)實要在Web網(wǎng)上展示其迷人的風(fēng)采，于是VRML語言出現(xiàn)了。VRML是一種面向?qū)ο蟮恼Z言，它類似Web超級鏈接所使用的HTML語言，也是一種基于文本的語言，并可以運行在多種平臺之上，只不過能夠更多地為虛擬現(xiàn)實環(huán)境服務(wù)。 （7）多媒體功能的利用網(wǎng)絡(luò)資源的優(yōu)勢之一是多媒體功能。要吸引瀏覽者注意力，頁面的內(nèi)容可以用三維動畫、FLASH等來表現(xiàn)。但要由于網(wǎng)絡(luò)帶寬的限制，在使用多媒體的形式表現(xiàn)網(wǎng)頁的內(nèi)容時不得不考慮客戶端的傳輸速度。 （8）

16、結(jié)構(gòu)清晰并且便于使用如果人們看不懂或很難看懂您的網(wǎng)站，那么，他如何了解你的企業(yè)和服務(wù)呢？使用一些醒目的標題或文字來突出您的產(chǎn)品與服務(wù)。并且即使您擁有最棒的產(chǎn)品，如果客戶從您的網(wǎng)站上不清楚您在介紹什么或不清楚如何受益的話，他們是不會喜歡您的網(wǎng)站的。 （9）導(dǎo)向清晰導(dǎo)航設(shè)計使用超文本鏈接或圖片鏈接，使人們能夠在您的網(wǎng)站上自由前進或后退，而不會讓他們使用瀏覽器上的前進或后退。我們在所有的圖片上使用“ALT”標識符注明圖片名稱或解釋，以便那些不愿意自動加載圖片的觀眾能夠了解圖片的含義。（10）快速的下載時間很多的瀏覽者不會進入需要等待5分鐘下載時間才能進入的網(wǎng)站，在互聯(lián)網(wǎng)上60秒的等待時間與我們平常1

17、0分鐘等待時間的感覺相同。因此，我們會建議您盡量避免使用過多的圖片及體積過大的圖片。我們通常會與客戶合作，將主要頁面的容量控制在50K以內(nèi)，平均30K左右，確保普通瀏覽者頁面等待時間不超過10秒。（11）非圖形的內(nèi)容我們在必要時適當使用動態(tài)“Gif”圖片，為減少動畫容量，應(yīng)用巧妙設(shè)計的Java動畫可以用很小的容量使圖形或文字產(chǎn)生動態(tài)的效果。但是，由于在互聯(lián)網(wǎng)瀏覽的大多是一些尋找信息的人們，我們?nèi)匀唤ㄗh您要確定您的網(wǎng)站將為他們提供的是有價值的內(nèi)容，而不是過度的裝飾。 （12）方便的反饋及訂購程序讓客戶明確您所能提供的產(chǎn)品或服務(wù)并讓他們非常方便地訂購是您獲得成功的重要因素。如果客戶在您的網(wǎng)站上產(chǎn)生

18、了購買產(chǎn)品或服務(wù)的欲望，您是否能夠讓他們盡快實現(xiàn)嗎？是在線還是離線？ 6、網(wǎng)頁設(shè)計在技術(shù)上所應(yīng)該滿足的一些要求（參考/jszc-1.asp?id=25）（1）導(dǎo)航結(jié)構(gòu) 放置一個導(dǎo)航在人們?nèi)菀卓匆姷牡胤健Ｒ恢滦栽谶@里是最重要的事情。你應(yīng)該努力建成一個在整個網(wǎng)站中所有網(wǎng)頁上一致、有序的導(dǎo)航系統(tǒng)。 （2）字體大小 你的字體尺寸應(yīng)該足夠大，以便使瀏覽者毫不費力地閱讀。很多人都討厭閱讀非常小的字。不要因為字小而丟失了瀏覽者。優(yōu)化的尺寸一般是12-13點。瀏覽著應(yīng)能輕松地閱讀網(wǎng)站上的文本。將大塊的文本分成若干段，以便瀏覽者瀏覽。 （3）每行長度 文本的行長度要便于閱讀。優(yōu)化的為了打印用的文本一般是10-20個單詞，或者60-70個字母。在比較大顯示時，選用40-50個字母的也許更合適。如果每行太長，閱讀者就不得不去尋找下一行的頭；如果太短，就會將太多的單詞和段落切斷。 （4）突出重點 突出重點是設(shè)計和排版的一部分工作，它是非常重要的。明顯和容易識別重點，有助于瀏覽者的閱讀；反之，當這個工作欠缺時，就會是一些人感到這里的每句話都很重要，使網(wǎng)站的閱讀性變差。 （5）圖象眾所周知，一幅圖片