2009年海外Web設計風潮(下)
作者: its
|
發布: 2009/1/22 (下午 03:39)
|
閱讀: 33464
|
評論: 0
|
靜態地址
|
內容源碼
這是 COMSHARP CMS 團隊翻譯的2009年海外Web設計風潮的第二部分,著重講解了反 Box 式布局,單頁布局,多欄布局,巨型插圖設計,更多留白,社會網絡元素,講解式導航菜單,以及動態 Tabs 等設計風格,和 Smashing Magazine 推出的所有類似文章一樣,里面包含了大量的,非常漂亮的實例。 本文第一部分請參閱:2009年海外Web設計風潮(上)。
2009 Web 設計風潮第 2 部分
- 反 Box 式布局

- 單頁布局

- 多欄布局

- 巨型插圖與多變背景

- 更多留白

- 社會網絡元素

- 講解式導航菜單

- Status elements (Flickr, Twitter et al)

- 動態 Tab

- 超大搜索框

- Category visuals

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

- 圖標和視覺引導

- Tag 索引 (取代 Tag 云)

- 插圖風格

- 水彩風格

- 手寫風格

- 懷舊風格

- 有機紋理或照片背景

- 證章風格

- 價格標簽風格

- 條帶風格

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公里譯)
|