很榮幸從事網(wǎng)頁設(shè)計業(yè)，新技術(shù)、新技巧越來越多，我們的工作越來越輕松，甚至不用設(shè)計軟件，利用網(wǎng)上的一些工具都能完成設(shè)計。

當(dāng)然，若想更輕松的工作，就必須跟進新趨勢、新方法，本文介紹了網(wǎng)頁設(shè)計中一些新式設(shè)計方法。

CSS3可以稱得上是偉大，無論是開發(fā)者還是設(shè)計師都能從中受益。CSS3提高了網(wǎng)頁整體的表現(xiàn)，為我們的設(shè)計實驗提供了大量機會，讓我們可以把很多靈感付諸實踐。技術(shù)的提高，自然也帶來了很多問題，多設(shè)備瀏覽網(wǎng)絡(luò)，分辨率多種多樣，成千上萬的設(shè)別種類、屏幕尺寸應(yīng)用場景，但不管怎樣，都要滿足用戶的瀏覽需求。

有問題便需要解決，解決問題需要知識，需要探索精神，我們需要不斷學(xué)習(xí)。

推薦閱讀：
《20個網(wǎng)頁設(shè)計師應(yīng)該學(xué)習(xí)的CSS3經(jīng)典教程實例》
《超贊！源自codepen的25個最受歡迎的HTML/CSS代碼》
《高流量網(wǎng)站CSS開發(fā)技術(shù)》

工作流程亟待改進

那這意味著什么？不可能為每一種設(shè)備一一進行設(shè)計吧？取而代之的是，我們需要改進工作流程。
我們的設(shè)計流程、開發(fā)流程需要迭代了，我們應(yīng)該使用更多適應(yīng)性較強的技術(shù)、元素。

1.CSS3

別看CSS3剛出來不久，實際上，CSS3于1999年開始制定，花了14年！

跟前幾個版本的CSS不太一樣，CSS3劃分為好幾個模塊——2012年年中發(fā)布了超過50種模塊，有4種尤其值得推薦，經(jīng)過了大量的討論、檢測，這4種可以說已經(jīng)是很完善的了。W3C推薦的這4種模塊是：

Media?Queries?（媒體查詢）

Namespaces?（命名空間）

Selectors?(Level?3)?（選擇器）

Colour（顏色）

還有一些模塊，比如?“Background?and?Borders”,?“Multi-Column?Layout”,?“Flexible?Box?Layout”?作為“候選推薦”，也很值得關(guān)注。
還有一些例如?“CSS?Animations（CSS動效）”,?“CSS?Transforms（CSS轉(zhuǎn)換）”?and?“CSS?Filter?Effects（CSS濾鏡效果）”,尚處于起草階段。

除了上面4種W3C推薦的模塊，還有很多CSS3技術(shù)也很流行。包括

CSS?Gradients（CSS漸變）

Border-radius?（邊框半徑）

Box-shadow?（圖層陰影）

Multiple?Backgrounds?（多重背景）

Opacity?(rgba)?（不透明度）

Animations?&?Transforms?（動效&轉(zhuǎn)換）

我們來看看細節(jié)：

CSS?漸變

CSS漸變的引入取代了背景圖像，無需圖像也可以打造漸變

為頁面減負，加載更快，而且，響應(yīng)式問題也好解決。

邊框半徑

現(xiàn)在，我們可以用CSS打造圓角效果，不用修改圖像即可實現(xiàn)。非常方便的就能實現(xiàn)圖像的邊框、圓角、漸變、陰影的處理——過去想要達到這種效果，要費煞苦心，現(xiàn)在非常的方便。

如果你客戶是個明白人，那你就挺走運，要不然還得給他們解釋新技術(shù)。利用CSS可以實現(xiàn)多設(shè)備較為一致的體驗效果，圓角的優(yōu)雅也無可替代！

圖層陰影

CSS3引入了圖層陰影，很簡單的就能添加投影。而且還支持文字！

跟漸變一樣，也不用修改圖片效果了，直接拿來就用，用CSS即可輕松實現(xiàn)。

多重背景

CSS3多重背景的引入提供了層次感極強的背景效果，極其美妙。

不透明度(rgba)

IE9向上兼容，終于不用制作重復(fù)的透明圖像了。這就是為何我喜歡CSS3,簡便、高效。

動效&轉(zhuǎn)換

讓你的網(wǎng)頁更具交互性，盡管設(shè)計起來很困難，但是倘若成功，你的網(wǎng)站會大為動人。

2.網(wǎng)絡(luò)字體

網(wǎng)絡(luò)字體非常適合設(shè)計師，我們不用花費大量時間來調(diào)配、實驗字體了。直接從網(wǎng)上引用，把注意力集中在創(chuàng)意即可。

為什么網(wǎng)絡(luò)字體牛逼？

網(wǎng)絡(luò)字體很酷，能夠打造出炫目的網(wǎng)頁設(shè)計。而且提供的選擇字體很多，估計有成百上千種了。
當(dāng)然，不是所有的字體都好，但是不錯的有很多，很多都適合設(shè)計。

網(wǎng)絡(luò)字體響應(yīng)性能極佳，很適合響應(yīng)式設(shè)計。我們完全可以拋棄慣例，使用這種新方法了。更好的可達性，更容易縮放的字體，更美麗的網(wǎng)站。

該怎么用網(wǎng)絡(luò)字體？

有很多網(wǎng)站提供網(wǎng)絡(luò)字體服務(wù)：

Typekit

H&FJ?cloud.typography

Fontdeck

Fonts.com

Google?Fonts

雖然不對，但是提供的字體種類很多。很多都是用JS或者純CSS導(dǎo)入字體，這是開發(fā)者的福音。但是網(wǎng)絡(luò)字體無法使用圖像軟件來與整體設(shè)計整合。那設(shè)計師怎么辦？不過Typekit最近發(fā)表了一份計劃，打算整合入Adobe?CC中?？磥碓O(shè)計師也有可選項。

除此之外，再無他法去整合網(wǎng)絡(luò)字體和圖像。除非你花錢買，管理字體是個問題，價格更是問題。
網(wǎng)絡(luò)字體選項豐富、設(shè)計簡便、CSS實現(xiàn)能夠提高載入速度。

3.圖標(biāo)

圖標(biāo)現(xiàn)在很受重視，可以看做是一種趨勢，圖標(biāo)因其符號化的視覺隱喻，快速打造視覺引導(dǎo)，比如說Logo，手機應(yīng)用圖標(biāo)等等
圖標(biāo)設(shè)計要有一定的前瞻性，能夠很好的和內(nèi)容結(jié)合。還要考慮響應(yīng)式和加載速度問題，不過我們的可選新技術(shù)很多。

PNG

可愛的PNG(可提供透明背景）?是非常合適的圖標(biāo)輸出格式

但是想要在像Retina這種屏幕上達到最佳效果，少不了CSS和JS的支持crowd,?then?you’ll?need?some?sort?of?CSS?or?JavaScript?backup?to?make?sure?that?you?do?that.
使用PNG格式不會改變你的工作流程?？梢杂肞S存儲為你想要個尺寸，然后選擇PNG。
PNG的縮小性能極佳，但是放大的話，可能會出現(xiàn)像素塊和模糊

SVG（可縮放矢量圖形）

可縮放矢量圖形也非常適合圖標(biāo)。只要有一張基于矢量的圖像（例如，AI創(chuàng)建的矢量圖）——或者光柵圖（Photoshop）——那么可以保存為SVG可縮放矢量圖形可以防止圖片在縮放時出現(xiàn)像素塊以及模糊，完美調(diào)節(jié)大小，適應(yīng)需要。

尤為適合Logo以及圖標(biāo)等需要縮放的設(shè)計中。但是在實際設(shè)計中，建議將尺寸調(diào)節(jié)為“在大多數(shù)情況下使用的尺寸”，這樣瀏覽器的工作負擔(dān)會降低很多。

網(wǎng)絡(luò)字體圖標(biāo)

網(wǎng)絡(luò)字體的可縮放性強，種類繁多，最近很流行。有幾個聰明小伙將網(wǎng)絡(luò)字體和圖標(biāo)結(jié)合到了一起，打造了字體圖標(biāo)。

字體圖標(biāo)有一些爭議：有人認為導(dǎo)入一整套字體，只為了那么幾個圖標(biāo)，不太明智，會給頁面添加很多負擔(dān)，影響加載速度。
如果想用字體圖標(biāo)，基本都要靠買，可能需要花很多錢，但是利用工具可以打造自己的字體圖標(biāo)，按需設(shè)計。推薦Symbolset?，可以買，也可以學(xué)學(xué)他們的設(shè)計思路。

這邊是響應(yīng)式設(shè)計大環(huán)境下三種圖標(biāo)設(shè)計方法，而圖標(biāo)具體用法，這里不再贅述。合理改造工作流程，以便習(xí)慣新的設(shè)計方法、新的技術(shù)。

原文地址：webdesign
優(yōu)設(shè)網(wǎng)翻譯：@MartinRGB
 
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程的干貨網(wǎng)站。
【特色推薦】
PS禮儀手冊：網(wǎng)頁設(shè)計師必須修煉的內(nèi)功技法，更是不可或缺的WEB設(shè)計指南http://hao.uisdc.com/ps/。
設(shè)計微博：擁有粉絲量58萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設(shè)計教程、經(jīng)驗分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：