網頁設計趨勢2010 CSS3 技術
不確定你可以利用CSS3嗎?再想想。網路先鋒如Andy Clarke 和 Jeremy Keith一直提倡網頁設計要“逐步加強”。
逐步增強是指在網站設計師時要兼顧到舊版流覽器的可用性,而“增強”則是針對喜歡最新技術的使用者。
在這樣的設計陣營,你利用可以盡情利用CSS3屬性的優勢,如圓角,邊框背景和文字方塊陰影。新版流覽器使用者會看到一個很好的版本,並且對舊版本使用者( IE6同學,我就不每次都點名了)將看到較為基本的版本。
CSS3 動畫
在網路上動畫經歷了很多階段。起初,我們只能用GIF動畫圖片。然後,我們又幾乎限於Flash。現在,我們可以選擇的有Flash,Silverlight,以及GIF,JavaScript和甚至乎CSS3。CSS3更輕量,更易用,可創造令人難忘的微妙的動畫。
圓角
在2005年和2006年的Web 2.0風格,使得圓角大受歡迎,惱人的問題是,在當時要實現這些可不容易。有沒有固定可行的方法來建立真正的圓角。退而求其次的,大多都是利用CSS,JavaScript和圖像來類比。
現在CSS3允許流覽器直接生成圓角,不僅創建輕鬆,而且更有效率,因為使用者不必下載額外的圖片或JavaScript檔。
2010年,設計師正越來越多地利用流覽器的這些新功能優勢。
圖框和文本陰影
在網路的早期,利用陰影創造一種立體感是早已有之(甚至有時是用過頭了)。但其實並不總是那麼好搞的,要給文本添加陰影,你得使用的圖片,從而增加載入時間,並且維護更加困難。框架陰影需要一些圖片和CSS技巧,如“滑動門”。
CSS3具有陰影高度可定制的能力,這對於創新影響十分巨大,不僅包括陰影,台中網頁設計還有內陰影。有創意設計師已經開始使用這些CSS3效果,類比浮雕和壓印的效果。
RGBa和半透明
多年來,使用不透明性和透明度,在網路上技術上是不可能的。你有三種選擇:使用平面圖像類比的透明度,使用不能跨流覽器相容的PNG格式,或者去折騰CSS基本的透明選擇器和濾鏡。
CSS3使得設計師在使用RGBa不透明屬性時,更加穩定和自由。你可以在很多方面利用半透明的優點,其中之一就是使用半透明的顏色疊加到複雜背景時起到特別作用。之前,這種效果如果沒有使用PNG是不切實際,也是不可能達到的。
手機相容設計
移動網路讓成千上萬的使用者在排隊等候(無事可做)時能夠檢查他們的銀行帳戶,網頁設計公司在地鐵裡可以查看最新分數,在開車時更新自己的Twitter的情況(這是一個危險的習慣?),移動網路正在茁壯成長。
據我們所知,很多公司都都在考慮他們的網站是否要加入移動網路,如果是的話又會怎麼樣。而創新公司則已經投入鉅資在開發高效的使用者友好的移動版本網站。
創新
社交媒體使用率的爆炸性增長證明,人們對連接和共用東西總是熱情有加的。
在設計領域,我們已經看流覽和分享別人作品的趨勢正在增長。作為設計師,現在我們感受著別人創造力的衝擊。這不僅提高了設計品質的標準,還鼓勵了共用精神,也促進了創造力和創新文化理念。清新的插畫
如果你像我一樣,看著迪士尼電影長大,你會欣賞動畫裡面每一幀的效果。我們早已淡忘了墨水和馬克筆劃插畫的日子,工具的演變產生了一些非常有創意的方法去實現設計。
很多設計師正在學習使用光滑,乾爽,清晰的插圖創建一個獨特的感覺,這不是攝影或簡單的剪貼畫可以達到的。結果是出現了很多美麗動人富有吸引力的專業插畫設計。
|