2009年海外Web設計風潮(下)

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

2009 Web 設計風潮第 2 部分

    1. 反 Box 式布局

  1. 單頁布局

  2. 多欄布局 

  3. 巨型插圖與多變背景

  4. 更多留白

  5. 社會網絡元素

  6. 講解式導航菜單

  7. Status elements (Flickr, Twitter et al)

  8. 動態 Tab 

  9. 超大搜索框

  10. Category visuals

  11. 作者頭像圖標 (這也算?-譯者)

  12. 圖標和視覺引導

  13. Tag 索引 (取代 Tag 云)

  14. 插圖風格

  15. 水彩風格

  16. 手寫風格

  17. 懷舊風格

  18. 有機紋理或照片背景

  19. 證章風格

  20. 價格標簽風格 

  21. 條帶風格

1. 反 Box 布局

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

 

2. 單頁布局

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

 

3. 多欄布局

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

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

 

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

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

另外,設計師們越來越喜歡使用那些色彩鮮艷的圖形提供背景,包含各種風格,抽象畫,剪貼畫,剪貼簿,裝飾畫,懷舊,水彩,有機紋理以及照片背景等。

 

5. 更多留白

這是近年來最值得期待,也是最有意義的 Web 設計風潮,設計師們在頁面留白方面越來越慷慨。(這也是我非常欣賞的一種風格,只可惜在我們國內,仍有大量的客戶認為滿當當的頁面說明你的公司實力雄厚 - 譯者。)

 

6. "社會"網絡元素

任何人都喜歡流量與認可,在 Web 設計中加入社會網絡元素,可以鼓勵你的訪問者參與進來。(不過在 Web 2.0 日漸式微的今天,也許滿頁花里胡哨的社會網絡元素正逐漸變得讓人厭煩 - 譯者)

 

7. 解釋風格的導航

傳統的水平導航條,一般是一些標題連接或圖標鏈接,用戶很難從這些短短的信息中真正知道這些導航所代表的內容,解釋性導航會在欄目導航菜單上提供進一步解釋內容,讓用戶更好地理解這些欄目代表的內容。

這類導航一般使用更容易表達內容的大圖標,加解釋性文字,鼠標 Hover 效果也必不可少。

 

8. 動態 Tabs

這類設計一般在頁面加載時,將多個 Tab 中的內容一次性加載,通過 Javascript 或 CSS 效果,實現鼠標指向某個 Tab 時,該 Tab 中的內容立即顯現。(微軟官方站近一年來一直是這個設計風格的代表。- 譯者)

本文國際來源:http://www.smashingmagazine.com/2009/01/21/current-web-design-trends-for-2009/
中文來源:COMSHARP CMS 網站(35公里譯)





評論
...
發表評論


用戶


評論(不超過1000字)


 2 - 7 = ? 請將左邊的算術題的結果填寫到左邊的輸入框  


  發送給朋友| 打印友好
7 x 12 小時服務熱線
0532 - 83669660
微信: comsharp
QQ: 13885509
QQ: 592748664
Skype: comsharp