當(dāng)用戶打開網(wǎng)站落地頁時摧阅，如何才能通過設(shè)計引導(dǎo)他們進行下一步行動汰蓉，順便留個好印象呢，今天這篇總結(jié)了6個實用的小技巧逸尖，一起來收古沥。
什么是落地頁的必要元素？
落地頁納入設(shè)計要素的方法有很多娇跟，如新商品的介紹岩齿，必要的品牌說明等。大多數(shù)落地頁都利用了以下要素苞俘。
? 搶眼的標(biāo)題
? Call-To-Action按鈕
? 令人印象深刻的背景圖或視頻
? 描述視頻或動畫
? 品牌元素
? 導(dǎo)航和動效
那么在各種各樣的要素之中怎樣靈活運用才能創(chuàng)建一個良好的落地頁呢盹沈？讓我們來一探究竟吧。
搶眼的標(biāo)題
訪問者第一個見到的就是他吃谣，讓我們來看一看標(biāo)題吧乞封。能讓人精確了解的信息是必要的。例如以下案例：「Send Better Email（發(fā)送一個更好的EMAIL岗憋。）」或「Sell More Stuff（想賣更多的東西肃晚。）」在創(chuàng)建一個易于理解的導(dǎo)航標(biāo)題之前，你必須明白你是否明確的傳達出了想提供的是什么服務(wù)仔戈。
適當(dāng)?shù)臉邮?/h4>
文字文本要時刻保持清晰关串，能夠清楚的顯示出來。以前面這個樣品為例监徘，在白色背景使用黑色文字文本晋修，讓你不會漏掉標(biāo)題。他也為字體使用了加粗凰盔。
以下面這個樣本為例墓卦，在背景圖像上重疊字符文本，由于給照片使用了淡出效果户敬，文字部分就顯得很顯眼了落剪。
當(dāng)您使用背景圖片時，通常白色的字比黑色字更容易閱讀尿庐。
Call-to-Action 按鈕
一旦你確定了有吸引力的標(biāo)題著榴，接下來我們要誘導(dǎo)訪問用戶的行動。比如讓他們點擊“注冊”按鈕屁倔、顯示您的商品脑又、項目、輸入E-mail地址等各種各樣的行動锐借。通常這種采用按鈕或形式的形式问麸，我們稱之為「Call-to-Action」。
當(dāng)你設(shè)計一個Call-to-Action時钞翔，讓他更顯眼是必要的严卖。在背景上利用品牌顏色，將他們配置在畫面中顯眼的位置布轿。這是比較受歡迎的標(biāo)題配置方法哮笆，但也不一定準(zhǔn)確来颤。
正如下面的案例一樣，使用高亮的顏色稠肘，將右上角的 Call-to-Action 按鈕強調(diào)出來了福铅。
?
一旦決定了配置的場所，接下來我們就該考慮寫上什么樣的文字了项阴』「Get Started（開始。）」或「Download Now（下載）」环揽、「Sign Up（注冊）」之類的文字略荡，都有著表示行動的作用，能幫助用戶理解按鈕的意義歉胶⊙炊担「Submit（提交）」或「Go（運行）」之類的用語，應(yīng)盡量避免使用通今。曖昧的文字會讓用戶感到迷惑序无，要有能讓用戶能充滿自信的按下按鈕這樣的心去設(shè)計。
背景圖片
大多數(shù)落地頁衡创，使用的都是大尺寸的背景圖像帝嗡。令人印象深刻的設(shè)計工作，能夠幫助用戶理解設(shè)計的意義與信息璃氢。
有很多能夠自由使用圖片的網(wǎng)站哟玷，讓你的收藏變得更充實吧。嘗試各種設(shè)計一也，讓我們來確認(rèn)什么樣的圖片才是最恰當(dāng)?shù)摹?/p>
尺寸和文件大小
當(dāng)你找到了理想的圖片時巢寡，你就該準(zhǔn)備好你的落地頁了。為了全屏表示你可以使用大尺寸的圖片椰苟，但相應(yīng)的抑月，他加載的時間將會變得很長。因為在大屏幕上網(wǎng)站圖片會擴大很多舆蝴，所以我們通常將圖片調(diào)整為1400到1600像素谦絮，這樣在大屏幕看起來也會非常清楚。
將照片壓縮保存為JPGE吧洁仗。但因為照片的類型不同层皱，我們一般保證大小在200-500KB之間就可以了。因為圖片的尺寸大所以處理速度將會變慢赠潦，這也將影響該網(wǎng)站的加載時間叫胖。
自適應(yīng)畫面的方法
屏幕有各種各樣的尺寸。在大多數(shù)情況下她奥，我們是不知道用戶屏幕的寬度和高度的瓮增。這個問題我們將介紹2種解決方法怎棱。將Background-size設(shè)置為cover，height設(shè)置為100vh吧绷跑。
?
通過將background-size設(shè)置為cover拳恋，瀏覽器中顯示的頁面上配置的圖片，將會自動進行擴大縮小和裁剪你踩。但值得注意的是诅岩，這樣也會使過高的圖片兩邊被裁掉讳苦，或者過寬的圖片上下部分被裁掉带膜。（提示：使用 media query，讓不同的畫面使用不同的圖片就能解決這個問題鸳谜。）
vh表示的是顯示屏幕的高度（英: Viewport Height）膝藕，表示的方法是百分比。也就是說100vh指的是全屏高度咐扭。
漸變圖片的重疊方法
當(dāng)你找到了期待已久的漂亮的背景圖片芭挽，很難清楚的閱讀標(biāo)題這一問題就會頻繁出現(xiàn)。要解決這個問題蝗肪，我們得考慮一些方法袜爪。首先，試著模糊圖片或降低圖片的亮度吧薛闪。
還有一種方法便是有效的利用CSS的功能辛馆。通過使用CSS，可以在圖片上使用漸變調(diào)和豁延，創(chuàng)建一個偽元素（英: Pseudo-Element）昙篙。
?
這里的偽元素：通過使用before，在背景圖片上使用灰色的漸變調(diào)和诱咏。另外苔可，也可以更換背景圖片或使用減淡或別的漸變調(diào)和，此外袋狞，作為代替你也可以在圖片上追加標(biāo)題的背景色焚辅。
正如在下面的案例一樣，主要的思路就是突出背景圖片上的文字文本苟鸯。
?
背景視頻
有時候法焰，你會不會不滿足于大尺寸的圖片？在這種情況下倔毙，將背景圖替換為視頻埃仪，在讀取之后便自動播放也是一個受歡迎的方法。在下面的設(shè)計案例中陕赃，展示了該公司正在工作的全屏動畫的狀態(tài)卵蛉。
使用視頻來引人注意是非常不錯的想法颁股，但進行網(wǎng)絡(luò)優(yōu)化也是非常有必要的。為了縮短視頻的持續(xù)時間傻丝，一般控制在10-20秒之內(nèi)甘有。此外，分辨率也該稍微下調(diào)葡缰，壓縮在10MB之內(nèi)也是非常重要的亏掀。
影片可以存儲在我們自己的服務(wù)器上，你也可以利用如Embed.ly這樣的第三方服務(wù)泛释。
如果你想找一些免費的視頻使用滤愕，可以試試像Coverr這樣的網(wǎng)站。上面所公開的視頻怜校，都是可以免費利用的視頻網(wǎng)站间影。像下面這個案例一樣，通過重疊半透明的圖片和視頻茄茁，完成了一個非常不錯的設(shè)計工作魂贬。
解說視頻
在某些情況下僅僅靠背景圖像或視頻就設(shè)置Hero Header顯然是不夠的。也可以通過利用視頻裙顽，在傳達品牌故事之前設(shè)置好吧付燥。像下面的案例，設(shè)置為在加載頁面的同時愈犹，動畫自動播放键科。
?
也可以嵌入YouTube視頻，在這種情況下最簡單的方法甘萧，是使用iframe來進行設(shè)置萝嘁。為了進一步改善外觀，您還可以進行一些自定義設(shè)置扬卷。
在這里牙言，modestbranding設(shè)定為1，vq設(shè)置為hd720怪得。rel設(shè)置為0咱枉。modestbranding是用來顯示YouTube的logo，vq表示的則是默認(rèn)使用高畫質(zhì)徒恋，rel表示在視頻播放完畢后不顯示其他關(guān)聯(lián)視頻蚕断。?
打造品牌和導(dǎo)航
如果你準(zhǔn)備好了有魅力的標(biāo)題，直觀的Call-to-Action按鈕和好看的圖片或動畫入挣，然而你的落地頁看起來卻并不是很好亿乳。請不要忘了打造品牌與導(dǎo)航。
在上面的案例中，Logo被放置在左上方葛假，右上方則放置了導(dǎo)航障陶。通過這種方法，你可以幫助用戶尋找信息聊训。Call-to-Action 按鈕和導(dǎo)航菜單也一起配置好吧抱究。這可以突出按鈕，讓最重要的操作脫穎而出带斑。
你可以通過利用背景圖片設(shè)置分隔鼓寺，讓Logo和導(dǎo)航菜單變得更顯眼。
嘗試添加動效
完成了一個精美的標(biāo)題設(shè)計勋磕，但還是感覺缺少了什么妈候。那就是在加載的同時頁面突然出現(xiàn)這一問題。在接下來的工作中朋凉，我們嘗試著添加一些動效州丹。使用動效醋安，讓我們的落地頁變得更加精彩杂彭。
譯者：喪心病狂十六夜貓
