2010 Web 設計趨勢潮流

19年前，世界上第一個網頁誕生，它沒有設計可言，由文本和url組成，樣式只有最基本的<h1> <p>。 而如今，Web設計已經成長為獨立而龐大的設計門類，一個網頁的創造需要多個工種、多種技術的參與，其流程的複雜和挑戰性已經超過任何傳統設計類別。

這19年間，網站的擁有者越來越清楚自己的目標，而設計師們也越來越理性和專注，人們在不停尋求商業訴求、用戶、審美和技術上的平衡點。每一年過去，都有無數過時的風格、特徵元素以及實現技術被拋於身後。

 

設計風潮體現著一個時期內人們對特定的風格、趣味、審美、技術乃至理念等各種模型或特徵的追隨。新技術的發展、 媒介載體的佔有量的變化、新網站類型的誕生、全球的設計思潮的影響、行業領軍者的轉變、明星設計師個體的亮點，這些因素都在推動潮流的變化。 你可以回想一下那些曾經風靡一時的模式：復古的像素樣式；Google的樸素之風；韓式清新插畫風；Flashsite的興起帶來的不規則佈局和動畫的濫 用；Apple引發的對質感的追求；用戶和情境意識的覺醒；對細節的關注——圓角和陰影的廣泛運用； Web2.0設計風潮中典型的配色和特徵元素；空間與層次感的魔術……

09年流行的半透明風格：

空間和層次感的魔術：

潮流的湧現，是社會一致化與個體差異化的碰撞，每一次碰撞都推動著這個行業的進步。

 

讓我們來看看這些發生中的變化：

簡潔，精簡，極簡

極簡主義（Minimalism ）在這一年大熱。原因有4點：

1， 手持便攜設備的佔有量逐步上升，人們的訪問方式發生了改變，小尺寸屏幕所需的精簡之道反過來影響了整體的設計趨勢。

2， Apple簡潔、專注、充滿誘惑力設計哲學重領潮流，效仿者眾多。

3， 來自全球設計思潮的影響：極簡、禪意、人文、空間感的「日式風格」這兩年在出版界、時裝設計、包裝設計、工業設計界都頗受追捧。

4， 網站的專業性和針對性在進一步加強，人們選擇一個網站一次把一件事做好、做到極致，而非盲目擴張。這也使「精簡」擁有更大的實現空間。

極簡主義體現設計師對意圖、受眾、情境的強大控制力。不是簡單的做減法就可以了，如果不能很好地把握取捨的宗旨與理由，一個為了極簡效果而精簡的頁面可能看起來庸俗不堪，是為「做作」的留白 。

操刀這一風格需要對作品有充分的自信和理解力，更重視細節和佈局，把握恰當的對比、強調。

來自版式和留白的均衡美感

極簡主義風格非常適用於以圖片為表現主體的網站

極簡主義的風潮中，還湧現了許多單頁網站。所有內容都放在一個頁面上呈現，通過分屏來巧妙地佈置格局，不再有跳轉和複雜的站點結構，一目瞭然。

更有人情味與趣味的設計

運營上的專注使得設計師們可以在設計中投入更多的感情，更有針對性地取悅受眾。從保守、冷漠、功利的陳舊風貌中，湧現出更多富有生命力和趣味的產品。

Twitter取得了巨大成功，可愛的小鳥形象深入人心。以動物為主題的logo和網站吉祥物也隨之風行起來。

這一變化出現的原因：
1是具有針對性的中小型服務和應用類網站大批湧現。
2是來自示範者的力量。
3是多元化的必然趨向。
4是在功能性、規範性和用戶體驗之外，設計師開始尋找那些從未出現過的、能更深層次打動用戶的東西——「一種在感情上贏得人們喜愛的東西」。

親和、活潑、富有感染力、配色清新、使用自然元素作為裝飾物。

 

曾經很不常見的高飽和度的配色，這種充滿動感和生命力高調設計讓人充滿驚喜。

精緻有趣的細節

原文鏈接: http://blog.xiqiao.info/2010/07/19/719

 

對傳統設計的借鑑

Web設計這個年輕的分支在自我生長的同時也在不停向傳統設計汲取營養。在佈局與版式方面，設計師們一直在探尋更好的表現手法，所以嘗試從傳統的設計媒介中尋求靈感，雜誌版式佈局（ Magazine-style Layouts）的從09年就開始大熱，不光大型新聞網紛紛求變，雜誌版式佈局的Wordpress Themes 也炙手可熱。 這一變化對傳統設計不僅僅是形式上的追隨，更重要的是嘗試去借鑑與融合的態度。

Times 和 Financial Times 都是國外老牌媒體，他們的網站佈局結合傳統紙媒版式有許多新潮的亮點，比如 豎式的流體佈局，圖文混排，頭條強調，由標題字號變化帶來的層級差別。

而國內的此類網站絕大多數採用的還是非常傳統的橫向區塊佈局，信息密度高，版式缺乏節奏和韻律。

由比較可見，國外的大容量信息網站的趨勢是 降低首頁的信息密度，把內容分攤到二級頻道；版式上更具引導性、更適於閱讀，瀏覽方式像讀報一樣更流暢隨意。
由於廣告盈利價值的差別，國內這類網站還是使用信息密度極高的索引模式，所以看起來更像說一份導流量的「黃頁」而非可隨心閱讀的媒體。在信息呈現密度與模式無法改變的情況下，照搬國外的版式佈局是非常危險的。

除了在樣式上的借鑑，傳統版式設計上的許多經典的實現手法也移植了過來，最著名的就是黃金比例和柵格系統（Grid System)。柵格系統的歷史有300多年，運用嚴謹的幾何網格來指導和規範元件的分佈排列。將傳統柵格移植為適合網頁設計的系統，不光是創造了一種工具，也產生了一種普遍的審美規範與傾向。無論你是選擇遵循規範還是打破規範，都是對它的推動。

 

960px寬的網頁柵格系統 960 Grid System：

個體風格帶來的變化

誰才代表著趨勢？有人認為設計師們所追捧的變化代表了潮流， 有人認為top100的大站才是大勢所趨。狡猾一點說，兩個說法都不確切，網站運營的Top100並不代表設計上的Top100，出於多種原因，很可能它 們是最保守的陣營。但你無法忽略他們對用戶/客戶的審美及視覺習慣造成的影響。而設計師們雖然願意挑戰和嘗試變化，但在面對個人化設計和商業設計時，他們 的取捨卻往往不盡相同。

巨頭和個體們在設計風格一直在互相影響和滲透。所以你永遠不應該輕視那些看起來「個人化」和「小眾」的創新設計。觀察它們的最好舞台就是設計師的Blog和Profile站。

下面這幾點都是從現在小眾網站上流行，慢慢被許多普通大眾網站設計所趨向的特徵。。

更大header區，更醒目的logo和標識，字號更大的標題。

內容放得再多再好，但用戶記不住「你是誰？」也是白費。 更大header區強化了用戶對品牌和風格的記憶，讓你有更多的發揮餘地去表現。

在背景中使用恰當地紋理。

十幾年前，在美化手法貧乏的年代，人們也喜歡在背景中使用紋理，但大多只取得了浮華嘈雜的效果。現在的設計師們學會了理性而低調的使用紋理來製造風格、提升品質和烘

戶外服裝的電子商城。使用了粗礪的水泥紋理：

嬰幼兒用品的電子商城，使用了清潔柔和的圓點紋理：

把Footer區利用起來

這是典型的受Blog設計影響的潮流，在footer區放上更多的信息、標誌與快捷入口。

更注重品質，更能抓住用戶眼睛的設計

這點變化在和消費掛鉤的網站上非常明顯。設計師們注重對設計心理學和視覺傳達的技巧的運用，使用強調和對比的策略來引導用戶的視覺焦點。更醒目的標題，高質量的圖片，使用slideshow來創造更多展現空間空間，這些手法都在強調那些希望得到用戶關注的地方。

Apple網站的專業、直接、有效的界面設計，不光打動了消費者的心，也吸引了眾多開發者的效仿，大量App應用網站都以使用Apple風格為榮。

iPhone 4 發佈時的Apple.com 首頁：一切無關的都被省略了，表現主體被無限強調，它牢牢抓住人們的目光，傳達出最直接的誘惑：