图片样式

几个网站设计的小技巧让你的传播更加有效

关于有较为单一产品和效劳的企业网站,他需求的是能简单、直接、而具有感染办的传达产品特性,通常这品种型的目的需求有效的转化效果。我们需求网站能做的是将普通访客转化为购置或业务咨询的用户。关于缺乏经历的客户通常会感到无从下手,这里简单的总出5个简单有效的小技巧,协助我们作为设计网站的考虑框架:


一、善用首屏海报图吸收留意力,传达中心价值

二、简单明了的表述产品价值,一定要直击用户关怀的价值

三、有效的导航设计,提供最便利的用户访问途径

四、注重CTA(Call to Action)的设计,提升转化率

五、罗列客户案例,加强信任感


善用首屏海报图吸收留意力,传达中心价值


首屏海报图占领了官网最珍贵的第一屏,它决议了访客对官网的第一印象。首屏海报图能够辅助产品广告语来有效传达产品价值,同时还会影响到官网整体的气质。


常见的首屏海报图有以下5种表现方式:


1、实景照片营造场景气氛

企业的商务属性决议了他们不能像消费级产品那样大胆地彰显个性。

企业产品官网普通会用客户运用产品的场景照来阐明产品给他们工作带来的好处,或用一些开阔的景色照来表现公司的价值观和愿景。

这种传统的照片方式常见于一些大公司,例如微软的CRM产品Microsoft Dynamics 365:

客服应用HelpCrunch则用来表现公司将来的愿景:


2.概念图用艺术化表达产品价值

经过设计处置之后的概念图,比真实照片的表现空间更大,能够经过一些艺术化的手法来传达产品价值。


Zendesk用形象的概念图来辅助传达产品的价值主张——We can lend a hand。


3.插画最合适讲故事

近年来一些企业重塑品牌向更年轻更有生机的方向开展。插画的方式有利于塑造轻松时髦的品牌气质,同时也是最合适用来讲故事的表达方式。


Intercom用生动的手绘风插画描画了一副工作中遭遇的紊乱场景,引出了运用Intercom能够完毕这一切紊乱的概念:


Atlassian用配色明快的图形插画描画了齐心协力的工作场景,衬托出“Team up”的产品价值主张:


4.产品界面图简单直观

简单直观的运用产品界面图作为首屏海报图,让用户对产品运用过程有一种直观的体验,也是一种关于本人产品的设计很有自信的表现。


云存储应用Box用产品界面和照片混搭的方式来表现“Work as One”的产品理念:

5.客户照片更具压服力

运用真实客户的肖像作为首屏海报图,兼具客户案例的作用,使产品更有压服力。


自助建站应用Squarespace用高清的客户肖像图配合产品界面,来表现他们的应用能够为不同人群定制专属网站的理念:

6.视频是盛行趋向

用视频替代静态图呈现在首屏成为近年来盛行的一大趋向,比起静态图,动态视频更容易吸收眼光。


自助建站应用Weebly的首页视频交融了各类用户的生活状态和运用场景,来表现“DO WHAT YOU LOVE”的产品理念:

Tips:

1.首屏海报图和促销文案是官网的重中之重,既是营销的中心,同时也是页面规划和表现的中心。

2.首屏海报图是传达产品品牌的绝佳时机。

3.不同子产品页能够用不同的首屏海报图,但是要留意尺寸微风格坚持分歧。

简单明了的表述产品价值,一定要直击用户关怀的价值


当用户被首屏海报图吸收住眼光之后,想要进一步留住客户,就必需立刻向他们传达产品的中心价值,让他明白购置你们的产品能够取得什么益处。在营销范畴,这被称为USP(Unique Selling Proposition),意为“共同的促销文案”。


1、促销文案需求屡次强调

在企业产品官网中,促销文案会屡次呈现,完好的促销文案通常会由以下三个根本局部组成:首屏标题、强化论述和最后重申。


a.首屏标题

首屏大标题是USP的中心,简短明白的广告语是一个强有力的收场白。


通常位于官网首屏最显眼的位置,用大字体突出,同时能够用小字在旁边停止辅助阐明。


MailChimp的首屏标题简短有力:

b.强化论述

用来强化和丰厚USP,让它看起来更有压服力。能够从正面动身罗列产品功用、强调产品优势,也能够从侧面来印证,比方胜利案例、资质证书等。


MailChimp用与首屏标题同样作风的文案,配合界面图来强化USP:


c.最后重新提示

当访客阅读了长篇的强化论述,阅读到页面底部时,最后再重申一下USP,首尾照应。


MailChimp在页面底部最后重申,号召转化行动:

2.文案作风会影响促销文案的表现力

依据不同的产品功用和品牌作风调性,促销文案的文案作风也各不相同,主要有以下几品种型:


a.明晰直白的功用陈说

明晰直白的功用陈说可能会有点无趣,但却是最直观、最易于了解的。用一句话讲分明你的产品是做什么的,比模糊其辞的描绘更容易让访客产生好感。


Xero是一款为小型企业提供会计效劳的应用,他们用一句话明晰传达了Xero的功用价值与目的用户:

b.令人印象深入的号召型言语

运用一些强有力、痛快利落的广告语,去号召用户行动。运用这类USP的公司普通都已树立了一定的用户根底和品牌形象。


光看Asana的大标题是不是很难猜到这个公司是提供什么效劳?即使如此,这几句简短大气的标语还是能给人留下深入印象:

c.抓住用户痛点,唤起情感共鸣

这品种型的广告语普通会从背面切入描绘痛点,例如“工作不用那么费事,用xxx你能够...”,然后引出产品能够处理这些痛点。


这是一种逆向思想,经过描绘产品能够“躲避负面结果”来突出其处理问题的才能,这是与“取得正面结果”相反的一种思绪。


Basecamp整个官网的措辞作风都是如此:

d.动态多合一

在寻觅案例的过程中,还发现了一种动态的多合一文案表现方式。它的做法是坚持中心文案固定不变,其他的则不时切换。动态的表现方式更吸睛,也赋予了USP更全面的展示。


Atlassian旗下的Confluence品牌的中心价值是“make better by working together”,因而在动态广告语中坚持中心文案不变,切换开头的主语来突出产品的适用范围:

Tips:

1.规划USP时要站在客户角度,强调你的产品能为他们带来什么益处。

2.不要怕首屏标题太短讲不清功用,旁边小字的作用就是补充阐明,同时丰厚排版。

3.没人会喜欢空泛的营销口号和行话,客户喜欢能解答疑惑、简单直白的USP。

有效的导航设计,提供最便利的用户访问途径


当访客被你的首屏海报图和价值主张吸收之后,接下来他可能想要在你的官网上四处看看理解更多信息。


合理明晰的导航能够率领访客快速找到想要的信息。导航是网站的路标,也是网站组织架构的表现。假如访客的阅读体验不顺畅,他们会对你的产品和公司失去自信心。


1.不是一切网站都需求导航

导航是网站组织架构的表现。在规划网站架构前,首先明白一个问题:我们能否需求导航?


当你的目的是引导访客依照预设途径停止阅读,不希望他们跳出当前页面,这个时分能够没有导航。这样的网站组织方式也叫线性构造:

关于功用简单的产品,运用线性构造能有效带动访客参与性,推进转化行为。企业产品官网的途径通常为头图-产品展现-注册试用。


例如办公协作应用Trelllo的官网顶部没有导航,只保存了登陆和注册入口。页面的信息组织依照“头图-功用总览-功用细节-客户展现-注册试用”的次第由浅入深、从宏观到微观的次第引导访客完成阅读和转化。到页面底部才会呈现一排弱弱的链接:

线性构造的优势在于访客不能依照本人的想法阅读网站,比方当他们找不到急迫想理解的关键信息比方价钱页时,可能会觉得懊丧。

2.越扁平越有效

运用扁平构造能够减小网页深度,让访客用较少的点击就能抵达目的页面,同时有利于搜索引擎抓取效率。


在寻觅企业产品官网案例的过程中我发现,关于功用相对简单的产品大多运用一级导航,而关于范围庞大的产品,他们的导航层级最多也只到二级。

例如企业邮件应用Mailchimp和Slack就是扁平构造的典型代表。它们的导航都只要一级,把一切页面入口都放在外面,最重要的功用、定价位于前两个位置,其他的依据重要性递加排列,最右边普通会放注册或登陆入口:

关于一些范围庞大的企业产品,首先要尽量精简选项,舍弃不用要的信息、躲藏次要信息,再思索在有限的空间里把信息入口展示完好。

以Intercom为例,它是一款大型CRM应用,公司旗下有三大子产品。官网首页设置了5个一级导航,其中前两个是折叠导航。最重要的Products导航的下拉菜单中依照产品和处理计划两个维度展现了对应的信息。配合icon和简介,有序又直观:


在Resource下拉菜单中则收拢了客户案例、协助中心、产品演示等资源入口,用明晰的组织方式把这些信息集中在一同,让想要理解更多信息的人本人去探究:

3.确保访客分明本人所处的位置

网站是一个虚拟空间,访客在页面之间的跳转是无法意料的。要让访客时辰晓得本人所处的位置,就要在不同页面上坚持导航的分歧性,并在滚动页面时坚持常驻。


继续以Intercom为例,首页导航在滚动时坚持常驻。当点击首页导航抵达子产品页面后,导航坚持分歧,只是在原先的主LOGO旁多了一个子产品LOGO来标明当前所在页面,点击主LOGO能够返回首页:

子页面开端向下滚动时导航暂且消逝,当滚动到首屏以下时导航呈现并常驻,留意到此时的导航款式曾经悄然发作了变化——简化了主LOGO,右边局部变成了3个针对当前子产品页面的导航:

再看看Atlassian的设计。抵达子产品页后会保存主导航,随着页面滚动,子产品导航会把主导航推出,继而替代主导航的位置:

Tips:

1.规划访客的阅读进程,坚持顺畅自然的体验。

2.坚持导航构造的分歧性,确保用户一直晓得本人所处的位置。

3.坚持导航的运用简单性,删除不用要项目。

4.简单很好,但是要确保提供了访客想要取得的信息入口。

注重CTA(Call to Action)的设计,提升转化率


CTA(Call to Action,用户行为召唤)是指希望访客在阅读官网时完成的指定行为,通常有:注册、申请试用、邮件订阅、软件下载等等。CTA是促进官网完成转化的主要手腕,关于企业产品官网,醒目的CTA按钮是标配。

1.视觉款式必需醒目

既然官网的目的是完成转化,那么CTA按钮一定是整个页面中最醒目、最聚焦视野的。


很多研讨证明绿色按钮的点击率最高,蓝色其次,但我以为这并不绝对。按钮颜色取决于官网的整体配色和品牌调性,在这个前提下,拉大比照度,让按钮从背景中突出即可。款式上突出中心CTA,次级CTA能够相对弱化。


Invision的按钮运用了品牌色:红色。

2.文案需求惹起点击愿望

CTA按钮文案应该是了如指掌的动词短语,运用含有紧迫感的文字例如“立刻/马上”,或者利益导向的文字例如“免费”,能够有效惹起用户的点击愿望。常用的文案有:免费/立刻试用、免费/立刻注册、观看演示、理解更多等等。


3.坚持不断可见,重复强调

CTA按钮普通与促销文案同时呈现,主要散布在官网的三个位置:顶部导航、首屏海报图、页面底部。


顶部导航的位置能够保证按钮不断可见,首屏海报图上的按钮是视觉中心,页面底部的位置则作为终极召唤。三个位置相互照应,缺一不可。


4.次级CTA也不容无视

准绳上来说CTA按钮应该只要一个,但近年来越来越多的企业产品官网会在主要CTA按钮旁边放一个次级CTA按钮,为访客提供第二选择,这样做能够让访客在不想点击主按钮的状况下退而求其次。


关于企业产品的用户来说,在注册之前提供产品试用或视频演示能大大促进对产品的理解。

5.嵌入简易表单,降低注册门槛

在CTA按钮旁放置一个简易的内嵌表单,相当于简化了后续的转化流程。


当用户点击注册按钮之后,假如表单项很复杂,用户很可能会放弃填写。假如一开端只需求填写邮箱,这就大大降低了注册门槛。


另外一方面,即便用户在后续的注册流程中放弃了填写,那企业至少曾经get到客户的邮箱信息了。


相似Shopify这样的邮箱表单是最常见的:

Webflow则直接把需求填写的注册项全列出来,这适用于注册项在三个以内的状况:

罗列客户案例,加强信任感


企业级(to B)产品不像消费级(to C)产品那么普遍和易获取,企业客户在选择产品的时分更为谨慎。


官网要协助消弭他们的疑虑,树立对产品的信任感,最好的方式就是把已购置产品的客户胜利案例展现出来。


1.用真实的客户头像提升可信度

比起单纯的文字展现,真实的客户头像能够大大提升客户评论的可信度。比照下面两张图感受一下。


Webflow的客户评论:

Intercom的客户评论:


2.讲故事,更容易感动用户

比起一句话评论,用户显然更容易承受并记住一个真实场景下的故事。


Intercom在客户故事这方面下足了功夫,每个重点客户都有内容丰厚的专题页,里面有客户公司简介,描绘了用Intercom的哪些产品处理了哪些问题,有从他们产品角度动身的第三人称描绘,也有客户的第一人称陈说:

越来越多的公司曾经不满足于静态讲故事,例如Invision,他们开端运用更专业、更有压服力的采访短片来作为客户胜利案例:

3.准确的数字更有压服力

比起描绘水平文案相似:这款产品协助我们“大大提升了效率”、“取得了更多用户咨询量”,人们更喜欢看到这样的描绘:这款产品协助我们“减少了18%的操作时间”、“提升了25%的用户咨询量”。准确的数字比含糊的范围来的更有依据、更有压服力。


Intercom的每个客户案例中都有准确的数据支撑:


4.大公司的案例会强化自信心

大公司的口碑效应还用说么。假如你有大客户,那毫不犹疑地把他们的LOGO展现出来吧。


看看Invision的大客户logo墙:


最后:

控制以上5点,根本上能够让你的产品网站变得有效可控。在网站运维的过程需求得有效的数据监控用以不时改网站的性能、体验、文案、规划等。