什么是落地页的必要元素？

落地页纳入设计要素的方法有(yǒu)很(hěn)多(duō)，如新(xīn)商(shāng)品的介绍，必要的品牌说明等。大多(duō)数落地页都利用(yòng)了以下要素。

• 抢眼的标题

• Call-To-Action按钮

• 令人印象深刻的背景图或视频

• 描述视频或动画

• 品牌元素

• 导航和动效

那么在各种各样的要素之中怎样灵活运用(yòng)才能(néng)创建一个良好的落地页呢(ne)？让我们来一探究竟吧。

抢眼的标题

访问者第一个见到的就是他(tā)，让我们来看一看标题吧。能(néng)让人精确了解的信息是必要的。例如以下案例：「Send Better Email（发送一个更好的EMAIL。）」或「Sell More Stuff（想卖更多(duō)的东西。）」在创建一个易于理(lǐ)解的导航标题之前，你必须明白你是否明确的传达出了想提供的是什么服務(wù)。

适当的样式

文(wén)字文(wén)本要时刻保持清晰，能(néng)够清楚的显示出来。以前面这个样品為(wèi)例，在白色背景使用(yòng)黑色文(wén)字文(wén)本，让你不会漏掉标题。他(tā)也為(wèi)字體(tǐ)使用(yòng)了加粗。

以下面这个样本為(wèi)例，在背景图像上重叠字符文(wén)本，由于给照片使用(yòng)了淡出效果，文(wén)字部分(fēn)就显得很(hěn)显眼了。

当您使用(yòng)背景图片时，通常白色的字比黑色字更容易阅读。

Call-to-Action 按钮

一旦你确定了有(yǒu)吸引力的标题，接下来我们要诱导访问用(yòng)户的行动。比如让他(tā)们点击“注册”按钮、显示您的商(shāng)品、项目、输入E-mail地址等各种各样的行动。通常这种采用(yòng)按钮或形式的形式，我们称之為(wèi)「Call-to-Action」。

当你设计一个Call-to-Action时，让他(tā)更显眼是必要的。在背景上利用(yòng)品牌颜色，将他(tā)们配置在画面中显眼的位置。这是比较受欢迎的标题配置方法，但也不一定准确。

正如下面的案例一样，使用(yòng)高亮的颜色，将右上角的 Call-to-Action 按钮强调出来了。

一旦决定了配置的场所，接下来我们就该考虑写上什么样的文(wén)字了。「Get Started（开始。）」或「Download Now（下载）」、「Sign Up（注册）」之类的文(wén)字，都有(yǒu)着表示行动的作用(yòng)，能(néng)帮助用(yòng)户理(lǐ)解按钮的意义。「Submit（提交）」或「Go（运行）」之类的用(yòng)语，应尽量避免使用(yòng)。暧昧的文(wén)字会让用(yòng)户感到迷惑，要有(yǒu)能(néng)让用(yòng)户能(néng)充满自信的按下按钮这样的心去设计。

背景图片

大多(duō)数落地页，使用(yòng)的都是大尺寸的背景图像。令人印象深刻的设计工作，能(néng)够帮助用(yòng)户理(lǐ)解设计的意义与信息。

有(yǒu)很(hěn)多(duō)能(néng)够自由使用(yòng)图片的网站，让你的收藏变得更充实吧。尝试各种设计，让我们来确认什么样的图片才是最恰当的。

尺寸和文(wén)件大小(xiǎo)

当你找到了理(lǐ)想的图片时，你就该准备好你的落地页了。為(wèi)了全屏表示你可(kě)以使用(yòng)大尺寸的图片，但相应的，他(tā)加载的时间将会变得很(hěn)長(cháng)。因為(wèi)在大屏幕上网站图片会扩大很(hěn)多(duō)，所以我们通常将图片调整為(wèi)1400到1600像素，这样在大屏幕看起来也会非常清楚。

将照片压缩保存為(wèi)JPGE吧。但因為(wèi)照片的类型不同，我们一般保证大小(xiǎo)在200-500KB之间就可(kě)以了。因為(wèi)图片的尺寸大所以处理(lǐ)速度将会变慢，这也将影响该网站的加载时间。

自适应画面的方法

屏幕有(yǒu)各种各样的尺寸。在大多(duō)数情况下，我们是不知道用(yòng)户屏幕的宽度和高度的。这个问题我们将介绍2种解决方法。将Background-size设置為(wèi)cover，height设置為(wèi)100vh吧。

通过将background-size设置為(wèi)cover，浏览器中显示的页面上配置的图片，将会自动进行扩大缩小(xiǎo)和裁剪。但值得注意的是，这样也会使过高的图片两边被裁掉，或者过宽的图片上下部分(fēn)被裁掉。（提示：使用(yòng) media query，让不同的画面使用(yòng)不同的图片就能(néng)解决这个问题。）

vh表示的是显示屏幕的高度（英: Viewport Height），表示的方法是百分(fēn)比。也就是说100vh指的是全屏高度。

渐变图片的重叠方法

当你找到了期待已久的漂亮的背景图片，很(hěn)难清楚的阅读标题这一问题就会频繁出现。要解决这个问题，我们得考虑一些方法。首先，试着模糊图片或降低图片的亮度吧。

还有(yǒu)一种方法便是有(yǒu)效的利用(yòng)CSS的功能(néng)。通过使用(yòng)CSS，可(kě)以在图片上使用(yòng)渐变调和，创建一个伪元素（英: Pseudo-Element）。

这里的伪元素：通过使用(yòng)before，在背景图片上使用(yòng)灰色的渐变调和。另外，也可(kě)以更换背景图片或使用(yòng)减淡或别的渐变调和，此外，作為(wèi)代替你也可(kě)以在图片上追加标题的背景色。

正如在下面的案例一样，主要的思路就是突出背景图片上的文(wén)字文(wén)本。

背景视频

有(yǒu)时候，你会不会不满足于大尺寸的图片？在这种情况下，将背景图替换為(wèi)视频，在读取之后便自动播放也是一个受欢迎的方法。在下面的设计案例中，展示了该公司正在工作的全屏动画的状态。

使用(yòng)视频来引人注意是非常不错的想法，但进行网络优化也是非常有(yǒu)必要的。為(wèi)了缩短视频的持续时间，一般控制在10-20秒(miǎo)之内。此外，分(fēn)辨率也该稍微下调，压缩在10MB之内也是非常重要的。

影片可(kě)以存储在我们自己的服務(wù)器上，你也可(kě)以利用(yòng)如Embed.ly这样的第三方服務(wù)。

如果你想找一些免费的视频使用(yòng)，可(kě)以试试像Coverr这样的网站。上面所公开的视频，都是可(kě)以免费利用(yòng)的视频网站。像下面这个案例一样，通过重叠半透明的图片和视频，完成了一个非常不错的设计工作。

解说视频

在某些情况下仅仅靠背景图像或视频就设置Hero Header显然是不够的。也可(kě)以通过利用(yòng)视频，在传达品牌故事之前设置好吧。像下面的案例，设置為(wèi)在加载页面的同时，动画自动播放。

也可(kě)以嵌入YouTube视频，在这种情况下最简单的方法，是使用(yòng)iframe来进行设置。為(wèi)了进一步改善外观，您还可(kě)以进行一些自定义设置。

【<iframe width="560" height="315" src="https://www.youtube.com/embed/0jhDAVkdsAI?modestbranding=1&cc_load_policy=0&iv_load_policy=3&vq=hd720&rel=0" frameborder="0" allowfullscreen></iframe>】

在这里，modestbranding设定為(wèi)1，vq设置為(wèi)hd720。rel设置為(wèi)0。modestbranding是用(yòng)来显示YouTube的logo，vq表示的则是默认使用(yòng)高画质，rel表示在视频播放完毕后不显示其他(tā)关联视频。

打造品牌和导航

如果你准备好了有(yǒu)魅力的标题，直观的Call-to-Action按钮和好看的图片或动画，然而你的落地页看起来却并不是很(hěn)好。请不要忘了打造品牌与导航。

在上面的案例中，Logo被放置在左上方，右上方则放置了导航。通过这种方法，你可(kě)以帮助用(yòng)户寻找信息。Call-to-Action 按钮和导航菜单也一起配置好吧。这可(kě)以突出按钮，让最重要的操作脱颖而出。

你可(kě)以通过利用(yòng)背景图片设置分(fēn)隔，让Logo和导航菜单变得更显眼。

尝试添加动效

完成了一个精美的标题设计，但还是感觉缺少了什么。那就是在加载的同时页面突然出现这一问题。在接下来的工作中，我们尝试着添加一些动效。使用(yòng)动效，让我们的落地页变得更加精彩。