很久沒有寫關於網頁設計的文章了,今天就來寫個2010年網頁設計趨勢的文章,內容是國外的網頁設計趨勢,並加上小弟的一些見解綜合而成。

2010年網頁設計即將步入一個新的旅程,未來將會更有趣、充滿更多實驗性質的網站將會出現。經由CSS3及HTML5的規格,設計師能發展出更多有特色的網站。

大型的背景圖片式的網站設計將會退流行;襯線體的文字(Serif Fonts)跟材質及紋路式的背景(texturized background)將會更受歡迎。

感謝CSS3,我們將可以看到具有圓角的框框;RGBA的屬性,將會看到透明的效果,還有陰影的效果。還有因為智慧型手機的普及,應用在手機的網頁設計也會愈來愈多了。
 
Serif Fonts(襯線體)

在上個年代,大多的網站的字體用的是Verana跟Arial(這些是非襯線體字型「sans-serif fonts」),可是新的十年,襯線體將會得到更多的關注。

站長註:我想主要的原因是早期的瀏覽器,尤其是IE瀏覽器支援的字型不多,但新的規格出來後,會有愈來愈多的設計師,可以使用可以自己想要的字型。而非襯線體自包浩斯以來,己經風光近百年了,也該換手囉。
screen capture

screen capture

screen capture

screen capture

screen capture

screen capture

超大的頁首設計

大的標題放在頁首將會在2010年後更加的流行。

站長註:
一來形象頁己經過時了。再者,瀏覽者不需要點掔任何地方,只要捲軸往下拉,就可以看到內容了,這對於有點選恐懼症(這是長期使用一些詭異的選單所造成的)的瀏覽者,超大的頁首跟標題,替代了原來的形象頁,而且讓人過目不忘。

screen capture

screen capture

screen capture

screen capture

screen capture

screen capture

screen capture

Texturized Background(材質或紋路型的背景)

大圖做為背景己經漸漸不流行了,取而代之的是更細緻的材質或紋路型的背景,尤其是有點雜訊般的背景。


站長註:這就因人而異了,像微軟的搜尋引擎(bing),還是用大圖當背景做的很開心,但最主要還是業主的心態囉。 

screen capture

screen capture

screen capture

screen capture

screen capture

screen capture

screen capture

screen capture

screen capture

screen capture

screen capture

Minimalist & Grid(極簡主義與網格設計)


極簡主義與網格設計不是新玩意,己經流行好一陣子了,我想它還會在2010年後繼續成長。

站長註:極簡設計跟簡陋要掌握的好,現在雖然很多設計都突破框架了,但網格式的設計也是有一定的市場,但設計不得當又會讓人覺得太一板一眼,端看設計師的功力了!「Just Design It」(突然腦中出現的標語)

screen capture

screen capture

screen capture

screen capture

screen capture

screen capture

screen capture

screen capture

 

CSS3 New Features(CSS3新加入的特色)

雖然CSS3目前尚未支援所有的瀏覽器,可是己經有些設計師開始嚐試著使用CSS3的一些功能,例如:圓角特徵、多背景圖、多欄、外框圖和一些動態功能。

站長註:大多的設計師其實不太鳥CSS這玩意兒,但我覺得雖然不知道他的語法,但是也可以把用的到CSS3的設計理念帶進網站設計,讓網站能更讓人耳目一新。另外IE8好像還不支援CSS3,但新版的IE9聽說就會支援了,目前有支援CSS3的瀏覽器有Google的Chrome跟Apple的Safari,所以如果要開發新的網站,就可以先做來放著了。

CSS3 動態設計

Neutron Creations的部落格使用webkit 的 webkit-transform這個屬性,讓右上角的中子會有動作產生。如果看不到的話,請用Google-Chrome或Apple-Safari。
(效果就是兩個球繞著圓心跑來跑去) 

screen capture

Rounded Borders and Box Shadows(圓角外框與陰影)

圓角外框與陰影的屬性,未來會是很常用到的屬性。


screen capture

screen capture

screen capture

screen capture

Text Shadow(文字陰影)

有不少設計師用文字陰影的屬性來增加文字的立體感跟深度。

screen capture

screen capture

screen capture

screen capture

RGBA & Opacity(RGBA屬性與透明度)

RGBA的屬性可以更輕易的設計背景透明度。以後會有更多的網頁設計師用這項功能來設計更多的半透明效果。

screen capture

screen capture

screen capture

Mobile Design(手機版網頁設計)

自從iPhone在2007發表後,有愈來愈多人在談論手機版的網頁設計。現在有愈來愈多的手機支援CSS跟Javascript,手機版的網頁設計肯定是未來的趨勢,以下是一些很讚的案例(從iPhone截圖而來)

screen capture

screen capture

screen capture

screen capture

screen capture

screen capture

screen capture

screen capture 


jaichang2008 發表在 痞客邦 PIXNET 留言(2) 人氣()


留言列表 (2)

發表留言
  • candys
  • 最近剛好在寫 CSS3 教學,忍不住非常想抱怨 IE,
    目前也還不知道 IE9 到底對 CSS3 支援有多少,
    IE 使用者還是非常多,整個發展速度都被 IE 給拖延,
    恐怕 2010 年 HTML5 + CSS3 還是無法成為趨勢,
    至少對商業網頁設計師來說,幾乎沒有人敢使用吧!
    這篇整理的非常精彩~喜歡~^^~
  • 沒錯,主要還是看業主需求吧,還有要看網頁設計師懂不懂html5+css3吧。

    jaichang2008 於 2010/05/11 23:23 回覆

  • 悄悄話