图片样式

产品公司的官网设计如何能让其更美观

在谈到企业产品的营销时(本文中提到的“企业产品”是指“给企业客户运用的软件/应用”),一种观念以为客户肯定是靠线下推行来获取的,另一种观念以为应该让用户主动购置而不是被动采购,持这种观念的公司特别注重经过产品官网来获客。无论持哪种观念,不可承认的是官网是客户对你产品的第一印象,很多潜在客户在购置之前都是先经过官网来理解产品的。但是很多公司在产品官网设计这件事上投入的精神还不及线下推行的万分之一,有的只把官网当作摆设,粗制滥造套个模板完毕,以至还疏忽了挪动端适配。

作为企业产品的设计师,我们要如何设计美观又好卖的产品官网,有没有一些套路可循?

企业产品官网的作用是传达信息和促进转化。传达信息是通知访客这款产品是什么/能为你公司做什么/为什么值得我购置,再配合一些加强压服力的手腕来促进转化——将尽量多的访客(潜在客户)转化为注册用户并最终完成购置。依照用户阅读网站的次第,有以下5大设计要点:

善用首屏大图吸收视野

销售主张明白传达产品价值

合理的导航便当访客获取信息

无处不在的CTA推进转化

客户案例加强信任感

一. 善用首屏大图吸收视野

首屏大图占领了官网最珍贵的第一屏,它决议了访客对官网的第一印象。首屏大图能够辅助产品Slogan来有效传达产品价值,同时还会影响到官网整体的气质。常见的首屏大图有以下5种表现方式:

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

在实景照片这个方式上,企业级产品的表现力远不及消费级产品(比照一下Salesforce和Apple的官网就晓得了),由于企业的商务属性决议了他们不能像消费级产品那样大胆地彰显个性。企业产品官网普通会用客户运用产品的场景照来阐明产品给他们工作带来的好处,或用一些开阔的景色照来表现公司的价值观和愿景。

这种传统的照片方式常见于一些大公司,例如微软的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的中心,简短明白的slogan是一个强有力的收场白。通常位于官网首屏最显眼的位置,用大字体突出,同时能够用小字在旁边停止辅助阐明。

MailChimp的首屏标题简短有力:

b.强化论述

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

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

c.最后重申

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

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

2. 文案作风会影响销售主张的表现力

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

a.明晰直白的功用陈说

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

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

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

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

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

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

这品种型的slogan普通会从背面切入描绘痛点,例如“工作不用那么费事,用xxx你能够…”,然后引出产品能够处理这些痛点。这是一种逆向思想,经过描绘产品能够“躲避负面结果”来突出其处理问题的才能,这是与“取得正面结果”相反的一种思绪。

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

d.动态多合一

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

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

Tips:

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

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

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

三. 合理的导航便当访客获取信息

当访客被你的首屏大图和价值主张吸收之后,接下来他可能想要在你的官网上四处看看理解更多信息。合理明晰的导航能够率领访客快速找到想要的信息。导航是网站的路标,也是网站组织架构的表现。假如访客的阅读体验不顺畅,他们会对你的产品和公司失去自信心。

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

导航是网站组织架构的表现。在规划网站架构前,首先明白一个问题:我们能否需求导航?当你的目的是引导访客依照预设途径停止阅读,不希望他们跳出当前页面,这个时分能够没有导航。这样的网站组织方式也叫线性构造:

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

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

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

2. 越扁平越有效

运用扁平构造能够减小网页深度,让访客用较少的点击就能抵达目的页面,同时有利于搜索引擎抓取效率。在寻觅企业产品官网案例的过程中我发现,关于功用相对简单的产品大多运用一级导航,而关于范围庞大的产品,他们的导航层级最多也只到二级。可见扁平构造的导航是网站导航的主流。

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

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

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

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

运用相似构造的还有Atlassian等大型公司:

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

网站是一个虚拟空间,访客在页面之间的跳转是无法意料的,假如没有明晰的导航在时辰提示他们所在的页面,他们早就曾经迷路了。要让访客时辰晓得本人所处的位置,就要在不同页面上坚持导航的分歧性,并在滚动页面时坚持常驻。

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

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

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

Tips:

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

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

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

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

四. 无处不在的CTA推进转化

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

1. 视觉款式必需醒目

既然官网的目的是完成转化,那么CTA按钮一定是整个页面中最醒目、最聚焦视野的。很多研讨证明绿色按钮的点击率最高,蓝色其次,但我以为这并不绝对。按钮颜色取决于官网的整体配色和品牌调性,在这个前提下,拉大比照度,让按钮从背景中突出即可。款式上突出中心CTA,次级CTA能够相对弱化。

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

2. 文案需求引发点击愿望

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

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大要点之外,还有一些提升网站体验的办法,例如:A/B Test、响应式设计、优化加载时间等。

最后补充一点:关于消费级(to C)产品,例如我们熟习的Evernote、Dropbox,他们的运用者与他们官网的访客根本是同一个人。而关于企业级(to B)产品来说,产品运用者和购置者常常不是同一个人,也就是说产品运用者可能是客服人员,而官网的访客却可能是主管或采购之类担任买单的人。因而,企业产品官网的设计要统筹运用者和购置者的不同角色,洞察目的客户所在行业特征,最大化展现产品在提升企业效率或收益上的优势。