
做 App 的人十有八九被“宣传图”卡过脖子。产品说上线要应用商店那组展示截图设计排期排到下个月外包报价按张算研发自己上手又不知道从哪开始。这里说的 App 宣传图就是 App Store、安卓应用商店里那组竖版截图以及官网、公众号、社交媒体上贴的产品展示图。我自己这几年跟着版本迭代做了不少这类素材也踩过不少坑最后发现一条对研发特别友好的路用免费工具自己拼效果不一定输给外包关键是省心而且不用求人。这套做法适合谁主要是独立开发者、小团队研发以及公司里被临时抓壮丁的技术同学。你不一定要会 Photoshop也不一定要懂设计规范只要手里有真机截图和一句人话描述就能在半小时内做出一套能上架的宣传图。这篇文章我把从尺寸规范、工具选型到实操流程、常见问题排查的完整经验写出来照着走一遍基本不会再被这种小事拖住。1. 为什么研发要自己动手做宣传图1.1 这活儿看着简单实际卡流程很多人以为宣传图不就是“把截图扔到模板里加几个字”等自己真上手才发现事情没那么简单。应用商店后台对截图尺寸有严格要求不同机型、不同市场还不一样截图里的功能点得跟版本内容对得上不能上线了才发现“新功能截图里根本没体现”文案排版一旦字号太小手机上根本看不清传上去等于白做。这活儿最尴尬的地方在于它不属于研发也不完全属于运营但谁都躲不掉。上架 App 需要截图版本更新需要截图申请推荐位需要截图投广告需要素材开发者在后台回复用户“这个问题已修复”时也经常要配一张示意图。需求来了设计排期排到下个月找外包沟通一轮就要两三天等你拿到图版本审核周期都过半了。所以越来越多研发选择自己上不是因为设计不专业而是因为研发最懂这个 App 的界面和功能逻辑自己动手反而是最快路径。1.2 一套宣传图到底要覆盖哪些场景别一上来就做图先搞清楚要给哪些渠道用。以我个人经验一套完整的 App 宣传图至少覆盖五个场景应用商店截图组这是最核心的App Store 和安卓各市场的竖版截图一般 3 到 8 张用户看你 App 的第一眼就是它。官网产品页横幅16:9 的宽幅图放在官网首页或功能页顶部展示产品定位和核心卖点。公众号/博客封面比例通常是 2.35:1 或 1:1做新品介绍、版本说明时要用。社交媒体分享卡比如 1:1 方形图、4:5 竖版图用于微博、朋友圈、产品社区发帖。应用内公告图很多 App 的弹窗、公告位也需要一张 16:9 或 3:2 的配图。你在动手前先列一个清单把这些场景和对应尺寸写下来后面做图就有方向。不然做了一张图到处拉伸到了哪个渠道都变糊返工的时间比做图还长。1.3 免费工具能达到什么效果说到效果得先泼一盆冷水。免费在线工具做出来的图和设计师花一天时间打磨的主视觉肯定有差距尤其在做品牌大促、发布会主视觉这类高度定制化内容时该找专业设计师还是要找。但如果是应用商店截图、官网 banner、产品功能说明图这 80% 的日常素材完全够用。市面上这类在线截图生成器已经非常成熟你只需要上传截图它会自动帮你去掉状态栏、套上手机外壳、配上背景和文字导出就是一张带着设计感的宣传图。我见过不少研发用这类工具做出来的水平只要排版不贪多、不乱堆效果放上去完全能看。关键是免费版一般就能满足需求不用注册也能导出省掉的沟通成本和时间成本非常可观。2. 动手前先吃透尺寸和展示规则2.1 主流商店截图尺寸对照我见过太多人第一步就栽在尺寸上辛辛苦苦做了一组图传到后台直接提示“尺寸不支持”。下面这张表是我整理的主流渠道尺寸要求建议直接收藏。渠道/场景推荐尺寸说明iPhone 6.7 英寸App Store 主选1290 x 2796 px新版 iPhone 系列必须提供否则后台会警告iPhone 6.1 英寸1179 x 2556 px和 6.7 英寸内容相通导出时注意比例iPad 12.9 英寸2064 x 2752 px若 App 适配 iPad建议补上占比不高但审核更稳安卓主流市场国内1080 x 1920 px 或 1080 x 2340 px各厂商要求略有差异以开发者后台提示为准Google Play最小宽度 320px最长边 3840px建议 1080 x 1920截图内容只占中间安全区四周各留 1/8 空白官网 banner1920 x 1080 px16:9注意左对齐文字放主页导航下方不被遮挡公众号封面900 x 383 px2.35:1做版本公告时最常用注意苹果后台经常变化新机型出来后会要求增加对应尺寸。我的习惯是上架前先打开开发者后台的“App 预览”页面看一眼最新要求再决定做哪几组别拿旧模板硬套。2.2 截图内容怎么排才不浪费前几张尺寸只是门槛真正决定转化率的是截图里展示什么内容。应用商店的截图组用户通常只划前 3 张就决定要不要点进详情页所以前几张一定要讲清楚三件事你是什么 App、解决什么问题、凭什么信你。第一张放最核心的场景比如健身 App 就放运动记录页修图 App 就放前后对比不要让用户猜。第二张讲核心功能最好有真机界面配合一两句口语化文案比如“三秒生成周报”。第三张放信任状可以是 App Store 评分、热门排行、大 V 推荐或者“已有 XX 万用户正在使用”。文案摆放位置也有讲究。手机屏幕上下两端都有系统区域截图底部还会被应用商店的标题栏遮住一块所以文案建议放在画面上 1/3 到 2/3 的高度区间不要贴到底部。我自己最开始做图时把所有文案都堆在截图下方结果上传后底部被商店 UI 挡住字只露出一半只能重做。2.3 字体、圆角、状态栏的处理底线这三个是宣传图“专不专业”的分水岭也是免费工具最容易露馅的地方。字体设置方面中文文案优先用系统字体iOS 就用苹方安卓用思源黑体或鸿蒙字体不要用太花哨的艺术字。你可以在设置里调整字号和颜色但别叠太多效果阴影、描边、渐变一样就够全叠上去就像 2005 年的街头传单。英文和数字用系统默认的 SF Pro 或 Roboto 就行。状态栏的问题很多在线工具会默认生成“9:41”的假状态栏一眼假。我之前有次做好图上传 App Store审核反馈“截图包含误导性信息”就是因为我用了假状态栏而不是真实截图的状态栏。正确的做法是用真机截图保留真实的信号、Wi-Fi、时间最多用系统设置把时间调成准确值不要画蛇添足。圆角这块真机截图本身自带圆角传到工具里不要再额外加圆角否则会出现一条很丑的二重边。安卓不同品牌圆角大小还不一样有的工具提供“去圆角”功能你把它关掉保留真机原生边缘效果最自然。3. 免费工具选型与上手步骤3.1 这类工具长什么样怎么选现在市面上做宣传图的免费工具有很多种有的是本地客户端有的是网页版还有的是设计软件里的插件。对研发来说我优先推荐在线截图生成器理由很直接不用装软件打开网页就能用macOS、Windows、Linux 通吃而且做好的素材直接云端导出不会出现字体丢失的问题。你在挑工具的时候重点关注三条标准。第一免费版是否够用。很多工具免费版有水印或导出分辨率限制先拿一张截图试导出看看效果。第二是否支持自定义背景色和文案。这个是刚需因为你的 App 有品牌色宣传图背景要和 App 主色调一致才协调。第三模板审美是否在线。工具动了太多复杂模板反而不加分看起来干净、留白多、没有廉价质感的模板才值得用。市面上常见的这类工具名字你肯定听过几个比如 Snappy、AppMockup、Previewed、shots.so还有国内的一些截图美化工具核心操作逻辑都差不多上传截图、选设备外壳、改背景、加文案、导出。我建议不要纠结哪个最好挑一个你看着最顺眼的先把 10 张图做完整比反复换工具更重要。3.2 实操步骤从一张截图到一组宣传图不管你选哪款工具完整流程都差不多我拆解一遍第一整理素材。先把要展示的界面在测试机上截好图一张张命名清楚比如“01-首页.jpg”“02-创建项目.jpg”。同时写好每个截图要配的文案一句话说清楚功能点不要用“高效管理”这种空话写成“30 秒生成日报自动同步团队”这种有行为、有结果的句子。第二挑模板。进入工具后不要一上来就选华丽模板先用最简单的“单设备 纯色背景”模板跑通流程。背景色从你 App 的主色里取或者直接选浅灰、白色保证不抢焦点。第三替换截图。上传你的真机截图到对应位置注意有些工具会自动裁剪你需要看着预览区域确认重点内容没被裁掉。如果截图内容是长列表就选“无外壳滚动展示”的样式比单纯套个手机壳更有信息量。第四加文案。这里的技巧是文案要短一行放不下就换行小标题控制在 6 到 10 个字说明文字控制在 20 字以内。粗体大标题放左上或居中说明文字放在下面一行字号比标题小两个档位。第五导出检查。导出前把导出尺寸调到目标渠道的最高档导出后不要直接上传先打开原图放大看看边缘有没有裁切、文字有没有溢出、背景色有没有断层。3.3 没有设计基础也能排版的三个小技巧很多研发同事问我自己审美不行怎么排都别扭怎么办。我的经验是不靠天赋靠规则也能排出能看的图记住三个原则就行。对齐所有文本框左边缘对齐或者全部居中不要一会儿左一会右。手机截图本身是竖版宣传图如果不是特殊设计所有文字元素保持一条垂直中轴线视觉效果瞬间就稳了。留白画面上别塞得满满当当。文字和手机截图之间至少留出 20% 的空白区域顶部留白可以多些底部少些。留白不是为了好看是为了让用户在手机屏幕上快速抓到信息信息越密集用户流失越快。对比字号的层级一定要拉开。主标题至少 36 到 48 号说明文字 20 到 24 号两个层级之间的差距要明显否则看起来就像一段平淡的说明文字没有重点。颜色上主标题用深色说明文字用浅灰或反过来总之不要全用一种颜色。4. 实操过程与踩坑记录4.1 我的完整流程从拿真机图到交付我拿最近一次帮忙给一个工具类 App 做上架宣传图举例走一遍完整流程你感受下这个工作量。首先拿测试机截图。这一步很多人都忽略直接拿模拟器截图结果状态栏是假的界面里还有“Debug”字样、悬浮球、开发者菜单看到的人马上觉得不专业。我的做法是把测试机调到正常交付状态退出测试账号、关掉所有弹窗、跳过引导页、清空通知栏、把亮度调到行业“截图标准亮度”然后进入要展示的页面尽量选择数据看起来完整但不涉及隐私的状态。一次多截几个页面每个页面多截几张后面选起来有退路。接下来进入在线工具我习惯的做法是新建一个项目选 iPhone 6.7 英寸尺寸套上“单设备 自定义背景 自定义文案”的模板。主题色我用 App 的主色导入字体用系统默认。总共做 5 张图前两张分别是产品主界面和核心功能后三张分别讲数据报告、协作功能、用户评价。每张图从替换截图、改文案到微调间距平均 5 分钟5 张图总共 25 分钟左右。导出之后我会把全部素材拉到本地用系统自带的预览工具重新检查一遍再看一眼文件大小和格式。然后把长截图和方形图分别导出长截图用于商店方形图用于官网和公众号封面。最后把成品压缩包发给运营或直接传到开发者后台这次的图就交付了整个过程不超过一个小时。4.2 做得越多越要补的细节几次上手之后你会发现自己开始在意一些之前完全没注意的细节这些恰恰是拉开差距的地方。第一同一张截图不要用在不同版本里。有些 App 界面改版频繁如果你上次用过的截图还能看到旧版按钮用户会以为产品长期没更新传播反而减分。每次版本更新重新截一组真机图旧截图只适合做横向对比图不适合单独宣传。第二设备外壳要不要用。如果你的 App 是效率工具或办公软件用设备外壳能增加真实感如果你做的是儿童教育类、游戏类 App用户更想看内容本身设备外壳反而增加距离感。我的判断标准很简单截图里的界面信息量大就不套外壳界面信息少、重点在视觉设计上就套外壳。第三一套图四处的适配。导出一套商店图后别急着关工具同一批截图换一个画布尺寸重新摆一遍位置就变成了官网 banner 和公众号封面。很多工具支持修改画布尺寸和背景色原截图不用换只是布局重新排一下这样出来的素材视觉风格统一做品牌的人会特别喜欢你。4.3 这次实测里印象最深的一个坑做这版宣传图的时候我遇到一个之前没碰到过的坑值得单独拿出来说。当时做完一套图导出的预览看着没什么问题直接打包发给运营了。结果运营那边放到官网上一看最底下有一行小字被切了一半原因是官网 banner 的尺寸比例和我在工具里设置的画布不一致平台裁剪时把多余的部分裁掉了恰好切到文案区域。从那以后我养成了两个习惯第一做官网 banner 时文案一定离画面四周至少留出 10% 的安全边距尤其是底部因为很多官网模板会给导航栏和版权信息留位置第二导出之后一定丢到目标平台的后台预览一次多一步检查比事后返工强得多。5. 常见问题与排查技巧实录5.1 截图传上去模糊、发虚最常见的模糊原因有两个一是拿了一张已经压缩过的图当底图比如从微信聊天记录里保存的截图文件分辨率早就不够了二是在线工具导出时默认选了低质量 JPG文字边缘会出现明显锯齿。我的经验是原截图尽量用 PNG 格式保存导出宣传图时把质量拉到最高如果工具没有质量选项就选“导出 PNG”而不是“导出 JPG”。5.2 状态栏时间电量太假模拟器截图、工具自带的默认状态栏、从网上下载的演示素材这三种情况都会让状态栏看起来格格不入。最省事的办法是把状态栏换成真实截图自带的。安卓手机可以到“开发者选项”里找“时间格式”设置为“24 小时制”或“模拟时间”让显示更接近正式环境iPhone 直接长按锁屏进入编辑手动调整时间也没问题但记住一点状态栏里出现“正在充电”或“电池百分比过低”都不体面截图前先把电充满。5.3 中文文案字体缺失、排版乱有些在线工具的模版预设字体不支持中文你输入中文后显示成乱码或方块或者生成了但换一台电脑打开就变。解决办法在工具里把字体统一改为系统字体或者直接找支持中文的模板别用英文模板改。另外中文字号通常要比英文字号大 2 到 4 个档位同样的字号英文看着舒服中文就显小记得手动调大一档。5.4 一张表快速排查最后分享一个实测整理的排查表每次做完图对照着看一遍基本能避免大多数低级问题。问题可能原因处理办法截图模糊底图分辨率不足用测试机原始 PNG 截图导出选最高质量文字被裁切画布尺寸与平台比例不符四周留出 10% 安全边距导出前放大检查状态栏假使用了模拟器截图或默认状态栏用真机截图保留真实时间电量和信号颜色发灰背景色取色不准从 App 设计稿里取色不要用截图吸色文案看不清楚字号太小或对比度不够小标题 24 号以上标题和背景色对比度拉高圆角有白边截图自带圆角后又加了一层关闭工具里的圆角选项上传后台尺寸报错尺寸不符或格式不支持查看后台最新要求导出对应尺寸 PNG我自己现在每做一个版本更新都会顺手把宣传图一并更新掉从整理截图到导出整个过程稳定在 20 到 30 分钟。最后再分享一个个人觉得很实用的小习惯把常用模板固定下来下次直接替换截图和文案连背景色都不用重新调。工具会一直更新审美也会变但“先定尺寸规范、再套模板、最后手工检查”这个顺序我一直没变过。