More Web Design Trends For 2009
Smashing Magazine版權(quán)所有
作者：Smashing Magazine
譯者：UCD翻譯小組，波希米亞
原文地址： http://www.smashingmagazine.com/2009/01/21/current-web-design-trends-for-2009/

譯者序：09年快過去一半了，雖然文章早翻譯好了，但懶了，一直沒上。不過這篇文章有效期不止12個月，它依然可以指導(dǎo)我們在未來的設(shè)計中做出更好的頁面，值得好好閱讀和收藏。

出格布局

正如在幾個月前所做的40個創(chuàng)新設(shè)計布局：出格布局的展示那樣，我們正在觀察一種向更具個性和創(chuàng)新性布局發(fā)展的強(qiáng)大趨勢。與使用傳統(tǒng)四四方方的盒狀布局不同，設(shè)計師們正在嘗試新的信息結(jié)構(gòu)、呈現(xiàn)和表達(dá)方式。

在這些出格布局設(shè)計中，整體創(chuàng)意往往比具體內(nèi)容更重要，也更令人難忘。盡管如此，可用性、版式和視覺設(shè)計也很少被忽視，并被謹(jǐn)慎地執(zhí)行。創(chuàng)新布局在大項目、網(wǎng)站設(shè)計機(jī)構(gòu)和宣傳網(wǎng)站（如大公司的商業(yè)活動）中尤為流行，但它也同樣流行于blog中。

提到創(chuàng)意，可用和不可用設(shè)計之間的界限就非常模糊了；因此，可用性測試就顯得尤為重要，因為一項新的創(chuàng)意能打破網(wǎng)站故有的東西。通常，折中考慮創(chuàng)意、經(jīng)典和傳統(tǒng)設(shè)計是一個不錯的主意，也就是說要設(shè)法去取得一個“堅不可摧”（甚至最終很單調(diào)）的可用設(shè)計與一個有創(chuàng)意但不可用設(shè)計之間的平衡。記住，創(chuàng)意需要時間來成長：重新思考、修改、調(diào)整、優(yōu)化，最終整合到你的設(shè)計當(dāng)中。

我們強(qiáng)烈鼓勵設(shè)計師打破傳統(tǒng)盒狀布局的慣例，去嘗試新方式和你大膽瘋狂的想法。施展你的才華吧！

單頁布局

另一種設(shè)計師經(jīng)常使用的、給訪問者留下深刻印象的方式，就是所謂的單頁布局：這種布局使用一個單獨的頁面來呈現(xiàn)網(wǎng)站的內(nèi)容。它并不一定意味著這些設(shè)計就是極簡的（遵循“少即是多”原則）。而剛好相反，這種設(shè)計往往十分復(fù)雜，它包含了豐富的圖像和生動的動畫效果，因此需要加載一段時間。

當(dāng)用戶點擊了一個導(dǎo)航選項，頁面隨之改變（部分變化），新的內(nèi)容就出現(xiàn)在了顯示先前內(nèi)容的區(qū)域里。這種布局中導(dǎo)航滑動和滾動的效果，由公共JavaScript庫來支持。

對用戶來說最主要的優(yōu)勢來自于一個簡單的事實，即通過更少的鼠標(biāo)移動和點擊，來獲得用戶想要的信息。由于這個方法非常新，對那些使用非傳統(tǒng)導(dǎo)航就會感到困惑的用戶來說是個好機(jī)會。有些種情況下，一個“靜態(tài)”版本可能會派上用場，甚至是有必要的；比如你將不得不為搜索引擎，和禁用了JavaScript的用戶提供另一版本。

多欄布局

多欄（3欄以上）不一定就是復(fù)雜的設(shè)計。從反面看，如果設(shè)計得當(dāng)，多欄對訪問者會十分有幫助，因為它們?yōu)榭梢姷膶?dǎo)航選項提供了更好的綜覽，從而使得用戶可以快速地找到他們想要的信息。

過去幾年里，我們見證了網(wǎng)站內(nèi)容的爆炸，這降低了用戶在網(wǎng)站上所投入的注意力和時間（詳情查看ReadWriteWeb）。所以，難怪設(shè)計師們都開始嘗試尋找更簡潔的信息呈現(xiàn)方式，既能讓訪問者在網(wǎng)站上停留的時間盡可能的長，又能更簡單的找到內(nèi)容。

實現(xiàn)這一目的的方法之一，就是使用多欄相鄰的布局。這個想法十分合理。屏幕分辨率在最近幾年里不斷增加（然而，像華碩Eee PC這樣的上網(wǎng)本得以廣泛使用的話，情況可能會有所改變），從而可以為用戶提供更多橫向空間，也能給設(shè)計師提供額外空間去填充內(nèi)容。

結(jié)果表明：現(xiàn)在越來越多的設(shè)計師，采用越來越多的欄在設(shè)計中。我們研究發(fā)現(xiàn)有向這些所謂多欄布局發(fā)展的強(qiáng)大趨勢，通常在1000像素的屏幕中，寬度固定為850像素。多欄常被用在雜志布局和大項目中。在這些布局里，柵格常被用來保證結(jié)構(gòu)平衡、層級和次序。

使用多欄布局，主動留白以及各自內(nèi)部欄之間的重要性不能被夸大。（主動留白是故意留出空白，以更好地表現(xiàn)頁面結(jié)構(gòu)，強(qiáng)調(diào)內(nèi)容的不同區(qū)域。）

為此，設(shè)計師常利用“Shneiderman的真言”（“首先表達(dá)大局，隨后顯示細(xì)節(jié)”），先為用戶提供一個功能概況，然后按需提供細(xì)節(jié)——稍后，當(dāng)某個鏈接被點擊時（Mozilla Labs就是個最好的例子）。

巨型插圖和充滿活力的圖形

如同巨型版式主宰當(dāng)今網(wǎng)頁設(shè)計一樣，無論是專業(yè)還是個人網(wǎng)站項目中，巨型插圖似乎都越來越受歡迎。設(shè)計師正試圖用互動元素（植入式視頻區(qū)）和視覺元素（導(dǎo)言區(qū)和插圖）來傳達(dá)網(wǎng)站的信息。在近來的設(shè)計中，插圖比原來占據(jù)更大的空間，通常作為巨型版式的補(bǔ)充。它們更具吸引力，并且更加生動，因此更容易被訪問者記住。

另外，設(shè)計師也運用一些充滿活力的圖形，尤其是為背景，也為其他設(shè)計元素。不同的風(fēng)格和圖形均被使用：如陳舊物、拼貼畫、剪貼冊、飾品、復(fù)古樣式、水彩、有機(jī)材質(zhì)和攝影背景等。

比以往更多的留白

或許最可預(yù)知、也最為有益的事情之一，就是在過去幾年的網(wǎng)頁設(shè)計中，留白日益突出。它在許多設(shè)計中處于首要位置，并被廣泛用于改善網(wǎng)站的文章流和結(jié)構(gòu)。

事實上，我從未見過內(nèi)容區(qū)和導(dǎo)航菜單上有這么多內(nèi)邊距。外框和內(nèi)容區(qū)的內(nèi)邊距在20至25像素正逐漸成為一種約定俗成的法則，甚至更大的內(nèi)邊距也被普遍接受。希望，這一趨勢繼續(xù)發(fā)展下去。

社會設(shè)計元素

縱觀blog圈，你幾乎找不到一個不使用社會性圖標(biāo)或區(qū)塊，讓讀者通過知名社會性媒體網(wǎng)站去推廣它們內(nèi)容的blog。每個作者都希望得到可觀的流量和認(rèn)可，這也是為什么在當(dāng)今設(shè)計中，社會性元素變得更大、更具吸引力。

社會性圖標(biāo)到處可見，但多出現(xiàn)于文章的右上角或底部。社會性區(qū)塊經(jīng)常被放在文章下面，有時也出現(xiàn)在相關(guān)文章列表旁邊。Twitter，F(xiàn)lickr和Last.FM的混合仍然是blog和項目中常見的組合。

對話式導(dǎo)航

去年我們曾寫過一篇名叫“對話式導(dǎo)航”的文章，在現(xiàn)在的很多網(wǎng)站中，貌似這個元素依然流行。導(dǎo)航所要完成的最大任務(wù)，是清晰地引導(dǎo)用戶到達(dá)網(wǎng)站的不同地方。然而，要通過一兩個關(guān)鍵字來表達(dá)內(nèi)容是極其困難的，特別是使用橫向?qū)Ш健?/P>

這就是為什么通常導(dǎo)航?jīng)]法用適當(dāng)?shù)年P(guān)鍵字一個接一個簡單列出的原因（即使用“無對話的”導(dǎo)航）。取而代之，設(shè)計師正在試圖具體解釋什么選項可用，什么是訪問者點擊網(wǎng)站鏈接后所期望的。

因為設(shè)計師正嘗試開展與訪問者之間的更多對話，所以我們愿意稱這種方案為“對話式”導(dǎo)航，相對于那種建立在關(guān)鍵字列表基礎(chǔ)上的“無對話的”導(dǎo)航。

導(dǎo)航區(qū)通常都是具有相同高度和寬度的區(qū)塊，因此訪問者感覺內(nèi)容能被輕松引導(dǎo)。大圖標(biāo)也使用的很頻繁，但在大多數(shù)情況下，它們是否適用取決于網(wǎng)站的內(nèi)容和總體布局。導(dǎo)航設(shè)計中的鼠標(biāo)懸停效果會讓瀏覽變得更愉快。

動態(tài)的tab

作為交互設(shè)計中最流行的趨勢之一，tab可以動態(tài)地改變內(nèi)容區(qū)域?；顒觮ab背后的想法是，當(dāng)頁面被加載時，所有tab的內(nèi)容也被加載，但一次只顯示一個tab部分的內(nèi)容（屬性展示被用來實現(xiàn)這種效果）。你可以參照教程動態(tài)的tab 和tab在jQuery中的視覺控制 來創(chuàng)建動態(tài)的tab。