设计达人分享素材包获取教程及海量设计资源

设计专家

发送“素材包”即可获得教程和海量设计资源！

设计专家精心挑选好文章好素材，学习设计，少走弯路

目录

1-在线图片四大类

2-五种常见的在线图像处理方式

3-使用在线图片的五个要点

1、网络图片四大类

1、资料图片：

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

例如，好好好APP在“看图栏目”中使用信息图片，重点关注图片的信息，周围没有任何干扰元素或辅助信息元素。

2.背景图片：

背景图像可用于单个元素或整个图片。它们主要是用来营造气氛的。

单一元素：例如嘀嗒出行的“优惠券版块”将插图应用到单张卡片上。

整体图片：例如网易云音乐的“听歌页面”就使用了歌曲封面的图片作为页面的整体背景。 （图片已模糊）

3、横幅图：

作为导航入口，引导用户点击进入详情页，常用于各种应用中。

Banner图片作为最常见的图片使用形式之一，大家都很熟悉。它们可以出现在APP中的各种界面中，例如：首页、个人中心、操作活动页面等。用于早作新家APP的首页。横幅图像。

4、图片信息：

图片作为文字的辅助元素，其含义需要与文字保持一致，才能更好地辅助传达文字含义。否则，会让用户感到困惑。

2. 在线图像处理的五种常见方式

1.图片封面：

1-1黑盖：

在图片和文字之间添加从黑色到透明（10-60%）的遮罩，保证文字内容区域在黑色区域，以便用户可以清晰地看到文字。

1-2 颜色掩蔽：

根据图片的整体色调，添加与图片色调一致的颜色蒙版，保证文字的易读性，不影响图片的正常显示。

1-3 渐变覆盖：

在图片和文字之间添加带有透明度的渐变蒙版，让文字显得更加清晰，让图片过渡更加协调。

2.背景虚化：

很多场景下，我们都会采用将封面图模糊化作为背景图的方案。为了保证信息能够清晰显示，背景会添加深色半透明遮罩。半透明层可以是黑色、深灰色、背景色（深色）和透明度（25%-40%）。它们都呈现出不同的效果。我们可以根据不同的场景选择不同的解决方案。

3、图片圆角：

图片中圆角的运用也很有讲究。根据不同的产品属性，可以设置符合气质的圆角设计。

小圆角或直角：视觉给人硬朗、冷酷、攻击性的感觉，多用于时尚、高端、冲突密集的设计；

大圆角：视觉形象亲切、柔和、安全。多用于母婴产品、二维产品、娱乐性较强的设计。

4、内容越界：

在设计横幅图像时，如果我们只在框架内进行设计，有时会显得过于沉闷。我们可以突破框架，让内容溢出，营造出更大的氛围，让整个画面更有冲击力。

5. 投影

图像投影方法分为7类，即：普通投影、轮廓投影、矢量投影、图层模糊投影、多层投影、移轴模糊投影、手动投影。 （投影制作步骤请参见我之前发表在Zokuu上的文章《七种投影详解》）。网上最常用的有：普通投影、轮廓投影、图像模糊投影。效果如下：

3.使用网络图片的五个要点

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）网格系统来确认横幅尺寸的：

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

设置好网格系统后，我们就可以很好的得到图像的宽度：158px（45+11+45+12+45）。根据图像比例3:2，我们可以计算出图像的高度为：106px（158*3x2）。按照同样的方法，我们可以使用网格系统+尺寸比例来得到更多的尺寸。 （注：无论是3px还是4px的网格，都会出现划分不完全的情况，比如上图中的11px，这个不用担心，不会影响整体情况。）

4. 放大倍数

输出横幅图像时，必须考虑放大比例。每个产品都会根据产品的特性来确定输出放大倍数。有些产品使用双倍图像输出，有些产品使用 3x 图像输出。

标准分辨率显示器的像素密度为 1:1（即 @1x），其中一个像素占一个点。高分辨率显示器具有更高的像素密度和2x或3x缩放因子（即@2x、@3x）。当 1x 位图以 2x 或 3x 尺寸放置时，将会发生图像损坏（扭曲）。那么我们应该使用多少次位图来制作横幅图像呢？

选项 1：将图形输出加倍

优点：导出的文件小于@3x，是平衡图像质量和在线文件大小的优秀解决方案。

缺点：虽然@2x可以向下适配到@1x，但是适配到@3x后图像会稍微模糊。因此，如果我们想使用@2x导出图片，banner中的文字不能太小，也不能太密或太粗。图片中不要有太多效果，否则会看到明显的模糊痕迹（下图中顶部文字和按钮文字放大后会有明显的模糊痕迹）

选项 2：三重图输出

优点：@3x可以向下适配@1x和@2x，可以保证不同尺寸下的图像质量。视觉要求高的项目必须使用 3 倍图像进行设计。

缺点：输出文件比较大。

5. 图像适配

图片适配的类型有很多种，针对不同的布局适配场景我们选择不同的适配方案。图像适配分为三类：智能适配、设计师绘图适配、用户裁剪适配。

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%，可操作按钮将屏幕置于安全区域：

如果设计者不进行绘图适配，而将适配留给程序，那么最终的图像看起来会很糟糕。下图一的强制适配，使得整个banner的比例非常不协调，让人看了之后感觉很廉价。下面的图2稍微好一些。虽然保证了画面的视觉中心，但整体画面看起来过于饱满。任何呼吸感，以及“点击参与”按钮太靠下，很容易导致Home指示灯误操作。

3. 用户定制和适配

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

小红书选择头像时，默认裁剪区域为图片中心1:1的圆圈，图片显示在短边。任何比例的所有图像都可以显示在选择中。另外，当您想从选区中删除图像时，系统会自动使图片反弹回来。未选中状态下，选区内的图片是高清的，选区外的图片是模糊的。选中状态下，选区内的图片为高清，选区外的图片为黑色且不透明（高透明度）。

微信选择头像时，默认的裁剪区域是图片中心1:1的正方形。图像也显示在短边上，图像无法脱离选择。但是，可以拖动并放大或缩小选择框。未选中状态下，选区内的图片是高清的，选区外的图片有黑色不透明蒙版。选中状态下，所有画面内容均以高清呈现。

2021年开启新的篇章，未来会总结更多知识点分享给大家！顺便说一句，我的猫不胖~~~~

//////感谢您的阅读//////

—

是时候提升自己了

豆瓣高分100本设计书籍！

▼

“点赞”+“又见”就是对我最大的动力~