欧美专区在线观看-欧美笫一页-欧美综合国产-欧美综合精品-成人性生活视频-成人性色大片

2009 Web 設(shè)計風(fēng)潮第 2 部分

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

1. 反 Box 式布局

   

2. 單頁布局

   

3. 多欄布局 

   

4. 巨型插圖與多變背景

   

5. 更多留白

   

6. 社會網(wǎng)絡(luò)元素

   

7. 講解式導(dǎo)航菜單

   

8. Status elements (Flickr, Twitter et al)

   

9. 動態(tài) Tab 

   

10. 超大搜索框

    

11. Category visuals

    

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

    

13. 圖標和視覺引導(dǎo)

    

14. Tag 索引 (取代 Tag 云)

    

15. 插圖風(fēng)格

    

16. 水彩風(fēng)格

    

17. 手寫風(fēng)格

    

18. 懷舊風(fēng)格

    

19. 有機紋理或照片背景

    

20. 證章風(fēng)格

    

21. 價格標簽風(fēng)格 

    

22. 條帶風(fēng)格

    

    1. 反 Box 布局

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

    

    

    

    

    

    

    

    

    

    

     

    2. 單頁布局

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

    

    

    

    

     

    3. 多欄布局

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

    

    多欄設(shè)計一般用于雜志布局或展示型布局站點，一般使用網(wǎng)格布局技術(shù)實現(xiàn)。多欄布局一般使用概述/細節(jié)式結(jié)構(gòu)，首先用多欄展示概述式內(nèi)容，然后進入詳細內(nèi)容的展示。Mozilla Labs 就是一個很好的例子。

    

    

    

     

     

    4. 巨型插圖式與多變背景設(shè)計

    象巨型字體主導(dǎo)當(dāng)前 Web 設(shè)計一樣，巨型插圖風(fēng)格設(shè)計似乎也正流行起來，巨型插圖可以和巨型字體的結(jié)合使用，帶來更吸引人，更生動的效果。

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