您的位置:首頁 > 美工設計 > 美工綜合

你了解當前web的設計趨勢嗎,來看看

日期:2007-02-02 08:39:44 點擊: 來自: 作者:

1.Web桌面化

  www.yahoo.com

  mail.yahoo.com
Web Desktop design style block element
  www.live.com

  正方:看起來很爽,值得細細欣賞

  反方:花銷太大

  盡可能地接近于桌面上絢麗的圖形,這是最優雅的風格。結果呢,這種風格看起來很棒,但是需要極大的工作量,而且很耗 網絡資源。總之,桌面風格以其四周的角度、富于表現力的圖形、陰影和對桌面應用的模仿而獨樹一幟。

  桌面元素的特征舉例:Web Desktop web design style mini-blocks elements

  塊級(block):屏幕上一個區域通常伴隨著邊 框、頭部、底部(border、header、footer),來連接了邏輯上類似的元素,諸如:鏈接、文本、記分卡(注:我想到了digg那個分數欄)、文章預覽。塊 級通常伴隨著看似隨意的陰影(optional shadow)。

  迷你塊: 通常他們是小圖片和精細文本的組合。Web Desktop web design style element: button

  按鈕:這種設計元素伴隨著一定角度、風格化的邊框、看似隨意的陰影。按鈕可能是玻璃風格,并且有一些從下方投射的燈光產生的陰影,當鼠標移上去還會有視覺反饋效果。

  標簽(Tabs):它們也使用了角度、風格化的邊框、看似隨意的陰影。也有鼠標懸浮的反饋。

Web Desktop web design style element - tabs

2.水銀橙風格

  www.mozilla.com/firefox

  www.digg.com

  www.silverorange.com

  正方:可用性好、輕量級的、簡單的

  反方:時尚、追隨者眾、稍稍昂貴

  看起來稍顯簡約,在風格化和輕量級間追求平衡,水銀橙較之視覺豐富的界面更集中體現了可用性。它不像桌面風格那樣試圖給瀏覽者留下深刻印象,而是提供了優秀的可用性體驗。應運而生的silverorange.com就是專門水銀橙風格的設計者。Silver Orange design style top menu element

  水銀橙風格的特征舉例:

  頂部菜單:通常它是深色的,文字顏色為淺色,在背景上,突出的角度顏色富于變化,并形成強烈對比。

  引導線 :更有立體感,引導線和頂部菜單背景色形成對比,文字顏色為灰色。Web Silver Orange design style logo and guide elements

  文本分割線:更有立體感,分隔線看起來很適度。Silver Orange web design style element: gradient and text

3.蘋果風格

  www.apple.com

  正方: 高雅、有品質、華貴

  反方:太有特色,花銷太大

  這種以玻璃標簽和按鈕作為主要特征的設計,對小字體不太適合,但幸運的是,如果你通常不使用小字體,這種風格也是可以接受的。工作量大,因為你需要做很多設計。有特點,你需要通過設計來保持獨特性,所以使用蘋果設計web,幾乎不可能。

  蘋果風格的特征舉例:Silver Orange design style top menu element

  蘋果菜單:蘋果的菜單集中體現了蘋果風格,每一處都有同樣的風格: 玻璃按鈕、立體感、圓角……

4.微軟風格

  www.microsoft.com

  www.msn.com

  www.rsdn.ru

  正方:功能性強、簡約、開發成本低Microsoft design style menu element

  反方:你是一個MS盟友

  最主要的一件事,比如微軟風格網站左欄的浮動菜單導航清晰,但太土了。簡約、清晰但普通。就像是工程師為工程師創建的。

  微軟風格的特征舉例:

  微軟菜單: 微軟風格的主菜單是灰色的、功能性強、簡約的。占據左邊欄的僅僅是邊框、鼠標懸浮效果、浮動子菜單……

  微軟風格與眾不同之處在于header處的立體感,當你從左向右掃視,直到右上角搜索框的地方就會發現這一特征。

  所有的塊級(block)都是以清晰的灰線條分割的,我想,這是由于視點的可用性考慮。人們在微軟上有太廣泛的選擇了,但有一點是清晰的:微軟的設計風格是簡約、功能性強、可用性好的。

  相比蘋果風格,它不夠華貴。但運行起來還不錯。

5.雜志風格

  www.style.com

  www.drive.ru

  正方:吸引人、簡約、濃縮

  反方:需要許多照片和文字,內容的質量是關鍵

  Web雜志設計風格是……嗯,就像雜志。它在你的電腦屏幕上看起來就像視覺效果出色的雜志,所以你完全可以用看雜志的眼光審視網頁。

  你會意識到,在高質量的照片和圖像中有許多鏈到文章的鏈接。

  雜志風格的目標群就是雜志的閱讀者。不是工程師,也不是網頁設計者,甚至不是網蟲。這確實是由一群專業的設計師設計出來的,他們非常熱愛自己的工作。如果你的目標是這類設計師,那就要為你自己工作,并深愛它……

6.圓角樸素風格

  www.youtube.com

  正方:簡約、清新、內容突出

  反方:有點令人厭倦,不新穎,不易留下印象Rounded Plain web design style

  這種設計一點也不壞。它的目的就是讓瀏覽者的目光集中在內容上,同時還可以減輕流量。典型站點 (www.youtube.com) 的頂部導航只有圓角和故意最簡單的元素。

7.Web 2.0設計風格

Web 2.0 web design styleWeb 2.0 web design style Web 2.0 web design style

  blogger.com

  netflix.com

  target.com

  ruby-lang.org

  yelp.com

  blubolt.com

  正方:現代、易被大眾接受、新穎

  反方:可用性問題、固定寬度

  識別web2.0的設計風格可以通過:

  -固定寬度

  -圓角形狀和陰影

  -大字體

  -高亮顏色的header

  -Substantial amount of gray text

  -字型很寬

  -圓角形狀和按鈕

  -陰影,玻璃效果,更有立體感

8.Adobe / Macromedia風格

  adobe.com

  macromedia.com

  正方:干凈、簡約、平衡、高貴

  反方:花銷大、個性突出、可用性問題

  這種風格很像蘋果風格: 一旦你看過它,你會立即識別其他模仿者。這種設計花銷很大,追求圖形效果,并且追求整體上的 平衡。它是Macromedia在幾年前原創的風格,但現在仍然是最棒的web設計之一。

  Macromedia設計風格的與眾不同之處:復雜的立體按鈕,圓角塊,陰影很獨特,固定寬度,中心感。

  另一篇文章對照多個世界優秀站點的設計,總結出它們的共同特點,如下:

  1.布局簡單

  2.中心定位

  3.3D效果

  4.柔和,多采用自然背景色

  5.顏色鮮亮(但謹慎使用)

  6.可愛的圖標

  7.有許多留白

  8.大字體

 

More..素材圖片 Picture Navigation
美工綜合熱門 Class Hot
美工綜合推薦 Class Commend
版權所有:中國網站資源 2005- 未經授權禁止復制或建立鏡像 This Site Tech:XHTML+DIV+CSS+Javascript
CopyRight ® 2005- www.21ftd.com online services. all rights reserved. ICP06016627
Optimized to 1024x768 to Firefox,Netscape,Opera,MS-IE6+.
ope电竞