企业官网建设流程全解析

App 功能做完了，测试也跑得差不多了，接下来要上架应用商店，结果发现苹果和安卓渠道都要宣传图。问了一圈设计师，排期最快也要两周后。小团队哪有这个等待成本，最后这个活儿就落到了我这个写代码的人头上。一开始我本能地抗拒，觉得自己一个研发搞什么设计，但硬着头皮试了一圈免费工具之后发现，App 宣传图这件事，只要方法对，研发自己完全能搞定，而且真能做得不丢人。

这篇文章就聊聊我这段时间给自家 App 做宣传图的完整经历——用什么工具、按什么流程做、哪些地方容易翻车、怎么批量产出多尺寸的图。如果你也是研发、独立开发者，或者团队里恰好没有专职设计，这篇应该能帮你少走不少弯路。

1. 研发给App做宣传图，核心痛点到底在哪

1.1 没设计师时，需求是怎么落到研发头上的

很多研发觉得自己不会碰到这种需求，但我观察下来，中小团队里"App 上架素材没人做"是特别普遍的情况。产品经理说商店后台必须要传截图和推广图，不然提审都过不了；设计师要么没配，要么排期排到了下个版本；老板眼里这活儿又确实不大，不值得外包。

于是最闲（或者说最没借口拒绝）的研发就被拉来顶上了。我当时的处理方式和很多同行一样：先把应用商店要求的几张截图用模拟器截图充数。结果上传之后发现，要么分辨率不符合要求，要么图片内容太干，一眼看去像开发调试界面。商店后台审核对质量并没有主观打分，但截图信息不完整、主次不分，转化率会很难看。

后来我才意识到，做宣传图真正的难点不是"会用软件"，而是"不知道标准是什么"。设计软件可以现学，但渠道规范、尺寸要求、信息层级这些看不见的规则，才是让研发无从下手的根源。

1.2 宣传图的"标准"比想象中严格

这里说的标准不是审美上的标准，而是硬性的技术规范。不同渠道对宣传图的尺寸、格式、数量、是否允许透明通道都有各自要求，我一开始完全没意识到这里面水有多深。

以我实际踩过的为例：

这里列的是我制作时常用的参考值，真正的硬性规则会随苹果和安卓各厂商的后台要求更新，所以每次动手之前，都应该先查一遍目标渠道最新的官方规范。制作前多花十分钟核对，比做完之后发现尺寸不达标重新导出要省心得多。

除了尺寸，还有内容层面的要求。比如 App Store 截图不能带透明通道，某些安卓商店要求截图里不能出现友商竞品的水印，有些渠道要求首图要能体现核心功能。这些细节，设计规范文档里写得很清楚，但没有设计背景的研发基本不会专门去翻。

1.3 免费工具遍地都是，为什么大多数不省心

提到"免费做图"，很多人的第一反应是找破解版 Photoshop。我自己也短暂想过这条路，但立刻放弃了：首先公司办公电脑装破解软件有合规风险，其次破解版经常崩溃，做到一半图没了，心态真的会崩。

后来又试了几款在线设计工具，问题也很典型。有的网站模板确实多，但导出原图要开会员；有的下载图片强制带平台水印；还有的说是免费，但每次保存都要等几十秒广告。试用一圈下来，感觉免费工具全都卡在"免费"和"可用"的夹缝里。

不过在踩了这些坑之后，我逐渐摸清了什么才算真正"省心"的免费工具，标准其实就三条：模板质量够用、免费导出没有隐藏陷阱、学习成本低到可以忽略。按这三条标准重新筛了一圈，最后稳定用下来的还是 Canva 免费版。

2. 工具选型：免费里踩了一圈，我把Canva免费版作为默认答案

2.1 为什么不是PS、Figma、或者截图硬拼

先说截图硬拼。这种做法不是不行，但只适合内部沟通，真放到应用商店当宣传图，问题很明显：没有文案层级，用户根本不知道你 App 是干嘛的；没有品牌氛围感，整体观感很简陋。而且截图硬拼出来的图，要做成多尺寸时基本是重做一遍，完全没有复用的余地。

Figma 我会用，团队里用 Figma 做原型也很顺手。但拿 Figma 给 App 做宣传图，等于从零开始搭模板——画布要自己建，设备外框要自己找素材，中文字体要自己确认授权，光是把这套基础环境搭完，一个下午就没了。Figma 是给设计团队用的协作工具，不是给研发临时出图用的。

破解版 PS 就更不用说了。法律风险、安全风险、稳定性问题，每一条都够劝退。而且新手打开 PS 的第一反应往往是"按钮在哪"，还没开始做图就已经失去耐心了。

Canva 免费版能成为我的默认答案，核心原因就一句话：它把"做一张宣传图需要的 80% 能力"直接打包好了，搜索模板、换文案、换图、导出，整个过程不需要任何设计基本功。

2.2 免费版到底够不够用：我的实测结论

很多人一听到"免费版"就默认功能会很鸡肋，但放在 App 宣传图这个具体场景里，实测结论是：核心流程完全够用。

搜索"App Store"、"应用商店"、"手机截图"这些关键词，能翻到大量模板，覆盖 iOS 上架、安卓商店、官网 banner、社媒分享图各种场景。编辑操作就是点一下文字直接改，拖一张图进来替换原图，所有步骤跟用 Word 差不多。

导出环节也过关，PNG 和 JPG 都是免费支持的格式，宣传图需要的就是这两个格式。

当然免费版的边界我也摸过。部分图片素材和元素会有高级版标志，点开之后提示要升级才能用；一些高级字体和背景移除功能也要会员。但实测下来，这些限制主要影响的是锦上添花的部分，不影响"做出一张合格宣传图"这个核心目标。素材不够就去掉，字体不够就用开源字体，背景复杂了就换简洁风，这些都是可以绕过去的。

2.3 免费不等于随便商用：版权边界必须搞清楚

这里必须单独提醒一句，很多研发在这上面吃过亏：工具免费，不代表工具里所有素材都能免费商用。

Canva 免费版自带的模板和大量素材，在授权范围内允许商业使用，但模板里嵌套的资源不一定都包含在内。尤其要警惕的是字体，中文环境下，很多好看的字库都是有版权的，商用需要单独购买授权。我现实中就见过有团队因为宣传图上用了一个商用需授权的字体，被字库公司发函要求赔偿的案例。

我现在做 App 宣传图时，中文文案基本只用开源免费商用字体，最常用的是思源黑体、阿里巴巴普惠体、站酷系列。英文文案相对宽松一些，但也会先确认一下授权说明。我的操作习惯是：每个素材拖进画布之前，先看一下它的授权标注，标注不明确的坚决不用。别嫌麻烦，版权的事一旦出问题，费用比省下的时间贵得多。

3. 实操全流程：把一张上架宣传图从零做到可用

3.1 动手之前，先列出"这张图到底要给谁看"

我见过很多研发（包括我自己早期）做宣传图的时候，第一步就打开工具开始拖素材，结果做了半天，图里的信息全是"功能清单"，用户看完根本不知道这个 App 能解决什么问题。

正确的做法是先想清楚三个问题：这张图放在哪个渠道？看到这张图的人处于什么阶段？这个 App 最核心的卖点是什么？

举个例子，我给自己的待办清单 App 做宣传图时，一开始也想把所有功能都放上去：语音记录、多端同步、智能提醒、番茄钟、标签分类……后来挤牙膏一样排了一堆，画面和信息都乱成一团。

后来我把逻辑换成"用户为什么需要你"——对目标用户来说，最痛的不是缺少功能多，而是记录太麻烦。于是整张图只剩下一句话：3 秒记录待办，跨端随时提醒。这个转变之后，宣传图的信息层级反而清晰了。

动手之前先花二十分钟梳理这张图的策略，比在工具里折腾两小时更值钱。

3.2 两条路线：套模板和从空白做

实操层面有两条路线，一条是套模板，一条是从空白画布开始，两条我都走过。

第一次做的时候，我强烈建议走模板路线。打开 Canva，搜索"App Store 截图"或"应用商店 推广"，选一个结构干净的模板，然后把模板里的文字替换成自己的 App 名和卖点，把示例截图换成自己的界面截图，整个过程大概二十分钟就能出第一版。套模板最大的价值，是让你直观看到"一张合格宣传图应该长什么样"——原来需要留白，原来文字和截图的比例是这样，原来背景色要压暗才能突出前景。

模板路线跑通之后，再考虑做品牌化。这时候可以从空白画布出发，尺寸按渠道规范设置，背景用自己品牌色渐变，大标题、副标题、功能点、截图一块一块摆进去。有了前面套模板的经验，你会清楚知道每个区域该放什么，不会像第一次那样发怵。

有一点要特别提醒：模板是别人做的，同一套模板可能被上百个 App 用过。如果你不想自己的宣传图跟竞品长得一模一样，替换模板里的背景素材、图标风格，甚至调整整体配色，都是必要的。

3.3 一张合格宣传图的模块拆解

不管套模板还是从零做，一张 App 宣传图的核心模块基本都是固定的。理解了这些模块，你就能判断一张图到底合不合格。

第一个模块是设备外框。要不要把截图放进手机模型里？我的实测建议是：纯 UI 截图比带 3D 手机模型的图更好用。原因很简单，纯 UI 截图信息密度高，用户一眼看到的是 App 本身；而 3D 手机模型在手机小屏幕上会压缩 UI 的显示面积，反而看不清界面细节。另外，纯 UI 截图在 App Store 审核时也更稳定，不容易因为模型渲染问题产生色差。

第二个模块是文案层级。一张图上的文案通常分三层：大标题说清楚"这个 App 是什么、解决什么问题"，副标题补充信任依据，功能点短句做细节支撑。大标题我建议不超过 8 个字，副标题不超过 20 个字，再多用户根本来不及看。

第三个模块是背景与配色。背景是品牌色渐变大面积铺底，或者干净的浅色底加简单图形装饰，保证文字对比度足够。这里有个很实用的技巧：如果大标题压在背景图上看不清，就在标题后面加一层半透明遮罩，问题立刻解决。

第四个模块是功能点。不管 App 有多少功能，宣传图上最多放 3 个功能点，每个功能点用图标+短句的形式呈现。比如我的待办 App 选的是语音输入、多端同步、智能提醒三个点，图标统一用线性风格，短句不超过 6 个字。

3.4 导出环节容易出错的三条细节

图做完了，导出的时候反而最容易出问题。我总结下来有三条细节，每个都踩过。

第一，分辨率按渠道最大尺寸做。不要按"差不多"做，1280 也可以、1290 也可以，最后提审被打回来重新导出的时间成本更高。我现在做 iOS 截图，统一按 1290 x 2796 来做，这是 6.7 英寸的最大尺寸，往下兼容完全没问题。

第二，导出格式注意透明通道。App Store 的截图要求是 JPG 或 PNG，且不能带 alpha 透明通道。如果你在画布里用了透明背景的 PNG 元素，导出时保留了透明度，上传后台就可能报错。我的检查习惯是，导出后把文件拖到看图软件里看一眼，背景是不是纯白或纯色。

第三，能用真机截图，就别用模拟器截图。模拟器截图在分辨率上没问题，但状态栏时间和机型渲染效果可能露馅，尤其苹果审核对截图来源比较敏感。另外在安卓渠道上，用模拟器截图还可能出现分辨率不符合特定机型要求的情况。我的做法是固定一台测试机，专门用来截宣传图用的 UI 界面，截完直接 AirDrop 到电脑再拖进画布。

4. 批量生产多尺寸宣传图的省心套路

4.1 先把"最大尺寸"做出来

宣传图这东西，永远不是只做一张。iOS 要一套截图，安卓商店要一套主图，官网要 banner，社媒又要分享图。

早期我是一个尺寸做一张，每次都要重新排版，效率特别低。后来我换了一个思路：先做最大尺寸，再往小尺寸衍生。最大尺寸能承载的信息最多，文字和截图清晰度也最高，在这个版本里把所有内容都排好；到小尺寸时，工作是"删减"而不是"重排"。

比如我先做 1290 x 2796 的 iOS 主图，把大标题、副标题、三个功能点、截图都放上去，排版满意后，再做安卓商店的 1080 x 1920 版本时，只需要把部分功能点删掉、把截图位置调整一下，十几分钟就能完成。

4.2 复制页面改尺寸，一个文件管所有渠道

如果你用的工具支持多页面，那这套流程能更省心。我在 Canva 里的做法是：一个设计文件就是一个 App 的全部宣传图集合，每个渠道对应一个页面。

操作方法也很简单：先做好最大尺寸的页面，然后复制这个页面，复制出来的页面再修改画布尺寸，最后针对新画布微调元素位置。所有尺寸都在同一个文件里，导出的时候一起导出，省去反复切换文件的痛苦。

这里有一个必须注意的细节：修改画布尺寸之后，元素位置不会自动适配到新画布。如果原图是 1290 x 2796，改成 1080 x 1920 之后，原来偏右下角的标题可能就会顶到画布边缘。所以每次改完尺寸，都要逐页预览一遍，确认没有元素被裁切或挤压。

4.3 团队协作与版本管理也要一起搞定

宣传图在发布前通常要过一遍产品、运营甚至老板的意见，如果没有协作功能，光是把文件传过来传过去就够烦了。

多页面工具的好处在这里也体现出来：把整个文件的协作链接发给同事，他们可以直接在对应页面上评论，我在编辑端能看到所有批注，改完之后再分享一次。免费档的版本记录也够用，改错了可以回退到历史版本。

另一个很容易被忽略的是命名规范。我的习惯是"App名-渠道-日期-版本"，比如"TodoApp-iOS-0601-v3"。这样后续找图、回溯版本都方便，尤其是当团队不止一个人维护这套素材的时候，命名乱掉会非常痛苦。

5. 实测过程中遇到的坑与对策

5.1 素材版权：免费模板不代表全都能商用

这个坑我前面提过一句，但值得单独拿出来详细说，因为实在太容易踩了。

有一次我在一个模板里看到一个挺好看的中文标题字体，替换成自己 App 名之后发现字体风格跟模板里展示的完全不一致，仔细一看才发现模板里的字体需要单独购买商用授权，免费预览版只能用有限的字重。后来我把整张图的文案都换成了思源黑体，风格统一了，版权风险也没了。

图片素材也是同理。有些免费模板里嵌的底图来自付费图库，如果你只用了模板但没有购买图库授权，一旦用在商业发布里，风险是实打实的。我的对策是：图片尽量用我自己截的 App 截图、自己拍的实拍图，或者明确标注 CC0 的图库网站。这样从源头上规避版权问题，晚上睡觉都踏实。

5.2 排版明明在电脑上好好的，导出之后就乱了

这是在线设计工具里很常见的现象：编辑界面显示正常，导出图片之后文字和元素位置偏差、缺字、重叠。

原因通常是字体渲染不一致。我在 Canva 里用的有些字体，电脑浏览器里渲染出来的行高和最终导出时的行高会略有差异，如果图形里文字块贴得太紧，就可能互相挤压。另外，从大尺寸复制到小尺寸之后，固定定位没有做好也会导致错位。

对策有两个。第一，关键文字不要贴着画布边缘放，四周留出至少 50 到 80 像素的安全边距。第二，每次导出之前，把所有页面都点开预览一遍，重点检查文字是否完整、标题和副标题是否有重叠。预览确认没问题再导出。

5.3 导出之后看起来很糊，原因不只在画布尺寸

以前踩过一个坑：我给官网做 banner，画布是 1600 宽，导出 PNG 之后感觉边缘发虚，放大看字都是糊的。

排查下来有三个原因叠加。第一是画布尺寸本身不够，有些渠道要求 2 倍图，1080 宽的图实际需要 2160 宽才能扛住高清屏幕。第二是素材分辨率不够，拖进去的图片原图只有 800 宽，但我把它拉大到了 1600 宽，放大超过原图 150% 之后画质就会明显下降。第三是导出时选了压缩过的格式或低质量等级。

现在的检查方法是：导出前把画布里所有位图素材都检查一遍，确认没有明显拉伸变形；导出时选原画质，关掉压缩选项；导出后用看图软件按 100% 到 200% 放大检查文字边缘是否发虚。发现模糊就回到画布调整，不将就着用。

6. 更进一步：把宣传图做成可复用的内部资产

6.1 把做好的图沉淀成团队模板

第一次做宣传图你会觉得新鲜，第二次、第三次那就是纯重复劳动了。等你做过一次完整流程之后，一定要把成品沉淀成团队模板。

我的做法是：把做好的宣传图文件复制一份，清掉里面的实际文案和截图，保留布局、配色、字体、Logo 的位置，另存为一个"母版"。下次再发版，只需要打开母版，替换文案和截图，导出，完事。

这一步做完，你会发现后续版本的宣传图制作时间从几个小时压缩到了二十分钟以内。而且因为母版的布局是经过验证的，排版质量的下限有了保障，不会再出现乱排一气的情况。

6.2 和自动化思路结合，多语言版本不愁

如果你的 App 要出海，宣传图还要做多语言版本，这里可以引入一点自动化的思路。

我的做法是：保留一份"主母版"，所有文案层都放在固定位置，然后复制出多个页面，把每个页面的文字替换成对应语言。截图也可以配合工具批量处理：安卓用 adb 截屏指令，iOS 用 Xcode 模拟器脚本，固定好机位和状态栏时间，截出来的图风格统一。

再进一步，可以写一个简单的脚本，读一份语料表格，自动把"主母版"里的文案替换成多语言，批量导出不同语言的宣传图。这里要注意别过度工具化，自动化处理的是重复劳动，但布局是否在每个语言下都正确，还是需要人工检查一遍。文字长短不同，排版很容易跑版。

6.3 什么时候该找专业设计师，这个边界要清楚

最后聊一个没法回避的问题：免费工具能做这么多，是不是就完全不需要设计师了？我的判断是，看情况。

如果你的 App 处于起步阶段、团队没有专职设计资源、需要快速迭代出图上架，那这套"免费工具+半自动化"的流程完全够用。我自己现在日常版本迭代的宣传图就全部走这个流程。

但如果你的产品要正式做品牌升级，或者要投大量付费广告素材，又或者需要动效宣传视频，那专业设计师的不可替代性就体现出来了。专业设计带来的品牌识别度、视觉冲击力、动效质感，不是在线模板能比的。

哪怕是这样，研发用免费工具做的这版宣传图也不是白做——它可以作为给设计师的初稿，把信息层级、卖点结构都定义清楚，设计师在这个基础上去做视觉升级，沟通成本会低很多。

最后再分享一个小经验：我第一次用免费工具做宣传图时，也纠结过"会不会太业余"。但后来想明白了，用户只会在手机屏幕前停留三秒钟，宣传图的任务不是炫技，而是让人一眼看懂你的 App 解决什么问题。工具免费不免费反而没那么重要，把价值说清楚，这张图的任务就完成了。