如何设计好看又好卖的产品官网？5大设计要点

谈到企业产品的营销（本文所说的“企业产品”是指“面向企业客户的软件/应用”），一种观点认为必须通过线下推广来获取客户，另一种观点是应该允许用户主动购买而不是被动销售。 持有这种观点的企业特别注重通过产品官网获取客户。 不管你持哪种观点，不可否认的是，官网是客户对你产品的第一印象，很多潜在客户在购买前都是通过官网了解产品的。 然而，很多企业在产品官网设计上投入的精力还不如线下推广。 有的只把官网当成摆设，粗制滥造模板，甚至忽略了移动端的适配。

作为企业产品的设计师，我们如何设计一个好看又好卖的产品官网呢？ 有什么套路可循吗？

企业产品官网的作用是传递信息，促进转化。 信息是告诉访问者这个产品是什么/它能为你的公司做什么/为什么值得购买，然后配合一些说服手段促进转化——尽可能多的将访问者（潜在客户）转化为注册用户和最后完成购买。 根据用户浏览网站的先后顺序，主要设计有以下五点：

善用首屏大图吸引眼球

销售主张清楚地传达了产品价值

合理的导航方便访问者获取信息

无处不在的 CTA 推动转化

客户案例提升信任度

1.善用首屏大图吸引眼球

首屏大图占据了官网最珍贵的首屏，决定了访问者对官网的第一印象。 首屏大图可以辅助产品有效传达产品价值，同时影响官网的整体气质。 首屏大图常见的表现有5种：

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

在直播照片的形式上，企业级产品的表现力远不如消费级产品（仅对比苹果官网），因为企业的业务属性决定了它们无法像消费级产品那样大胆展现个性。 企业的产品官网一般会用客户使用产品的照片来说明产品给工作带来的好处，或者用一些开阔的风景照片来表达企业的价值观和愿景。

这种传统的照片形式在一些大公司很常见，比如微软的CRM产品365：

客户服务应用程序用于表达公司的未来愿景：

2.概念图用隐喻表达产品价值

设计加工后的概念图比实物照片有更多的表达空间，可以通过一些比喻传达产品价值。

使用视觉概念图来帮助传达产品的价值主张——我们可以伸出援手。

3.插图最适合讲故事

近年来，一些企业重塑品牌，向年轻化、活力化方向发展。 插画的形式有利于塑造轻松时尚的品牌气质，也是最适合讲故事的表现形式。

充满活力的手绘插图描绘了工作中的混乱场景，导致使用可以结束一切的概念：

色彩鲜艳的图解描绘了一起工作的工作场景，凸显了“Team up”的产品价值主张：

4、产品界面图简洁直观

简单直观的使用产品界面图作为首屏大图，让用户在产品使用过程中有直观的体验，也是对自己产品设计自信的体现。

云存储应用Box以产品界面和图片混搭的形式表达了“Work as One”的产品理念：

5.客户照片更有说服力

以真实客户画像作为首屏大图，同时作为客户案例，让产品更具说服力。

自助建站应用使用高清客户画像和产品界面，表达其应用可以为不同人群定制专属网站的理念：

6.视频是趋势

以视频代替静态图片出现在首屏已成为近年来的流行趋势。 与静态图片相比，动态视频更容易吸引眼球。 视频内容可以是产品功能讲解/客户案例讲述/企业文化传播等，视频的触发方式有自动播放/预加载/点击播放等。

自助建站应用的首页视频融合了各类用户的生活状态和使用场景，表达了“DO WHAT YOU LOVE”的产品理念：

尖端：

1、首屏大图和销售主张是官网的重中之重，不仅是营销的核心，也是页面布局和表现的核心。

2.首屏图片是传达产品品牌的绝佳机会。

3、不同的子产品页面可以使用不同的首屏大图，但要注意尺寸和风格保持一致。

2. 销售主张清楚地传达了产品的价值

用户被首屏的大图吸引后，要想进一步留住客户，就必须立即向他们传达产品的核心价值，让他了解购买你的产品的好处。 在营销界，这被称为 USP ( )，意思是“独特的销售主张”。

1. 销售主张需要多重强调

在企业产品官网上，销售主张会多次出现，一个完整的销售主张通常由以下三个基本部分组成：首屏标题、强化说明和最后重述。

A。 第一屏标题

首屏标题是 USP 的核心，简短明了是有力的开场白。 一般位于官网首屏最显眼的位置，用大字体突出显示，旁边可以辅以小字。

的首屏标题简短而有力：

b. 加强细化

用于加强和丰富 USP，使其显得更有说服力。 可以从正面列出产品功能，强调产品优势，也可以从侧面进行确认，如成功案例、资质证书等。

使用与首屏标题相同风格的文案，配合界面图强化USP：

C。 最后重述

当访问者浏览长长的增强说明并浏览到页面底部时，他最终重申了 USP，从头到尾呼应。

页面底部的最后重述带有转化的号召性用语：

2.文案风格影响你的销售主张的表现力

根据不同的产品功能和品牌调性，销售主张的文案风格也不同，主要有以下几种：

A。 清晰直接的功能说明

清晰直接的函数式语句可能会有点乏味，但它们是最直观易懂的。 关于您的产品用途的一句话陈述比含糊不清的描述更有可能给访问者留下深刻印象。

Xero 是一款为小型企业提供会计服务的应用程序。 他们用一句话清楚地传达了Xero的功能价值和目标用户：

b. 令人印象深刻的号召性用语

使用强大而清晰的内容来号召用户采取行动。 使用此类 USP 的公司通常已经建立了一定的用户群和品牌形象。

光看Asana的标题是不是很难猜到这家公司提供什么服务？ 即便如此，这些短小大气的标语依然能给人留下深刻的印象：

C。 抓住用户痛点，引发情感共鸣

这种类型一般是从消极的方面描述痛点，比如“工作不用那么麻烦，可以用xxx……”，然后引出可以解决这些痛点的产品。 这是一种逆向思维，通过描述产品可以“避免负面结果”，与“获得正面结果”相反，来突出其解决问题的能力。

整个官网的措辞风格是这样的：

d. 动态一体机

在查找案例的过程中，还发现了一个动态的一体式文案表达。 它的做法是保持核心副本不变，其余不断切换。 动态的表现形式更加醒目，也更加全面地展示了USP。

其品牌的核心价值是“make by”，所以核心文案在动态中保持不变，切换开头的主题，突出产品的适用范围：

尖端：

1.规划USP时，站在客户的角度，强调你的产品能给他们带来什么好处。

2.不要怕首屏标题太短，功能说明不清楚。 旁边小字的作用是补充说明，丰富版面。

3.没有人喜欢空洞的营销口号和行话。 客户喜欢简单明了的 USP，可以解答疑惑。

3、合理的导航方便访问者获取信息

一旦访问者被您的首屏形象和价值主张所吸引，他或她接下来要做的就是浏览您的网站以了解更多信息。 合理清晰的导航可以引导访问者快速找到他们想要的信息。 导航是网站的路标，是网站组织结构的体现。 如果访问者的浏览体验不顺畅，他们就会对您的产品和公司失去信心。

1.并不是所有的网站都需要导航

导航是网站组织结构的体现。 在规划网站架构之前，先明确一个问题：我们需要导航吗？ 当你的目的是引导访问者按照预设的路径进行浏览，而不想让访问者跳出当前页面时，此时就不需要导航了。 这样的网站组织方式也称为线性结构：

对于功能简单的产品，采用线性结构可以有效带动访客参与，促进转化行为。 企业产品官网的路径一般是头部图片-产品展示-注册试用。

比如办公协同应用官网顶部没有导航，只预留了登录和注册入口。 页面信息按照“页眉图片-功能概览-功能详情-客户展示-注册试用”由浅入深、由宏观到微观的顺序组织，引导访问者完成浏览和转化。 页面底部会出现一行弱链接：

线性结构的缺点是访问者无法按照他们想要的方式浏览网站，例如，当他们找不到他们渴望了解的关键信息（如价格页面）时，他们可能会感到沮丧。

2.越扁平越有效

使用扁平化结构可以减少网页的深度，让访问者以更少的点击次数到达目标页面，也有利于搜索引擎抓取的效率。 在寻找企业产品官网案例的过程中，我发现大部分功能比较简单的产品都使用一级导航，而对于规模较大的产品，其导航级别最多只能到二级。 可见，扁平化结构的导航是网站导航的主流。

比如企业邮件应用和Slack就是扁平化结构的典型代表。 他们的导航只有一层，所有的页面入口都放在外面。 最重要的功能和定价位于前两个位置，其余按重要性降序排列。 最右边通常有一个注册或登录入口：

对于一些大型企业产品，首先要尽可能简化选项，舍弃不必要的信息，隐藏次要信息，然后再考虑在有限的空间内展示完整的信息入口。

比如是一个大型的CRM应用，公司有3个子产品。 官网首页有5个一级导航，其中前两个是折叠导航。 最重要导航的下拉菜单按照产品和解决方案两个维度展示相应的信息。 带有图标和介绍，有序直观：

在下拉菜单中，收集了客户案例、帮助中心、产品演示等资源入口，并将这些信息以清晰的组织方式聚集在一起，让想了解更多信息的人可以自行探索：

也有大公司使用类似的结构：

3.确保访客知道他们在哪里

网站是一个虚拟空间，访问者在页面之间的跳转是不可预测的。 如果没有清晰的导航随时提醒他们所在的页面，他们早就迷路了。 为了让访问者时刻知道自己在哪里，需要在不同页面保持一致的导航，滚动页面时保持不变。

继续这个例子，主页导航在滚动时保持常驻。 当点击首页导航到达子产品页面时，导航保持不变，只是在原来的主LOGO旁边增加了一个子产品LOGO表示当前页面，点击主LOGO即可返回主页：

当子页面开始向下滚动时，导航会暂时消失，当它滚动到第一屏下方时，导航会出现并永久停留。 注意到此时导航样式悄然发生了变化——主LOGO被简化了，右侧部分变成了当前子产品页面的3个导航。 整个过渡过程非常自然：

再看看设计。 到达子产品页面后，主导航将被保留。 随着页面的滚动，子产品导航会推出主导航，取代主导航的位置：

尖端：

1.规划访客的浏览流程，保持顺畅自然的体验。

2. 保持导航结构一致，确保用户始终知道他们在哪里。

3. 保持导航简单，删除不必要的项目。

4. 简单就好，但要确保提供访问者所需信息的访问权限。

4. 无处不在的 CTA 推动转化

CTA（Call to，user call）是指访问者在浏览官网时期望完成的指定行为，通常包括：注册、试用申请、邮件订阅、软件下载等。CTA是推广该网站的主要手段官网转换。 对于企业产品官网来说，醒目的CTA按钮是标配。

1.视觉风格一定要抢眼

既然官网的目标是完成转化，那么CTA按钮一定是整个页面最醒目的、最吸引眼球的。 许多研究表明，绿色按钮的点击率最高，其次是蓝色按钮，但我认为这不是绝对的。 按钮的颜色取决于官网的整体配色方案和品牌基调。 在此前提下，增加对比度，让按钮从背景中脱颖而出。 风格突出核心CTA，次要CTA可以相对弱化。

按钮使用品牌颜色：红色。

2、文案需要触发点击的欲望

CTA按钮的文案应该是一目了然的动词短语。 使用“立即/立即”等具有紧迫感的词或“免费”等利益导向的词，可以有效激起用户的点击欲望。 常用的文案有：免费/立即试用、免费/立即注册、观看演示、了解更多等。

CTA按钮会在网页上多次出现，所以文案最好保持一致。 进阶的方法是根据用户浏览的上下文，使用更有针对性的文案。

3.保持可见，重复

CTA按钮一般与销售主张同时出现，主要分布在官网三个位置：顶部导航、首屏大图、页面底部。 顶部导航的位置可以保证按钮始终可见。 首屏大图按钮是视觉核心，页面底部位置是终极调用。 三个位置相互呼应，缺一不可。

4. 不要忽视次要 CTA

原则上应该只有一个CTA按钮，但近年来，越来越多的企业产品官网会在主CTA按钮旁边放置一个二级CTA按钮，为访问者提供二次选择。 在退而求其次的情况下。 对于企业产品的用户，在注册前提供产品试用或视频演示，可以大大增强对产品的了解。

5.嵌入简单表格，降低注册门槛

在 CTA 按钮旁边放置一个简单的内联表单可以简化后续的转换过程。 例如，当用户点击注册按钮时，一般需要填写用户名、邮箱、密码等信息，如果表单项比较复杂，用户很可能会放弃填写。 如果一开始只需要邮箱地址，这样就大大降低了注册门槛。 另一方面，即使用户放弃填写后续的注册流程，公司至少已经拿到了客户的邮箱信息。

像这样的电子邮件表单是最常见的：

然后直接列出所有需要填写的注册项，适用于注册项少于三个的情况：

5、客户案例提升信任度

企业级（to B）产品不像消费者级（to C）产品那样常见和容易获得。 企业客户在选择产品时更加谨慎。 官方网站应该有助于消除他们的疑虑并建立对产品的信任。 最好的方法是展示购买过产品的客户的成功故事。 你的客户是你产品的天然代言人，他们比你的产品本身更有说服力。

1.使用真实客户头像增加可信度

与纯文字展示相比，真实的客户头像可以大大提升客户评论的可信度。 比较下面的两个图像。