1-線上圖片的四大類別

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

3-線上圖片使用的五大要點

4-總結(jié)

一、線上圖片的四大類別

1、 信息圖片：

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

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

 

2、 背景圖片：

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

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

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

 

3、 Banner圖：

作為導(dǎo)航入口，引導(dǎo)用戶點擊進入詳情頁面，在各應(yīng)用都普遍使用。

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

 

4、 信息配圖：

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

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

1、圖片遮照：

1-1黑色遮照：

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

 

1-2顏色遮照：

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

1-3漸變遮照：

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

 

2、背景模糊：

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

3、圖片圓角：

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

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

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

 

4、內(nèi)容出界：

在設(shè)計banner圖時我們?nèi)绻皇窃诳蚩蚶镒鲈O(shè)計，有時候未免顯得太呆板，我們可以突破畫框讓內(nèi)容溢出，營造更大的氛圍，近而使整個畫面更具有沖擊力。

 

 5、投影

圖片投影的方式一共分為7大類別，分別為：普通投影、等高線投影、矢量投影、圖層模糊投影、多層投影、移軸模糊投影、手動投影。（投影制作步驟可查看我之前發(fā)布的文章《七種投影詳細解析》）。而在線上運用的最多的就是：普通投影、等高線投影、圖片模糊投影，效果如下：

三、線上圖片使用的五大要點

1、文件大小

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

 

PNG圖片：

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

 

JPEG圖片：

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

2、比例

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

1:1

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

3:2

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

 

4:3

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

 

16:9

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

3、柵格系統(tǒng)

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

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

 

移動端常用的柵格系統(tǒng)最小單位為4px（@1x）或3px（@1x），那么我們來看看airbnb是如何用3px（@1x）的柵格系統(tǒng)來確認banner的尺寸大小（sketch軟件-顯示-布局，就可以打開柵格系統(tǒng)布局面板）：

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

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

4、倍率

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

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

方案一：兩倍圖輸出

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

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

方案二：三倍圖輸出

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

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

5、圖片適配

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

1、智能適配：

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

圖片大?。嚎梢韵拗粕蟼鲌D片的最大尺寸。

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

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

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

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

*1、單張布局：

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

*1-1給予容器大小

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

*1-2隨圖片比例而變化

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

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

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

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

*2、瀑布流：

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

*3、宮格：

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

2、設(shè)計師制圖適配

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

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

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

3、用戶裁剪適配

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

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

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

作者：黑獅力   來源：站酷

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。

藍藍設(shè)計( www.jghy.net )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司