web設計趨勢與潮流

1 評論 4143 瀏覽 7 收藏 22 分鐘

原載于 《程序員》雜志2010年第7期。 作者:西喬

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 首頁:一切無關的都被省略了,表現主體被無限強調,它牢牢抓住人們的目光,傳達出最直接的誘惑:

  • 消費類網站的趨勢:使用更醒目的標題,更大尺寸的高質量產品圖片,讓用戶形成感官上的認識,而不僅僅是信息的列。
  • 高質量的商業攝影越來越多地出現在網站配圖中。精心處理過的摳底圖片配合簡潔的整體設計,是電子商務網站近幾年的趨勢。

  • Slideshow的使用風頭正勁。用于在有限的空間內展示更多的信息(通常是為了放下更多大圖片), 增加頁面的動感和觀賞的流暢性。

    在頁面里運用可視化圖表也是一個潮流,一些表單操作也被加工為可交互的圖表。將信息或數據可視化,助讀者更深入直觀地理解其含義。

    更有效但低調的交互。

    交互在Web設計中是如此重要,為了讓用戶與界面更好地溝通,許多設計師過度地重視了交互,特別是只關注細節而失敗于全局。大量交互行為被過度設計,變成了用戶的負擔。如果信息能夠被更好的匹配或呈現,許多交互是可以避免的。未來,設計師們力求通過優化信息架構和使用流程去減少交互,更成熟地運用情境菜單(上下文菜單),將操作反饋處理得更為隱形和自然。

    交互的設計會向著直接有效、更低調、提升使用樂趣的方向發展。

    coda.co.za 這個網站的交互反饋,非常簡潔優雅,效果自然。

    當鼠標移到某張CD上的時候,它信息會通過隱藏右邊的CD顯示出來。這種反饋比懸浮框更自然。

    與物理世界操作經驗吻合的交互體驗

    越來越多的Web操作允許快捷鍵的參與。允許快捷鍵可以提升高級用戶操作效率,增加使用樂趣,同時也是為了更好的向無障礙訪問的方面進步,照顧視力不好或無法鼠標的用戶。

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

    結語:去哪里捕捉和觀察趨勢。

    相較于國外的這一波波風潮,國內的設計師的行動并不多,許多原因使他們面對這些變化,或保守或滯后。同時,許多生硬的抄襲和模仿也正在傷害國內的設計行業,從Templates (許多是過時且侵權的) 開工、抄捷徑的“拿來主義”不光在腐蝕一個設計師的創造力,也在折損著整個行業從業者的價值。

    我希望年輕的設計師盡可能多得去關注國外的專業Blog和作品畫廊站(Gallery),低頭干活的同時,抬頭看路。這樣才能在團隊中提供自己的專業判斷,而不只是一個被動的“美工”。

    專業Blog:

    • www.smashingmagazine.com 可以說是如今全球內容質量最高的Web設計專業Blog。訂閱量接近20萬。設計師們一定不可以錯過。
    • sixrevisions.com 為首的多名技術專家共同撰寫的blog,提供大量對Web設計師和開發人員有用的技巧、教程和資源。還有很多前瞻性的分析文章。
    • abduzeedo.com 更新量很大,如果你設計卡殼了,這是尋找靈感的好地方.

    作品共享和靈感采集站:

    • deviantart.com 全球最大的設計師展示和分享創作的平臺。其網站本身交互設計也非常有特色。
    • ffffound.com 圖片類的delicious服務,一個你永遠不可能拿到注冊碼的社區,但是其中活躍著大量全球一流的設計師和創作。

    Web設計畫廊(Gallery)

    designshack.co.uk (可按配色、布局和類型進行篩選)

    reeoo.com (可按配色進行篩選)

    siteinspire.net (可按樣式、主題、網站類型進行篩選和排序)

    coolhomepages.com (可按類型進行篩選和排序)

    原載于 《程序員》雜志2010年第7期。 作者:西喬

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

    更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
    評論
    評論請登錄
    1. 說到產品,為何woshipm.com的網站設計卻鮮有這些設計元素,網站連個收藏功能都沒有

      來自北京 回復