配图设计看似简单，但想要做好需要我们注意许多细节，接下来让我们一探究竟~
文末有彩蛋，希望能对大家的工作学习有所帮助。
前言
俗话说：一图胜千言！优秀的配图设计绝对是个加分项，但是有的同学也疑惑，自己明明配的是优秀的摄影作品，怎么视觉效果就不好呢？接下来我们就来讲讲如何为自己的作品配上一张符合自己设计气质的图片，小细节很多，大家要记好笔记哟~
目录
1.配图设计的重要性
2.配图设计的隐喻性
3.配图设计注意事项
4.配图设计建议
5.总结
6.图片网站推荐
视觉美观
配图设计首要的就是视觉美观，这里通过一张图来告诉大家配图设计对于产品美观的重要性，我选用了 ins 的截图，通过两张不同品质的配图来展现最终显示效果，如下图：
我们可以看到高品质配图的页面让整个产品十分具有品质感，虽然页面的的元素完全相同，但是劣质配图的页面显得十分没有品质感。所以说好的配图能够增加视觉美观度，而差的配图会直接拉低你页面的美观度。
俗话说一图胜千言，在美观的前提下，我们还要考虑的配图的隐喻性，简单点来讲就是我们选用的图片能够表达我们的设计意图，正确的传达出我们要表现的“信息、气质、感觉...”
首先，我通过介绍一下广告设计中配图的 3B 原则来告诉大家图片隐喻性的重要性。3 B 即beauty—美女、beast—动物、baby—婴儿。
它们的寓意分别为美女—性感的魅力、婴儿—自然的魅力、动物—纯真的魅力。以此为表现手段的广告符合人类关注自身生命的天性，最容易赢得消费者的注意和喜欢。
我们同样也可以借鉴其中的思维到我们的配图设计当中，通过配图清晰的表达自己的设计意图。我们以淘宝商家中的配图为例：
这是一个猫粮商品的详情页，卖家在选用配图的时候使用了一张体态健康、毛色鲜亮的猫咪作为配图，寓意着只要你买我们家的猫粮，你的猫咪也可以像配图上的猫咪一样体态健康、毛色鲜亮来刺激用户的购买欲望，提升页面的购买率。
a.图片质量
配图的基本前提就是 — 图片质量，图片质量是保证图片信息清晰传达的前提条件。其次一张清晰的配图和一张模糊的配图给人带来的视觉感受是天差地别的。在这里我们还要意识到我们在选择图片质量的时候要注意搭配的平台和设计规范。如下图所示：
我们可以清晰看出左边的图片有明显的马赛克，给人的感觉的很模糊，也不符合平台的设计规范。而右边的图片清晰，能够准确的传达出信息，给人干净清爽的感觉，能够有效的提高页面的视觉美观度。
b.图片品质
在我们保证图片质量之后，我们还要确保图片的品质。图片品质影响着用户的情感诉求，高品质的图片会给予用户舒适愉悦的感觉，而低品质的图片则会给用户产生厌恶不适的负面感受，所以我们在选择图片的时候，我们需要在一定质量下选择高品质的图片。如下图所示：
虽然同样是汉堡系列，但是我们可以明显的看出，左边的图片的品质低于右边的图片。左边的图片上的食物感觉是路边炸鸡店的产品，二右边的食物则像是一家具有高品质感且烹饪做工讲究的餐厅的产品。
我们以实际的界面设计为例，高品质的图片直接能够提升页面的格调，用我们经常听到的一句话来形容就是“高端、大气、上档次”。我们以网易严选为例：
网易严选的月饼礼盒的配图是精心拍摄的摄影作品，从构图和配色都十分考究，使得商品给人一种精心制作且具有匠人精神的感觉，让用户能够感受到物有所值，进而提升商品的购买收藏率。
c.视觉重量
视觉重量是个老生常谈的问题，这里我们要保证主体物的视觉大小统一，因为如果视觉重量不统一，很容易打断用户的视觉流，而且视觉效果容易造成偏差，直接给视觉效果大打折扣。如下图：
我们再以盒马生鲜为例子，通过实际上线的例子进行分析。
盒马生鲜在产品展示配图上使用视觉重量统一的商品展示图，保证了页面视觉的统一，流畅的视觉流不会打断用户浏览信息的行为。
d.风格统一
当图片质量和品质得到保证，并且视觉重量统一的前提下，我们还需要考虑一个重要问题-风格统一。接下来我们通过图例来看一下风格统一和不统一的差异，如下图：
配图的风格统一可以提高页面的整体性，避免某一模块格外突出而破坏页面的整体性，且不易打断用户的视觉流，能有效的减少用户处理图形信息的时间和精力。我们以厨房故事为例：
厨房故事的配图选用了高质量的影像图片，我们可以看出从图中物品的罗列形式和整体色调都是统一的，这样做在视觉上能保持页面的整体性，从用户角度来看能有效的减少用户处理图像信息的时间和精力，有效的提高用户的操作效率。
e.色调统一
冷暖色调不统一往往会造成强烈的视觉差，所以在设计的时候我们要根据页面的整体色调来进行对图片的选择或者进行二次加工，来确保页面的视觉的统一性。我们以 Tinmar Pok 的设计为例：
Tinmar Pok 的设计选用与背景色一致的同类色，保证了页面整体色调的一致性。我们仔细观察会发现，在细节之处，木质的手和模型小人都是暖色调，与背景相融，视觉上融合整体更加舒适。
f.图片构图
优秀的图片本身就行行了构图设计，我们需要巧妙的利用其中的构图将视觉焦点放置在最佳兴趣点。如果没有，我们要主动的去修改图片使其达到最佳兴趣点。
这里我们先普及一下“最佳兴趣点”，最佳兴趣点我们可以理解为-最容易吸引人的视觉焦点，一般位于黄金螺旋线的消失点上。
当然我们每次也不可能都靠黄金螺旋线来找最佳兴趣点，我们可以链接左右 A 和 B 两边的对角线，再呈90°直角线链接 C 对角线。这样我们就可以快速的找到最佳兴趣点了。
这里我们以MITV的详情页为例，进行图解分析：
通过配图我们可以看到，人物的图片正好位于界面的最佳兴趣点上，而且恰好与页面左边内容达到了平衡页面视觉重量的作用。
g.图片动势
在图片中主体物的运动趋势能够有效的增添页面的视觉冲击力，并且通过一些指向性的动作能够加强页面内各元素的关联性，引导用户的浏览顺序。
图中人物的动势的方向指向标题文字，这里通过配图中原有的动势来引导用户阅读，并且这种配图更能增强页面的视觉冲击力。
h.文化属性
文化属性往往是大家容易忽略的点，我们在为项目选择图片的时候注意结合项目的人文属性，选择更加符合人们对于文化认知的心里模型图片，避免产生错误的认知。例如我们在做一套针对国内用户的概念稿的时候完全可以使用国内的一些模特图片，而非欧美模特，这样更能增加文化认同感。例如 same 和 Instagram：
same 的主要用户群体还是以国内为主，而 Instagram主要针对欧美用户，从同理心的角度来讲，我们更加容易认同自己本地区的文化，所以我们配图需要考量所要针对用户的文化属性。
第二点，我们要注意一些文化上的禁忌，我们看起来无关紧要的事情，但对比其他地域的或民族会产生不好的感受，这里需要大家对项目的文化背景做比较全面的调查和认知。
i.贴合主题
最后一点，我们选择的图片要贴合我们设计的主题。简单点理解就是图片能够符合我们对于信息传达的意图。这里我们可以通过图片中主题事物的直观表达或者是潜在的隐喻来贴合自己的主题。结合我们上面所讲的 3B 原则的概念，通过结合图片中的隐喻的魅力来吸引用户，赢得用户的信任。
ZGC-BIOBANK是一个关于生物基因的科技网站，通过冷色调精密仪器的配图，来体现科学的理性和严谨，让用户更容易相信这是一个严谨的科技公司，帮助消除用户的疑惑。
配图设计我们最需要注意以下4点：
a.配图要与设计整体色调统一
b.配图构图要有助于吸引用户视觉焦点
c.配图设计符合自己的设计主题，能更好传达自己的设计意图或业务目标
d.尊重文化，前期要做详细的调研
配图设计看似简单，却有许多我们需要注意的细节，从基础的物理属性到情感的精神需求都是我们的需要密切关注的。一个好的配图设计一定会保证优秀的图片质量和品质，相同场景下视觉重量和图片风格的统一，注意整体的冷暖色调和构图关系，以及图片给整体页面带来的运动趋势，最终我们要切记两点就是，慎重对待不同地域的文化属性和图片内容贴合设计的主题。
最后一波福利大放送，这是笔者整理的一些优质的免费图片网站，足以应对我们日常的设计需求，请大家笑纳~
Pixbay
Pexels
杰依曼特里（jaymantri）
FREEIMAGES
Foodiesfeed
Magdleline
参考链接
超全面总结？黄金分割在界面设计中的应用
https://www.uisdc.com/application-of-golden-section-in-interface-design
如何给作品选择好的配图？一篇就搞定
https://www.jianshu.com/p/a8c14b63c2e6
15
作品
764
粉丝
57
关注
大牛，别默默的看了，快登录帮我点评一下吧！:)
登录 立即注册