原页面中素材需自备梯子。如有需要，也可以访问我的百度云文件打包
原文链接：Design an App Landing Page in Photoshop
PS，译者水平有限，如有纰漏，请及时告知。谢谢！
本教程中，我将带你一同完成一个简单的&以转化为导向的app落地页。我们以Tut+的安卓app为原型，强调它的特点和好处，进而吸引人们采取行动，完成转化（下载我们的app）。
高转化率的要点
在设计落地页时，要想获得高转化率，你需要注意以下一些事情。
根据增长黑客Neil Patel所述，要想制作一个富有竞争力的落地页面，你需要：
- 一个杀手级的抬头
- 有说服力的副标题
- 图片
- 解释
- 价值主张或利益点说明
- 逻辑流程
- 值得信赖的表扬
- 强大的号召力
我们将实现上面所述的所有这些要点，让我们的落地页尽可能地富有竞争力。
AIDA模型
强烈推荐你去看下Shaun Cronin的在网页设计中运用AIDA法则 ，AIDA 表示的是注意力（Attention）, 兴趣（Interest）, （欲望）Desire 和 行动（Action），这些法则能在不同的情景下运用，包括售卖产品或服务。研究表明人们不在意滚动页面,所以一旦你在页面顶部创建了初始的兴趣点，就不用担心落地页面会做的太长。这是讲述一个伟大的故事以及添加说服力的因素所必须的。
A/B 测试
有效的落地页不可能简单地一次就设计好，并且表现完美。你必须持续测试各种类型的组合——包括文本，颜色，响应和其他的元素，来取得最好的结果。
你可以在Siddharth Deswan的A Web Designer’s Introduction to A/B Testing中获取更多A/B 测试的相关信息。
教程所需资源
为了把教程接着走下去，你需要以下这些（免费）资源：
照片 来自 Unsplash
PT Sans 字体来自 Font Squirrel
用户 icon 来自 Iconfinder
标记 icon来自 Iconfinder
时钟 icon 来自 Iconfinder
Martin Adamko制作的Samsung Galaxy S5 样机
设置文档
第一步
首先我们新建一个Photoshop文档(文件 > 新建…) ，按照下面的图进行设置。
你可以按自己喜好的尺寸设置画布。
第二步
我们先设置一些参考线，这样布局能有足够的空间，而且看起来更平衡。设置参考线能确保整个页面的整洁，并且帮助我们定义网站设计中涉及到的宽度值。打开 视图 > 新建参考线…，新建一些参考线。我通常会选择1000px作为起始点，然后从角落开始添加参考线，这样页面整体就有透气的感觉了。
小提醒: 本教程中的参考线设置为：垂直100px，600px和1100px。
小提醒2: 你也可以用 GuideGuide 这款Photoshop 插件，这样设置起来会更快一些。
设计头部区域
“头部”或者说“页面上方”的这块区域在吸引用户并确保他们留在网站的过程中，扮演着非常重要的角色。
我们的app登陆页的主要功能就是确保用户访问之后，下载app。在这个大前提下，我们将着重强调尝试我们app后得到的好处，并且让下载过程变得简单易操作。
第一步
首先，我们点击图层 >新建 > 组...或者点击图层面板底部的小icon来创建一个叫做“Header” 的组。在这之后，选中 文字工具(T), 选择 PT Sans (Bold) 18px大小的字体，设置颜色为黑色#000000。
然后，输入你app的名字，作为logo，将它放在页面左上角，挨着第一条辅助线的地方。在文字上面留一些空隙，这样看起来就不会太挤了。
第二步
接下来我们要沿用之前的设计思路，创建一个响应的按钮，进而确保用户在访问的时候能很便捷地进行操作。创建一个新的名叫“CTA btn”的组，然后选择矩形圆角工具(U)，设置半径 为 2px，将前景色设置为橙绿色#17e594然后画一个 206x38px 大小的矩形圆角。
接着在矩形圆角图层上右击鼠标，选择混合选项，再选择描边选项。之后选择深绿色#09ba74
再次选择 文字工具(T)，然后在我们的按钮上加上文字。我选用的是PT Sans (Bold) 12px，白色#FFFFFF
第三步
现在，选择矩形工具(T)然后画一个1200x600px (任意颜色)的矩形，将它放在我们最小的顶部导航下面。我在logo和矩形中间留了 25px的间隙，和我在之前给logo上方留的间隙是一致的。
现在从Unsplash选取一个工具集 的图片，将它放在矩形图层的上面。之后，按住Alt键，把鼠标的箭头移到两个图层中间，鼠标指示变成一个向下的小箭头后，点击，创建 图层蒙版，这样就可以只显示在矩形范围内的图片了。点击Ctrl+T，调整图片的大小，确保一直按着Shift键，这样图片在缩放的时候才不会走样。
第四步
我们在上面新建一个灰色的图层，这样字体和app的截图就能在背景上清晰的显示了 。更改前景色为深灰色#222325。新建图层，并将它放置在图片图层上面，再次创建一个图层蒙版。之后，点击Alt+Backspace，用前景色填充图层。最后，将图层 透明度 改为 80%。
第五步
再次选中 文字工具(T),将颜色变为白色#FFFFFF，选用PT Sans (Bold) 48px的大小输入主要信息。你需要确保在上面留下了足够的空间。
第六步
现在将字号变为21px,选择 Normal 字重，输入一段更具描述性的话语，并将它放在主要信息下。为了让这些文字看起来更平衡，更易于阅读，将行高设置为至少30px（唔，作者这混蛋，下面写到，设置为32px）。将描述性的话语调整到抬头文字下，我这里设置它们的间距为 **40px **。
第七步
让我们按之前的样式再做一个响应按钮，这样用户就能很清楚地知道在读完文案之后该做什么。找到 “CTA btn”图层组，Ctrl+J，复制一份，然后将它放在第二段信息下面。
第八步
我们已经处理完了文本和主要的响应按钮，现在，将app的效果图展示出来，方便人们在决定下载前，预览下app长什么样子。
下载Martin Adamko 制作的免费Samsung Galaxy S5 样机，（提醒，下载PSD文件，不是Ai的那个），将它放进你的文件中。然后，按住Ctrl键，选中样机下的所有图层，右键，选择转化为智能对象。 Ctrl+T缩放，然后将它移到文本的右边。
之后，点击智能对象，将你的app屏幕截图放到样机上去，保存文件。在这里我用的是Tuts+ Courses安卓版app的截图
设计利益区块
头部已经顺利做完。把图层组折叠起来，然后新建一个 “Benefits”组。
第一步
选择文字工具(T),更改颜色为之前填充时用过的深灰色#222325，（让你的设计显得一致和连贯，避免过多不必要的色彩），选用 PT Sans (Bold) 30px ，输入一段强有力的申明，并将它放在头部区域下，在这段文字上方留下足够的空间（译者：透气，透气，嗯哼……）
第二步
现在，我们有一个去说服用户为什么我们的app值得下载的机会了。想一想，我们app的利益点（译者：也可以理解为痛点），而不是一些特征，这样人们在使用它的时候，就能很好地对应上。然后，我们将颜色改为一种微妙的蓝灰色， #6a7588，输入一列文案，解释为什么人们需要用我们的app。我在这里选用了 PT Sans (Regular) 21px，行高设置为32px，和头部区域用到的辅助信息的设置一样。
注意两个文字区块间的间隙，保留足够大的空隙，给你的设计营造一种轻松的氛围。
第三步
再一次，我们复用响应按钮 (CTA-call to action) ，这样，那些早前还没拿定主意的用户，能在阅读完利益点的文案介绍之后，很顺利地采取行动（下载app）。 Ctrl+J，复制“CTA btn”组，将它放在利益点文案下面。之后，把复制的“CTA btn”组移进 “Benefits” 图层组，这样你的文档看起来会更有条理。
设计特征区块
利益区块已经设计完毕，折叠图层组，然后新建一个“Features”组。在这里我们将高亮app里的一些特征，这样那些想了解更多的用户，那些已经开始感兴趣的用户就能了解更多相关信息了。
第一步
将前景色改为浅灰色#fbfbfb，我们在特征区块用一个不一样的背景色，从而把它与页面的其他内容区分开来。然后，选择 矩形工具 (U) ，画一个1200x700px的矩形，作为背景。再次啰嗦一句，你要确保区块上有足够的间隙。（译者：设置为90px的间距好了）
第二步
为了进一步区分特征区块，我们在区块背景和上面的白色背景之间做一条1px的分割线。选用 直线工具(U)，粗细 设置为1px ，将颜色设置为深灰色#eeeeee。
小提醒：按住 Shift 键，就可以画出一条完美的水平线鸟~
第三步
打开“Benefits” 图层组，找到抬头文字的图层，Ctrl+J 复制，然后将复制的图层移到 “Features”图层组。根据需要，对它进行编辑，然后将它放在我们之前创建的浅灰色背景区域内。
第四步
我们会用icon+标题+描述文字来创建3个区块。新建一个 “Feature 1”（或者其他描述性的名字）的图层组。到Iconfinder上下载一个48x48 px 的用户图标。右击图层，然后按如下步骤操作。
你可能注意到了，我们实际上是照着按钮的样式做的，所以网页上的所有元素显得很一致。
第五步
再一次，复制标题文字图层，将它放在 “Feature 1”图层组，然后选择 文字工具 (T)，将它变为 16px ，行高22px。
第六步
使用文字工具（T)，用和之前一样的描述性文字，写下三行，描述特征的短语。确保字体颜色和之前一样是一样的蓝灰色#6a7588。将描述性文案放在icon和抬头下面。
第七步
现在折叠该图层组，然后 Ctrl+J，复制图层组两次。然后，调整复制的图层组，适应你的app。在这里，我使用了 Iconfinder上找到的 marker 和clock 。确保各个区块之间留了足够的间隙，这样看起来会平衡些。
第八步
你展示的产品细节越多越真实，效果就越好，我们会用一个特别的样机角度来展示我们的app。我将我们之前用到的 Samsung Galaxy S5 样机 ，用Google Play上的截图代替之前的图。右键样机图层，通过复制新建智能对象 ，创建一个独立的拷贝图层。双击智能对象，将app的截图替换进去，进而把样机变成我们自己的效果图。
设计推荐区块
接下来，我们将通过展示一些app用户的褒奖来增加app的可信度。
第一步
折叠所有的图层组，然后新建一个名为“Testimonials”的图层组。按之前的步骤操作标题，然后将它放在“Features”图层组的背景下面，和上面一样，确保两者中间留下了足够的空间。（译者碎碎念：不要忘记下面也有分割线，1px，深灰色#eeeeee）
第二步
现在，打开“Features” 图层组，复制一份（ “Feature1”吧），移到“Testimonials” 图层组中。我们将在褒奖的模块中复用这个样式。编辑文案，将标题抬头改为人名，然后描述性的文案改成褒奖相关的。
移除icon，使用 **椭圆工具(U), 画一个圆形（90x90px）。在这之后，将人的照片放在圆上，创建一个图层蒙版。我找了一个这样的用户头像。
第三步
最后，复制新作的用户图层组“Feature1”副本啥的，将它一式三份，做一些文案和头像的修改即可。
设计页面尾部区域
收起“Testimonials”图层组，新建一个名为“Footer”的图层组。我们会在这里放最后一个响应按钮 (CTA-call to action) ，以及一些链接到网站其他页面的链接，因为许多人会习惯滚到网页底部来查看网站的结构。
第一步
找到“Header”图层组，按住Shift 键，选中矩形和灰色的填充图层。在这之后，Ctrl+J，复制一份，移到新建的“Footer” 图层组。然后选择一张图片，将它放在矩形和灰色填充图层中间，创建剪切蒙版。
第二步
添加另一个抬头标题，鼓励人们行动起来，下载你的app。将文字颜色设置为白色#FFFFFF，这样在深色背景上就会显得很清晰。之后，复制响应按钮，将它放在抬头标题下面。
第三步
再次选择文字工具（T),输入你网站上的一些链接。我在这里用的是白色#FFFFFF，PT Sans (Regular) 16px ，行高29px。（抬头的部分用大写+Bold）
第四步
复制你的文字图层，然后按照你app的内容做一些调整。之后，将copyright （授权许可）的文案放在footer的地步，上下都留下足够（呼吸）的空间。
恭喜你，完成啦！
做好了！我们已经顺利完成了主题性的设计，现在，回顾下你的文件图层，删除不必要的，然后将整理过的文件交给你的开发者们，或者，最好是你自己能把它用代码实现出来XD！
