第一篇原文來(lái)自:http://www.ontoinfo.com/2006/09/13/current-trends-in-web-design/ 作者將現(xiàn)在的優(yōu)秀設(shè)計(jì)總結(jié)為8種風(fēng)格,建議去原文看看作者所截取的圖形舉例.

　　1.Web桌面化

　　www.yahoo.com

　　mail.yahoo.com

　　www.live.com

　　正方:看起來(lái)很爽，值得細(xì)細(xì)欣賞

　　反方:花銷太大

　　盡可能地接近于桌面上絢麗的圖形，這是最優(yōu)雅的風(fēng)格。結(jié)果呢，這種風(fēng)格看起來(lái)很棒，但是需要極大的工作量，而且很耗 網(wǎng)絡(luò)資源?？傊?，桌面風(fēng)格以其四周的角度、富于表現(xiàn)力的圖形、陰影和對(duì)桌面應(yīng)用的模仿而獨(dú)樹一幟。

　　桌面元素的特征舉例:

　　塊級(jí)(block):屏幕上一個(gè)區(qū)域通常伴隨著邊 框、頭部、底部(border、header、footer)，來(lái)連接了邏輯上類似的元素，諸如:鏈接、文本、記分卡(注:我想到了digg那個(gè)分?jǐn)?shù)欄)、文章預(yù)覽。塊 級(jí)通常伴隨著看似隨意的陰影(optional shadow)。

　　迷你塊: 通常他們是小圖片和精細(xì)文本的組合。

　　按鈕:這種設(shè)計(jì)元素伴隨著一定角度、風(fēng)格化的邊框、看似隨意的陰影。按鈕可能是玻璃風(fēng)格，并且有一些從下方投射的燈光產(chǎn)生的陰影，當(dāng)鼠標(biāo)移上去還會(huì)有視覺(jué)反饋效果。

　　標(biāo)簽(Tabs):它們也使用了角度、風(fēng)格化的邊框、看似隨意的陰影。也有鼠標(biāo)懸浮的反饋。

　　2.水銀橙風(fēng)格

　　www.mozilla.com/firefox

　　www.digg.com

　　www.silverorange.com

　　正方:可用性好、輕量級(jí)的、簡(jiǎn)單的

　　反方:時(shí)尚、追隨者眾、稍稍昂貴

　　看起來(lái)稍顯簡(jiǎn)約，在風(fēng)格化和輕量級(jí)間追求平衡，水銀橙較之視覺(jué)豐富的界面更集中體現(xiàn)了可用性。它不像桌面風(fēng)格那樣試圖給瀏覽者留下深刻印象，而是提供了優(yōu)秀的可用性體驗(yàn)。應(yīng)運(yùn)而生的silverorange.com就是專門水銀橙風(fēng)格的設(shè)計(jì)者。

　　水銀橙風(fēng)格的特征舉例:

　　頂部菜單:通常它是深色的，文字顏色為淺色，在背景上，突出的角度顏色富于變化，并形成強(qiáng)烈對(duì)比。

　　引導(dǎo)線 :更有立體感，引導(dǎo)線和頂部菜單背景色形成對(duì)比，文字顏色為灰色。

　　文本分割線:更有立體感，分隔線看起來(lái)很適度。

　　3.蘋果風(fēng)格

　　www.apple.com

　　正方: 高雅、有品質(zhì)、華貴

　　反方:太有特色，花銷太大

　　這種以玻璃標(biāo)簽和按鈕作為主要特征的設(shè)計(jì)，對(duì)小字體不太適合，但幸運(yùn)的是，如果你通常不使用小字體，這種風(fēng)格也是可以接受的。工作量大，因?yàn)槟阈枰龊芏嘣O(shè)計(jì)。有特點(diǎn)，你需要通過(guò)設(shè)計(jì)來(lái)保持獨(dú)特性，所以使用蘋果設(shè)計(jì)web，幾乎不可能。

　　蘋果風(fēng)格的特征舉例:

　　蘋果菜單:蘋果的菜單集中體現(xiàn)了蘋果風(fēng)格，每一處都有同樣的風(fēng)格: 玻璃按鈕、立體感、圓角……

　　4.微軟風(fēng)格

　　www.microsoft.com

　　www.msn.com

　　www.rsdn.ru

　　正方:功能性強(qiáng)、簡(jiǎn)約、開發(fā)成本低

　　反方:你是一個(gè)MS盟友

　　最主要的一件事，比如微軟風(fēng)格網(wǎng)站左欄的浮動(dòng)菜單導(dǎo)航清晰，但太土了。簡(jiǎn)約、清晰但普通。就像是工程師為工程師創(chuàng)建的。

　　微軟風(fēng)格的特征舉例:

　　微軟菜單: 微軟風(fēng)格的主菜單是灰色的、功能性強(qiáng)、簡(jiǎn)約的。占據(jù)左邊欄的僅僅是邊框、鼠標(biāo)懸浮效果、浮動(dòng)子菜單……

　　微軟風(fēng)格與眾不同之處在于header處的立體感，當(dāng)你從左向右掃視，直到右上角搜索框的地方就會(huì)發(fā)現(xiàn)這一特征。

　　所有的塊級(jí)(block)都是以清晰的灰線條分割的，我想，這是由于視點(diǎn)的可用性考慮。人們?cè)谖④浬嫌刑珡V泛的選擇了，但有一點(diǎn)是清晰的:微軟的設(shè)計(jì)風(fēng)格是簡(jiǎn)約、功能性強(qiáng)、可用性好的。

　　相比蘋果風(fēng)格，它不夠華貴。但運(yùn)行起來(lái)還不錯(cuò)。

　　5.雜志風(fēng)格

　　www.style.com

　　www.drive.ru

　　正方:吸引人、簡(jiǎn)約、濃縮

　　反方:需要許多照片和文字，內(nèi)容的質(zhì)量是關(guān)鍵

　　Web雜志設(shè)計(jì)風(fēng)格是……嗯，就像雜志。它在你的電腦屏幕上看起來(lái)就像視覺(jué)效果出色的雜志，所以你完全可以用看雜志的眼光審視網(wǎng)頁(yè)。

　　你會(huì)意識(shí)到，在高質(zhì)量的照片和圖像中有許多鏈到文章的鏈接。

　　雜志風(fēng)格的目標(biāo)群就是雜志的閱讀者。不是工程師，也不是網(wǎng)頁(yè)設(shè)計(jì)者，甚至不是網(wǎng)蟲。這確實(shí)是由一群專業(yè)的設(shè)計(jì)師設(shè)計(jì)出來(lái)的，他們非常熱愛(ài)自己的工作。如果你的目標(biāo)是這類設(shè)計(jì)師，那就要為你自己工作，并深愛(ài)它……

　　6.圓角樸素風(fēng)格

　　www.youtube.com

　　正方:簡(jiǎn)約、清新、內(nèi)容突出

　　反方:有點(diǎn)令人厭倦，不新穎，不易留下印象

　　這種設(shè)計(jì)一點(diǎn)也不壞。它的目的就是讓瀏覽者的目光集中在內(nèi)容上，同時(shí)還可以減輕流量。典型站點(diǎn) (www.youtube.com) 的頂部導(dǎo)航只有圓角和故意最簡(jiǎn)單的元素。

　　7.Web 2.0設(shè)計(jì)風(fēng)格

　　blogger.com

　　netflix.com

　　target.com

　　ruby-lang.org

　　yelp.com

　　blubolt.com

　　正方:現(xiàn)代、易被大眾接受、新穎

　　反方:可用性問(wèn)題、固定寬度

　　識(shí)別web2.0的設(shè)計(jì)風(fēng)格可以通過(guò):

　　-固定寬度

　　-圓角形狀和陰影

　　-大字體

　　-高亮顏色的header

　　-Substantial amount of gray text

　　-字型很寬

　　-圓角形狀和按鈕

　　-陰影，玻璃效果，更有立體感

　　8.Adobe / Macromedia風(fēng)格

　　adobe.com

　　macromedia.com

　　正方:干凈、簡(jiǎn)約、平衡、高貴

　　反方:花銷大、個(gè)性突出、可用性問(wèn)題

　　這種風(fēng)格很像蘋果風(fēng)格: 一旦你看過(guò)它，你會(huì)立即識(shí)別其他模仿者。這種設(shè)計(jì)花銷很大，追求圖形效果，并且追求整體上的 平衡。它是Macromedia在幾年前原創(chuàng)的風(fēng)格，但現(xiàn)在仍然是最棒的web設(shè)計(jì)之一。

　　Macromedia設(shè)計(jì)風(fēng)格的與眾不同之處:復(fù)雜的立體按鈕，圓角塊，陰影很獨(dú)特，固定寬度，中心感。

　　另一篇文章對(duì)照多個(gè)世界優(yōu)秀站點(diǎn)的設(shè)計(jì),總結(jié)出它們的共同特點(diǎn),如下:

　　1.布局簡(jiǎn)單

　　2.中心定位

　　3.3D效果

　　4.柔和,多采用自然背景色

　　5.顏色鮮亮(但謹(jǐn)慎使用)

　　6.可愛(ài)的圖標(biāo)

　　7.有許多留白

　　8.大字體