原頁面中素材需自備梯子窍蓝。如有需要，也可以訪問我的百度云文件打包
原文鏈接：Design an App Landing Page in Photoshop
PS饮醇，譯者水平有限它抱，如有紕漏，請及時(shí)告知朴艰。謝謝观蓄！

效果圖-原圖.png

本教程中拒垃，我將帶你一同完成一個(gè)簡單的&以轉(zhuǎn)化為導(dǎo)向的app落地頁蚜锨。我們以Tut+的安卓app為原型，強(qiáng)調(diào)它的特點(diǎn)和好處损合，進(jìn)而吸引人們采取行動(dòng)毁嗦，完成轉(zhuǎn)化（下載我們的app）亲茅。

高轉(zhuǎn)化率的要點(diǎn)

在設(shè)計(jì)落地頁時(shí)，要想獲得高轉(zhuǎn)化率狗准，你需要注意以下一些事情克锣。
根據(jù)增長黑客Neil Patel所述，要想制作一個(gè)富有競爭力的落地頁面腔长，你需要：

• 一個(gè)殺手級(jí)的抬頭
• 有說服力的副標(biāo)題
• 圖片
• 解釋
• 價(jià)值主張或利益點(diǎn)說明
• 邏輯流程
• 值得信賴的表揚(yáng)
• 強(qiáng)大的號(hào)召力
  我們將實(shí)現(xiàn)上面所述的所有這些要點(diǎn)袭祟，讓我們的落地頁盡可能地富有競爭力。

AIDA模型

強(qiáng)烈推薦你去看下Shaun Cronin的在網(wǎng)頁設(shè)計(jì)中運(yùn)用AIDA法則 捞附，AIDA 表示的是注意力（Attention）, 興趣（Interest）, （欲望）Desire 和 行動(dòng)（Action）巾乳，這些法則能在不同的情景下運(yùn)用您没，包括售賣產(chǎn)品或服務(wù)。研究表明人們不在意滾動(dòng)頁面,所以一旦你在頁面頂部創(chuàng)建了初始的興趣點(diǎn)胆绊，就不用擔(dān)心落地頁面會(huì)做的太長氨鹏。這是講述一個(gè)偉大的故事以及添加說服力的因素所必須的。

A/B 測試

有效的落地頁不可能簡單地一次就設(shè)計(jì)好压状，并且表現(xiàn)完美仆抵。你必須持續(xù)測試各種類型的組合——包括文本，顏色何缓，響應(yīng)和其他的元素肢础，來取得最好的結(jié)果。
你可以在Siddharth Deswan的A Web Designer’s Introduction to A/B Testing中獲取更多A/B 測試的相關(guān)信息碌廓。

教程所需資源

為了把教程接著走下去，你需要以下這些（免費(fèi)）資源：
照片 來自 Unsplash
PT Sans 字體來自 Font Squirrel
用戶 icon 來自 Iconfinder
標(biāo)記 icon來自 Iconfinder
時(shí)鐘 icon 來自 Iconfinder
Martin Adamko制作的Samsung Galaxy S5 樣機(jī)

設(shè)置文檔

第一步

首先我們新建一個(gè)Photoshop文檔(文件 > 新建…) 剩盒，按照下面的圖進(jìn)行設(shè)置谷婆。
你可以按自己喜好的尺寸設(shè)置畫布。

1-新建.png

第二步

我們先設(shè)置一些參考線辽聊，這樣布局能有足夠的空間纪挎，而且看起來更平衡。設(shè)置參考線能確保整個(gè)頁面的整潔跟匆，并且?guī)椭覀兌x網(wǎng)站設(shè)計(jì)中涉及到的寬度值异袄。打開 視圖 > 新建參考線…，新建一些參考線玛臂。我通常會(huì)選擇1000px作為起始點(diǎn)烤蜕，然后從角落開始添加參考線，這樣頁面整體就有透氣的感覺了迹冤。
小提醒: 本教程中的參考線設(shè)置為：垂直100px讽营，600px和1100px。

2-建立參考線.png

設(shè)計(jì)頭部區(qū)域

“頭部”或者說“頁面上方”的這塊區(qū)域在吸引用戶并確保他們留在網(wǎng)站的過程中，扮演著非常重要的角色堪藐。
我們的app登陸頁的主要功能就是確保用戶訪問之后莉兰，下載app。在這個(gè)大前提下礁竞，我們將著重強(qiáng)調(diào)嘗試我們app后得到的好處糖荒，并且讓下載過程變得簡單易操作。

第一步

首先苏章，我們點(diǎn)擊圖層 >新建 > 組...或者點(diǎn)擊圖層面板底部的小icon來創(chuàng)建一個(gè)叫做“Header” 的組寂嘉。在這之后奏瞬，選中 文字工具(T), 選擇 PT Sans (Bold) 18px大小的字體，設(shè)置顏色為黑色#000000泉孩。
然后硼端，輸入你app的名字，作為logo寓搬，將它放在頁面左上角珍昨，挨著第一條輔助線的地方。在文字上面留一些空隙句喷，這樣看起來就不會(huì)太擠了镣典。

3-文字.png

第二步

接下來我們要沿用之前的設(shè)計(jì)思路，創(chuàng)建一個(gè)響應(yīng)的按鈕唾琼，進(jìn)而確保用戶在訪問的時(shí)候能很便捷地進(jìn)行操作兄春。創(chuàng)建一個(gè)新的名叫“CTA btn”的組，然后選擇矩形圓角工具(U)锡溯，設(shè)置半徑 為 2px赶舆，將前景色設(shè)置為橙綠色#17e594然后畫一個(gè) 206x38px 大小的矩形圓角。

4-按鈕.png

5-描邊.png

再次選擇 文字工具(T)倡蝙，然后在我們的按鈕上加上文字九串。我選用的是PT Sans (Bold) 12px，白色#FFFFFF

6-按鈕文字.png

第三步

現(xiàn)在寺鸥，選擇矩形工具(T)然后畫一個(gè)1200x600px (任意顏色)的矩形猪钮，將它放在我們最小的頂部導(dǎo)航下面。我在logo和矩形中間留了 25px的間隙析既，和我在之前給logo上方留的間隙是一致的躬贡。

7-矩形.png

現(xiàn)在從Unsplash選取一個(gè)工具集 的圖片，將它放在矩形圖層的上面眼坏。之后拂玻，按住Alt鍵，把鼠標(biāo)的箭頭移到兩個(gè)圖層中間宰译，鼠標(biāo)指示變成一個(gè)向下的小箭頭后檐蚜，點(diǎn)擊，創(chuàng)建 圖層蒙版沿侈，這樣就可以只顯示在矩形范圍內(nèi)的圖片了闯第。點(diǎn)擊Ctrl+T，調(diào)整圖片的大小缀拭，確保一直按著Shift鍵咳短，這樣圖片在縮放的時(shí)候才不會(huì)走樣填帽。

8-剪切蒙版.png

第四步

我們在上面新建一個(gè)灰色的圖層，這樣字體和app的截圖就能在背景上清晰的顯示了 咙好。更改前景色為深灰色#222325篡腌。新建圖層，并將它放置在圖片圖層上面勾效，再次創(chuàng)建一個(gè)圖層蒙版嘹悼。之后，點(diǎn)擊Alt+Backspace层宫，用前景色填充圖層杨伙。最后，將圖層 透明度 改為 80%萌腿。

9-遮罩圖層.png

第五步

再次選中 文字工具(T),將顏色變?yōu)榘咨?FFFFFF限匣，選用PT Sans (Bold) 48px的大小輸入主要信息。你需要確保在上面留下了足夠的空間毁菱。

10-文案.png

第六步

現(xiàn)在將字號(hào)變?yōu)?strong>21px,選擇 Normal 字重膛腐，輸入一段更具描述性的話語，并將它放在主要信息下鼎俘。為了讓這些文字看起來更平衡，更易于閱讀辩涝，將行高設(shè)置為至少30px（唔贸伐，作者這混蛋，下面寫到怔揩，設(shè)置為32px）捉邢。將描述性的話語調(diào)整到抬頭文字下，我這里設(shè)置它們的間距為 **40px **商膊。

11-描述性話語.png

第七步

讓我們按之前的樣式再做一個(gè)響應(yīng)按鈕伏伐，這樣用戶就能很清楚地知道在讀完文案之后該做什么。找到 “CTA btn”圖層組晕拆，Ctrl+J藐翎，復(fù)制一份，然后將它放在第二段信息下面实幕。

12-復(fù)制按鈕.png

第八步

我們已經(jīng)處理完了文本和主要的響應(yīng)按鈕吝镣，現(xiàn)在，將app的效果圖展示出來昆庇，方便人們在決定下載前末贾，預(yù)覽下app長什么樣子。
下載Martin Adamko 制作的免費(fèi)Samsung Galaxy S5 樣機(jī)整吆，（提醒拱撵，下載PSD文件辉川，不是Ai的那個(gè)），將它放進(jìn)你的文件中拴测。然后乓旗，按住Ctrl鍵，選中樣機(jī)下的所有圖層昼扛，右鍵寸齐，選擇轉(zhuǎn)化為智能對象。 Ctrl+T縮放抄谐，然后將它移到文本的右邊渺鹦。
之后，點(diǎn)擊智能對象蛹含，將你的app屏幕截圖放到樣機(jī)上去毅厚，保存文件。在這里我用的是Tuts+ Courses安卓版app的截圖

13-樣機(jī).png

設(shè)計(jì)利益區(qū)塊

頭部已經(jīng)順利做完浦箱。把圖層組折疊起來吸耿，然后新建一個(gè) “Benefits”組。

第一步

選擇文字工具(T),更改顏色為之前填充時(shí)用過的深灰色#222325酷窥，（讓你的設(shè)計(jì)顯得一致和連貫咽安，避免過多不必要的色彩），選用 PT Sans (Bold) 30px 蓬推，輸入一段強(qiáng)有力的申明妆棒，并將它放在頭部區(qū)域下，在這段文字上方留下足夠的空間（譯者：透氣沸伏，透氣糕珊，嗯哼……）

14-利益區(qū)塊-留白.png

第二步

現(xiàn)在，我們有一個(gè)去說服用戶為什么我們的app值得下載的機(jī)會(huì)了毅糟。想一想红选，我們app的利益點(diǎn)（譯者：也可以理解為痛點(diǎn)），而不是一些特征姆另，這樣人們在使用它的時(shí)候喇肋，就能很好地對應(yīng)上。然后蜕青，我們將顏色改為一種微妙的藍(lán)灰色苟蹈， #6a7588，輸入一列文案右核，解釋為什么人們需要用我們的app慧脱。我在這里選用了 PT Sans (Regular) 21px，行高設(shè)置為32px贺喝，和頭部區(qū)域用到的輔助信息的設(shè)置一樣菱鸥。
注意兩個(gè)文字區(qū)塊間的間隙宗兼，保留足夠大的空隙，給你的設(shè)計(jì)營造一種輕松的氛圍氮采。

15-輔助說明.png

第三步

再一次殷绍，我們復(fù)用響應(yīng)按鈕 (CTA-call to action) ，這樣鹊漠，那些早前還沒拿定主意的用戶主到，能在閱讀完利益點(diǎn)的文案介紹之后，很順利地采取行動(dòng)（下載app）躯概。 Ctrl+J登钥，復(fù)制“CTA btn”組，將它放在利益點(diǎn)文案下面娶靡。之后牧牢，把復(fù)制的“CTA btn”組移進(jìn) “Benefits” 圖層組，這樣你的文檔看起來會(huì)更有條理姿锭。

15-輔助說明.png

設(shè)計(jì)特征區(qū)塊

利益區(qū)塊已經(jīng)設(shè)計(jì)完畢塔鳍，折疊圖層組，然后新建一個(gè)“Features”組呻此。在這里我們將高亮app里的一些特征轮纫，這樣那些想了解更多的用戶，那些已經(jīng)開始感興趣的用戶就能了解更多相關(guān)信息了焚鲜。

第一步

將前景色改為淺灰色#fbfbfb蜡感，我們在特征區(qū)塊用一個(gè)不一樣的背景色，從而把它與頁面的其他內(nèi)容區(qū)分開來恃泪。然后，選擇 矩形工具 (U) 犀斋，畫一個(gè)1200x700px的矩形贝乎，作為背景。再次啰嗦一句叽粹，你要確保區(qū)塊上有足夠的間隙览效。（譯者：設(shè)置為90px的間距好了）

17-特征區(qū)塊.png

第二步

為了進(jìn)一步區(qū)分特征區(qū)塊，我們在區(qū)塊背景和上面的白色背景之間做一條1px的分割線虫几。選用 直線工具(U)锤灿，粗細(xì) 設(shè)置為1px ，將顏色設(shè)置為深灰色#eeeeee辆脸。
小提醒：按住 Shift 鍵但校，就可以畫出一條完美的水平線鳥~

第三步

打開“Benefits” 圖層組，找到抬頭文字的圖層啡氢，Ctrl+J 復(fù)制状囱，然后將復(fù)制的圖層移到 “Features”圖層組术裸。根據(jù)需要，對它進(jìn)行編輯亭枷，然后將它放在我們之前創(chuàng)建的淺灰色背景區(qū)域內(nèi)袭艺。

18-記得留白-透氣.png

第四步

我們會(huì)用icon+標(biāo)題+描述文字來創(chuàng)建3個(gè)區(qū)塊。新建一個(gè) “Feature 1”（或者其他描述性的名字）的圖層組叨粘。到Iconfinder上下載一個(gè)48x48 px 的用戶圖標(biāo)猾编。右擊圖層，然后按如下步驟操作升敲。

19-顏色疊加#17e594.png

20-描邊-#09ba74.png

你可能注意到了答倡，我們實(shí)際上是照著按鈕的樣式做的，所以網(wǎng)頁上的所有元素顯得很一致冻晤。

第五步

再一次苇羡，復(fù)制標(biāo)題文字圖層，將它放在 “Feature 1”圖層組鼻弧，然后選擇 文字工具 (T)设江，將它變?yōu)?16px ，行高22px攘轩。

21-icon.png

第六步

使用文字工具（T)叉存，用和之前一樣的描述性文字，寫下三行度帮，描述特征的短語歼捏。確保字體顏色和之前一樣是一樣的藍(lán)灰色#6a7588。將描述性文案放在icon和抬頭下面笨篷。

22-輔助性文字.png

第七步

現(xiàn)在折疊該圖層組瞳秽，然后 Ctrl+J，復(fù)制圖層組兩次率翅。然后练俐，調(diào)整復(fù)制的圖層組，適應(yīng)你的app冕臭。在這里腺晾，我使用了 Iconfinder上找到的 marker 和clock 。確保各個(gè)區(qū)塊之間留了足夠的間隙辜贵，這樣看起來會(huì)平衡些悯蝉。

23-復(fù)制圖層組.png

第八步

你展示的產(chǎn)品細(xì)節(jié)越多越真實(shí)，效果就越好托慨，我們會(huì)用一個(gè)特別的樣機(jī)角度來展示我們的app鼻由。我將我們之前用到的 Samsung Galaxy S5 樣機(jī) ，用Google Play上的截圖代替之前的圖。右鍵樣機(jī)圖層嗡靡，通過復(fù)制新建智能對象 跺撼，創(chuàng)建一個(gè)獨(dú)立的拷貝圖層。雙擊智能對象讨彼，將app的截圖替換進(jìn)去歉井，進(jìn)而把樣機(jī)變成我們自己的效果圖。

24-樣機(jī)-app截圖.png

設(shè)計(jì)推薦區(qū)塊

接下來哈误，我們將通過展示一些app用戶的褒獎(jiǎng)來增加app的可信度哩至。

第一步

折疊所有的圖層組，然后新建一個(gè)名為“Testimonials”的圖層組蜜自。按之前的步驟操作標(biāo)題菩貌，然后將它放在“Features”圖層組的背景下面，和上面一樣重荠，確保兩者中間留下了足夠的空間箭阶。（譯者碎碎念：不要忘記下面也有分割線，1px戈鲁，深灰色#eeeeee）

25-人們的評論.png

第二步

現(xiàn)在仇参，打開“Features” 圖層組，復(fù)制一份（ “Feature1”吧）婆殿，移到“Testimonials” 圖層組中诈乒。我們將在褒獎(jiǎng)的模塊中復(fù)用這個(gè)樣式。編輯文案婆芦，將標(biāo)題抬頭改為人名怕磨，然后描述性的文案改成褒獎(jiǎng)相關(guān)的。
移除icon消约，使用 **橢圓工具(U), 畫一個(gè)圓形（90x90px）肠鲫。在這之后，將人的照片放在圓上或粮，創(chuàng)建一個(gè)圖層蒙版滩届。我找了一個(gè)這樣的用戶頭像。

26-用戶-間距做了調(diào)整.png

第三步

最后被啼，復(fù)制新作的用戶圖層組“Feature1”副本啥的，將它一式三份棠枉，做一些文案和頭像的修改即可浓体。

27-另外的兩個(gè)人-注意間距.png

設(shè)計(jì)頁面尾部區(qū)域

收起“Testimonials”圖層組，新建一個(gè)名為“Footer”的圖層組辈讶。我們會(huì)在這里放最后一個(gè)響應(yīng)按鈕 (CTA-call to action) 命浴，以及一些鏈接到網(wǎng)站其他頁面的鏈接，因?yàn)樵S多人會(huì)習(xí)慣滾到網(wǎng)頁底部來查看網(wǎng)站的結(jié)構(gòu)。

第一步

找到“Header”圖層組生闲，按住Shift 鍵媳溺，選中矩形和灰色的填充圖層。在這之后碍讯，Ctrl+J悬蔽，復(fù)制一份，移到新建的“Footer” 圖層組捉兴。然后選擇一張圖片蝎困，將它放在矩形和灰色填充圖層中間，創(chuàng)建剪切蒙版倍啥。

28-復(fù)用剪切蒙版.png

第二步

添加另一個(gè)抬頭標(biāo)題禾乘，鼓勵(lì)人們行動(dòng)起來，下載你的app虽缕。將文字顏色設(shè)置為白色#FFFFFF始藕，這樣在深色背景上就會(huì)顯得很清晰。之后氮趋，復(fù)制響應(yīng)按鈕伍派，將它放在抬頭標(biāo)題下面。

29-再次復(fù)用.png

第三步

再次選擇文字工具（T),輸入你網(wǎng)站上的一些鏈接凭峡。我在這里用的是白色#FFFFFF拙已，PT Sans (Regular) 16px ，行高29px摧冀。（抬頭的部分用大寫+Bold）

30-注意間距.png

第四步

復(fù)制你的文字圖層倍踪，然后按照你app的內(nèi)容做一些調(diào)整。之后索昂，將copyright （授權(quán)許可）的文案放在footer的地步建车，上下都留下足夠（呼吸）的空間。

31-還是注意復(fù)用-間距.png

恭喜你椒惨，完成啦缤至！

做好了！我們已經(jīng)順利完成了主題性的設(shè)計(jì)康谆，現(xiàn)在领斥，回顧下你的文件圖層，刪除不必要的沃暗，然后將整理過的文件交給你的開發(fā)者們月洛，或者，最好是你自己能把它用代碼實(shí)現(xiàn)出來XD孽锥！

app-landing-page.jpg