|
個人認(rèn)為好的視覺設(shè)計最重要是意境傳達和氣氛渲染，使用高光、陰影等濾鏡效果的目的也僅僅是為了達到質(zhì)感上的統(tǒng)一從而更好的去傳達意境和渲染氣氛，所以切忌為了質(zhì)感而質(zhì)感。即便是為了體現(xiàn)設(shè)計品質(zhì)也不一定非要使用炫麗的濾鏡，相較而言優(yōu)美的布局和精巧的結(jié)構(gòu)才是體現(xiàn)品質(zhì)的關(guān)鍵！
通過較小的視覺犧牲換取較大的性能提升
有時候為了提升頁面的加載速度達到更好的用戶體驗，不得不對設(shè)計進行優(yōu)化。這個時候利用我們對圖片格式知識掌握就可以更有目的性的去進行優(yōu)化。
例如下圖是淘寶“雙十一”大促活動的一個頁頭設(shè)計，由于頁面訪問量非常大并且要使用較多的商品圖片，不得不對頁頭設(shè)計進行優(yōu)化以提升性能。這個時候我們就可以去掉一些不太重要的高光、漸變和陰影效果，從而大大降低文件大小。
我們還可以做些什么？
Sprite圖片二次優(yōu)化
由于目前國內(nèi)很多互聯(lián)網(wǎng)公司沒有頁面重構(gòu)師這一職位，所以頁面切圖和靜態(tài)代碼實現(xiàn)基本都是前端工程師去完成。為提高頁面性能目前普遍采用的實現(xiàn)方式是將與頁面結(jié)構(gòu)相關(guān)的需要用到圖片的視覺元素集中在一個PNG圖片上，然后通過CSS樣式將其應(yīng)用到頁面中，我們稱這個圖片為Sprite圖片。由于這個圖片上經(jīng)常要集中較多的視覺元素，在用PNG格式存儲時難免會產(chǎn)生失真而影響圖片質(zhì)量。這個時候就需要視覺設(shè)計師幫助前端開發(fā)工程師對Sprite圖片進行優(yōu)化，這樣做的好處是不僅能提升圖片質(zhì)量，還能達到減小文件大小的效果，可謂一舉兩得。
下圖是一個優(yōu)化前的Sprite圖片，由于視覺元素過多PNG8無法真實保存所有的顏色信息，于是便會產(chǎn)生顏色的缺失和雜色的產(chǎn)生（如局部放大圖所示）。
出處：taobaoued
責(zé)任編輯：bluehearts
上一頁 圖片格式與設(shè)計 [8] 下一頁 圖片格式與設(shè)計 [10]
|
第 1 頁 
第 9 頁 圖片格式與設(shè)計 [9]
