有關web設計趨勢的兩篇文章(轉載自Taobao.com UI Team)

Published by qinghou 十月 9th, 2006.

第一篇原文來自：http://www.ontoinfo.com/2006/09/13/current-trends-in-web-design/ 作者將現在的優秀設計總結為8種風格,建議去原文看看作者所截取的圖形舉例.

1.Web桌面化
www.yahoo.com
mail.yahoo.com
www.live.com

正方：看起來很爽，值得細細欣賞
反方：花銷太大

盡可能地接近於桌面上絢麗的圖形，這是最優雅的風格。結果呢，這種風格看起來很棒，但是需要極大的工作量，而且很耗 網絡資源。總之，桌面風格以其四周的角度、富於表現力的圖形、陰影和對桌面應用的模仿而獨樹一幟。

桌面元素的特征舉例：

塊級（block）：屏幕上一個區域通常伴隨著邊 框、頭部、底部（border、header、footer），來連接了邏輯上類似的元素，諸如：鏈接、文本、記分卡（注：我想到了digg那個分數欄）、文章預覽。塊 級通常伴隨著看似隨意的陰影（optional shadow）。

迷你塊： 通常他們是小圖片和精細文本的組合。

按鈕：這種設計元素伴隨著一定角度、風格化的邊框、看似隨意的陰影。按鈕可能是玻璃風格，並且有一些從下方投射的燈光產生的陰影，當鼠標移上去還會有視覺反饋效果。

標簽（Tabs）：它們也使用了角度、風格化的邊框、看似隨意的陰影。也有鼠標懸浮的反饋。

2.水銀橙風格
www.mozilla.com/firefox
www.digg.com
www.silverorange.com

正方：可用性好、輕量級的、簡單的
反方：時尚、追隨者眾、稍稍昂貴

看起來稍顯簡約，在風格化和輕量級間追求平衡，水銀橙較之視覺豐富的界面更集中體現了可用性。它不像桌面風格那樣試圖給瀏覽者留下深刻印像，而是提供了優秀的可用性體驗。應運而生的silverorange.com就是專門水銀橙風格的設計者。

水銀橙風格的特征舉例:

頂部菜單：通常它是深色的，文字顏色為淺色，在背景上，突出的角度顏色富於變化，並形成強烈對比。

引導線 ：更有立體感，引導線和頂部菜單背景色形成對比，文字顏色為灰色。

文本分割線：更有立體感，分隔線看起來很適度。

3.蘋果風格
www.apple.com

正方: 高雅、有品質、華貴
反方：太有特色，花銷太大

這種以玻璃標簽和按鈕作為主要特征的設計，對小字體不太適合，但幸運的是，如果你通常不使用小字體，這種風格也是可以接受的。工作量大，因為你需要做很多設計。有特點，你需要通過設計來保持獨特性，所以使用蘋果設計web，幾乎不可能。

蘋果風格的特征舉例:

蘋果菜單：蘋果的菜單集中體現了蘋果風格，每一處都有同樣的風格: 玻璃按鈕、立體感、圓角……

4.微軟風格
www.microsoft.com
www.msn.com
www.rsdn.ru

正方：功能性強、簡約、開發成本低
反方：你是一個MS盟友

最主要的一件事，比如微軟風格網站左欄的浮動菜單導航清晰，但太土了。簡約、清晰但普通。就像是工程師為工程師創建的。

微軟風格的特征舉例:

微軟菜單： 微軟風格的主菜單是灰色的、功能性強、簡約的。占據左邊欄的僅僅是邊框、鼠標懸浮效果、浮動子菜單……

微軟風格與眾不同之處在於header處的立體感，當你從左向右掃視，直到右上角搜索框的地方就會發現這一特征。

所有的塊級（block）都是以清晰的灰線條分割的，我想，這是由於視點的可用性考慮。人們在微軟上有太廣泛的選擇了，但有一點是清晰的：微軟的設計風格是簡約、功能性強、可用性好的。

相比蘋果風格，它不夠華貴。但運行起來還不錯。

5.雜志風格
www.style.com
www.drive.ru

正方：吸引人、簡約、濃縮
反方：需要許多照片和文字，內容的質量是關鍵

Web雜志設計風格是……嗯，就像雜志。它在你的電腦屏幕上看起來就像視覺效果出色的雜志，所以你完全可以用看雜志的眼光審視網頁。

你會意識到，在高質量的照片和圖像中有許多鏈到文章的鏈接。

雜志風格的目標群就是雜志的閱讀者。不是工程師，也不是網頁設計者，甚至不是網蟲。這確實是由一群專業的設計師設計出來的，他們非常熱愛自己的工作。如果你的目標是這類設計師，那就要為你自己工作，並深愛它……

6.圓角樸素風格
www.youtube.com

正方：簡約、清新、內容突出
反方：有點令人厭倦，不新穎，不易留下印像

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

7.Web 2.0設計風格
blogger.com
netflix.com
target.com
ruby-lang.org
yelp.com
blubolt.com

正方：現代、易被大眾接受、新穎
反方：可用性問題、固定寬度

識別web2.0的設計風格可以通過：
-固定寬度
-圓角形狀和陰影
-大字體
-高亮顏色的header
-Substantial amount of gray text
-字型很寬
-圓角形狀和按鈕
-陰影，玻璃效果，更有立體感

8.Adobe / Macromedia風格
adobe.com
macromedia.com

正方：干淨、簡約、平衡、高貴
反方：花銷大、個性突出、可用性問題

這種風格很像蘋果風格: 一旦你看過它，你會立即識別其他模仿者。這種設計花銷很大，追求圖形效果，並且追求整體上的 平衡。它是Macromedia在幾年前原創的風格，但現在仍然是最棒的web設計之一。

Macromedia設計風格的與眾不同之處:復雜的立體按鈕，圓角塊，陰影很獨特，固定寬度，中心感。

另一篇文章對照多個世界優秀站點的設計,總結出它們的共同特點,如下:
1.布局簡單
2.中心定位

3.3D效果

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

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

6.可愛的圖標

7.有許多留白

8.大字體

(本文轉載自Taobao.com UI Team)