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

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

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

有問題便需要解決，解決問題需要知識，需要探索精神，我們需要不斷學習。

推薦閱讀：
《20個網頁設計師應該學習的CSS3經典教程實例》
《超贊！源自codepen的25個最受歡迎的HTML/CSS代碼》
《高流量網站CSS開發技術》

工作流程亟待改進

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

1.CSS3

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

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

Media?Queries?（媒體查詢）

Namespaces?（命名空間）

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

Colour（顏色）

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

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

CSS?Gradients（CSS漸變）

Border-radius?（邊框半徑）

Box-shadow?（圖層陰影）

Multiple?Backgrounds?（多重背景）

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

Animations?&?Transforms?（動效&轉換）

我們來看看細節：

CSS?漸變

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

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

邊框半徑

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

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

圖層陰影

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

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

多重背景

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

不透明度(rgba)

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

動效&轉換

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

2.網絡字體

網絡字體非常適合設計師，我們不用花費大量時間來調配、實驗字體了。直接從網上引用，把注意力集中在創意即可。

為什么網絡字體牛逼？

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

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

該怎么用網絡字體？

有很多網站提供網絡字體服務：

Typekit

H&FJ?cloud.typography

Fontdeck

Fonts.com

Google?Fonts

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

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

3.圖標

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

PNG

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

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

SVG（可縮放矢量圖形）

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

尤為適合Logo以及圖標等需要縮放的設計中。但是在實際設計中，建議將尺寸調節為“在大多數情況下使用的尺寸”，這樣瀏覽器的工作負擔會降低很多。

網絡字體圖標

網絡字體的可縮放性強，種類繁多，最近很流行。有幾個聰明小伙將網絡字體和圖標結合到了一起，打造了字體圖標。

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

這邊是響應式設計大環境下三種圖標設計方法，而圖標具體用法，這里不再贅述。合理改造工作流程，以便習慣新的設計方法、新的技術。

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