本文從線上圖片的四大類別、常見的五種處理方式、以及線上圖片使用的五大要點等幫你徹底掌握線上圖片的用法。

目錄

• 線上圖片的四大類別
• 線上圖片常見的五種處理方式
• 線上圖片使用的五大要點

線上圖片的四大類別

1. 信息圖片：

在頁面中單獨存在的圖片，以圖片為主要元素傳達給用戶有效信息。

例如好好住 APP，它在“看圖板塊”中就使用了信息圖片，重點表現(xiàn)圖片的信息，周圍無任何干擾元素或輔助信息元素。

2.??背景圖片：

背景圖片可以用于單個元素，也可以用于整體畫面，主要作用于營造氛圍。

單個元素：例如嘀嗒出行的“優(yōu)惠券板塊”，把插畫圖片應用在單個卡片中。

整體畫面：例如網易云音樂的“聽歌頁面”，它就把歌曲封面的圖片作為頁面整體的背景。（圖片進行了模糊處理）

3. Banner 圖：

作為導航入口，引導用戶點擊進入詳情頁面，在各應用都普遍使用。

Banner 圖作為最常見的圖片使用形式之一，大家再熟悉不過了，它可以出現(xiàn)在 APP 中的各個界面中，如：首頁、個人中心、運營活動頁等等，造作新家 APP 的首頁就用到了 banner 圖。

4. 信息配圖：

作為文字的輔助元素，圖片的含義需要和文字相符合才能更好地輔助傳達文字的意思，反之會讓用戶覺得困惑。

線上圖片常見的五種處理方式

1. 圖片遮罩：

黑色遮罩：

圖片與文字之間加黑色到透明度（10-60%）的遮罩，保證文字內容區(qū)域在黑色區(qū)域，目的是為了能讓用戶看清文字。

顏色遮罩：

根據(jù)圖片整體的色調，在圖片上加與圖片色調統(tǒng)一的顏色遮罩，保證文字的可識別性，不影響圖片的正常顯示。

漸變遮罩：

圖片與文字之間加透明度的漸變遮罩，讓文字顯得更加清晰，使畫面過度更加協(xié)調。

2. 背景模糊：

在很多場景下我們都會采用到封面圖模糊處理后作為背景圖的方案，為保證信息能夠清晰顯示會在背景上加一個深色半透明蒙層。半透明層可以取黑色、深灰色、背景顏色（深），透明度為（25%-40%），它們呈現(xiàn)出來的效果都各有不同，我們可以根據(jù)不同的場景選擇不同的方案。

3. 圖片圓角：

圖片圓角的使用也是十分有講究，根據(jù)不同的產品屬性去設定氣質相符的圓角設計。

小圓角或直角：視覺印象是硬朗、高冷、具有攻擊性的，多用于時尚、高端、沖突感強烈的設計中；

大圓角：視覺映像是有親和力，柔軟，安全的，多用于母嬰產品、二次元產品、娛樂性強的設計中。

4. 內容出界：

在設計 banner 圖時我們如果只是在框框里做設計，有時候未免顯得太呆板，我們可以突破畫框讓內容溢出，營造更大的氛圍，進而使整個畫面更具有沖擊力。

5. 投影

圖片投影的方式一共分為 7 大類別，分別為：普通投影、等高線投影、矢量投影、圖層模糊投影、多層投影、移軸模糊投影、手動投影。而在線上運用的最多的就是：普通投影、等高線投影、圖片模糊投影，效果如下：

線上圖片使用的五大要點

1. 文件大小

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

PNG 圖片：

無損文件格式，我們 UI 設計師出圖的首選，不會輕易造成細節(jié)像素模糊或輸出文件變色的情況，并且支持 alpha 通道（透明度）。所以對于高質量圖像文件建議輸出為 PNG 格式，不過正因為像素無損，所以 PNG 文件大小相對較大，在特定情況下可以選擇 8 位處理的做法來減小文件大小，在保證盡可能縮小文件大小的同時，也不會降低圖像質量。

JPEG 圖片：

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

2. 比例

UI 界面中常用的圖片比例是 1:1、3:2、4:3、16:9。

1:1

1:1 是傳統(tǒng)的 120 膠片畫幅，也叫大畫幅，因為相機結構和其他一些原因導致了膠片是方形的，此比例更容易將構圖規(guī)整的簡單，能突出主體圖片，通常用于頭像、電商圖片等。

3:2

3:2 這個尺寸源于 135 膠卷的比例，采用這一比例并不是因為它是黃金比例，而是由相機的像場大小決定的，這個尺寸運用到線上時適用于以內容為主的應用。

4:3

4:3 是隨著攝影的發(fā)展，微單的出現(xiàn)而誕生的，3:2 尺寸與 4:3 尺寸極為相似，在做設計時很容易混淆，不過在同屏顯示中，4:3 的圖片內容顯示略大于 3:2，所以 4:3 尺寸更適用于以圖片為主或圖片與內容比重相同的應用。

16:9

16:9 是根據(jù)人體工程學的研究，發(fā)現(xiàn)人的兩只眼睛視野范圍是一個長寬比例為 16:9 的長方形，所以電視、顯示器行業(yè)根據(jù)這個的黃金比例尺寸設計產品。這個尺寸的圖片在線上運用于視頻播放的圖片顯示。

3. 柵格系統(tǒng)

柵格系統(tǒng)以規(guī)則的網絡陣列來指導和規(guī)范版面布局以及信息分布，而 UI 設計里常用的柵格系統(tǒng)是從平面柵格系統(tǒng)中發(fā)展起來，柵格系統(tǒng)有時候也稱為網格系統(tǒng)。

柵格系統(tǒng)在圖片的排版布局、尺寸設定方面給了設計者直觀的參考，它讓圖片變得有規(guī)律，從而減少了設計決策成本，使整個畫面更加具有條理，讓內容的可讀性變高。

移動端常用的柵格系統(tǒng)最小單位為 4px（@1x）或 3px（@1x），那么我們來看看 airbnb 是如何用 3px（@1x）的柵格系統(tǒng)來確認 banner 的尺寸大小：

如上圖，airbnb 的柵格系統(tǒng)布局設置總寬為 328px（總寬為中間 6 列+4 個間距寬度），偏置為 24px（左側初始偏置像素），列數(shù)為 6（一共分為 6 列），列寬 45px（列數(shù)的寬度），間距寬度為 12px（當不能除正數(shù)時，會自動把間距縮小 1px，所以會看到有些間距為 11px，有些間距為 12px）

當設定好柵格系統(tǒng)后，我們就可以很好的得出圖片的寬度：158px（45+11+45+12+45）。再根據(jù)圖片比例的尺寸 3:2，我們就可以算出圖片的高度為：106px（158*3x2）。根據(jù)相同的方法，我們可以用柵格系統(tǒng)+尺寸比例得出更多的尺寸大小。（注：不管是 3px 或 4px 柵格，都會出現(xiàn)除不整的情況，如上圖中的 11px，這個不用擔心，不影響大局。）

4. 倍率

在對 banner 圖進行輸出時要考慮倍率的大小，每個產品會根據(jù)產品的特性來決策輸出的倍率，有些產品用二倍圖輸出，有些產品用 3 倍圖輸出。

標準分辨率的顯示器具有 1：1 的像素密度（即@1x），其中一個像素占位一個點。高分辨率顯示器具有更高的像素密度，2 倍或 3 倍的比例系數(shù)（即@2x、@3x）。當 1 倍的位圖放在 2 倍或 3 倍的尺寸下時，就會出現(xiàn)圖片損傷現(xiàn)象（失真），那么我們到底該用幾倍圖去制作 banner 圖呢？

方案一：兩倍圖輸出

優(yōu)點：導出文件比@3x 小，可平衡圖片質量和線上文件大小的一個優(yōu)質方案。

缺點：雖然@2x 可向下適配@1x，但適配@3x 放大后圖片會微微模糊，所以我們如果要用@2x 導出圖片，那么 banner 內的文字不能過小或過于密集、粗曠，畫面中也不能出現(xiàn)過多的效果，不然會看出明顯的模糊痕跡（如下圖的頂部文字與按鈕文字放大后就有明顯的模糊痕跡）

方案二：三倍圖輸出

優(yōu)點：@3x 可向下適配@1x 與@2x，能夠很好的保證不同尺寸下的圖片質量，對視覺要求高的項目就必須用 3 倍圖來設計。

缺點：輸出的文件相對較大。

5. 圖片適配

圖片的適配類型非常多，對于不同的布局適配場景我們選擇的適配方案也不同，圖片適配一共分為 3 大類：智能適配、設計師制圖適配、用戶裁剪適配。

智能適配：

簡單來說智能適配是指通過后臺代碼的約束對上傳的圖片進行智能匹配，匹配內容包含圖片大小、圖片尺寸以及圖片的展現(xiàn)方式。

圖片大小：可以限制上傳圖片的最大尺寸。

圖片尺寸：可以限制圖片的長（寬）最小值，也可以限制圖片的精準尺寸。

圖片展現(xiàn)方式：可以設定圖片在容器中的呈現(xiàn)方式，下面是最常見的 8 個圖片呈現(xiàn)方式。

*智能適配之 Feed 流圖片適配

當你無法保證用戶發(fā)幾張圖片，無法預估圖片的比例時，我們就可以去設定它相應的規(guī)則使之適配。

• 單張布局：

不管用戶上傳幾張圖片，F(xiàn)eed 流中以一張大圖進行展現(xiàn)，使用大圖布局的圖片適配方式一般有兩種，一種是給予圖片一個容器大小，讓其內容全部展示；另一種是按照圖片的上傳比例而變化。

給予容器大小。我們可以給予圖片一個容器尺寸（如：300X300px），無論圖片有多大都不能超過此容器，為了讓圖片內容全部展示出來且不變形，我們可以讓圖片保持正比例縮放，使長邊能完全顯示出來（左上或中心區(qū)域）。這一類的適配更偏向于以內容為主的產品，下面是常用的兩種適配方案：

隨圖片比例而變化。如果你想保證圖片最佳的大圖預覽效果，那么就可以采用隨圖片比例而變化的方案，當用戶上傳不同比例的圖片時，圖片展示的高度與寬度會根據(jù)我們提供比例縮放。采用該適配方式能將圖片信息表達完善，圖片占用空間大，適合圖片質量高，這一類的適配更偏向于以圖片為主的應用。

要做這類適配時我們首先要設定裁切的比例，裁剪比例一般設置為常用的圖片比例 1:1、4:3、3:2、16:9。我們上傳的圖片可以根據(jù)圖片的比例進行自行匹配。當圖片越接近正方形則選擇 1:1，當圖片長寬比例越大則選擇 16:9。

用戶上傳的很多圖片并不是標準比例，如果存在多余像素，那么可以采用保持圖片正比縮放，從圖片中心區(qū)域展示，根據(jù)比例一共可以分為 7 種展現(xiàn)方式：

我們可以看到上圖，根據(jù)不同比例的尺寸展現(xiàn)出來的頁面占比也是不同的，如果產品對頁面承載信息量有較高要求，那么可以去除 16:9、3:2、4:3 的縱向尺寸。

• 瀑布流：

瀑布流的圖片適配方法需要規(guī)定圖片比例，并且每個比例的容器大小是固定的，呈現(xiàn)方式也是保持圖片正比縮放，從圖片中心區(qū)域展示。

• 宮格：

宮格式布局簡單來說就是有規(guī)律的方形布局(1:1 尺寸)，宮格布局的形式多種多樣可以是九宮格、四宮格、三宮格，下面以較為復雜的九宮格的適配為例，當然最好的參考或者最常見的就是微信朋友圈。

設計師制圖適配

對于特殊頁面的圖片展示，我們?yōu)榱顺尸F(xiàn)最好的視覺效果，需要設計師對圖片進行單獨尺寸的適配設計，并且輸出多個尺寸的圖片進行上傳。

例如我在適配開屏頁時就對其進行了單獨的制圖適配，想要讓二倍圖適配三倍圖，最簡單的方法就是把畫面的上下區(qū)域留出更多的空間，中心畫面放大 10%，可操作按鈕放置畫面安全區(qū)域：

如果設計師不進行制圖適配，把適配交給程序處理，那么最終呈現(xiàn)的圖片就會顯得非常糟糕。如下圖 1 的強行適配，使得整個 banner 比例非常不協(xié)調，讓人看了后覺得十分廉價；下圖 2 則稍微好一點，雖然保證了畫面的視覺中心，但是整體畫面看起來過于飽滿，沒有任何呼吸感，并且“點擊參與”按鈕過于靠下，容易與 home 指示器造成誤操作。

用戶裁剪適配

當用戶想要呈現(xiàn)某些重要信息或識別性信息時，就可以把主動權交給用戶，讓用戶進行自行裁剪，如頭像、身份證信息。用戶上傳圖片后，我們可以給用戶設定一個默認裁剪區(qū)域，當用戶不想進行繁瑣操作時可以直接默認系統(tǒng)裁剪，如上傳頭像，我們可以把默認區(qū)域設置為圖片的中心區(qū)域。

小紅書在選擇頭像時默認裁剪區(qū)域是圖片的中心區(qū)域 1:1 圓形，并且圖片是短邊顯示，無論什么比例的圖片都能全部展示在選區(qū)內，當你想要把圖片脫離到選區(qū)外，系統(tǒng)會自動使圖片彈回。未選擇狀態(tài)是選區(qū)內圖片高清，選區(qū)外圖片模糊，選擇狀態(tài)則是選區(qū)內圖片高清，選區(qū)外圖片黑色不透明遮罩（高透明度）。

微信在選擇頭像時默認裁剪區(qū)域是圖片的中心區(qū)域 1:1 正方形，圖片一樣是短邊顯示，也不能讓圖片脫離到選區(qū)外，但是能拖動并放大縮小選區(qū)框。未選擇狀態(tài)是選區(qū)內圖片高清，選區(qū)外圖片有黑色不透明遮罩，選擇狀態(tài)則是圖片內容全部高清呈現(xiàn)。

2021 年開啟新的篇章，以后會把更多知識點匯總并講出來分享給大家！順便說一句我家貓不胖吧～～～～

歡迎關注作者微信公眾號：「黑獅力」