新手必备！设计师必看的线上图片使用攻略！

教程作者：黑狮力（授权转载）

交作业：#优设每日作业#

今天给大家带来线上图片使用的全面攻略

目录

1-线上图片的四大类别
2-线上图片常见的五种处理方式
3-线上图片使用的五大要点
4-总结

一、线上图片的四大类别

1、 信息图片：

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

例如好好住APP，它在「看图板块」中就使用了信息图片，重点表现图片的信息，周围无任何干扰元素或辅助信息元素。

2、 背景图片：

背景图片可以用于单个元素，也可以用于整体画面，主要作用于营造氛围。

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

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

3、 Banner图：

作为导航入口，引导用户点击进入详情页面，在各应用都普遍使用。

Banner图作为最常见的图片使用形式之一，大家再熟悉不过了，它可以出现在APP中的各个界面中，如：首页、个人中心、运营活动页等等，造作新家APP的首页就用到了banner图。

4、 信息配图：

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

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

1、图片遮照：

1-1 黑色遮照：

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

1-2 颜色遮照：

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

1-3 渐变遮照：

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

2、背景模糊：

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

3、图片圆角：

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

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

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

4、内容出界：

在设计banner图时我们如果只是在框框里做设计，有时候未免显得太呆板，我们可以突破画框让内容溢出，营造更大的氛围，近而使整个画面更具有冲击力。

5、投影：

图片投影的方式一共分为7大类别，分别为：普通投影、等高线投影、矢量投影、图层模糊投影、多层投影、移轴模糊投影、手动投影。（投影制作步骤可查看我之前发布的文章《七种投影详细解析》）。而在线上运用的最多的就是：普通投影、等高线投影、图片模糊投影，效果如下：

三、线上图片使用的五大要点

1、文件大小

对于位图，我们在线上场景中最常使用的文件格式无非是PNG与JPEG（在特殊情况下会用到动画GIF）。

PNG图片：

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

JPEG图片：

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

2、比例

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

1：1

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

3：2

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

4：3

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

16：9

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

3、栅格系统

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

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

移动端常用的栅格系统最小单位为4px（@1x）或3px（@1x），那么我们来看看airbnb是如何用3px（@1x）的栅格系统来确认banner的尺寸大小（sketch软件-显示-布局，就可以打开栅格系统布局面板）：

如上图，airbnb的栅格系统布局设置总宽为328px（总宽为中间6列+4个间距宽度），偏置为24px（左侧初始偏置像素），列数为6（一共分为6列），列宽45px（列数的宽度），间距宽度为12px（当不能除正数时，会自动把间距缩小1px，所以会看到有些间距为11px，有些间距为12px）

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

4、倍率

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

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

方案一：两倍图输出

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

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

方案二：三倍图输出

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

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

5、图片适配

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

（1）智能适配：

简单来说智能适配是指通过后台代码的约束对上传的图片进行智能匹配，匹配内容包含图片大小、图片尺寸以及图片的展现方式。

图片大小：可以限制上传图片的最大尺寸。
图片尺寸：可以限制图片的长（宽）最小值，也可以限制图片的精准尺寸。
图片展现方式：可以设定图片在容器中的呈现方式，下面是最常见的8个图片呈现方式。

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

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

*1、单张布局：

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

*1-1给予容器大小

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

*1-2随图片比例而变化

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

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

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

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

*2、瀑布流：

瀑布流的图片适配方法需要规定图片比例，并且每个比例的容器大小是固定的，呈现方式也是保持图片正比缩放，从图片中心区域展示。

*3、宫格：

宫格式布局简单来说就是有规律的方形布局(1:1尺寸)，宫格布局的形式多种多样可以是九宫格、四宫格、三宫格，下面以较为复杂的九宫格的适配为例，当然最好的参考或者最常见的就是微信朋友圈。

（2）设计师制图适配

对于特殊页面的图片展示，我们为了呈现最好的视觉效果，需要设计师对图片进行单独尺寸的适配设计，并且输出多个尺寸的图片进行上传。

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

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

（3）用户裁剪适配

当用户想要呈现某些重要信息或识别性信息时，就可以把主动权交给用户，让用户进行自行裁剪，如头像、身份证信息。用户上传图片后，我们可以给用户设定一个默认裁剪区域，当用户不想进行繁琐时可以直接默认系统裁剪，如上传头像，我们可以把默认区域设置为图片的中心区域。

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

微信在选择头像时默认裁剪区域是图片的中心区域1:1正方形，图片一样是短边显示，也不能让图片脱离到选区外，但是能拖动并放大缩小选区框。未选择状态是选区内图片高清，选区外图片有黑色不透明遮罩，选择状态则是图片内容全部高清呈现。

总结：

优秀的设计往往都是从细节中精雕细磨，试着从不同的角度去优化产品，更加广度地去思考设计，而不单是直接做产品的需求，希望这些内容对大家能有一点启发，以后会把更多知识点汇总并讲出来分享给大家，坚持每周一篇干货！

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

喜欢可以点个小赞，拜了个拜～

想要来「优优自学团」和500位小伙伴一起交流学习进步吗？
添加管理员微信：uisdc2 备注「优优自学团」（无备注不通过哦）

学完这篇教程的人还在学…