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

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

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

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

那么這次「耍好控件」專題我就來給大家理一理UI對于圖片處理應(yīng)該注意的那些問題。

一、倍率影響下的位圖

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

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

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

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

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

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

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

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

二、控制圖片文件大小

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

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

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

對于位圖，我們在線上場景中最常使用的文件格式無非是PNG和JPEG（對于動畫也會使用到GIF）。

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

PNG：

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

但正是因為像素?zé)o損，PNG文件大小相對較大，這時可以對不需要全24位的PNG圖像采用8位處理的做法來減小文件大小，在保證盡可能縮小文件大小的同時，也不會降低圖像質(zhì)量。

JPEG：

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

三、圖片的適配

對于UI來說，圖片的適配是必須掌握的一個知識點，因為我們經(jīng)常會面臨給前端提出各種圖片適配方案的情形。如果這一塊存在知識盲區(qū)，很可能造成圖片適配不和諧的效果。

比方說我在《聊聊加載等待的那些事 之 啟動頁 》中提到的閃屏適配方案，很多UI因為存在適配知識盲區(qū)，很可能因為找不到合適的適配方案，導(dǎo)致閃屏頁被強制拉伸變形。）

常見的圖片適配的方案總結(jié)下來主要分為以下十二種：

對于不同的布局適配場景我們可能選擇的適配方案不同。

對于可以前期進(jìn)行干預(yù)的場景（例如用戶更換頭像），我們可以直接強制要求上傳者進(jìn)行裁剪，而不用再進(jìn)行不必要的適配，并且可以幫助我們控制線上圖像文件大小。

#專欄作家#

UCD耍家，公眾號：UCD耍家（ID：ucdplayer），人人都是產(chǎn)品經(jīng)理專欄作家。

本文由 @UCD耍家 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議