英文：blog.hubspot
作者：Lindsay Kolowich
译者：jzjz
链接：http://www.jianshu.com/p/9d346dc64ed1
你永远没有第二次机会来重塑大家对你的第一印象。这就是为什么网站首页是网站最重要的部分。如果你正在考虑重新设计你的网站或者想知道如何让你的网站创造更多的商机，那么首先，就要打造一个吸人眼球的网站首页。
作为公司的虚拟大门，首页通常肩负着吸引流量的重任。尽管其占据着网站重要的地位，但许多企业很难正确地优化它。
首页的设计应服务于不同来源、不同类型的访客，而不是仅仅围绕着登录这个功能而已。换句话说，你的首页需要能够达到吸引流量、培养潜在客户、提升转化率的效果。
Infographic
1.标题（Headline）
在三秒内一个网站就应该要让访客知道自己能提供的产品和服务是什么。这就是首页标题要起到的作用。为做到这一点，首先就是要保持你的标题简单明了，不要出错。
也许会有不同类型的访客浏览你的网站，你很难想出几句话能够击中每类访客的心。其实考虑标题时大可不必考虑需要取悦每一个人，你设计的首页标题只要能打动最有可能对你的产品感兴趣的那20-35％的人就可以了。
保持标题本身简单明了，Dropbox的标题是一个很好的例子：“安全共享、同步、合作”（Securely share, sync, and collaborate.）这很简单，但很有力。不需要用什么解码的术语来解释Dropbox是做什么的。另外“安全”一词正触及到了寻找文件管理器的这群人的痛点。同时我们可以注意到Dropbox的副标题是如何通过再次重复“安全”这个词来起到打动访客的作用的：
Dropbox
2.副标题（Sub-headline）
首页的副标题应该通过简短的描述，明确公司是做什么的或者提供的什么样的产品和服务来补充标题。这样可以将火力集中在一个常见的痛点上有效地阐释你的产品或服务。
同时要优化你移动端网页的标题和文本格式，用更大的字体给访客更好的体验。小字体可能会迫使移动端访客手动放大网页阅读和与网站上的内容进行互动。我们的建议是：让你的标题和幅标题字体大小不小于22px，而正文字体至少14px。
Podio的副标题就是一个很棒的例子：“试试让领导信任，员工喜爱的可定制工作管理解决方案吧。”（Try the customisable work management solution leaders trust and employees love working on.）它锁定了工作管理解决方案这类产品几个常见的痛点并加以阐释——向访客保证解决方案是定制的、解决方案是值得信赖以及使用起来是愉快的：
Podio
3. 首要行为召唤（Primary Calls-to-Action）
网站首页的目的是尽力促使访客深入浏览你的网站，并进一步提升漏斗转化率（译者注：具体漏洞模型可参考AARRR转化漏洞模型）。具体的做法包括在首页的显著位置体现要召唤访客做出的动作（可以有2-3个动作引导，以配合在购买周期中处于不同阶段的人群）。一定要将行为召唤的部分放在显著的位置，让访客很容易找到。
这些行为召唤功能首先应该是极具视觉冲击力的，最好其颜色与首页的颜色形成鲜明对比，但同时还需与首页颜色整体方案协调。其次要保持每个行为描述的简短性（不超过五个字），并且是动作导向的。这样才能达到有效引导用户点击的作用。例如“注册”、“预约”或“免费试用”等等。
同时要优化移动端的行为召唤功能，请确保它足够大，这样才能方便访客用手指点击。如果你的行为召唤功能是一个按钮，这个按钮大小至少要44px *44px，考虑到按钮周围的留白，这个尺寸的按钮能够被移动端访客轻松的注意到并且点击起来很方便，不至于被访客不小心错过了。
Uber首页有几个面向不同类型访客的行为召唤功能做的很棒：面向潜在的司机——“成为司机”，面向潜在乘客——“注册”。同时请注意Uber首页亮蓝色的行动召唤按钮和黑色背景形成的鲜明对比：
Uber
4.支撑图像（Supporting Image）
大多数人都是视觉动物。请确保使用一个图像（甚至是一个简短的视频）清楚地表明你所提供的是什么。使用图像最好能够捕捉情感促使访客行动，同时要避免使用俗气的库存照片图像。
同时要优化移动端首页的图像，优化的重点在于使用高品质的图形，减小文件的大小。可以给你的图片添加alt文本，以防移动设备默认阻止任何图像。
4 Rivers Smokehouse情感意象的首页是一个很好的例子：在简洁的标题、副标题以及首要行为召唤背后循环播放着一系列简短、高清晰度、令人垂涎的视频：
4 Rivers Smokehouse
5.简洁（Benefits）
在首页中如何描述你是做什么的很重要，同时描述你为什么这么做也很重要。潜在用户想了解购买你的产品会有什么好处，这也是他们留下来的动力。
请保持沿用简短、易读、客户化语言的文案。Evernote的首页做到了这一点：
Evernote
6.社会证明（Social Proof）
社会证明就是信任的有力指标。你的产品或服务可能是世界上最好的，你的宣传中也可以运用这样的说法——但是别人不一定会相信你，除非他们从其他人口中听到一样的评价。这就是社会证明。
在首页展示几个最好的（或者是简短的）案例，如果合适的话还可以链接到案例的具体网址。附上案例相关人的名字和照片可以增加可信度。下面是Codecademy的做法：
Codecademy
7.导航（Navigation）
首页导航的内容和设计的差异直接导致的结果就是——访客是跳出了还是返回了。想要降低跳出率，那么就需要给访客一个清晰的返回路径回到网站的首页，同时将导航菜单设置在页面的顶部，并将链接结构化。
没有人比搭建这个网站的人更了解网站结构，所以一定要进行用户测试以确保首页的导航能够让访客感觉简单、直观并能够帮助访客寻找到在网站上想找到的内容。
以下是Geek Squad公司首页结构良好的导航设计的案例：
Geek Squad
8.内容提供（Content Offer）
为了访客能在流量首页时留下更多的线索，我们可以设计一个很棒的内容提供功能，提供如白皮书、电子书、或指导。也许访客不是真的想购买产品，但是这样做可以让他们了解他们感兴趣的话题。
下面是IMPACT首页的案例。他们提供了四本关于增长黑客秘密的免费电子书：
IMPACT
9.二级行为召唤（Secondary Calls-to-Action）
首页上的二级行为召唤往往能带来额外的转化率，它们有可能会吸引对非主营感兴趣的访客。二级行为召唤有点像应急计划：它们为那些并非你核心目标人群的访客提供了另一条路径。
首要行为召唤要在首页的显著位置，二级行为召唤可以折叠放置在首要行为召唤下方或首页不明显的位置，这样访客向下滚动屏幕时可以看到。例如下面Trustev 的首页，你会发现三个醒目的首要行为召唤，在首要行为召唤下方为三个二级行为召唤，分别用来吸引零售商、虚拟商品和金融领域的客户：
Trustev
10.产品特点（Features）
除了展示使用产品能够带来的好处之外，首页还需要展示产品的一些关键特性列表。这能够使访客更多的了解你的产品和服务。再一次提醒，要保持沿用简短、易读、客户化语言的文案。以下为Dropbox的业务说明案例：
Dropbox
11. 相关资源（Resources）
大多数访客访问网站，并不是准备直接购买产品。但是为正在寻找相关信息的人提供资源，这不仅可以让他们在网站上停留更长的时间，还可以帮助企业建立信誉以及在行业中的领袖地位。
KnowledgeVision 将资源链接设置在二级行为召唤中。请注意，这些二级行为召唤覆盖了购买周期的多个阶段：为计划购的知情人提供演示案例；为感兴趣并希望了解更多信息的人提供示例；例子的人谁是兴趣，为处于漏洞顶部的人提供资源：
KnowledgeVision
12.成功指标（Success Indicators）
除了客户的成功故事，奖项和赞誉也可以帮助激发访客良好的第一印象。贵公司是一个广受好评的餐馆？你的应用是否被票选为年度最佳应用？让首页访客知道你的成就，如同社会证明，它会使不认识你的人更信任你。
例如Cleanify的首页上，你会发现著名出版物的名称,像《纽约时报》和TechCrunch等对他们的报道：
Cleanify
最后：别忘了优化网站移动端的首页
无论你是在调整自己的首页或想完全重新设计首页，请确保这个首页在移动端也是同步优化的。这不仅因为在移动设备上能够友好展示的网站能够更好的提升SEO（这得益2015年4月谷歌算法的变化），同时现在越来越多的访客会在移动设备上浏览网站，优化网站移动端的首页能够为访客带来更好的用户体验。
