网站设计|10大创意教你设计网站主页

news/2024/11/25 2:39:27/

导语:通常情况下,网站主页并不是访客第一个访问的页面,大多数访客先是浏览了某篇文章,点击其中的某个链接,然后才调转到主页上。当用户发生这个动作后,说明你有很大机会将他们转化为邮件/RSS订阅读者,甚至成为你的顾客。

现在,很多企业的网站都做得越来越好了。流量分析与AB测试等工具的产生,让营销人员知道哪些要素能提高转化率、不可或缺值得改进,哪些要素可有可无,可以放弃。

现在为大家分享几个知名的网站主页,看看他们是怎么进行页面布局的,是如何利用并优化各种营销要素的,从而将访客转化成邮件的订阅者或网站的忠实读者。

光有一个漂亮的主页就够了么?

通过平日的观察,我发现一个有趣的现象:设计得不怎么样的主页转化效果往往优于漂亮的主页!!!

虽然这只是一种现象,并非定律,我们却可以从这种现象中得到一些思考和启示。

网站设计|10大创意教你设计网站主页

我通常用Craigslist的案例来分析。正如上图你所看到的,这个网站的主页就是一堆蓝色的文字链,设计者把他们按照一定的分类进行排放,这种设计就像1999年互联网刚开始兴起时的风格样式。但是效果却非常好,Craigslist是世界上最著名的分类广告网站。(请参照国内的58赶集)

那么企业该如何在“美和丑”之间找到一个平衡点,实现页面优化与用户转化的双赢效果呢?有一点我想说的是,企业并非将主页设计得最酷炫、最时尚才算成功。

优秀的研究案例

接下来我们就来看看一些优秀的网站设计案例。

优秀的网站很多,我今天只是从中选取了一些比较有代表性的网站进行分析,提炼出能够让广大企业学习、效仿的做法。

1. NeilPatel.com

图中文章标题:做了这三步,成就了我4百万的生意。

图中红色CTA:希望Neil帮我带来更多的生意

为了提高转化率,,Neil一直以来持续不断地对自己的网站进行更新。非常多的用户愿意提供自己的电话号码等联系方式来获取Neil网站上的最新内容。

2. ChrisDucker.com

网站设计|10大创意教你设计网站主页

Chris的页面设计做了较大更新。这个主页的转化率也非常高,这和主页背景上Chris的眼睛一直望向邮箱地址填写栏有关。稍后我们再分析为什么这样的背景图片能够提高转化率。

3. MarketingInc.com

网站设计|10大创意教你设计网站主页

这个网站是一个典型的主页设计很美但转化率不高的案例。主页转化效果的好坏在一定程度上取决于页面各要素的布局安排。如果将背景换成白色,去掉修饰,整个页面只留一个自主选择填写的信息栏,那么转化效果会比什么产品信息都有的复杂页面要好得多。

4. www.jszhaoye.com

网站设计|10大创意教你设计网站主页

这个网站页面设计和功能布局非常的棒。现在他们的主页右半边展示了许多健身爱好者的照片,从这个网站上我们也可以发现建立社会认同对提高主页转化率也非常重要。

5. WPMU DEV

WPMU DEV网站是用WordPress搭建的,并充分利用了WordPress平台的各种插件和主题。WPMU DEV在自己的主页上将他们设计的这些插件都展示出来,稍后我们会分析他们都做了哪些工作来吸引读者的阅读兴趣。

6. AWeber

网站设计|10大创意教你设计网站主页

最近,Aweber通过更新主页设计,转化率得到了明显的提升。正如图中banner文字描述的那样:你和用户的连接,一切从收件箱开始。

从这六个网站中总结的10条经验

从这些优秀的网站中,我们可以得到以下10点启示。记住,大多数主页页面、功能的优化都可以通过使用合适的WordPress插件或者是改几行代码就可以实现的,并不特别复杂,心动不如行动,让我们来看看该怎么做吧!

1、一个表达清晰、显示突出的CTA(行为激发)

本篇文章所提到的所有诀窍中最重要的一点就是,你的主页上应该有一个非常清晰明了的CTA(行为激发)。如果你能为这个CTA设计一种独特、抓人眼球的呈现形式则会锦上添花。此举目的在于让那些浏览主页的用户清楚地知道企业对他们的要求,希望他们做什么。页面内容不要过多,以免用户感到困惑。国外的Marketing Inc和AWeber公司的着陆页是非常值得大家参考借鉴的例子。

2、能够抓人眼球的图片

好的图片对于主页设计来说至关重要。我就在自己的博客主页上添加了一张长图片,这张图片让我的博客显得更加与众不同,上面所提到的所有网站也都非常擅长利用图片来吸引读者。特别是Chris Ducker(上面第二个案例),他是图片使用方面的专家,他将自己的照片放在网站主页上,照片中他的目光注视着网页上的信息栏和CTA,意在表示自己希望大家能够响应,用户往往会受到图片的暗示,注意力顺着他的目光看向右边,然后进行相应的动作,最终完成转化。

3、移动响应差异化

毋庸多说,移动设备的使用率超过了PC端,作为营销人员我们不得不重视这块新的蛋糕。由于显示屏幕和使用场景的不同,我们应将二者差别对待,我所说的差别不仅体现在文字大小、图片多少上,还在整个网页的设计思路和功能优化上。例如,我不会在移动端的网站上推销BlueHost(蓝色主机,是一款非常受欢迎的美国主机)的产品,因为在移动端,用户不太会注册完成购买。认真观察上述提到的六个网站在移动端和PC端上的不同,你会发现他们在移动端上省略掉了哪些功能和要素。

4、精心设计品牌风格

上述提到的六个主页都有一个相同点,即每个网站都有自己非常独特、突出的品牌风格。颜色、字体、排版、图片都高度和谐一致,各个要素都在为同一个营销目标服务。做到这点并不容易,但是如果做好了就更能让人感受到网站的专业性,从而提高转化率。如果你想让用户留下自己的邮箱、电话号码、信用卡等个人信息,你就必须让他们对你产生信任。提高专业程度能够增强用户对你的信任。因此,我们必须要做到网站不存在任何安全漏洞,保障用户的信息不会泄露。

5、概述产品优点(而非详细地罗列用户能得到什么)

营销界有一句名言:你应该专注于Benefits(用户能得到的好处)而不是features(你产品的特性)。这句话是说,你不需要在主页上将所有用户可以获得的东西全部具体地列出来,你要做的是给用户一些概念性的东西,告诉用户他们将会获得怎样的用户体验,会达成怎样的目标。例如,在Bodybuilding.com的主页上,他们打出了“改变你生活”这样一句话,而不是罗列你可以选择的健身项目。这就是语言的艺术。

6、提供吸引人的奖励

几乎所有优秀的主页都会为用户采取一些措施,以此诱惑、鼓励用户注册或者浏览更多的信息。Chris Ducker网站上,当用户注册网站完成某项任务之后,网页就会出现一个圆点记号,记录你的成就。这往往让用户很难忽视。

7、时间的敏感性

看一看Marketing Inc的主页,你会看到页面上有一个时钟,显示离下一场在线研讨会的召开还有多久。这种做法能够引起读者轻微的紧张感——当他们知道时间越来越少时他们就会产生一种紧迫感,从而采取行动。如果在主页上加上一个让人们产生时间紧迫感的要素,你就会看到注册人数大大增加。

8、稀缺性

Neil Patel举办的在线研讨会通常都有人数的限制。和时间紧迫感的原理一样,机会的稀缺性会让人们害怕丧失机会,从而促使人们快速做出决定采取行动。这种意识源自于远古时代,那个时候食物和住所是稀缺资源——当我们感到得不到这些资源的时候大脑就会发送信号让我们尽快采取行动来获取资源。

9、社会认同

社会认同在健身行业已经被广泛应用,他们多采用“健身前和健身后”的对比照片来让人信服,树立社会认同。这种做法简单又有效。Bodybuilding.com的主页上就可以看出这一点,看到别人健身取得的效果后你也会忍不住点击注册按钮,自己也来上几套训练。记住,你在主页上所举的例子必须是真实的,虚假信息在有些国家是违法的(更别说不合情理了)。如果这样做之后你的注册人数仍然没有增长,那么尝试着把你客户取得的证书或者企业的荣誉、奖励放在网站上。

10.背书担保

最近,我借鉴了Chris Ducker的一个做法,就是在选择性输入栏的下方标注我的博文曾经被哪些杂志期刊网站所转载。通过这种方式,证明我的文章是被广泛认可的,从而让新读者产生信任,消除他们留下联系方式时的不安和疑惑。要知道大多数用户都非常重视自己的个人隐私和信息安全。当企业要采取以上的方法对主页进行优化的时候,我建议你注意对优化前后的营销效果进行具体对比分析,看看所采取的措施是否真正有利于转化率的提高。在其他人身上有效的方法,放到你的企业身上不一定能成功。

如何设计一个漂亮的主页?

看到这里,你是不是开始羡慕别人的网站怎么能够设计地这么好?当你刚开始准备重新设计主页时,很容易陷入“主题单一”的误区。你花费在创造内容方面的时间越久,你就越没有精力扩展用户邮箱列表,越没有精力和读者互动,越没有精力优化网页设计。 此时你有三种出路:

1.自己设计主页,聘请程序员进行网页编码

如果你擅长美工,那么就自行设计一个新的主页,然后聘请专业的WordPress程序员为你编码。当然前提是你擅长美工,知道怎么利用各种插件来达到最好的效果,否则我不建议你采取这个做法。

2.聘请一个网页设计师

有大把优秀的网页设计师供你选择,他们是WordPress方面的专家,可以帮助你设计一个全新的、漂亮的主页。如果你希望你的主页可以更加个性化更加独树一帜,你的要求比较多的话,那么花费相对的也就比较多,可能需要几万块,但是如果你要求比较少,只是希望能够请一个人帮你重新优化主页的话,只需要花费少量预算就可以了——如果你能找到一个收费比较低的程序员来实现主页的话,花费就更少了。

3.购买新的主题

最后一种选择是最便宜最省事,而且可能,是效果最好的。那就是直接购买新主题。WordPress上提供许多主题供用户选择,这些主题都是经过设计师的精心设计,卖点就在于通过优化主页为博客主带来更多的转化率。我将用两个WordPress的主题案例来结束今天的文章。这两个主题是既美观又能有效提高转化率。如果你考虑更新主页的话可以考虑一下它们的设计。

1.基于Genesis 框架的StudioPress 主题

网站设计|10大创意教你设计网站主页

StudioPress和Genesis是Copyblogger公司推出的两个非常出色的产品。在短短几年时间内这些主题和框架成为了WordPress其他主题公司效仿的标准——它们不管是视觉效果还是营销效果都非常的好。我喜欢这个主题框架的原因之一在于,我相信他们会为我带来很好的效果,因为它们是由一群真正懂得网络营销的人设计开发出来的,这个团队的人知道什么样的主页能够产生最高的转化率。你需要一定的时间去适应新主题,但这一切都值得。在上述提到的六个网站中,至少有一个使用了这个平台提供的框架。

2. Theme Fusion公司出品的Avada 系列主题


网站设计|10大创意教你设计网站主页

我曾经接触过一家公司,这个公司吸引我的地方在于它可以实现无限制个性化定制的可能,你可以任意选择。同样,这也需要花费你一定的时间和精力去适应这些变化,一旦你熟悉之后你就发现它其实非常方便好用。以上两种都是十分出色的主题公司,它们的产品都非常注重留白和大幅图片——这两者对转化率至关重要,同时也是衡量一个主页是否优秀的标准之一。

你的主页是否美观?转化率够高吗?

能否把你对你的主页的看法告诉我?你的主页转化率理想吗?你是否满意它现在的样子?欢迎你在文章下方留言和我分享。

原文作者:Ramsay  译者:雷梦云@九枝兰 



http://www.ppmy.cn/news/332296.html

相关文章

十大网页设计者必看的网站

Alistapart - 老牌杂志、文章深刻 Designers Talk - 网页设计和开发论坛 Vitamin - 网页设计,质量高,web2.0 Design Meltdown - 网页设计趋势,博客分类详细 UX Magazine - 用户体验 Design Feed - RSS 聚合网页,包含各种与设计相关…

平面设计师经常去的网站——设计灵感类

1.Behance 平面设计类非常优秀的网站,集合了全世界优秀设计师作品。 2.Dribbble 设计师的必看网站,是个非常精致的学习和作品展示网站 3.Pinterest 全球最大的创意灵感图片分享网站 4.deviantart 插画艺术家的聚集地作品,时常看看对审美提高…

web开发灵感推荐--34个有吸引力的电影网站设计灵感

在设计师的工作当中,当你设计作品的时候,要考虑营销对于所做的产品有多少影响,今天有很多的设计师做出来的东西,只是单单的动一动,点击就滑动一下,说白了就是用的JS插件,如果要你做一个电影的网…

设计师使用的网站推荐

🍓素材网站 千图网:(种类齐全、设计师的拼图家园,你懂得) 素材中国:(免费素材网站) 三联素材网:(是一个以提供经典设计素材为主的资源网) 站长素材…

5个优秀设计网站,素材、灵感一步到位。

设计师找灵感,浏览各类设计网站是最好的选择。不仅能欣赏到优秀作品,还可以将作品的优点运用到自己的设计当中。不断探索,从而提高自己能力。 下面我就要分享5个设计师必逛的设计网站。赶紧收藏起来吧! 1、菜鸟图库 https://ww…

10 个Web3 设计灵感网站

10 个Web3 设计灵感网站:Cosmos、Axies Infinity、DeSo Foundation、Foundation App、Llama、Snapshot、Juicebox、Alchemy、RabbitHole 正如Twitter前首席执行官Jack Dorsey最近发的一条推文“你不拥有web3,但风险投资家拥有”,而Marc Andre…

设计师值得收藏的5个设计网站

作为设计师一定要知道这几个网站。 1、站酷网 https://www.zcool.com.cn/ 站酷网站主要以视觉为主的方式,呈现了很多设计、插画、摄影等作品。 在这里你可以看到很多设计界大佬的优秀作品,经常有各种设计类比赛,多看看获奖作品,…

10 个不错 Web3 设计灵感网站

正如 Twitter 的前 CEO Jack Dorsey 最近在推特上所说的“你不拥有 web3,但风险投资家拥有”,Marc Andreessen在 Web3 发表评论后阻止了他,这正在社区中开启关于 Web3 是否真的去中心化的讨论。然而,不可否认的是,Web3…