在這篇概述中，將帶你逐一回顧每個(gè)趨勢和漂亮的案例，他們將激發(fā)你在下個(gè)項(xiàng)目中的靈感。
相關(guān)鏈接：2009年海外網(wǎng)頁設(shè)計(jì)風(fēng)潮
1、出格布局
圖1
2、單頁布局
圖2
3、多欄布局
圖3
4、巨型插圖和充滿活力的圖形
圖4
5、比以往更多的留白
圖5
6、社會設(shè)計(jì)元素
圖6
7、對話式導(dǎo)航
圖7
8、動(dòng)態(tài)的tab
圖8
9、大搜索框
圖9
10、為分類增加視覺效果
圖10
相關(guān)鏈接：2009年海外網(wǎng)頁設(shè)計(jì)風(fēng)潮
[Page: ]
11、作者頭像
圖11
12、圖標(biāo)和視覺提示
圖12
13、 tag索引（替代tag云）
圖13
14、在blog中使用插圖
圖14
15、水彩畫
圖15
16、手寫體
圖16
17、復(fù)古
圖17
18、用有機(jī)材質(zhì)、磚瓦和攝影作品做背景
圖18
19、標(biāo)記印章
圖19
20、價(jià)簽
圖20
21、絲帶
圖21
[Page: ]
出格布局
正如在幾個(gè)月前所做的40個(gè)創(chuàng)新設(shè)計(jì)布局：出格布局的展示那樣，我們正在觀察一種向更具個(gè)性和創(chuàng)新性布局發(fā)展的強(qiáng)大趨勢。與使用傳統(tǒng)四四方方的盒狀布局不同，設(shè)計(jì)師們正在嘗試新的信息結(jié)構(gòu)、呈現(xiàn)和表達(dá)方式。
在這些出格布局設(shè)計(jì)中，整體創(chuàng)意往往比具體內(nèi)容更重要，也更令人難忘。盡管如此，可用性、版式和視覺設(shè)計(jì)也很少被忽視，并被謹(jǐn)慎地執(zhí)行。創(chuàng)新布局在大項(xiàng)目、網(wǎng)站設(shè)計(jì)機(jī)構(gòu)和宣傳網(wǎng)站（如大公司的商業(yè)活動(dòng)）中尤為流行，但它也同樣流行于blog中。
圖22
提到創(chuàng)意，可用和不可用設(shè)計(jì)之間的界限就非常模糊了；因此，可用性測試就顯得尤為重要，因?yàn)橐豁?xiàng)新的創(chuàng)意能打破網(wǎng)站故有的東西。通常，折中考慮創(chuàng)意、經(jīng)典和傳統(tǒng)設(shè)計(jì)是一個(gè)不錯(cuò)的主意，也就是說要設(shè)法去取得一個(gè)“堅(jiān)不可摧”（甚至最終很單調(diào)）的可用設(shè)計(jì)與一個(gè)有創(chuàng)意但不可用設(shè)計(jì)之間的平衡。記住，創(chuàng)意需要時(shí)間來成長：重新思考、修改、調(diào)整、優(yōu)化，最終整合到你的設(shè)計(jì)當(dāng)中。
我們強(qiáng)烈鼓勵(lì)設(shè)計(jì)師打破傳統(tǒng)盒狀布局的慣例，去嘗試新方式和你大膽瘋狂的想法。施展你的才華吧！
圖23
圖24
圖25
圖26
圖27
圖28
圖29
圖30
圖31
[Page: ]
單頁布局
另一種設(shè)計(jì)師經(jīng)常使用的、給訪問者留下深刻印象的方式，就是所謂的單頁布局：這種布局使用一個(gè)單獨(dú)的頁面來呈現(xiàn)網(wǎng)站的內(nèi)容。它并不一定意味著這些設(shè)計(jì)就是極簡的（遵循“少即是多”原則）。而剛好相反，這種設(shè)計(jì)往往十分復(fù)雜，它包含了豐富的圖像和生動(dòng)的動(dòng)畫效果，因此需要加載一段時(shí)間。
圖32
當(dāng)用戶點(diǎn)擊了一個(gè)導(dǎo)航選項(xiàng)，頁面隨之改變（部分變化），新的內(nèi)容就出現(xiàn)在了顯示先前內(nèi)容的區(qū)域里。這種布局中導(dǎo)航滑動(dòng)和滾動(dòng)的效果，由公共JavaScript庫來支持。
對用戶來說最主要的優(yōu)勢來自于一個(gè)簡單的事實(shí)，即通過更少的鼠標(biāo)移動(dòng)和點(diǎn)擊，來獲得用戶想要的信息。由于這個(gè)方法非常新，對那些使用非傳統(tǒng)導(dǎo)航就會感到困惑的用戶來說是個(gè)好機(jī)會。有些種情況下，一個(gè)“靜態(tài)”版本可能會派上用場，甚至是有必要的；比如你將不得不為搜索引擎，和禁用了JavaScript的用戶提供另一版本。
圖33
圖34
圖35
多欄布局
多欄（3欄以上）不一定就是復(fù)雜的設(shè)計(jì)。從反面看，如果設(shè)計(jì)得當(dāng)，多欄對訪問者會十分有幫助，因?yàn)樗鼈優(yōu)榭梢姷膶?dǎo)航選項(xiàng)提供了更好的綜覽，從而使得用戶可以快速地找到他們想要的信息。
過去幾年里，我們見證了網(wǎng)站內(nèi)容的爆炸，這降低了用戶在網(wǎng)站上所投入的注意力和時(shí)間（詳情查看ReadWriteWeb）。所以，難怪設(shè)計(jì)師們都開始嘗試尋找更簡潔的信息呈現(xiàn)方式，既能讓訪問者在網(wǎng)站上停留的時(shí)間盡可能的長，又能更簡單的找到內(nèi)容。
圖36
實(shí)現(xiàn)這一目的的方法之一，就是使用多欄相鄰的布局。這個(gè)想法十分合理。屏幕分辨率在最近幾年里不斷增加（然而，像華碩Eee PC這樣的上網(wǎng)本得以廣泛使用的話，情況可能會有所改變），從而可以為用戶提供更多橫向空間，也能給設(shè)計(jì)師提供額外空間去填充內(nèi)容。
結(jié)果表明：現(xiàn)在越來越多的設(shè)計(jì)師，采用越來越多的欄在設(shè)計(jì)中。我們研究發(fā)現(xiàn)有向這些所謂多欄布局發(fā)展的強(qiáng)大趨勢，通常在1000像素的屏幕中，寬度固定為850像素。多欄常被用在雜志布局和大項(xiàng)目中。在這些布局里，柵格常被用來保證結(jié)構(gòu)平衡、層級和次序。
使用多欄布局，主動(dòng)留白以及各自內(nèi)部欄之間的重要性不能被夸大。（主動(dòng)留白是故意留出空白，以更好地表現(xiàn)頁面結(jié)構(gòu)，強(qiáng)調(diào)內(nèi)容的不同區(qū)域。）
為此，設(shè)計(jì)師常利用“Shneiderman的真言”（“首先表達(dá)大局，隨后顯示細(xì)節(jié)”），先為用戶提供一個(gè)功能概況，然后按需提供細(xì)節(jié)——稍后，當(dāng)某個(gè)鏈接被點(diǎn)擊時(shí)（Mozilla Labs就是個(gè)最好的例子）。
圖37
圖38
圖39
[Page: ]
巨型插圖和充滿活力的圖形
如同巨型版式主宰當(dāng)今網(wǎng)頁設(shè)計(jì)一樣，無論是專業(yè)還是個(gè)人網(wǎng)站項(xiàng)目中，巨型插圖似乎都越來越受歡迎。設(shè)計(jì)師正試圖用互動(dòng)元素（植入式視頻區(qū)）和視覺元素（導(dǎo)言區(qū)和插圖）來傳達(dá)網(wǎng)站的信息。在近來的設(shè)計(jì)中，插圖比原來占據(jù)更大的空間，通常作為巨型版式的補(bǔ)充。它們更具吸引力，并且更加生動(dòng)，因此更容易被訪問者記住。
另外，設(shè)計(jì)師也運(yùn)用一些充滿活力的圖形，尤其是為背景，也為其他設(shè)計(jì)元素。不同的風(fēng)格和圖形均被使用：如陳舊物、拼貼畫、剪貼冊、飾品、復(fù)古樣式、水彩、有機(jī)材質(zhì)和攝影背景等。
圖40
圖41
圖42
圖43
圖44
圖45
圖46
[Page: ]
比以往更多的留白
或許最可預(yù)知、也最為有益的事情之一，就是在過去幾年的網(wǎng)頁設(shè)計(jì)中，留白日益突出。它在許多設(shè)計(jì)中處于首要位置，并被廣泛用于改善網(wǎng)站的文章流和結(jié)構(gòu)。
事實(shí)上，我從未見過內(nèi)容區(qū)和導(dǎo)航菜單上有這么多內(nèi)邊距。外框和內(nèi)容區(qū)的內(nèi)邊距在20至25像素正逐漸成為一種約定俗成的法則，甚至更大的內(nèi)邊距也被普遍接受。希望，這一趨勢繼續(xù)發(fā)展下去。
圖47
圖48
圖49
圖50
社會設(shè)計(jì)元素
縱觀blog圈，你幾乎找不到一個(gè)不使用社會性圖標(biāo)或區(qū)塊，讓讀者通過知名社會性媒體網(wǎng)站去推廣它們內(nèi)容的blog。每個(gè)作者都希望得到可觀的流量和認(rèn)可，這也是為什么在當(dāng)今設(shè)計(jì)中，社會性元素變得更大、更具吸引力。
社會性圖標(biāo)到處可見，但多出現(xiàn)于文章的右上角或底部。社會性區(qū)塊經(jīng)常被放在文章下面，有時(shí)也出現(xiàn)在相關(guān)文章列表旁邊。Twitter，F(xiàn)lickr和Last.FM的混合仍然是blog和項(xiàng)目中常見的組合。
圖51
圖52
圖53
圖54
圖55
圖56
[Page: ]
對話式導(dǎo)航
去年我們曾寫過一篇名叫“對話式導(dǎo)航”的文章，在現(xiàn)在的很多網(wǎng)站中，貌似這個(gè)元素依然流行。導(dǎo)航所要完成的最大任務(wù)，是清晰地引導(dǎo)用戶到達(dá)網(wǎng)站的不同地方。然而，要通過一兩個(gè)關(guān)鍵字來表達(dá)內(nèi)容是極其困難的，特別是使用橫向?qū)Ш健?/P>
這就是為什么通常導(dǎo)航?jīng)]法用適當(dāng)?shù)年P(guān)鍵字一個(gè)接一個(gè)簡單列出的原因（即使用“無對話的”導(dǎo)航）。取而代之，設(shè)計(jì)師正在試圖具體解釋什么選項(xiàng)可用，什么是訪問者點(diǎn)擊網(wǎng)站鏈接后所期望的。
因?yàn)樵O(shè)計(jì)師正嘗試開展與訪問者之間的更多對話，所以我們愿意稱這種方案為“對話式”導(dǎo)航，相對于那種建立在關(guān)鍵字列表基礎(chǔ)上的“無對話的”導(dǎo)航。
圖57
圖58
圖59
圖60
圖61
導(dǎo)航區(qū)通常都是具有相同高度和寬度的區(qū)塊，因此訪問者感覺內(nèi)容能被輕松引導(dǎo)。大圖標(biāo)也使用的很頻繁，但在大多數(shù)情況下，它們是否適用取決于網(wǎng)站的內(nèi)容和總體布局。導(dǎo)航設(shè)計(jì)中的鼠標(biāo)懸停效果會讓瀏覽變得更愉快。
圖62
[Page: ]
動(dòng)態(tài)的tab
作為交互設(shè)計(jì)中最流行的趨勢之一，tab可以動(dòng)態(tài)地改變內(nèi)容區(qū)域。活動(dòng)tab背后的想法是，當(dāng)頁面被加載時(shí)，所有tab的內(nèi)容也被加載，但一次只顯示一個(gè)tab部分的內(nèi)容（屬性展示被用來實(shí)現(xiàn)這種效果）。你可以參照教程動(dòng)態(tài)的tab 和tab在jQuery中的視覺控制 來創(chuàng)建動(dòng)態(tài)的tab。
圖63
圖64
圖65
圖66
圖67
相關(guān)鏈接：2009年海外網(wǎng)頁設(shè)計(jì)風(fēng)潮
