应用市场图对用户的下载行为有着不小的影响，平台多不熟悉的话难免会有些混乱，今天我们就来梳理一下应用市场图的设计过程吧~

下文从概念认识，设计步骤和作图规范三个方面，介绍了应用市场图设计的整个流程，希望通过本文能让你对应用市场图有一个较为全面的了解。

1.名称

应用市场图是指产品在App Store或是安卓市场中的预览图，它又可以叫做应用截图、市场图、APP预览图、市场预览图、上架图等，不同团队可能有自己的习惯叫法，我们只需要知道这些都是相同意思就可以了。

2.作用

对用户的作用：为用户提供产品的预览，让用户在下载前可以简单了解产品的界面和功能。

对产品的作用：对产品来说应用截图可以宣传产品的买点，展现功能，加大产品的曝光率，正面引导吸用户注意力。

人是视觉动物，精美的图片可以吸引更多的目光，留下较好的第一印象，赢得更多好感。所以市场图对用户的下载行为有着不小的影响。iOS11 App Store的大改版后，应用截图由2张变为了3张，视频也从原来的1个增加为3个，产品可以展现更多内容的同时，市场图的设计也变得更加重要。

3.表现形式

市场图支持静态图片和视频两种形式。静态图是必须提供的，视频是可选项，可做可不做。视频虽然展示直观表现力强，但耗时也会多一些，具体我们需要根据项目的时间和内容来评估。

·静态图片

必须项；格式：JPG、PNG；

数量：1-5张。

·视频

非必须项；格式：mov、m4v、mp4。

数量：1-3个。

iOS的时长要求是最短15秒最长30秒，在这个区间取值，过长的视频很少有用户会看完。

内容一般以功能操作为主，演示APP的核心功能和特色功能，片头片尾加入品牌信息如logo、slogan等，加大产品品牌的曝光度。这里还需要注意一点，品牌宣传的时间不宜过长，用户的注意力非常宝贵，耐心也非常有限，最好开头1-2秒要马上进入视频正题功能演示的内容。

静态图与视频的尺寸每个平台的具体要求不同，文章第三部分会有各平台详细的尺寸、格式、规范的介绍。

上面我们已经介绍了市场图的名称、作用和表现形式，知道了它的重要性，下面就来看看市场图的具体设计步骤吧。市场图的设计可以分以下4步：

1.讨论表现内容，确定表现形式

首先，我们要知道市场图需要表现什么，接到的需求里一般是已经提供了文案与内容。如果没有就需要我们去与产品、运营的同事沟通讨论已确定内容，然后根据内容和项目排期确定表现形式，是否需要做视频。

市场图的表现内容可以分为功能向、内容向、运营向三个方面。

·功能向

展现产品的亮点、价值、核心功能或是本次更新改版的特性等，主要是让用户快速得到有价值的信息，了解产品的功能特性，区别于竞品。一般工具型产品都倾向于选择这样的内容。如360相机，5张图分别展示了产品的5种功能。

·内容向

展示产品的内容，一般内容平台型产品如视频、书籍、音频类用的比较多，产品的内容资源丰富，更新较快时效性较强、经常结合当下的热点资源，以内容吸引用户。如下图QQ阅读的市场图展示的就是当前热门书籍。

·运营向

配合运营需求展示产品内的近期的促销、专题活动、赛事等，电商类大型活动前一般会选择此类内容宣传推广以加大活动的曝光率，如下图唯品会的520活动。

确定表现内容和形式后，我们就可以进入下一步——组成元素与设计样式的选择。

2.选择组成元素与设计样式

市场图的组成元素主要有界面截图、文案、手机框、内容元素和应用组件。

元素组合成设计样式有以下4种：

·界面截图

这种形式直接使用APP的界面截图，简单粗暴不加任何设计，项目急时间紧的时候可以选择这种形式，只需要上传相应平台的截图简单快速，但从浏览者的角度来说，这种样式就略显平庸了，缺乏对用户的引导，浏览的时候需要自己去发现界面中的功能特点等，吸引力相对小一些。

·截图+文案

界面截图和本页的说明文案，文案让页面的功能特点更突出易于理解，同时页面也可以保持较大的展示效果。需要注意iOS和Android系统的状态栏要求，准备不同系统的页面。

·截图+文案+手机框

在文案的基础上再加入手机框让截图更接近真实的使用情景，更容易代入，但同时也需要注意不同平台是否对手机框有要求，比如魅族的应用商店就要求使用其指定的手机框。有个小窍门可以减少我们的工作量，如果平台没有特殊制定的手机框，我们可以使用自己画的虚拟手机框，这样就可以通用而不会涉及品牌问题了。

·截图+文案+手机框+内容元素、应用组件

这种样式设计感较强有很大的发挥的空间，利用元素形成视觉中心，强调主题内容，形式活泼变化丰富，可以形成强烈的视觉效果吸引用户。但加入内容元素后，界面截图的展示相对会较小，同时设计成本较高。后面各平台有些较特殊尺寸的图，内容元素可能会需要单独调整，花费时间较多，前面提到的状态栏、手机框的问题都需要注意。

以上4种样式各有利弊 ，具体还需要根据表现内容和项目排期来选择。时间紧急的情况下可以选择界面截图，希望尽可能大的展现界面则可以选择截图+文案的样式，时间充裕希望有强烈的视觉效果则可以选择较为灵活的截图+文案+手机框+内容元素、应用组件。选择好设计样式后，就可以进入下一步设计风格的选择了。

3.选择设计风格

确定了表现内容和形式，选择了设计样式接下来就是考虑设计风格了，下面就介绍几种主流的风格。

·商务风

这种风格使用率比较高，采用简洁的设计主要突出应用截图，文案强调产品的重点信息，去除多余装饰以保证图片的易读性，帮助用户高效完成浏览、下载，其配色多选择中性色搭配产品品牌色。用户接受度高，不易出错，适合用户群体跨度大的产品。

·插画风

从扁平化流行的开始，插画在UI中的运用也越来越多。插画用有很强的视觉表现力，它的加入可以为较单调的页面增色，辅助用户理解。人类浏览的时候更容易被图片吸引，图片也能形成更多的记忆点，给用户留下更深刻的印象。本身较为简单的产品如果界面截图缺乏吸引力的话，可以选择加入插画，增加视觉表现力区别于竞品，吸引用户。

·全彩风

这种风格每张图选择不一样的色彩，通过丰富鲜艳的色彩来吸引用户，影响人们的心情。

色彩对人类具有天然的吸引力，在原始社会人类祖先就会通过果实的颜色判断其是否成熟，能否从中得到他们渴望的糖分。这份影响保留至今，色彩依然可以轻易唤起人们愉悦感，是影响人们情绪的重要元素，正是人们对颜色的喜爱形成了这种风格。

·跨屏风

跨屏风是图片内容跨越两张或多张图，相当于把两张预览图的面积合成一张使用，这样在浏览的时候无疑是加大了视觉冲击力，更容易吸引用户的注意力，不少产品都选择了这种风格。

·元素风

在图中加入页面组件或是IP形象，打造亮点让用户的聚焦，关注元素内容，第一时间注意到产品的特点。这种风格比较灵活，丰富活泼视觉表现力强，IP形象的加入可以形成自己的品牌特色让产品和竞品区分出来。

4.灵活运用

通过前面三个步骤，我们初步决定了表现内容涉及样式和整体风格，心里应该对市场图的效果有了大致的想法，现在第四步需要我们灵活的运用它们。

就像每个艺术流派的诞生，初始时身处其中的艺术家并没有概念自己是什么流派的，只是单纯的进行艺术创作。流派更多的是后人为了可以更好的学习理解及区分，对其相同的艺术理念和手法进行归纳总结后给出的定义，方便我们理解。

对风格的归纳总结也是为了我们在设计的时候，有一套较为实用的方法论可以参考，有抓手更好的使用它们。最后的画面效果还需要我们的灵活运用，而不是被风格形式所累，限定自己的思维。

比如Mimo，同样是截图+文案+手机框的元素，但因为调整了手机的位置，上下穿插的变化让画面更加活泼。Firefox让手机的连续跨屏结合背景的色彩渐变，使界面更加活力时尚。

喜马拉雅利用人物元素结合不同背景颜色及材质突出主题内容，以及对不同定位的内容采取的不同的设计风格，让设计风格更加符合内容主题更加契合。

所以我们在设计的时候应该结合自己产品的风格定位，将选择的元素样式、设计风格组合创作，突破风格的限制，大胆创新打造与产品气质更相符的页面，创造更多更丰富的视觉效果。

下文预告

本次上半篇主要介绍了应用市场图的概念认识和设计步骤两大内容，下半篇会介绍做图规范的内容，为大家梳理了各主流平台市场图的尺寸、格式、内容等要求，还有文案和内容的规范，一样是满满的干货不要错过哦 ~

下篇传送门：一篇搞定应用市场图设计（下）

划重点

·应用截图、市场图、APP预览图、市场预览图、上架图等，有静态图片和视频两种表现形式。

·市场图的表现内容可以分为功能向、内容向、运营向三个方面。

·市场图的组成元素主要有界面截图、文案、手机框、内容元素和应用组件。

·对风格的归纳总结让我们在设计的时候，有一套较为实用的方法论可以参考，但最后的画面效果还需要我们对齐灵活运用，而不是被风格形式所累，限定自己的思维。

参考引文

浅析APP应用截图的类型http://t.cn/E9ZEhM5