2009 Web 設計風潮第 2 部分

這是COMSHARP CMS 團隊翻譯的2009年海外Web設計風潮的第二部分，著重講解了反 Box 式布局，單頁布局，多欄布局，巨型插圖設計，更多留白，社會網絡元素，講解式導航菜單，以及動態 Tabs 等設計風格，和 Smashing Magazine 推出的所有類似文章一樣，里面包含了大量的，非常漂亮的實例。

1. 反 Box 式布局

   

2. 單頁布局

   

3. 多欄布局 

   

4. 巨型插圖與多變背景

   

5. 更多留白

   

6. 社會網絡元素

   

7. 講解式導航菜單

   

8. Status elements (Flickr, Twitter et al)

   

9. 動態 Tab 

   

10. 超大搜索框

    

11. Category visuals

    

12. 作者頭像圖標 （這也算？-譯者）

    

13. 圖標和視覺引導

    

14. Tag 索引 (取代 Tag 云)

    

15. 插圖風格

    

16. 水彩風格

    

17. 手寫風格

    

18. 懷舊風格

    

19. 有機紋理或照片背景

    

20. 證章風格

    

21. 價格標簽風格 

    

22. 條帶風格

    

    1. 反 Box 布局

    Smashing Magazine 曾有一篇文章，講到反 Box 布局。所謂反 Box 布局，就是不再拘泥與傳統的 Box 布局模型，而是采用一種更有創意的的布局，然而需要指出，這種創意布局需要非常注意易用性問題，一種新的創意布局需要時間去慢慢成熟。

    

    

    

    

    

    

    

    

    

    

     

    2. 單頁布局

    單頁布局是使用一個單一的頁面展示站點的全部內容，這并不意味著站點內容少，這個頁可能很復雜，包含了大量圖形和動畫效果，加載的時間也會有些長。比如，用戶點擊導航菜單后，該欄目下的新內容會在舊內容處通過漸入漸出，滑入滑出等動畫效果顯示出來，而頁面其它部分始終保持不變。（白宮的最新網站的首頁就有這個意思 - 譯者）

    

    

    

    

     

    3. 多欄布局

    多欄布局（大于3欄）通常比較復雜，但通過適當設計，會對訪問者帶來更好的訪問體驗。最近幾年，Web 內容爆炸，用戶停留在一個網站的時間越來越少，就要求  Web 設計者盡可能有效地展示數據，既要讓訪問者多停留，又要讓他們更容易發現他們希望看到的內容。

    

    多欄設計一般用于雜志布局或展示型布局站點，一般使用網格布局技術實現。多欄布局一般使用概述/細節式結構，首先用多欄展示概述式內容，然后進入詳細內容的展示。Mozilla Labs 就是一個很好的例子。

    

    

    

     

     

    4. 巨型插圖式與多變背景設計

    象巨型字體主導當前 Web 設計一樣，巨型插圖風格設計似乎也正流行起來，巨型插圖可以和巨型字體的結合使用，帶來更吸引人，更生動的效果。

    另外，設計師們越來越喜歡使用那些色彩鮮艷的圖形提供背景，包含各種風格，抽象畫，剪貼畫