網頁設計公司必讀的文章 ( 156 ) 2009年網頁設計流行趨勢(上)

我們這些網站設計者都是善變的。我們樂於嘗試不同的事。我們樂於觀察人們如何與我們的的作品進行交互。我們樂於嘗試用特別設計方法，這些方法有可能成為主流並變成標準、優秀的設計方法。

因此，新的設計方法不斷湧現，越來越多的設計者注意它們並運用這些方法技巧，新的趨勢也就自然出現。
在過去的幾個月裡，我們已經分析了眾多的網頁設計，觀察了新的趨勢，權衡了眾多設計決策與代碼解決方案。在這篇文章裡，我們展示了2009年網頁設計的趨勢：新的發展，新的設計元素，新圖形技巧方法。

首先看一下我們這幾個月確認、發現與觀察到的主要趨勢。在這一概述裡，你會發現每個趨勢與很多精美案例，這些案例能夠讓你在新項目中激發靈感。

Letterpress 文字凹凸


Rich user interfaces 華麗的用戶界面


PNG transparency png 透明


Big typography 大文字排版


Font replacement (sIFR, etc.) 新字體


Modal boxes 對話框


Media blocks 多媒體播放模塊


The magazine look 雜誌化的視效


Carousels (slideshows) 滑動展示(滑動門)


Introduction blocks 介紹模塊


現在開始仔細瞭解以上這些趨勢。

1. Letterpress字體凹凸效果




















2. Rich User Interfaces


用戶界面在現今網站與網頁應用上以已經變得更精美與更實用。在過去的幾年裡，應用方面的用戶體驗已顯著提升。這促使高級、敏感的用戶界面已經與桌面應用程序具備了巨大的相似性。
Ajax與flash已被廣泛使用，用來實現用戶動態的交互，它們已被期望成為更高級、尖端、專業的解決方案。





Both examples are evidence that designers of Web applications are paying significantly more attention to the way in which functionality is presented and are trying to improve the user experience with more interactive and responsive solutions.















3. PNG transparency PNG透明效果

png透明效果，雖然ie6不支持，但是過去幾年裡，似乎已經被廣泛使用。很顯然，設計者證嘗試更好的融合背景圖片與內容，並期望實現印刷媒體、雜誌常見的效果。在很多案例中，半透明背景讓重要的設計元素，例如標題公告等能更加突出。有時也會用在彈出窗口上（如jquery的對話框效果)















4. HUGE Typography 大字體

2009難免大號字體排版依然流行，設計公司、個人展示、產品網站、在線服務等都將使用號字體排版來傳達它們網站最重要的信息。


















5. Font Replacement

因為設計者越來越關注文字排版，所以他們也更加關注設計稿與網站的字體。經典的字體像Helvetica、Arial、 Georgia與Verdana無疑還是占主導地位，但是我們也觀察到一些字體取代傳統字體的趨勢（例sifr)。












6. Modal Boxes (Lightboxes) 模態化窗口

（對話框一般分為兩種類型：模態類型（modal）與非模態類型（modeless）。所謂模態對話框，就是指除非採取有效的關閉手段，用戶的鼠標焦點或者輸入光標將一直停留在其上的對話框。非模態對話框則不會強制此種特性，用戶可以在當前對話框以及其他窗口間進行切換。）

模態化窗口（對話框）基本上算是第二代的彈出窗口。它作為傳統js彈出窗口的用戶友好型替代服務，讓用戶能夠把注意力集中到網站最重要的區域。模態化窗口同時也被用戶行為（例如註冊登錄）觸發。








7. Media Blocks 多媒體內容模塊

隨著寬帶互聯網接入，用戶能夠承受並瀏覽比幾年前更豐富的內容。於此同時，設計者也抓住這個機會通過更具吸引力與記憶效果的途徑去呈現內容。因此，這就難怪很多產品網站用多媒體內容來達到宣傳的目的。這些元素的主要優勢是他們能夠有效的傳達內容並讓用戶能容易消化信息。






8. The Magazine Look 雜誌化的版面設計

博客設計中的一個有趣的進步是它適應各種傳統（印刷）媒體中常見的技術。文章頁面的排版，字體的使用，插圖與文字的對齊往往也適合用傳統技術去印刷。基於柵格化的設計正被普遍採用並用作概要介紹、產品頁面與大的博客。這種情況很少出現在公司網站與在線購物網站












9. Carousels (Slideshows) 圖片滑動輪播(中文網站應該已經很普遍了)









酷炫flash xml動態相冊
6個國外免費的flash xml動態相冊下載
javascript仿flash效果柔滑相冊 左右滾動、透明漸變(小圖預覽、箭頭控制)
Flash CS3 as3.0三維效果多圖片滾動預覽組件
Flash+php相冊 Imagevue 1.7
>>更多flash圖片輪播源碼


10. Introduction Blocks介紹區域

頁面左上角是網站的最重要的區域，因為這是訪問者注意力的關鍵位置。所以在網站的這個位置花心思去展示最重要的信息，確保讀者能迅速獲取信息。












Stay tuned!保持住，不要換台

This article covers only 10 of the over 25 trends we』ve identified over the last months. The second part will be published next week. We』ll cover new layouts, new visual approaches and new design elements. Please stay tuned.

這篇文章只涵蓋了過去幾個月我們總結出的25個流行趨勢中的10種，第二部分將在下周發佈，期待中…..

原文出處：Smashing Magazine
翻譯：51flash.cn