1-線上圖片的四大類別

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

3-線上圖片使用的五大要點(diǎn)

4-總結(jié)

一、線上圖片的四大類別

1、 信息圖片：

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

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

 

2、 背景圖片：

背景圖片可以用于單個(gè)元素，也可以用于整體畫面，主要作用于營(yíng)造氛圍。

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

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

 

3、 Banner圖：

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

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

 

4、 信息配圖：

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

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

1、圖片遮照：

1-1黑色遮照：

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

 

1-2顏色遮照：

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

1-3漸變遮照：

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

 

2、背景模糊：

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

3、圖片圓角：

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

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

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

 

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

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

 

 5、投影

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

三、線上圖片使用的五大要點(diǎn)

1、文件大小

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

 

PNG圖片：

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

 

JPEG圖片：

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

2、比例

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

1:1

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

3:2

3:2這個(gè)尺寸源于135膠卷的比例，采用這一比例并不是因?yàn)樗屈S金比例，而是由相機(jī)的像場(chǎng)大小決定的，這個(gè)尺寸運(yùn)用到線上時(shí)適用于以內(nèi)容為主的應(yīng)用。

 

4:3

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

 

16:9

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

3、柵格系統(tǒng)

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

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

 

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

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

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

4、倍率

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

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

方案一：兩倍圖輸出

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

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

方案二：三倍圖輸出

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

缺點(diǎn)：輸出的文件相對(duì)較大。

5、圖片適配

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

1、智能適配：

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

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

圖片尺寸：可以限制圖片的長(zhǎng)（寬）最小值，也可以限制圖片的精準(zhǔn)尺寸。

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

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

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

*1、單張布局：

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

*1-1給予容器大小

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

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

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

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

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

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

*2、瀑布流：

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

*3、宮格：

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

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

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

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

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

3、用戶裁剪適配

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

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

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

作者：黑獅力   來源：站酷

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

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

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