特别感谢 海盐社 小伙伴 @小溜Epik 和 李洋洋对这篇分享的指导和修改建议~

前言

加载默认图片对很多新手设计师来说是一个设计盲区，在页面设计时常常会忽略它的存在，直到技术追问过来，才急忙输出，但又无法顾及所有尺寸的图片，结果就是不断的查漏补缺，或者技术用一个尺寸下的默认图代替所有，最终的界面效果可想而知。
所以这篇文章主要有两个作用，一是让大家在设计时要意识到默认图片的重要性，不要忘记设计输出；第二个就是聊一聊常用的默认加载图片的样式，大家也可以根据自己的产品，选择合适的样式。

目录

1. 什么是加载默认图

2. 加载默认图的种类

3. 需要加载默认图的位置

加载默认图片是图片加载过程的中间状态，它初始存在的意义就是在网络环境不好的状态下，保证页面的信息结构框架，让用户可以知道当前位置是有内容信息的，只是还没有加载出来；随着产品品牌理念的不断增强，很多产品会选在在这个小小的区域里放置品牌相关的元素，来加深用户对品牌的认知，一般会用logo或吉祥物。

通过搜集大量的APP，整理下来发现，目前在产品界面中常用的加载默认图分为以下几种：logo、吉祥物、产品特性元素、色块（彩色、灰色、白色）、图片模糊、loading，下面我们来具体介绍一下各自使用的优缺点

1. logo
logo具有传媒特性，是具有品牌识别和推广作用的图形结构，logo设计最基本的要求是必须要在最有效的空间内实现所有的视觉识别功能。既然设计的初衷就是为了让更多的人记住，并且印象深刻，那么对用户来说没有实际含义的默认图片就是logo展示的非常合适的场所。

优点：
· 可以加强用户对品牌符号的认知
缺点：
· 图片较多时在界面中大量使用，会让页面显得比较凌乱

2. 吉祥物

吉祥物存在的重要作用就是将品牌人格化、情感化，它可以辅助企业向用户传达产品的气质特征。吉祥物一般都是认真卖萌的小家伙，如果企业有吉祥物，在默认图片出现是非常合适的选择，因为那些可爱、萌萌的小家伙可以缓解用户等待的焦虑感

优点：
· 缓解用户等待中的焦虑感
· 增强用户对品牌形象的认知
缺点：
· 在界面中大量使用，会使页面显得比较凌乱

3. 产品相关性元素

产品相关性元素指的就是那些能代指产品属性的符号，比如音乐类的产品会使用音符，书籍相关的会使用书籍，美食相关的会使用食物等等。

如果再做细分的话，会发现有些产品会根据块内容的不同选择不同的相关性元素，比如豆瓣、网易云音乐。

优点：
· 用户可以快速将图形与内容进行连接，对即将加载出来的内容有心理预期
缺点：
· 没有品牌标识，同类型的产品都可以使用相同的方式
· 设计开发成本都比较高，耗时耗力

4. 色块
色块的使用在产品界面中大量出现，几乎每个产品中都会有这样的默认图片，适合在任何场景下出现，且不会给用户视觉压力。

因为不同颜色的色块给用户的心理感受不一样，这里将色块的形式分为3种，灰色的、彩色的、白色的来具体说明。

① 灰色色块
在产品界面中使用频率最高的一种样式。灰色是中性的，它可以和任何色彩进行搭配，且常选择浅灰色，所以在页面中大量出现也不会抢其他内容的风采，并且会让界面看起来整齐划一。

优点：
· 选择这种默认图片，界面看起来干净整洁
· 可以在界面中大量出现 - 宫格类图片展示模块最常用的默认图方式
设计、开发成本极低
缺点：
· 没有产品特性，无法展示品牌形象和标识

② 彩色色块
设计类、娱乐类产品图片展示常用的手段，因为即使是默认图片也要有风格，所以会选择多种不同的颜色随机代表某张图片，这样即使在界面还没加载出来的时候也能体验出产品丰富的画面感。

优点：
· 多彩丰富的画面感，体验娱乐和美感
缺点：
· 会抢主内容的风头
· 用户会误以为是已经加载完成的样子

③ 白色色块
白色的默认图片就只是用来占位了，仅仅保留图片的空间位置

优点：
· 加载过程看起来比较流畅，因为没有其他内容形式的过渡
缺点：
· 用户无法预测加载之后的样式，比较迷茫
· 相对于其他形式，用户会更有焦虑感

5. 图片模糊
国外网站常用的设计手法，图片在加载过程使用加载出的模糊图片作为加载默认图

优点：
· 用户可以对图片色彩有提前的感知，可以展开内容的想象
缺点：
· 不适合大面积出现，一般出现在比较重要和色彩比较丰富的模块内容里

6. 点击加载
这种默认图片出现之前经常会伴随了有loading在默认图片中展示，当网络不足以加载出图片时，就会出现可手动点击加载的样式，引导用户点击重新加载

优点：
· 用户可以对加载过程有所控制，自主选择需要加载出来的图片
· 节省用户流量
缺点：
· 当网络环境好了之后还是需要用户手动点击加载

在我们的界面设计中，需要使用加载默认图的位置还是很丰富的，并且不同的场景适合使用的默认图片也各不相同，为了是大家对默认图的使用场景有更深入的认证，下面我们来具体看看哪些场景会需要加载默认图：

1. 源列表中
所有列表中的的图片，包括但不限于资源列表、评论列表、动态列表等等所有包含图片得列表信息。常用的加载样式有logo、灰色快、吉祥物、产品相关元素。

2. 终端详情页面
详情页中的图片默认图，常用灰色块、图片模糊和点击加载，通过默认图占位，可以防止用户在浏览信息时由于图片加载慢而使页面信息跳动展示。另外图片比较大的时候，用点击加载可以让用户在网络环境不好的情况下自主选择是否需要加载出来。

3. 头像默认图
头像默认图经常会用色块、吉祥物和默认灰色人形来表示。

4. 入口图标
入口图标，经常会用到灰色、白色色块，如果logo形状简单时，也会用logo来表示。

总结：
加载时图片加载过程的中间态，或者是网络信号不好时图片的展示样式。加载默认图的常用类型有：logo、吉祥物、产品相关元素、色块（灰色、彩色、白色）、图片模糊，我们要根据每种加载类型的优缺点和场景选择合适的加载默认图片。

最后一句话与大家共勉：界面是设计的第一步，但想要界面有很好的体验，很多时候是靠一些细节的交互状态体现出来的，所以在设计好页面的基础上多多考虑可能出现的中间状态，并做好设计工作。