做企业官网的方法(3)
按照“头图-功能总览-功能细节-客户展示-注册试用”的顺序由浅入深、从宏观到微观的顺序引导访客完成浏览和转化。到页面底部才会出现一排弱弱的链接:
线性结构的劣势在于访客不能按照自己的想法浏览网站,比如当他们找不到急切想了解的关键信息比如价格页时,可能会觉得沮丧。
2.越扁平越有效
使用扁平结构可以减小网页深度,让访客用较少的点击就能到达目标页面,同时有利于搜索引擎抓取效率。在寻找企业产品官网案例的过程中我发现,对于功能相对简单的产品大多使用一级导航,而对于规模庞大的产品,他们的导航层级最多也只到二级。可见扁平结构的导航是网站导航的主流。
例如企业邮件应用Mailchimp和Slack就是扁平结构的典型代表,它们的导航都只有一级,把所有页面入口都放在外面,最重要的功能、定价位于前两个位置,其余的根据重要性递减排列,最右边一般会放注册或登陆入口:
对于一些规模庞大的企业产品,首先要尽量精简选项,舍弃不必要的信息、隐藏次要信息,再考虑在有限的空间里把信息入口展现完整。
以Intercom为例,它是一款大型CRM应用,公司旗下有三大子产品。官网首页设置了 5 个一级导航,其中前两个是折叠导航。最重要的Products导航的下拉菜单中按照产品和解决方案两个维度展示了对应的信息。配合icon和简介,有序又直观:
在Resource下拉菜单中则收拢了客户案例、帮助中心、产品演示等资源入口,用清晰的组织方式把这些信息集中在一起,让想要了解更多信息的人自己去探索:
使用类似结构的还有Atlassian等大型公司:
3.确保访客清楚自己所处的位置
网站是一个虚拟空间,访客在页面之间的跳转是无法预料的,如果没有清晰的导航在时刻提醒他们所在的页面,他们早就已经迷路了。要让访客时刻知道自己所处的位置,就要在不同页面上保持导航的一致性,并在滚动页面时保持常驻。
继续以Intercom为例,首页导航在滚动时保持常驻。当点击首页导航到达子产品页面后,导航保持一致,只是在原先的主LOGO旁多了一个子产品LOGO来表明当前所在页面,点击主LOGO可以返回首页:
子页面开始向下滚动时导航暂且消失,当滚动到首屏以下时导航出现并常驻,注意到此时的导航样式已经悄然发生了变化——简化了主LOGO,右边部分变成了 3 个针对当前子产品页面的导航。整个变化过程过渡地十分自然:
再看看Atlassian的设计。到达子产品页后会保留主导航,随着页面滚动,子产品导航会把主导航推出,继而代替主导航的位置:
Tips:
规划访客的浏览历程,保持顺畅自然的体验。保持导航结构的一致性,确保用户始终知道自己所处的位置。保持导航的使用简单性,删除不必要项目。简单很好,但是要确保提供了访客想要获得的信息入口。
四、无处不在的CTA推动转化
CTA(Call to Action,用户行为召唤)是指希望访客在浏览官网时完成的指定行为,通常有:注册、申请试用、邮件订阅、软件下载等等。CTA是促进官网完成转化的主要手段,对于企业产品官网,醒目的CTA按钮是标配。
1.视觉样式必须醒目
既然官网的目标是完成转化,那么CTA按钮一定是整个页面中最醒目、最聚焦视线的。很多研究证明绿色按钮的点击率最高,蓝色其次,但我认为这并不绝对。按钮颜色取决于官网的整体配色和品牌调性,在这个前提下,拉大对比度,让按钮从背景中突出即可。样式上突出核心CTA,次级CTA可以相对弱化。
Invision的按钮使用了品牌色:红色。
2.文案需要引发点击欲望
CTA按钮文案应该是一目了然的动词短语,使用含有紧迫感的文字例如“立即/马上”,或者利益导向的文字例如“免费”,可以有效引发用户的点击欲望。常用的文案有:免费/立即试用、免费/立即注册、观看演示、了解更多等等。
CTA按钮会在网页中出现多次,因此在文案上最好保持一致性,进阶方法是根据用户浏览的上下文使用更针对性的文案。
3.保持一直可见,反复强调
CTA按钮一般与销售主张同时出现,主要分布在官网的三个位置:顶部导航、首屏大图、页面底部。顶部导航的位置可以保证按钮一直可见,首屏大图上的按钮是视觉核心,页面底部的位置则作为终极呼唤。三个位置互相呼应,缺一不可。