原頁面中素材需自備梯子。如有需要，也可以訪問我的百度云文件打包
原文鏈接：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！
