Pavel Senko版權所有
作者：Pavel Senko
譯者：UCD翻譯小組，波希米亞
原文地址： http://www.ontoinfo.com/2006/09/13/current-trends-in-web-design/

譯者序：雖然說不是權威的設計趨勢報告，但作者依然收集了很多有代表性的案例對2006年的網頁風格變化加以很好的演示和說明。網頁設計風格每年都在發生著新的變化，與此同時也會涌現出許多新的風格和優秀的作品，作為網頁設計的從業者，應當從中學習好的思想和創作靈感，應用到自己的設計中來。

我訪問過許多網站，比如CSS Zen Garden或者其他什么的，并堅持每天瀏覽網頁，我認為這是一篇高質量的文章，因為它涵蓋了很多當代設計趨勢。

即使如此，我也會簡明扼要地切入要點。

? 網頁桌面風格 ———-———-———-———-———-———-

www.yahoo.com
mail.yahoo.com
www.live.com

正方：樣子看起來很高端
反方：成本太高（根據作者回復的解釋，是指可能需要很多專業的設計師為此工作，需要用到某些軟件，比如Photoshop，要反復設計達到完美，并且需要花大力氣在細節上等等）

這是最精致的風格，盡可能的試圖去接近圖形桌面的感觀和感覺。因此，這種風格看起來很漂亮，但需要花費很大工夫，并且通常耗盡流量。
簡而言之，桌面風格以漸變、豐富的圖形、陰影和其他桌面應用模擬為特征。

與眾不同的網頁桌面元素案例：

區塊。通常，它是屏幕上一個擁有邊框、頭部、底部的區域，用來聚集邏輯上相關的元素：鏈接、文本、記分卡和文章預覽。區塊可以伴隨有陰影。

迷你區塊。區塊中的區塊：通常包含小圖片和少量的文本。

按鈕。這些網頁設計元素伴隨著漸變、有反差的邊框、和可選擇的陰影。按鈕可以有鏡面效果，有從下打光的倒影。通常當鼠標懸停時按鈕有反應（當用戶把鼠標移到按鈕上時，做一些視覺效果）。

Tabs.它們也用漸變、有反差的邊框、和可選擇的陰影。當鼠標懸停時做出反應。

? Silver Orange風格 ———-———-———-———-———-———-

mozilla.com/firefox
www.digg.com
www.silverorange.com

正方：可用性，輕量級，簡單
反方：時尚，追隨者，成本稍微有點高

稍微簡單一點兒的感觀和感覺，在樣式和輕量級創作之間有著很好的平衡。Silver Orange的網頁設計風格相對于豐富的界面來說，更側重于可用性。
它不強求用戶銘記（與桌面風格不同），相反是為他提供更好的可用性體驗。
正如你所料，silverorange.com正是Silver Orange設計風格的締造者。

與眾不同的Silver Orange風格元素案例：

頂部菜單。通常是暗底配亮顏色的文字；背景伴有彩色漸變和反差分隔。

Logo和指導線（面包屑）。指導線與頂部菜單背景相比，更多漸變，文字顏色用灰色。

漸變和文字分隔。更多漸變，輕微分隔。

? 蘋果風格 ———-———-———-———-———-———-

www.apple.com

正方：高端，優質，奢華
反方：非常有特色，成本高

這個風格中的水晶tabs和按鈕是整個設計的精髓。不是很實用，由于大量使用小型或微型字體，但依然很舒服，假設你不是經常與小字文本打交道。
成本高，需要做很多工作。與眾不同，所以非常難做到和原版一樣，使用蘋果風格來設計網頁，幾乎不可能。

與眾不同的蘋果風格案例：

蘋果菜單。蘋果菜單是蘋果網頁設計風格的精髓。每個東西都有幾乎一樣漂亮的樣式：水晶按鈕，漸變，圓角區塊等等。

? 微軟風格 ———-———-———-———-———-———-

www.microsoft.com
www.msn.com
www.rsdn.ru

正方：實用，簡單，成本低
反方：觀點：你隸屬于微軟

讓一個網站看上去像微軟風格，最主要的一點就是用在左欄使用灰色的、有浮動菜單的導航面板。簡單，干凈并且方法普通。
是工程師為工程師創造的。

與眾不同的微軟風格案例：

微軟菜單。微軟網頁設計風格中的主菜單是灰色的，實用并且簡單。有邊框，有”mouseover”事件，有浮動的子菜單等等。通常它都占據左欄位置。

微軟網頁設計風格的另一個與眾不同之處，是頭部從左到右逐漸加深的漸變，它一直延伸到右上角的搜索框。

所有區塊都被清晰的灰線分隔。我想，這來自于可用性觀點。人們可能對微軟的商業模式有很寬泛的看法，但有一件事是無疑的：微軟設計風格是簡單、實用并且有著很好的可用性的。

與蘋果風格相比，它不那么豐富或奢華。但它依然玩得轉。

? 雜志風格 ———-———-———-———-———-———-

www.style.com
www.drive.ru

正方：吸引人，簡單，精煉
反方：需要很多文本和照片，太依賴內容質量

雜志網頁設計風格就是…沒錯，就是雜志的樣子。它試圖為你帶來高質量的視覺創作，所以你會感激雜志設計者為此所完成的所有工作。
你可以通過混合有大量文章鏈接的照片和圖片識別它。

與眾不同的雜志風格案例：

雜志風格的目標讀者是閱讀雜志的人們。不是工程師，不是網頁設計師，更不是有經驗的網站用戶。

這確實是個高端的東西，由專業設計師創作，他們十分喜愛自己的工作。為了要做同樣的事情，你有一個相關職業更好，同時也會擁有相當可觀的報酬。

? 圓角樸素風格 ———-———-———-———-———-———-

www.youtube.com

正方：簡單，輕巧，讓內容成為重點
反方：有點單調，不新穎，無法給人留下深刻印象

設計成這樣并不全是壞事。它的意圖是讓注意力更集中于內容。它產生的流量也非常小。
有代表性的站點(www.youtube.com)有帶圓角的頂部導航菜單，元素也故意設計的很簡單。

與眾不同的圓角樸素風格案例：

? Web 2.0 設計風格 ———-———-———-———-———-———-

blogger.com
netflix.com
target.com
ruby-lang.org
yelp.com
blubolt.com

正方：現代，得到很好的公認，新潮
反方：可用性爭論，定寬

Web 2.0 設計風格可被歸納于

? Adobe / Macromedia 風格 ———-———-———-———-———-———-

adobe.com
macromedia.com

正方：干凈，簡單，平衡，高端
反方：成本高，與眾不同，可用性爭論

這個風格很像蘋果的：你看到它時，會認為很多地方都是效仿蘋果。成本很高的設計，從圖形效果方面來說非常強大，總體非常平衡。追溯到幾年前，起初這是由Macromedia公司創造的，現在這種網頁設計風格依然是最好之一。

與眾不同的Macromedia網頁設計風格元素案例：
復雜的陰影漸變菜單，帶陰影的圓角區塊，菜單下的圓角banner，定寬，居中。

? 這篇文章不是…

這篇文章不是視圖給出網頁設計風格趨勢的完整描述；我僅僅是把一些事物（我個人喜歡的）放在一起并解釋它們與眾不同的特點。
其他一些網頁設計風格（尤其是出自“藝術設計”分類的）沒有被解釋。決不是因為我覺得它們沒價值或是不漂亮，而多半是因為可用性的原因。在日常生活中，你不可能把藝術品拆開了用。你不是假設。
從可用性到美感方面，我沒有找到吸引人的地方的那些風格，也沒有被突出。