網(wǎng)站用戶體驗：圖片格式的選擇與用戶體驗
來源:網(wǎng)站推廣 2013-10-21
這是我10年的時候寫的一篇博客,偶爾翻出來,覺得挺好玩的。貌似當時是因為莫名其妙的去看了jpeg的壓縮算法,但是看的云里霧里。進而想到為啥要出這么多圖片的格式呢?他們肯定各有所長。而在軟件開發(fā)的時候B/S項目用什么格式、C/S項目用什么格式、logo圖片用什么格式、背景圖片用什么格式等等。所以寫了一篇文字。今天拿出來,重新編輯一下,不知道各位是怎么想的,老肥非常懇切的希望與您交流。
要寫這個東西,我們先設定一個范圍,我們對比就拿常見的gif、png、jpeg三種格式來說說。
首先我們看一下三種格式的對比。
以上是對于三種常見格式的對比,其實還有bmp等格式,但是對于我們在做設計的時候這種格式其實應用不是特別多,所以暫就不怎么講了,不過坦率的說這個格式還是不錯的,因為這玩意它不壓縮文件,但是比同樣的一張圖其他格式的大很多,所以在頁面上其實用的比較少的。而jpeg格式還有一種jpg的寫法,很多人都以為這是一回事,不過如果從單純使用角度也算是一回事,實際上jpg是使用jpeg文件交換格式存儲的編碼圖像文件擴展名。而jpeg是一種壓縮標準。
那么明白了這三種格式的定義、優(yōu)點、缺點,我們什么時候該使用這三種格式的圖片呢?
老肥建議如果你的圖片色彩較為單一、只是由色塊或者文字組成的時候可以考慮使用gif,因為這樣可以減少很大的體積。但是反過來說png可以說是gif格式的替代品,而且著實表現(xiàn)很優(yōu)秀。同樣的表現(xiàn),png的更小。所以這種情況下你還是能用png就別用gif了。有人說了,你說這么多廢話就直接說讓我們用png好了。但是要考慮一點,如果你設計的產(chǎn)品面對的用戶他們通常采用的瀏覽器比較老套或者一些舊的移動設備,比如非智能機等�；蛘哒f圖像質量較差的機器。那你還是得用gif,因為這些老物件不支持png。gif最多不會多于256種顏色。如果你的圖片有很多過渡色、漸變色等依然得選擇png。
那jpeg和png對比呢?
jpeg適合儲存有很多顏色的圖片,因為通過壓縮后可以在網(wǎng)絡上較快地加載。那么圖片要是含有圖形或者文字的話可以考慮用png,反之亦然。否則jpg壓縮以后就會變得比較模糊。
對于jpeg其實咱得單獨拿出來說說,有些同學可能知道可能不知道,這玩意其實有兩種保存方式,一種是標準型,用鳥語講就是Baseline JPEG,還有一種是漸進型也就是Progressive JPEG。這是一對雙胞胎,什么都一樣,但是縱使是我們生活中的雙胞胎,很多都一樣也必然有不一樣的地方,這哥倆不一樣的地方就是他~們~的~顯~示~方~式~不~同。
標準型的jpeg文件存儲方式是按照從上到下的掃描方式存儲的。每一行順序的保存在文件中。打開這個文件的時候,就按照存儲時候的順序從上到下一行一行的顯示。直到所有的都打開。所以如果你的文件很大或者用戶網(wǎng)絡一般、去想象一下效果吧。其實這種顯示方式?jīng)]啥太大的有點。所以推薦后者。
而漸進型的是多次掃描。在你打開的時候會先顯示整個圖片的輪廓。然后多次掃描,圖片主見清晰。這個好處無需多言,同時用戶在使用的時候可以根據(jù)輪廓大致知道這個圖片是什么。如果你的圖片很大,可以考慮用這種。
對比兩種方式,看看后者,這樣你的用戶體驗不就提升很多了么?其實只是你保存的時候一個小動作是不是?但是對于用戶來講,那個體驗是什么?前者:什么破玩意啊,半天出不來,要不就是一條條的,關掉關掉關掉!后者:哎,出來個框了,等一下,越來越清晰,激動啊!而這個,是不是也和我們在研究用戶體驗時,跟進度條的道理差不多呢?
當然如果你的圖片是JPEG的標準型的話,你想轉化成漸進型,可以這樣做:在ps中打開圖片后,
【存儲為web所用格式】,然后勾選【連續(xù)】就是漸進型了。
寫在最后,其實這篇文章無論你是設計師還是產(chǎn)品經(jīng)理我覺得都可以看一下,雖然是從使用的維度上來說設計師應用更多一些。但是我們是透過現(xiàn)象看實質。因為你的圖片如何使用會對你的產(chǎn)品的用戶體驗產(chǎn)生很大的影響。這個無需多言,我相信不同產(chǎn)品的設計師肯定都會有自己的感受。所以我還是給這篇文章歸于用戶體驗這個范疇的。作為產(chǎn)品經(jīng)理的我們,這一點基本的知識應該去明確。老肥堅定的認為,只有心中具有完美主義傾向的產(chǎn)品經(jīng)理才有可能設計出真正好的產(chǎn)品,那種經(jīng)常覺得“湊合吧,可以了”,這樣的產(chǎn)品經(jīng)理做不出什么好東西,我也不想做,也不喜歡。
ps:想深入探討的同學可以參考這篇文章,很不錯ued.taobao.com/blog/2010/12/jpg_png/#2-1
文章編輯: 365webcall在線客服(www.365webcall.com)
我的評論
| 登錄賬號： | 密碼： | 快速注冊 | 找回密碼 |  |
