例如在下面這個例子中,第一個Banner應用了更適合PNG格式的設計風格(較多純色和簡單漸變的應用)不僅能達到熱烈、突出的視覺效果,在保證圖片質量的同時也更好的壓縮了文件大小;而第二個Banner由于應用了過于復雜的漸變色和強烈對比,并且在局部區(qū)域采用太多的高光和陰影效果,導致圖片的色彩層次過多,不論采用PNG還是JPG格式保存都無法實現(xiàn)圖像質量和文件大小的最優(yōu)化。
當然舉這個例子并不是要設計師在做設計的時候過分考慮頁面性能問題,而是要清楚不同的設計形式的意義和實現(xiàn)成本,在設計過程中多問自己為什么要這樣做?
內容和形式的分離
對于一些比較強調視覺效果的特殊產(chǎn)品,比如活動推廣頁面或Mini Site。我們也可以利用圖片格式和一些前端知識對設計進行優(yōu)化,比較常用的一種設計方法就是內容和形式的分離。
如下面一些國外比較流行的設計風格,以及前面提到的微博網(wǎng)站,都是通過大幅的背景圖去進行意境的傳達和氣氛的渲染。這樣做的一個好處就是能把需要用到圖片的視覺元素進行集中的壓縮優(yōu)化,同時又不會由于加載太慢而影響用戶的訪問速度(前端實現(xiàn)時一般會用相近的背景色先進行填充,然后在逐步顯示背景圖)。
出處:taobaoued
責任編輯:bluehearts
上一頁 圖片格式與設計 [7] 下一頁 圖片格式與設計 [9]
|