網(wǎng)頁設(shè)計中圖片的排版方法
如何提高產(chǎn)品的質(zhì)量則體現(xiàn)在項目開發(fā)的很多階段，例如產(chǎn)品設(shè)計、UI設(shè)計和前端開發(fā)等。而圖片優(yōu)化在提高產(chǎn)品質(zhì)量上也起到了舉足輕重的作用，下面小編整理了網(wǎng)頁設(shè)計中圖片的排版方法，供大家參閱。
1. 簡約而不簡單
Win8和iOS7的出現(xiàn)，將互聯(lián)網(wǎng)行業(yè)中很多產(chǎn)品設(shè)計帶回到原點，或許更是另一個新的起點。Win8的Metro UI、iOS7中圖標的扁平化設(shè)計、一直崇尚簡約的豆瓣網(wǎng)、還有頂著時代工匠稱號的老羅所設(shè)計的錘子ROM，無一不體現(xiàn)著簡約的風(fēng)格。
言歸正傳，回到我們圖片優(yōu)化的主題上。在產(chǎn)品設(shè)計和UI設(shè)計階段，除了內(nèi)容圖片，其他的圖片都是起修飾的作用。也就是對于傳遞信息來說并非本質(zhì)性的。所以最大的優(yōu)化就是不要圖片。在進入到研發(fā)階段之前，就要確認設(shè)計，設(shè)計本身是否需要用到那么多的圖片，還是說可以做到更簡潔!
2. 樣式代替圖片
Chrome，F(xiàn)F等瀏覽器廠商為互聯(lián)網(wǎng)的發(fā)展做了這么多貢獻，為什么我們還要讓那些不兼容CSS3的瀏覽器阻礙互聯(lián)網(wǎng)的發(fā)展呢。因此，讓我們直接使用CSS樣式代替圖片來實現(xiàn)修飾效果!例如：半透明、圓角、陰影、高光、漸變等。這些效果主流的瀏覽器都能夠完美支持，而對于那些低端瀏覽器，我們并不會完全拋棄他們，“漸進增強”則是一個很好的解決方案。至于什么是漸進增強，這里不再用過多篇幅去解釋，如果感興趣可以參考CSS“漸進增強”在web制作中常見應(yīng)用舉例。
3. 選擇最合適的圖片
我們常見的圖片格式有JPEG、GIF、PNG。
基本上，內(nèi)容圖片多為照片之類或圖片構(gòu)成較復(fù)雜的情況，適用于JPEG。如網(wǎng)站中的Banner圖、輪播圖、大尺寸背景圖等。
修飾圖片通常更適合用無損壓縮的PNG。而我們主要用到的PNG圖片又分為PNG-8和PNG-24兩種，PNG-8格式不支持半透明，也是IE6兼容的圖片存儲方式。如果對圖片質(zhì)量要求較高的半透明或全透明背景，保存成PNG-24更合適。有時候會遇到在IE6下應(yīng)用PNG-24圖片的情況，關(guān)于IE6下PNG Alpha透明的解決方案可以參考IE6中PNG Alpha透明。我在項目中常用的方法是AlphaImageLoader篩選器。
GIF基本上除了GIF動畫外不要使用。
除了這些格式之外，Chrome、新版Opera、Android 4+支持WebP格式，IE 9+、IE mobile 10+支持JPEG XR。這兩個新格式都支持無損和有損壓縮，都具有更良好的壓縮比。當然這需要為不同的瀏覽器返回不同的圖片，增加了開發(fā)成本，也增加存儲成本。不過你省了流量或者相同流量下改善了圖片質(zhì)量，提升了用戶體驗。這就需要根據(jù)項目需求進行取舍了。
4. 常用的圖片優(yōu)化技巧
CSS Sprites，將同類型的圖標或按鈕等背景圖合到一張大圖中，減少頁面請求。
Icon Font，將圖標做成字體文件。優(yōu)點是圖標支持多個尺寸，兼容所有瀏覽器，減少頁面請求等。美中不足的是只支持純色的icon。
SVG，對于絕大多數(shù)圖案、圖標等，矢量圖更小，且可縮放而無需生成多套圖。現(xiàn)在主流瀏覽器都支持SVG了，所以可放心使用!
圖片壓縮工具，可以在圖片上線前使用壓縮工具進行壓縮，獲得更高的壓縮比。我常用的壓縮工具為Yahoo的Smush.it。
5. 適用各種資源而不限于圖片的優(yōu)化
【網(wǎng)頁設(shè)計中圖片的排版方法】相關(guān)文章：
網(wǎng)頁設(shè)計文字排版10-06