网站着陆页设计这样做才优秀

一个经典的网站着陆页面设计，通常包含主题图片、主题slogan，清晰表达产品或服务卖点，除此之外，还有有一个非常招魂的CTA(行为召唤按钮)。优秀的着陆页面，不仅能给用户留下深刻的第一印象，还能提高用户使用产品的转化率，提升网站用户体验。

 

Top1
-
Flickr

 

创意点：

 

1.超大搜索框，让用户更容易找到想找的内容图片
2.全屏海报轮播，瞬间吸引用户，来的瞬间，就感觉自己得到了真么好的图片照片素材
3.slogan和招呼按钮CTA的精心设计，清晰引导用户要做什么

 

 

项目背景：

 

Flickr是一个照片分享或存储的平台，无论是业余的或是职业的摄影师都可以加入并在其中得到灵感。它的着陆页设计采取了图片轮播的方式展示用户的摄影作品。随图片滚动的作品署名和作者姓名让人对作者及作品产生无限的好奇心，忍不住想了解作者更多的作品。这也是着陆页的魅力之一。

 

大而显眼的CTA按钮设计吸引着用户去加入Flickr社区，从数百亿的相片中获取自己的灵感。简短的文案让游客在无形中便对网站产生了巨大的吸引力。

 

https://www.flickr.com/
 

Top2
-
Mailchimp

 

创意点：

 

白底黑字/特色logo/用户定位清晰/简洁的白色背景，加粗黑色字体，吸引用户目光，突出其邮件营销的品牌定位。

 

 

左上角大猩猩形象的网站logo深入人心，清楚地表明这个注册页面是由MailChimp创建的。右上角并排的蓝底注册按钮和白底登陆按钮颜色反差，提高潜在用户注册率。并且，“免费注册” 一词也很可能会立即引起游客的兴趣。

 

简短的描述语句表明了Mailchimp自身的品牌地位，同时客户定位为中小型企业，拉近与个体用户的距离，从心理角度提升用户体验。

 

Top3
-
Airbnb

 

创意点：

 

简单的图文背景/个性化展示/口碑及信任感/接客人的背景图与网站主题不谋而合，简单大方。

 

 

为了帮助将访问者转换成房东，Airbnb提供了一些诱人的个性化展示功能：根据您的位置估算的每周平均收入预测。 您可以在字段中输入有关您的潜在住宿条件的其他信息，以获得更加个性化的估算。如果您访问的页面已经确信，页面顶部的明确号召性用语可以轻松地进行现场转换。

 

如何成为房东获取收入？如何得到安全保障？一无所知的新用户必定对这些问题感兴趣。循序渐进的页面指引为用户提供了明确的网页浏览方向和良好的用户体验。这么贴心的服务也不难留住用户了。

 

Top4
-
Visa 着陆页面

 

创意点：

 

产品展示鲜明/业务流程清晰

 

 

这是Ramotion在Dribbble上展示的一幅着陆页设计作品。主打蓝色调背景，硕大的银行卡凸显了该网站的主要产品和服务。横向展示的业务流程清晰顺畅，用户点击各流程点便可跳转至同页面该流程的具体介绍。展现了该网站的最主要的特征和卖点，用流畅的服务吸引用户注册办卡。

 

可点击的流程节点和跳转流程介绍丰富了产品的展示和呈现，尽可能的在同一页面为用户展示足够的细节，同时也降低了着陆页的跳出率。

 

Top5
-
Matchpool

 

创意点：

 

Flat UI 扁平化/极简文案/醒目的CTA颜色设计

 

 

同样是扁平化设计风格的网站，Matchpool整个页面的颜色搭配显得十分清新活泼。互相靠近的小精灵或是自由活动的小精灵都体现出社区的概念。简短的文案也告诉用户可以自由创建属于自己的社区。

 

屏幕正中和右上角的CTA按钮颜色搭配形成对比，在深色调的页面背景对比下非常醒目，抓人眼球。“免费”加入对用户也在吸引着用户去注册，加入社区。

 

Top6
-
Upwork

创意点：

 

聪明的CTA按钮设计/诱导性的文案设计

 

 

着陆页设计最好的做法是将最主要的CTA按钮放在首位。显然Upwork将这一点利用的很好。从他们的CTA设计，很容易看出他们的目标是吸引企业和自由职业者的注册。

从用户体验的角度来说，绿底的“Post a Job”按钮目标用户群体是企业，小字的“What type of work you need?”则是针对自由职业者群体。

 

他们的文案设计也十分具有导向性。他们聪明的避开了死板的“雇主：在这里注册”这样的CTA，而是使用效益驱动的语言（“让自由职业者更多地完成工作”），然后以一个行动为导向的CTA告诉潜在用户在这里“发布你的工作”。

http://www.upwork.com/

 

Top7
-
Slack

 

创意点：

 

协作功能拟人化设计/突出品牌色/简单易操作的CTA按钮

 

 

固定头部的滚动风格允许在页面滚动的时候显示所有必要的信息，让访问者无需在页面上下移动即可接收信息。Slack最重要的协作功能以拟人化的形象展示给客户，多样化的协作文件展示，强化Slack品牌印象。优秀的着陆页设计另一个做法是呼应品牌色。Slack也很好的实现了这一点。明亮的品牌颜色与每个相应的部分互相呼应。

 

页面上的CTA按钮以简短直接的“Get Started”作为客户的行动指引。而仅此一个表单区域让访问者也很可能轻松的完成表单填写，从而增加注册率。

https://goo.gl/sgcvf7

 

Top8
-
Captico - Animation

 

创意点：

 

CTA+动画展示/扁平化风格

 

 

扁平化的页面设计干净、简洁。着陆页流畅的动画展示让用户对网站的服务特色一目了然，自然平滑的过渡也是一大亮点。左侧的CTA butto与右侧动画的创意组合使得整个页面的用户体验自然而生动。活泼的动画也与网站响应式的主题相得益彰。

 

以上是今天素马跟大家分享的8个经典的着陆页面设计的经典案例。