5000字干货！超全面的线上图片使用攻略

本文从线上图片的四大类别、常见的五种处理方式、以及线上图片使用的五大要点等帮你彻底掌握线上图片的用法。

目录

• 线上图片的四大类别
• 线上图片常见的五种处理方式
• 线上图片使用的五大要点

线上图片的四大类别

1. 信息图片：

在页面中单独存在的图片，以图片为主要元素传达给用户有效信息。

例如好好住 APPl E u，它在“看图板块”中就使用了信息图片，重点表现图片的信息，周围无任何干扰元| 4 q素或辅助信息元素。

2.x M L M H 7背景图片：

背k 8 s 3 x q ) M m景图片可以用于单个元素，也可以用于整体画面，主要作用于营造氛围。

单个元素：例如嘀嗒出行的“优惠券板块”，把插画图片应用在单个卡片中。

整体画面：例如网易云音乐的“听歌页面”，它就把歌曲封面的图片作为页面整体的背景。（图片进行了模糊处理）

3. Banner 图：

作为导航入口，引y w h D g K 4 I导用户点击进入详情页面，在各应用都普遍使用。

Banner 图作为最常见的图片使用形式之一D d ; k *，大家再熟悉不过H ` B o了，它W B , m g c可以出现在 APP 中的各个界面中，如：首页、个人中心、运营活动页等等，造作新家 APP 的首页就用到了 banner 图。

4. 信息配图：

作为文字的辅助元素，图片的含义需要和文字相符合A 5 m N 0 ] A才能更好地辅助传达文字的意思，反之会让用户觉得困惑。

线上图片常见的五种处理方式

1. 图片遮罩：

黑色遮罩：

图片与文字之间加黑色到透明度（10-60%{ 7 S Q J ) 3）的遮罩，保证文字内容区域在黑色区域，目的是为了能让用户看清文字。

颜色遮罩：

根据图片整体的色调，在图片上加与图片色调统一的颜色遮罩，保证文字的可识别性，不影响h = Y R &图片的正常显示。

渐变遮罩：

图片与文字之间加透明度的渐变遮罩，让文字显得更加清晰，使画面过度更加协调。

2. 背景模糊：

在很多场景下我们都会采用到封面图模糊处理后作为背景图的方案，为保证信息能够清晰显{ 1 L E m示会在背景上加一个深色半透明蒙层。半透明层可以取黑色、深灰色、背景颜色（深），透明度为（25T m l – $%-40%），它们呈现出来的效果都各有不R u z b P e G同，我们可以根据不同的场景选择不同的方案。

3. 图片圆角：

图片圆角的使用也z 0 P V d 5是十分有讲究，根据不同的产品属性去设定气质相符的圆角设计。

小圆角或直角：视觉印象是硬朗、高冷、具有攻击性的，多用于时尚、高端、冲突感强烈的设计– e – H $ q r 7中；

大圆角：视觉映像是有亲和力，柔软，t 8 8 ` (安全的，多用于母婴产品、二次元产品、娱乐性强的设计中。

4. 内容出界：

在设计 banner 图时我们如果只是在框框里做设计，有时m } ) ( ) h V Z候未免显得太呆板，我们可以突破画框让内容V C Y溢出，营造更大@ e t ? : K U { 4的氛围，进而使整个画面更具有冲击力。

5. 投影

图片投影的方式一共分为 7 大类别，分别为：普通投影、等高线投影、矢量投影、图层模t l % t糊投影、多层投J x ( # _影、移轴模糊投影、手动投影。而在线上运用的最多的就是：普通投影、等高线投影、图片模糊投影，效果如下：

线上图片使用的五大要点

1.Y A = p S a 文件大小

对于位图，我们在线上场景中v k j i ] T h L (最g ) [ + 2 /常使用n G K j # 4的文件格式无非是 PNGq Y F C | R 与 JPEG（在特殊情况下T – U u 5 e会用到动画 GIF）。

PNG 图片：

无损文件格式，我们 UI 设计师出图的首选，不会轻易造成细节像素模糊或输出文件变色的情况，并且支持 alpha 通道（透明度）。所以对于高质量图像文件建议输出1 f 3 Q –为 PNG 格式，不过正因为o r h l R像素无损，所以 PNG 文件大小相对较大，在特定情况下可以选择 8 位处理的做法来减小文件大小，在保证尽可能缩小文件大小的同时，也不会降低图像质量。

JPEG 图片：

JPEG 格式会损失掉图片中的一些像素细节，所以输出 JPEG 通常会比输出 PNG 的文件大小更小，适用于对于图片8 / O ^ 8质量要求不过高的场景。并且 JPEG 格式支持对文件质量进行二次压缩，我们可以选择 6 o P 5 Z Q I使用 JPEG 格式质量压缩的方式，在文件大小和图像质量之间找到平衡。

2. 比例

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

1:1

1:1 是传统的 12M 5 n R w0 胶片画幅，也叫大画幅，因为相机结构和其他一些原因导致了胶片是方形的，此比例更容易将构图规整的简单，能突出主体图片，通常用于头像、电商图片等。

3:2

3H M ^ Y {:2 这个尺寸源于 135 胶卷的比例，采用这一比例并不是因为它是黄金比例，而是由相机的像场大小决定的，这个尺寸运用到线上时适用于以内容为主的应用。

4:3

4:3 是随着摄影的发展，微单的出现而诞生的，3:2 尺寸与 4:3 尺寸极为相似，在做设计时很容易混淆，不过在z m ` O ) 4同屏显示中，4:3 的图片内容显示略大于 3:2，所以 4:3 尺寸更适用于以图片为主或图片与内容比( 3 G ^重相同的应用。

16:9

16:9 是根据人体工程; 1 7 O L Z学的研究，发现人的两只眼睛视野范围是一个长宽比例为 16:9w R M Z H 的长方形，所以电视/ V C ( v、显示器行业根据这个的黄金比例尺寸设计产品。这个尺寸的图片在线上运用于视频播放的图片显示。

3. 栅d j y o s格系统

栅格系统以规则的网络阵列来指导和规范版面布局以及信息分布，而 UI 设计里常用的栅格系统是从平面I _ H栅格系统中发展起来，栅格系统有时候也称为网格系统。

栅格系统在图片的排版布局、尺寸设定方面L B y [ G给了设计者直观的参考，它让图片变p 8 0 Z得有规律，从而减少了设计决策成本，V p ! a a使整个画面更加具有条理，让内容的可读性变高。

移动端常用的栅格系统最y ( Q )小单位为 4px（@1x）或 3px（@1x），那么我们来看看 ai2 b % W W E P |rbnb 是如何用 3px（C L –@1x）的栅格系统来确认 banner 的尺寸大小：

如上图，airbnb 的栅格系统布局设置总宽为 328px（总宽为中间 6 列+4 个间距宽度），偏k t ] u z置为 24px（左侧初始偏置像素），列数为 6（一共分为 6 列_ g l N X ! 8 T O），列宽 45px（列数的宽度），间距宽度为 1V n d – 5 ) 0 z2px（当不能除正数时，会自动把间距缩小 1px，所以会看到有些间距为 11px，有些间距为 12px）

当设定好栅格系统后，我们就可以很好的得出图片的宽度：158px（45+11+45+12+45）。再根据图片比例的尺寸 3:2，我们就可以算出: w k O图片的高度为：106px（158*32）。根据相同的方法，我们可以用栅格系统+尺寸比例得出更多的尺寸大小。（注：不管是 3px 或 4px 栅格，都会出现除& 3 1 ` G不整的情况，如上图中的 11px，这个不用担心，不影响大7 ! I N局。）

4. 倍率

在对 banner 图进行输出时要考虑倍率的大小，每个产品会根据产品的特性来决策输出的倍率，有些产品用二倍图输出，有些产品用 3 倍图输出。

标准分辨率的显示器具有 1：1 的像素密度（即@1x），其中一个像素占位一个点。高分辨率显示器具有更高的像素密度，2 倍或 3 倍的比例系数（D C g n 5 2 p @ G即@2P ; D !x0 Q ~ f ) A S、@3x）。当 1 倍的位图放在 2 倍或 3 倍的尺寸下时，就会出现图片损伤现象（失真），那么我们到底该用几倍图去制作 banner 图呢？

方案一：两倍图输出

优点：导出文件比@3x 小，可平衡图片质量和线上文件大小的一个优质方案。

缺点：虽然@2x 可向下适8 R ? Z V } ~配@1x，但适配@3x 放大后1 ` S E d E图片会微微模糊，所以我们如果要用@2x 导出图片，那么 banner 内的文字不能过小或过于密集、粗旷，画面中也不能出现过多的效果，不然会看出明显的模糊痕迹（如下图的顶部文字与按钮文字b V 9 O ( O 2 H f放大后就有明显的模糊痕迹）

方案二：三` J @ _ r R O (倍图输出

优点：@3x 可向下适配@1x 与@2x，能够很好的保证不同尺寸下的图片质量，对视觉要求高的项目就必须用 3 倍图来设计。

缺点：输出的文件相对较大。

5. 图片适配

图片的适配类型非常多，对于不同的布局适配场景我们选择的适配方案也不同，图片适配一共分为 3 大R F a g W O y X A类：智能适配、设计师制图适配、用户裁剪适配。

智能适配：

简单来说智能适配是指通过后台代码的约束对上传的图片进行智能匹配，匹配内容包含图片6 N 9 C @ I W o大小、图片尺寸以及图片的展Y c _ F W & 5现方式。

图片大小：可以限制上传图片的最大尺寸。

图片尺! 6 d I B R + E寸：可以限制图片的长（宽）最小值，也可以限制图片的精准尺寸。

图片展现方式：可以设定图片在容器中的呈现方式，下面是最常见的 8 个图片呈现方式。

*智能适配之 Feed 流图片适配

当你无法保证用户发几张图片，无法预估图片的比例时，我们就可8 J ? e以去设定它相应的规则使之适配。

• 单张布局：

不管用户上传几张图片，Feed 流中以一张大图进行展现，使用大图布局的图片适配方式一般有两s , 4种，一种是给予图片一个容器大小，让其内容全部展示；另一种是按照图片的上传比例而变化。

给予容器大小。我们可以给予图片一个容器尺寸（如[ ? z：300X300px），无论图片有多大都不能超过此容器，为了让图片内容全部展示出来且不变形，我们可以让图片保持正比例缩放，使长边能完全显示出来（左上或中心区域）。这一类的适配更偏向于以内容为主的产品，下面是常用的两种适配方案：

随图n G :片比例而变化。如果你想保证图片最佳的大图预览效果，那么就可以采用随图片比例而变化的方案，当用户上q / h D t X _传不同比例的图片时，图片展示的高度与宽7 $ 1 y : Q U C度会根据我们提供比例缩放。采用该适配方式能将图片信息表达完善，图片占用空间大，适合图片质量高，这一类的适配更偏向于以图片为主的应用。

要做这类适配时我们首先要设定裁切的比例，裁剪比例一般设置为常用的图片比例 1:1、4:3、U I c3:2、16:9。我们上传的图片可以根据图片的比例进行自行匹配。当图片越接近正方形则选择 1:1_ N Q F G ; 0 P，当图片长宽比例越大则选择 16:9。

用户上传的很多图片并不是标准比例，如果存在多余像素，那么可以采用保持图片正比缩放，从图片中心区域展示，根据比例一共可以分为 7 种展现方式：

我们可以看到上图，根据不同比例的尺寸展现出来的页面占比也是不同的，如果产品对页面承载信息量有较高要求，那么可以去除 16:9、3:2、4:3 的纵向尺寸。

• 瀑布流：

瀑布流的图片适配方法需要规定图片比例，R ; % { :并且每个比例的容器大小是( s V 5 F % : 9 q固定的，呈现方式也是保持图片正比缩放，从图片中心区域展示– { 3 e ? r。

• 宫格f O D f D s Y：

宫格z Y @ ]式布局简单来说就是有规律的方形布局(1:1 尺寸)，宫格布局的形式多种多样可以是九宫格、四宫格、三宫格，下面以较为复杂的九宫格的适配为例，当然最好的参考或者最常w 9 L O W n v见的就是微信朋友圈。4 x g j c

设计师制图适配

对于特殊页s @ g l F V –面的图片展示，我们为了呈现最好的视觉效{ / G b果，需要设计师对图片进行单独尺寸的适配设计K t } * Q } N j d，并且输出多个尺寸的图片进行上传。

例如我在适配开屏页时就对其进行了单独的制图适配，想要让二倍图适配三倍图，最简单的方法就是把画面的上下区域留出更多的空间，中心画面放大 10%，可操作按钮放置画面安全区域：

如果设计师不进行制图适配，把适配交给程序处理，那么最终呈现的图片就会显得非常糟糕。如下图 1 的强行# j j适配，g s e L使得整个 banner 比例非常不协调，让人看了后觉得十分廉价；下图 2 则稍微V l K好一点 P q，虽然保证了画面的视觉中心，但是整体画面看起来过于饱满，没有任何呼吸感，并且“点击D B k – K d参与”按钮过于靠下，容易与 home 指示器造成误操作。

用户裁剪适配

当用户想要呈现某些重要信息或识别性信息时，v u * , { O B _就可以把主动权交给用户，让用户进行自行裁剪，如头像、身份证信息。用户上传图片后，我们可以给用户设定f C R一个默认裁剪区域，当用户不想进行繁琐操作时可以直接K V 4 4 @ f Z F默认系统裁剪，如上传头像，我们U J 0 n 9可以把默认区域设置为图片的中心区域。

小红书在选择头像时默认裁剪区域是图片的中心区域 1:1 圆形，并且图片是短边R _ ^ 4 # #显示，无论什么比例的图片都能全部展示在选区内，当你想要把图片脱离到选区外，系统会自动使图片弹回。未选择状Y – S态是选区内图片高清? ( )，选区外图片模糊，选择状态则是选区内图片高清，选区外图片黑色不透明遮罩（高透明度）。

微信在选择头a D % # X :像时默认裁剪区域是图片的中心` 1 % O E `区域 1:1 正方形，图片一样是短边显示，也不能让图片脱离到选区外，但是能拖动并放l , r V C b ^ R大缩小选区框。未选择状态是选区内图片高清，选区外图片有黑色不透明遮罩O ; s B y q U %，选择状态则是图片& 4 I Z t 7内容全部高清呈现。

2021 年开启新的篇章，以后会把更多知识点汇总并讲p 2 v出来分享给大家！顺便说一句我家猫不胖吧～～～～

欢迎关注作者微信公众号：「黑狮力」