起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識UI如何處理線上圖片文件，降低服務器流量成本
對于UI設計師來說，工作就是跟圖片打交道。如何處理線上圖片文件，降低服務器流量成本呢？本文作者基于自己的工作經驗展開分析，希望對你有幫助。
圖片，對于界面來說是非常關鍵的元素，一個優質的UI框架有時也需要圖片加持,所以UI在工作中幾乎無時無刻沒在和圖片打著交道。
區別于平面設計師和美工，UI設計師對于圖片的處理可不單單只到視覺設計這一步就結束了，UI價值的體現也表現在圖片線上使用的場景當中。
UI對圖片的處理，一方面是考慮到數據流量成本——懂得如何做到視覺美觀的同時，也要把控好文件的大??；另一方面圖片的適配方案也是UI必修的一個知識點,iOS 人機交互準則與 Material Design 就圖片控件專門抽出了一個版塊進行講解。
那么這次「耍好控件」專題我就來給大家理一理UI對于圖片處理應該注意的那些問題。
一、倍率影響下的位圖
做UI的朋友應該都知道移動設備是有像素倍率之別的，標準分辨率的顯示器具有1：1的像素密度（即@1x），其中一個像素占位一個點。高分辨率顯示器具有更高的像素密度，存在1.5倍、2倍或3倍的比例系數（即@1.5x、@2x、@3x）。
當我們在@1x下使用一張10px*10px的圖片，到比例系數為2倍或3倍的設備上，將會展示為20px*20px 和 30px*30px。
所以為了保證高分辨率顯示器下的圖片不失真，我們需要具有更多像素數的圖像。
iOS人機交互規范指導設計師：為應用中支持的所有設備提供高分辨率圖像。但位圖區別于矢量圖的關鍵就在于此，不論是放大還是縮小一張位圖，圖片都會發生損傷（即失真）。
但由小尺寸圖片放大適應大尺寸，會發生肉眼可見的失真；而大尺寸的圖片縮小適應小尺寸，失真并不會極端到讓人無法接受，至少肉眼看上去還是比較清晰的。所以我們也常用@2x或@3x來切圖，以保證圖片的顯示質量。
@3x毋庸置疑是像素數最多的切圖尺寸，向下適配@2x和@1x都不會使圖片被損傷到糊掉的程度，但缺點也正是在于像素數多，文件尺寸相對較大。
@2x可向下適配@1x，但向上適配@3x時可能會出現圖像邊緣糊掉的情況，在對視覺要求頗高的項目當中不被允許。但@2x是一個可平衡圖片質量和線上文件大小的一個優質方案，這也是為什么UI出稿、切圖習慣使用@2x稿的原因所在。
決定用哪一個倍率交付圖片文件各有利弊，就看項目側重點在哪一個方面。但如果你要問我，線上文件大小至于那么重要么？那你是應該了解一下為什么我說UI的價值體現之一在于控制線上文件大小了。
二、控制圖片文件大小
在我的過往職業經歷中，曾被要求填過一個公司前UI留下來的坑：項目經理要求我批量壓縮一下線上圖片文件大小，因為圖片文件過大，導致公司浪費很多財力在服務器的數據請求上。
所有做互聯網項目的人都應該了解一點：從服務器請求線上的文件數據，每一個單位流量都是要付錢的。所以公司老板和項目經理是很care這一點的。
那么UI在處理圖片時應該如何控制文件大小呢？我曾經在《了解圖標落地》一文中提到過，我常使用 tinypng 壓縮處理位圖文件，但“壓縮”這一步已經是對于處理圖片大小比較后期的做法了，前期我們可以通過決策圖片格式來達到控制位圖文件大小的目的。
對于位圖，我們在線上場景中最常使用的文件格式無非是PNG和JPEG（對于動畫也會使用到GIF）。
根據iOS人機交互準則的指導建議：
PNG：
無損文件格式，不會輕易造成細節像素模糊或輸出文件變色的情況，并且支持alpha通道（透明度）。所以對于高質量圖像文件建議輸出為PNG格式（這也是為什么iOS強制要求系統內應用程序圖標等高質量圖像使用場景都必須采用PNG格式的原因）。
但正是因為像素無損，PNG文件大小相對較大，這時可以對不需要全24位的PNG圖像采用8位處理的做法來減小文件大小，在保證盡可能縮小文件大小的同時，也不會降低圖像質量。
JPEG：
JPEG格式會損失掉圖片中的一些像素細節，所以輸出JPEG通常會比輸出PNG的文件大小更小，適用于對于圖片質量要求不過高的場景。并且JPEG格式支持對文件質量進行二次壓縮，我們可以選擇使用JPEG格式質量壓縮的方式，在文件大小和圖像質量之間找到平衡。
三、圖片的適配
對于UI來說，圖片的適配是必須掌握的一個知識點，因為我們經常會面臨給前端提出各種圖片適配方案的情形。如果這一塊存在知識盲區，很可能造成圖片適配不和諧的效果。
比方說我在《聊聊加載等待的那些事 之 啟動頁 》中提到的閃屏適配方案，很多UI因為存在適配知識盲區，很可能因為找不到合適的適配方案，導致閃屏頁被強制拉伸變形。）
常見的圖片適配的方案總結下來主要分為以下十二種：
對于不同的布局適配場景我們可能選擇的適配方案不同。
對于可以前期進行干預的場景（例如用戶更換頭像），我們可以直接強制要求上傳者進行裁剪，而不用再進行不必要的適配，并且可以幫助我們控制線上圖像文件大小。
#專欄作家#
UCD耍家，公眾號：UCD耍家（ID：ucdplayer），人人都是產品經理專欄作家。
本文由 @UCD耍家 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
- 目前還沒評論，等你發揮！
