|
2009年海外Web設計風潮（上）
作者: its
|
發布: 2009/1/19 (下午 02:57)
|
閱讀: 31625
|
評論: 0
|
靜態地址
|
內容源碼
這是 Smashing Magazine 花費幾個月的時間研究編寫的 2009 年 Web 設計風格與潮流，Smashing Magazine 的編輯們對當前流行的大量 Web 設計風格進行分析，總結出那些可能在 2009 年風行的潮流，包括新的設計元素，新的圖形方式，并給出大量的漂亮的示例。這是第一部分10個潮流，第二部分15個潮流將于下周推出。
2009 Web 設計風潮
- 凸版印刷風格
- 富UI
- 透明 PNG
- 大字體
- 代用字體
- 燈箱框
- 媒體塊
- 雜志式樣
- 幻燈滾動
- 重點展示區域
1. 凸版印刷風格
這種風格有些出人意料，可能因為之前很少有人使用。該風格在在各種主題的網站中都有，但主要用于產品設計或在線服務類網站。
2. 富UI
現代 Web 中的 UI 變得越來越漂亮，越來越好用。過去的一年，Web 中的 UI 有了顯著提高，有了一種接近桌面的感覺。Ajax 和 Flash 被廣泛使用。
特別是我們比去年看到了更多留白區域，還看到很多現代的 UI 技術會顯示用戶同系統之間交流的視覺狀態，比如，按鈕在正常和被按下時顯示不同的樣子，用戶同系統交互時能及時得到反饋，另外，越來越多的服務可以被用戶定制。
這些設計顯示 Web 設計師將更多精力放到了用戶體驗上。
3. 透明 PNG
使用 PNG 實現透明雖然不被 IE6 支持，卻在過去的一年大行其道。設計師們似乎正在嘗試將背景圖片和內容融合并實現一些印刷媒體的風格。比如，將 PNG 半透明圖片放到整體背景的某個區域上，用來加亮顯示這個區域，如標題或聲明。一些 PNG 同名技術還用來實現燈箱框效果。
Smashing Magazine 去年曾有篇使用透明效果實現創意設計的文章，很多設計師在他們的作品中開始嘗試這些技巧。有趣的是，透明效果常被用于頁首和頁尾部分，不過也有些例外。
4. 巨大字體
以前的文章中我們曾介紹過巨型字體設計，2009年，巨型字體設計還會風行，尤其是那些設計社，以及展示型，產品介紹型，或在線服務型網站，他們會使用巨型字體顯示重要信息。
巨型字體設計中使用的字號往往超過36px，設計師們對字體編排注入了更多關注，以實現更漂亮，更連貫，更值得信賴的站點。
5. 代用字體
設計師們還把更多注意力放到字體上，雖然經典的 Web 字體，Helvetica, Arial, Georgia 以及 Verdana 等仍占主流，一些代用字體正浮出水面（如 sIFR）。
有趣的是，這些字體會和設計無縫地銜接，設計師們似乎并非為字體而字體，而是要將字體同他們的設計結合在一起實現更漂亮的效果。
6. 燈箱效果
燈箱框是第二代彈窗，它們比第一代基于 JavaScript 的彈窗更友好，可以讓用戶將注意力集中到最重要的部分。這些窗口一般由用戶的某個行為激發，并顯示在其它內容的上層，他們有時候是半透明的，并包含一個關閉按鈕。
7. 媒體塊
隨著寬帶接入的普及，用戶現在可以承擔更豐富的內容，設計師們也借機提出更有吸引力的內容。越來越多產品網站使用媒體塊顯示視頻，讓用戶更容易理解這些內容。用戶只需靠在椅子上看視頻，不需要一步一步往下點，這些食品通常比較短，直奔主題，雖然很正規，但也包含一些娛樂性。
不過請注意，視頻應當是你內容展示方式的次要選項，并不是所有人都有寬帶接入，也不是所有人都喜歡有視頻播放（他們可能正在后臺聽網絡收音機或播放音樂），另外，也不是所有人都啟用了 Flash 和 Javascript。
8. 雜志外觀
傳統印刷媒體設計中使用的編排技術也出現在 Blog 設計中，文章的編排，文字排版，圖片甚至對其方式。基于網格的設計也很流行，但主要用于展示與產品頁以及大型博客，極少用于公司網站或網店。
9. 滾動幻燈導航
幻燈片水平和垂直滾動，可以向不同方向滾動，當前項加大加亮。這種導航技術可以讓用戶快速直觀地瀏覽站點中的內容。一般常用語娛樂性網站，另外，設計者還可以使用該技術展示他們的作品。
10. 在重點位置做形象展示
網站的左上方一般是一個站點最重要的區域，因為那是用戶注意力最集中的地方。因此，在那個部位放上網站中最重要的信息是明智之舉。
事實上很多設計師正是這樣做的，不管是 Web 程序，公司網站，在線服務還是作品展示，設計師們將口號或簡介性內容放在那里，并使用醒目的排版給用戶以良好的第一印象。這些內容長短不一，不管哪種方式，但它們都占據可觀的空間，一般橫跨整個幅面，高度在250到400之間。不過這些形象展示性區域一般并不用于博客或在線商店。
未完待續
本文國際來源：http://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009/
中文翻譯來源：COMSHARP CMS 官方網站（35公里譯）
| 
團隊博客
