如何实现访客到顾客的有效转化?这里有9个优秀的着陆页设计实例

发布日期:2018-02-12
浏览次数:193
  
undefined
 
着陆页是用户进入网站第一眼看见的元素,它对网站建设十分重要。如果网站的着陆页设计很糟糕,用户根本不会在网站上停留;相反,如果网站的着陆页设计十分有效,用户将在网页上进行持续的浏览。那么,什么样的着陆页设计才是有效的呢?一个优秀的着陆页需要能够清楚地传递出产品或服务的独特销售卖点(UPS),专注于一种行为号召(CTA),比如用户注册、了解更多、立刻购买等,引导用户与网站产生互动。留白、对比色等元素就常用在着陆页中帮助构建视觉线索。简明扼要的标题、副标题、详尽的要点梳理也是着陆页设计的关键要点。对了,着陆页中通常还需要使用大图以在短时间内与用户完成沟通与交流。说了这么多,着陆页究竟应该如何设计呢?今天小飞特地整理了9个优秀的设计范例,快来一起看看吧!
 
 
 

1. Interface Lover

Interface Lover网站是UI设计爱好者们的集结地,常会更新一些UI设计方面的技巧和建议,或是分享不同设计背后的创作体验。由于这个网站是以内容为重的,其着陆页的布局与报纸布局很是相似,页面被纵向划分为3个简单的区块,很是简洁大方。不同区块都以设计师的照片为视觉焦点,这不仅能够吸引用户前来浏览,还突出了网站对于UI设计爱好者个人故事的关注。
undefined
 
 
 

2. Google Fonts

Google Fonts于2010年发布上线,现在每天几乎可以收到来自全球超过150亿次的访问量。这很大程度上要归功于网站的着陆页设计。Goolgle Fonts在网站界面使用了Material Design风格,扁平化十足;整个网站还是响应式的,用户在不同设备都能享受到良好的体验。最重要的是你还不需要花费很多时间去获得自己想要的字体,你甚至还可以直接在页面上输入文字来测试不同字体的显示效果。如果你觉得字体选择实在是太多了,页面的右侧还设置了字体类别勾选的记号栏,以及字体厚度、倾斜度、宽度的滑动块,你可以在这快速筛选出自己想要的字体。
 
undefined
 
 
 

3. MIT Technology Review

现在有很多网站都想着如何在着陆页中利用某种特殊的技巧让自己脱颖而出。相比这些网站来说,MIT Techonology Review实在是一个”异类”。MIT Technology Review,发布于18世纪末,一直以页面的简洁性和内容上的高可读性为设计核心。尽管它已经历过多次改版,但却始终不忘初心。当你打开MIT Technology Review的着陆页时,你可以看见一个醒目的封面资讯,3个二级咨询,以及"The Download"区域(当日热门资讯的摘要列表),层次结构十分清晰。在页面的右上角,这还有一个显眼的订阅按钮,它可以在不影响用户愉悦体验的同时,引导用户进行网站订阅。
 
undefined
 
 
 

4. Present&Correct

Present&Correct的着陆页设计十分精巧。坐标网格式的背景图片、浅灰配色、经典字体,不仅简洁大方,文艺气息十足,还会让人不知不觉地联想到学校练习册,这与网站的主题(文具用品销售)不谋而合。除了整洁的页面布局外,这个网站在各种细节元素的处理上也很仔细:网站的导航菜单一目了然;产品展示页面充分结合了留白设计;搜索按钮清晰可见;菜单栏的右上角还放置了购物车按钮,让用户的结算行为更易发生。
 
undefined
 
 
 

5. LS Productions

LS Productions位于苏格兰,是一家提供图片、视频拍摄等服务的制作公司。它在网站的着陆页设计上充分发挥了自己的优势,比如在首页上使用满屏的循环背景视频来展现企业的业务能力。当你点击向下滚动时,你可以看见LS Productions公司的3种业务分类:图片拍摄、视频拍摄、以及拍摄地点租赁。其实,到这为止,网站着陆页的作用已经基本发挥完了,剩下的拍摄地点集锦、团队介绍等区域都只是起到锦上添花的作用。如果你想与LS Productions进行合作,你可以进入服务页面。
 
undefined
 
 
 

6. O'Neil

O'Neil是一家销售运动服装和运动装备的美国公司。不过它的核心业务只涉及两个项目:冲浪和滑雪,因此它的着陆页设计中采用了大量的海浪、雪山图片。一打开O'Neil的首页,你可以看到主页面的上方有一栏导航菜单,每个主菜单栏下都细分了多个子菜单,这种分门别类、将网站所有栏目都一一呈现出来的方式可以让用户快速到达自己想去的页面。主页之下的各个区域(男装、女装、潜水服等)都是围绕大图展开的。这还有类似Ins的图片画廊,旨在激起用户开始冲浪和攀登雪山的兴趣。
 
undefined
 
 
 

7. Hipstamatic

对于Hipstamatic这个网站来说,它主要是通过着陆页对Hipstamatic这个摄影App进行全方位的展示,包括软件特点、界面、用户使用感受等,以达到吸引用户浏览、点击下载的目的。一打开Hipstamatic的着陆页,鲜亮的背景颜色很容易抓住用户的视线。网站导航栏的下方设置了一个可滚动点击的图片画廊,这些图片都是其他用户真实的摄影作品。中间区域围绕着一个IPhone的动态图展开,呈现了App的最新版本、多种拍摄模式等;页面底部还有一个显眼的CTA按钮号召用户去App store进行软件下载。
 
undefined
 
 
 

8. Apple

Apple的着陆页画面十分之简洁,它还因此获得了D&AD的"黑铅笔"奖(很难赢得的一类奖项)。在着陆页上,Apple简要地介绍了企业的产品范围(导航菜单栏),除此以外,页面上就只剩下漂亮的产品图片以及产品名称和标语了,这甚至都没有我们十分推崇的CTA按钮。其实这是因为着陆页上的产品图片和名称都是设置了链接的,用户可以点击它们查看更多信息。你也可以在网站中使用类似的设计手法,但一定要确保用户知道点击这些元素可以获取更多信息。
 
undefined
 
 
 

9. Pinterest

Pinterest的着陆页设计有着十分明确的目标。一打开它的网页,这就会弹出注册/登录按钮,如果你不想注册,就可以直接退出了。这个流行的线上图库对自己的品牌和口碑很有信心,不像其他网站一样会让用户先浏览一些其他界面,再决定是否进行注册。在注册/登录界面的背后,这有很多大量缓慢向上移动的图片,就像是一面照片墙。这也没有多余的描述、广告或其他元素,能让用户集中于信息本身。
 
undefined
 
 
快来起飞页自助建站平台搭建一个响应式网站吧!

登录后即可发表评论,立即登录.