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