Pavel Senko版權(quán)所有
作者：Pavel Senko
譯者：UCD翻譯小組，波希米亞

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

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

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

 網(wǎng)頁桌面風格 ———-———-———-———-———-———-

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

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

與眾不同的網(wǎng)頁桌面元素案例：

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

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

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

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

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

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

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

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

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

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

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

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

正方：高端，優(yōu)質(zhì)，奢華
反方：非常有特色，成本高

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

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

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

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

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

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

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

微軟菜單。微軟網(wǎng)頁設(shè)計風格中的主菜單是灰色的，實用并且簡單。有邊框，有”mouSEOver”事件，有浮動的子菜單等等。通常它都占據(jù)左欄位置。

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

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

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

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

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

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

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

雜志風格的目標讀者是閱讀雜志的人們。不是工程師，不是網(wǎng)頁設(shè)計師，更不是有經(jīng)驗的網(wǎng)站用戶。

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

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

正方：簡單，輕巧，讓內(nèi)容成為重點
反方：有點單調(diào)，不新穎，無法給人留下深刻印象

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

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

Web 2.0 設(shè)計風格 ———-———-———-———-———-———-

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

Web 2.0 設(shè)計風格可被歸納于

• 定寬

• 主要（圓角）外形有陰影

• 大量漸變和體積

• 大字體

• 頭部，用鮮亮的顏色突出

• 大量暗調(diào)文本

• 文本尺寸寬泛

• 圓角的外形和按鈕

• 陰影，水晶效果，更多漸變

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

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

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

與眾不同的Macromedia網(wǎng)頁設(shè)計風格元素案例：
復(fù)雜的陰影漸變菜單，帶陰影的圓角區(qū)塊，菜單下的圓角banner，定寬，居中。

這篇文章不是…

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