“诚，做人之本；信，为人之根，做个诚信的人是我们的根本。”在一春一夏，我们注重每一位客户提出的每个需求，我们充分考虑客户的每一个细节，我们一直在思考如何为客户创造更大的价值，意在让我们的每一位客户都成为我们的朋友...
在谈到企业产品的营销时(本文中提到的“企业产品”是指“给企业客户使用的软件/应用”)，一种观点认为客户肯定是靠线下推广来获取的，另一种观点认为应该让用户主动购买而不是被动推销，持这种观点的公司尤其重视通过产品官网来获客。无论持哪种观点，不可否认的是官网是客户对你产品的第一印象，很多潜在客户在购买之前都是先通过官网来了解产品的。然而很多公司在产品官网设计这件事上投入的精力还不及线下推广的万分之一，有的只把官网当作摆设，粗制滥造套个模板结束，甚至还忽略了移动端适配。
作为企业产品的设计师，我们要如何设计好看又好卖的产品官网，有没有一些套路可循?
企业产品官网的作用是传达信息和促进转化。传达信息是告诉访客这款产品是什么/能为你公司做什么/为什么值得我购买，再配合一些增强说服力的手段来促进转化——将尽量多的访客(潜在客户)转化为注册用户并最终完成购买。按照用户浏览网站的顺序，有以下5大设计要点：
善用首屏大图吸引视线
销售主张明确传达产品价值
合理的导航方便访客获取信息
无处不在的CTA推动转化
客户案例增强信任感
一. 善用首屏大图吸引视线
首屏大图占据了官网最宝贵的第一屏，它决定了访客对官网的第一印象。首屏大图可以辅助产品Slogan来有效传达产品价值，同时还会影响到官网整体的气质。常见的首屏大图有以下5种表现形式：
1. 实景照片营造场景氛围
在实景照片这个形式上，企业级产品的表现力远不及消费级产品(对比一下Salesforce和Apple的官网就知道了)，因为企业的商务属性决定了他们不能像消费级产品那样大胆地彰显个性。企业产品官网一般会用客户使用产品的场景照来说明产品给他们工作带来的益处，或用一些开阔的风景照来表现公司的价值观和愿景。
这种传统的照片形式常见于一些大公司，例如微软的CRM产品Microsoft Dynamics 365：
2. 概念图用隐喻表达产品价值
经过设计处理之后的概念图，比真实照片的表现空间更大，可以通过一些隐喻的手法来传达产品价值。
Zendesk用形象的概念图来辅助传达产品的价值主张——We can lend a hand。
Atlassian用配色明快的图形插画描绘了齐心协力的工作场景，烘托出“Team up”的产品价值主张：
5. 客户照片更具说服力
使用真实客户的肖像作为首屏大图，兼具客户案例的作用，使产品更有说服力。
自助建站应用Squarespace用高清的客户肖像图配合产品界面，来表现他们的应用可以为不同人群定制专属网站的理念：
b.强化阐述
用来强化和丰富USP，让它看起来更有说服力。可以从正面出发列举产品功能、强调产品优势，也可以从侧面来印证，比如成功案例、资质证书等。
MailChimp用与首屏标题同样风格的文案，配合界面图来强化USP：
2. 文案风格会影响销售主张的表现力
根据不同的产品功能和品牌调性，销售主张的文案风格也各不相同，主要有以下几种类型：
a.清晰直白的功能陈述
清晰直白的功能陈述可能会有点无趣，但却是最直观、最易于理解的。用一句话讲清楚你的产品是做什么的，比含糊其辞的描述更容易让访客产生好感。
Xero是一款为小型企业提供会计服务的应用，他们用一句话清晰传达了Xero的功能价值与目标用户：
c.抓住用户痛点，唤起情感共鸣
这种类型的slogan一般会从反面切入描述痛点，例如“工作不用那么麻烦，用xxx你可以…”，然后引出产品可以解决这些痛点。这是一种逆向思维，通过描述产品可以“规避负面结果”来突出其解决问题的能力，这是与“获得正面结果”相反的一种思路。
Basecamp整个官网的措辞风格都是如此：
Tips：
1.规划USP时要站在客户角度，强调你的产品能为他们带来什么好处。
2.不要怕首屏标题太短讲不清功能，旁边小字的作用就是补充说明，同时丰富排版。
3.没人会喜欢空洞的营销口号和行话，客户喜欢能解答疑惑、简单直白的USP。
三. 合理的导航方便访客获取信息
当访客被你的首屏大图和价值主张吸引之后，接下来他可能想要在你的官网上四处看看了解更多信息。合理清晰的导航可以带领访客快速找到想要的信息。导航是网站的路标，也是网站组织架构的体现。如果访客的浏览体验不顺畅，他们会对你的产品和公司失去信心。
1. 不是所有网站都需要导航
导航是网站组织架构的体现。在规划网站架构前，首先明确一个问题：我们是否需要导航?当你的目的是引导访客按照预设路径进行浏览，不希望他们跳出当前页面，这个时候可以没有导航。这样的网站组织方式也叫线性结构：
对于一些规模庞大的企业产品，首先要尽量精简选项，舍弃不必要的信息、隐藏次要信息，再考虑在有限的空间里把信息入口展现完整。
以Intercom为例，它是一款大型CRM应用，公司旗下有三大子产品。官网首页设置了5个一级导航，其中前两个是折叠导航。最重要的Products导航的下拉菜单中按照产品和解决方案两个维度展示了对应的信息。配合icon和简介，有序又直观：
使用类似结构的还有Atlassian等大型公司：
子页面开始向下滚动时导航暂且消失，当滚动到首屏以下时导航出现并常驻，注意到此时的导航样式已经悄然发生了变化——简化了主LOGO，右边部分变成了3个针对当前子产品页面的导航。整个变化过程过渡地十分自然：
Tips：
1.规划访客的浏览历程，保持顺畅自然的体验。
2.保持导航结构的一致性，确保用户始终知道自己所处的位置。
3.保持导航的使用简单性，删除不必要项目。
4.简单很好，但是要确保提供了访客想要获得的信息入口。
四. 无处不在的CTA推动转化
CTA(Call to Action，用户行为召唤)是指希望访客在浏览官网时完成的指定行为，通常有：注册、申请试用、邮件订阅、软件下载等等。CTA是促进官网完成转化的主要手段，对于企业产品官网，醒目的CTA按钮是标配。
1. 视觉样式必须醒目
既然官网的目标是完成转化，那么CTA按钮一定是整个页面中最醒目、最聚焦视线的。很多研究证明绿色按钮的点击率最高，蓝色其次，但我认为这并不绝对。按钮颜色取决于官网的整体配色和品牌调性，在这个前提下，拉大对比度，让按钮从背景中突出即可。样式上突出核心CTA，次级CTA可以相对弱化。
Invision的按钮使用了品牌色：红色。
5. 嵌入简易表单，降低注册门槛
在CTA按钮旁放置一个简易的内嵌表单，相当于简化了后续的转化流程。例如，当用户点击注册按钮之后一般会被要求填写用户名、邮箱、密码等信息，如果表单项很复杂，用户很可能会放弃填写。如果一开始只要求填写邮箱，这就大大降低了注册门槛。另外一方面，即使用户在后续的注册流程中放弃了填写，那企业至少已经get到客户的邮箱信息了。
类似Shopify这样的邮箱表单是最常见的：
五. 客户案例增强信任感
企业级(to B)产品不像消费级(to C)产品那么普遍和易获取，企业客户在选择产品的时候更为慎重，官网要帮助消除他们的疑虑，建立对产品的信任感，最好的方式就是把已购买产品的客户成功案例展示出来。你的客户就是你产品天生的代言人，他们比你的产品本身更有说服力。
1. 用真实的客户头像提升可信度
比起单纯的文字展示，真实的客户头像可以大大提升客户评论的可信度。对比下面两张图感受一下。
Webflow的客户评论：
2. 讲故事，更容易打动用户
比起一句话评论，用户显然更容易接受并记住一个真实场景下的故事。有的企业官网会花一整个版面的篇幅来讲这个故事，从痛点到使用过程再到最后的获益，有理有据令人信服。
Intercom在客户故事这方面下足了功夫，每个重点客户都有内容丰富的专题页，里面有客户公司简介，描述了用Intercom的哪些产品解决了哪些问题，有从他们产品角度出发的第三人称描述，也有客户的第一人称陈述：
3. 精确的数字更有说服力
比起描述程度文案类似：这款产品帮助我们“大大提升了效率”、“获得了更多用户咨询量”，人们更喜欢看到这样的描述：这款产品帮助我们“减少了18%的操作时间”、“提升了25%的用户咨询量”。精确的数字比模糊的范围来的更有根据、更有说服力。
Intercom的每个客户案例中都有精确的数据支撑：
写在最后
除了上面提到的5大要点之外，还有一些提升网站体验的方法，例如：A/B Test、响应式设计、优化加载时间等。
最后补充一点：对于消费级(to C)产品，例如我们熟悉的Evernote、Dropbox，他们的使用者与他们官网的访客基本是同一个人。而对于企业级(to B)产品来说，产品使用者和购买者往往不是同一个人，也就是说产品使用者可能是客服人员，而官网的访客却可能是主管或采购之类负责买单的人。因此，企业产品官网的设计要兼顾使用者和购买者的不同角色，洞察目标客户所在行业特征，最大化展示产品在提升企业效率或收益上的优势。
来源：isux 作者：鱼小干
【一春一夏】我们以网站定制开发、APP/小程序系统定制开发为核心业务。我们坚持为“您”提供一站式系统解决方案。我们奉行“登上峰顶，不是为了饱览风光，是为了寻找更高的山峰”为理念，让我们始终阔步向前。
