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

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

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

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

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

工作流程亟待改進(jìn)

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

1.CSS3

別看CSS3剛出來(lái)不久，實(shí)際上，CSS3于1999年開(kāi)始制定，花了14年！

跟前幾個(gè)版本的CSS不太一樣，CSS3劃分為好幾個(gè)模塊——2012年年中發(fā)布了超過(guò)50種模塊，有4種尤其值得推薦，經(jīng)過(guò)了大量的討論、檢測(cè)，這4種可以說(shuō)已經(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動(dòng)效）”,?“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?（動(dòng)效&轉(zhuǎn)換）

我們來(lái)看看細(xì)節(jié)：

CSS?漸變

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

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

邊框半徑

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

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

圖層陰影

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

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

多重背景

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

不透明度(rgba)

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

動(dòng)效&轉(zhuǎn)換

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

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

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

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

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

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

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

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

Typekit

H&FJ?cloud.typography

Fontdeck

Fonts.com

Google?Fonts

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

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

3.圖標(biāo)

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

PNG

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

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

SVG（可縮放矢量圖形）

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

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

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

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

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

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

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