當(dāng)前位置：首頁(yè) >UI設(shè)計(jì) >UI如何處理線上圖片文件，降低服務(wù)器流量成本

UI如何處理線上圖片文件，降低服務(wù)器流量成本

發(fā)布時(shí)間：2024-03-15 12:35:33 瀏覽量：151次

對(duì)于UI設(shè)計(jì)師來(lái)說(shuō)，工作就是跟圖片打交道。如何處理線上圖片文件，降低服務(wù)器流量成本呢？本文作者基于自己的工作經(jīng)驗(yàn)展開(kāi)分析，希望對(duì)你有幫助。

圖片，對(duì)于界面來(lái)說(shuō)是非常關(guān)鍵的元素，一個(gè)優(yōu)質(zhì)的UI框架有時(shí)也需要圖片加持,所以UI在工作中幾乎無(wú)時(shí)無(wú)刻沒(méi)在和圖片打著交道。

區(qū)別于平面設(shè)計(jì)師和美工，UI設(shè)計(jì)師對(duì)于圖片的處理可不單單只到視覺(jué)設(shè)計(jì)這一步就結(jié)束了，UI價(jià)值的體現(xiàn)也表現(xiàn)在圖片線上使用的場(chǎng)景當(dāng)中。

UI對(duì)圖片的處理，一方面是考慮到數(shù)據(jù)流量成本——懂得如何做到視覺(jué)美觀的同時(shí)，也要把控好文件的大??；另一方面圖片的適配方案也是UI必修的一個(gè)知識(shí)點(diǎn),iOS 人機(jī)交互準(zhǔn)則與 Material Design 就圖片控件專(zhuān)門(mén)抽出了一個(gè)版塊進(jìn)行講解。

那么這次「耍好控件」專(zhuān)題我就來(lái)給大家理一理UI對(duì)于圖片處理應(yīng)該注意的那些問(wèn)題。

一、倍率影響下的位圖

做UI的朋友應(yīng)該都知道移動(dòng)設(shè)備是有像素倍率之別的，標(biāo)準(zhǔn)分辨率的顯示器具有1：1的像素密度（即@1x），其中一個(gè)像素占位一個(gè)點(diǎn)。高分辨率顯示器具有更高的像素密度，存在1.5倍、2倍或3倍的比例系數(shù)（即@1.5x、@2x、@3x）。

當(dāng)我們?cè)贎1x下使用一張10px*10px的圖片，到比例系數(shù)為2倍或3倍的設(shè)備上，將會(huì)展示為20px*20px 和 30px*30px。

所以為了保證高分辨率顯示器下的圖片不失真，我們需要具有更多像素?cái)?shù)的圖像。

iOS人機(jī)交互規(guī)范指導(dǎo)設(shè)計(jì)師：為應(yīng)用中支持的所有設(shè)備提供高分辨率圖像。但位圖區(qū)別于矢量圖的關(guān)鍵就在于此，不論是放大還是縮小一張位圖，圖片都會(huì)發(fā)生損傷（即失真）。

但由小尺寸圖片放大適應(yīng)大尺寸，會(huì)發(fā)生肉眼可見(jiàn)的失真；而大尺寸的圖片縮小適應(yīng)小尺寸，失真并不會(huì)極端到讓人無(wú)法接受，至少肉眼看上去還是比較清晰的。所以我們也常用@2x或@3x來(lái)切圖，以保證圖片的顯示質(zhì)量。

@3x毋庸置疑是像素?cái)?shù)最多的切圖尺寸，向下適配@2x和@1x都不會(huì)使圖片被損傷到糊掉的程度，但缺點(diǎn)也正是在于像素?cái)?shù)多，文件尺寸相對(duì)較大。

@2x可向下適配@1x，但向上適配@3x時(shí)可能會(huì)出現(xiàn)圖像邊緣糊掉的情況，在對(duì)視覺(jué)要求頗高的項(xiàng)目當(dāng)中不被允許。但@2x是一個(gè)可平衡圖片質(zhì)量和線上文件大小的一個(gè)優(yōu)質(zhì)方案，這也是為什么UI出稿、切圖習(xí)慣使用@2x稿的原因所在。

決定用哪一個(gè)倍率交付圖片文件各有利弊，就看項(xiàng)目側(cè)重點(diǎn)在哪一個(gè)方面。但如果你要問(wèn)我，線上文件大小至于那么重要么？那你是應(yīng)該了解一下為什么我說(shuō)UI的價(jià)值體現(xiàn)之一在于控制線上文件大小了。

二、控制圖片文件大小

在我的過(guò)往職業(yè)經(jīng)歷中，曾被要求填過(guò)一個(gè)公司前UI留下來(lái)的坑：項(xiàng)目經(jīng)理要求我批量壓縮一下線上圖片文件大小，因?yàn)閳D片文件過(guò)大，導(dǎo)致公司浪費(fèi)很多財(cái)力在服務(wù)器的數(shù)據(jù)請(qǐng)求上。

所有做互聯(lián)網(wǎng)項(xiàng)目的人都應(yīng)該了解一點(diǎn)：從服務(wù)器請(qǐng)求線上的文件數(shù)據(jù)，每一個(gè)單位流量都是要付錢(qián)的。所以公司老板和項(xiàng)目經(jīng)理是很care這一點(diǎn)的。

那么UI在處理圖片時(shí)應(yīng)該如何控制文件大小呢？我曾經(jīng)在《了解圖標(biāo)落地》一文中提到過(guò)，我常使用 tinypng 壓縮處理位圖文件，但“壓縮”這一步已經(jīng)是對(duì)于處理圖片大小比較后期的做法了，前期我們可以通過(guò)決策圖片格式來(lái)達(dá)到控制位圖文件大小的目的。

對(duì)于位圖，我們?cè)诰€上場(chǎng)景中最常使用的文件格式無(wú)非是PNG和JPEG（對(duì)于動(dòng)畫(huà)也會(huì)使用到GIF）。

根據(jù)iOS人機(jī)交互準(zhǔn)則的指導(dǎo)建議：

PNG：

無(wú)損文件格式，不會(huì)輕易造成細(xì)節(jié)像素模糊或輸出文件變色的情況，并且支持alpha通道（透明度）。所以對(duì)于高質(zhì)量圖像文件建議輸出為PNG格式（這也是為什么iOS強(qiáng)制要求系統(tǒng)內(nèi)應(yīng)用程序圖標(biāo)等高質(zhì)量圖像使用場(chǎng)景都必須采用PNG格式的原因）。

但正是因?yàn)橄袼責(zé)o損，PNG文件大小相對(duì)較大，這時(shí)可以對(duì)不需要全24位的PNG圖像采用8位處理的做法來(lái)減小文件大小，在保證盡可能縮小文件大小的同時(shí)，也不會(huì)降低圖像質(zhì)量。

JPEG：

JPEG格式會(huì)損失掉圖片中的一些像素細(xì)節(jié)，所以輸出JPEG通常會(huì)比輸出PNG的文件大小更小，適用于對(duì)于圖片質(zhì)量要求不過(guò)高的場(chǎng)景。并且JPEG格式支持對(duì)文件質(zhì)量進(jìn)行二次壓縮，我們可以選擇使用JPEG格式質(zhì)量壓縮的方式，在文件大小和圖像質(zhì)量之間找到平衡。