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