談到企業(yè)產(chǎn)品的營銷（本文所說的“企業(yè)產(chǎn)品”是指“面向企業(yè)客戶的軟件/應(yīng)用”），一種觀點(diǎn)認(rèn)為必須通過線下推廣來獲取客戶，另一種觀點(diǎn)是應(yīng)該允許用戶主動(dòng)購買而不是被動(dòng)銷售。 持有這種觀點(diǎn)的企業(yè)特別注重通過產(chǎn)品官網(wǎng)獲取客戶。 不管你持哪種觀點(diǎn)，不可否認(rèn)的是，官網(wǎng)是客戶對(duì)你產(chǎn)品的第一印象，很多潛在客戶在購買前都是通過官網(wǎng)了解產(chǎn)品的。 然而，很多企業(yè)在產(chǎn)品官網(wǎng)設(shè)計(jì)上投入的精力還不如線下推廣。 有的只把官網(wǎng)當(dāng)成擺設(shè)，粗制濫造模板，甚至忽略了移動(dòng)端的適配。

作為企業(yè)產(chǎn)品的設(shè)計(jì)師，我們?nèi)绾卧O(shè)計(jì)一個(gè)好看又好賣的產(chǎn)品官網(wǎng)呢？ 有什么套路可循嗎？

企業(yè)產(chǎn)品官網(wǎng)的作用是傳遞信息，促進(jìn)轉(zhuǎn)化。 信息是告訴訪問者這個(gè)產(chǎn)品是什么/它能為你的公司做什么/為什么值得購買，然后配合一些說服手段促進(jìn)轉(zhuǎn)化——盡可能多的將訪問者（潛在客戶）轉(zhuǎn)化為注冊(cè)用戶和最后完成購買。 根據(jù)用戶瀏覽網(wǎng)站的先后順序，主要設(shè)計(jì)有以下五點(diǎn)：

善用首屏大圖吸引眼球

銷售主張清楚地傳達(dá)了產(chǎn)品價(jià)值

合理的導(dǎo)航方便訪問者獲取信息

無處不在的 CTA 推動(dòng)轉(zhuǎn)化

客戶案例提升信任度

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

首屏大圖占據(jù)了官網(wǎng)最珍貴的首屏，決定了訪問者對(duì)官網(wǎng)的第一印象。 首屏大圖可以輔助產(chǎn)品有效傳達(dá)產(chǎn)品價(jià)值，同時(shí)影響官網(wǎng)的整體氣質(zhì)。 首屏大圖常見的表現(xiàn)有5種：

1.實(shí)景照片營造場(chǎng)景氛圍

在直播照片的形式上，企業(yè)級(jí)產(chǎn)品的表現(xiàn)力遠(yuǎn)不如消費(fèi)級(jí)產(chǎn)品（僅對(duì)比蘋果官網(wǎng)），因?yàn)槠髽I(yè)的業(yè)務(wù)屬性決定了它們無法像消費(fèi)級(jí)產(chǎn)品那樣大膽展現(xiàn)個(gè)性。 企業(yè)的產(chǎn)品官網(wǎng)一般會(huì)用客戶使用產(chǎn)品的照片來說明產(chǎn)品給工作帶來的好處，或者用一些開闊的風(fēng)景照片來表達(dá)企業(yè)的價(jià)值觀和愿景。

這種傳統(tǒng)的照片形式在一些大公司很常見，比如微軟的CRM產(chǎn)品365：

客戶服務(wù)應(yīng)用程序用于表達(dá)公司的未來愿景：

2.概念圖用隱喻表達(dá)產(chǎn)品價(jià)值

設(shè)計(jì)加工后的概念圖比實(shí)物照片有更多的表達(dá)空間，可以通過一些比喻傳達(dá)產(chǎn)品價(jià)值。

使用視覺概念圖來幫助傳達(dá)產(chǎn)品的價(jià)值主張——我們可以伸出援手。

3.插圖最適合講故事

近年來，一些企業(yè)重塑品牌，向年輕化、活力化方向發(fā)展。 插畫的形式有利于塑造輕松時(shí)尚的品牌氣質(zhì)，也是最適合講故事的表現(xiàn)形式。

充滿活力的手繪插圖描繪了工作中的混亂場(chǎng)景，導(dǎo)致使用可以結(jié)束一切的概念：

色彩鮮艷的圖解描繪了一起工作的工作場(chǎng)景，凸顯了“Team up”的產(chǎn)品價(jià)值主張：

4、產(chǎn)品界面圖簡(jiǎn)潔直觀

簡(jiǎn)單直觀的使用產(chǎn)品界面圖作為首屏大圖，讓用戶在產(chǎn)品使用過程中有直觀的體驗(yàn)，也是對(duì)自己產(chǎn)品設(shè)計(jì)自信的體現(xiàn)。

云存儲(chǔ)應(yīng)用Box以產(chǎn)品界面和圖片混搭的形式表達(dá)了“Work as One”的產(chǎn)品理念：

5.客戶照片更有說服力

以真實(shí)客戶畫像作為首屏大圖，同時(shí)作為客戶案例，讓產(chǎn)品更具說服力。

自助建站應(yīng)用使用高清客戶畫像和產(chǎn)品界面，表達(dá)其應(yīng)用可以為不同人群定制專屬網(wǎng)站的理念：

6.視頻是趨勢(shì)

以視頻代替靜態(tài)圖片出現(xiàn)在首屏已成為近年來的流行趨勢(shì)。 與靜態(tài)圖片相比，動(dòng)態(tài)視頻更容易吸引眼球。 視頻內(nèi)容可以是產(chǎn)品功能講解/客戶案例講述/企業(yè)文化傳播等，視頻的觸發(fā)方式有自動(dòng)播放/預(yù)加載/點(diǎn)擊播放等。

自助建站應(yīng)用的首頁視頻融合了各類用戶的生活狀態(tài)和使用場(chǎng)景，表達(dá)了“DO WHAT YOU LOVE”的產(chǎn)品理念：

尖端：

1、首屏大圖和銷售主張是官網(wǎng)的重中之重，不僅是營銷的核心，也是頁面布局和表現(xiàn)的核心。

2.首屏圖片是傳達(dá)產(chǎn)品品牌的絕佳機(jī)會(huì)。

3、不同的子產(chǎn)品頁面可以使用不同的首屏大圖，但要注意尺寸和風(fēng)格保持一致。

2. 銷售主張清楚地傳達(dá)了產(chǎn)品的價(jià)值

用戶被首屏的大圖吸引后，要想進(jìn)一步留住客戶，就必須立即向他們傳達(dá)產(chǎn)品的核心價(jià)值，讓他了解購買你的產(chǎn)品的好處。 在營銷界，這被稱為 USP ( )，意思是“獨(dú)特的銷售主張”。

1. 銷售主張需要多重強(qiáng)調(diào)

在企業(yè)產(chǎn)品官網(wǎng)上，銷售主張會(huì)多次出現(xiàn)，一個(gè)完整的銷售主張通常由以下三個(gè)基本部分組成：首屏標(biāo)題、強(qiáng)化說明和最后重述。

A。 第一屏標(biāo)題

首屏標(biāo)題是 USP 的核心，簡(jiǎn)短明了是有力的開場(chǎng)白。 一般位于官網(wǎng)首屏最顯眼的位置，用大字體突出顯示，旁邊可以輔以小字。

的首屏標(biāo)題簡(jiǎn)短而有力：

b. 加強(qiáng)細(xì)化

用于加強(qiáng)和豐富 USP，使其顯得更有說服力。 可以從正面列出產(chǎn)品功能，強(qiáng)調(diào)產(chǎn)品優(yōu)勢(shì)，也可以從側(cè)面進(jìn)行確認(rèn)，如成功案例、資質(zhì)證書等。

使用與首屏標(biāo)題相同風(fēng)格的文案，配合界面圖強(qiáng)化USP：

C。 最后重述

當(dāng)訪問者瀏覽長(zhǎng)長(zhǎng)的增強(qiáng)說明并瀏覽到頁面底部時(shí)，他最終重申了 USP，從頭到尾呼應(yīng)。

頁面底部的最后重述帶有轉(zhuǎn)化的號(hào)召性用語：

2.文案風(fēng)格影響你的銷售主張的表現(xiàn)力

根據(jù)不同的產(chǎn)品功能和品牌調(diào)性，銷售主張的文案風(fēng)格也不同，主要有以下幾種：

A。 清晰直接的功能說明

清晰直接的函數(shù)式語句可能會(huì)有點(diǎn)乏味，但它們是最直觀易懂的。 關(guān)于您的產(chǎn)品用途的一句話陳述比含糊不清的描述更有可能給訪問者留下深刻印象。

Xero 是一款為小型企業(yè)提供會(huì)計(jì)服務(wù)的應(yīng)用程序。 他們用一句話清楚地傳達(dá)了Xero的功能價(jià)值和目標(biāo)用戶：

b. 令人印象深刻的號(hào)召性用語

使用強(qiáng)大而清晰的內(nèi)容來號(hào)召用戶采取行動(dòng)。 使用此類 USP 的公司通常已經(jīng)建立了一定的用戶群和品牌形象。

光看Asana的標(biāo)題是不是很難猜到這家公司提供什么服務(wù)？ 即便如此，這些短小大氣的標(biāo)語依然能給人留下深刻的印象：

C。 抓住用戶痛點(diǎn)，引發(fā)情感共鳴

這種類型一般是從消極的方面描述痛點(diǎn)，比如“工作不用那么麻煩，可以用xxx……”，然后引出可以解決這些痛點(diǎn)的產(chǎn)品。 這是一種逆向思維，通過描述產(chǎn)品可以“避免負(fù)面結(jié)果”，與“獲得正面結(jié)果”相反，來突出其解決問題的能力。

整個(gè)官網(wǎng)的措辭風(fēng)格是這樣的：

d. 動(dòng)態(tài)一體機(jī)

在查找案例的過程中，還發(fā)現(xiàn)了一個(gè)動(dòng)態(tài)的一體式文案表達(dá)。 它的做法是保持核心副本不變，其余不斷切換。 動(dòng)態(tài)的表現(xiàn)形式更加醒目，也更加全面地展示了USP。

其品牌的核心價(jià)值是“make by”，所以核心文案在動(dòng)態(tài)中保持不變，切換開頭的主題，突出產(chǎn)品的適用范圍：

尖端：

1.規(guī)劃USP時(shí)，站在客戶的角度，強(qiáng)調(diào)你的產(chǎn)品能給他們帶來什么好處。

2.不要怕首屏標(biāo)題太短，功能說明不清楚。 旁邊小字的作用是補(bǔ)充說明，豐富版面。

3.沒有人喜歡空洞的營銷口號(hào)和行話。 客戶喜歡簡(jiǎn)單明了的 USP，可以解答疑惑。

3、合理的導(dǎo)航方便訪問者獲取信息

一旦訪問者被您的首屏形象和價(jià)值主張所吸引，他或她接下來要做的就是瀏覽您的網(wǎng)站以了解更多信息。 合理清晰的導(dǎo)航可以引導(dǎo)訪問者快速找到他們想要的信息。 導(dǎo)航是網(wǎng)站的路標(biāo)，是網(wǎng)站組織結(jié)構(gòu)的體現(xiàn)。 如果訪問者的瀏覽體驗(yàn)不順暢，他們就會(huì)對(duì)您的產(chǎn)品和公司失去信心。

1.并不是所有的網(wǎng)站都需要導(dǎo)航

導(dǎo)航是網(wǎng)站組織結(jié)構(gòu)的體現(xiàn)。 在規(guī)劃網(wǎng)站架構(gòu)之前，先明確一個(gè)問題：我們需要導(dǎo)航嗎？ 當(dāng)你的目的是引導(dǎo)訪問者按照預(yù)設(shè)的路徑進(jìn)行瀏覽，而不想讓訪問者跳出當(dāng)前頁面時(shí)，此時(shí)就不需要導(dǎo)航了。 這樣的網(wǎng)站組織方式也稱為線性結(jié)構(gòu)：

對(duì)于功能簡(jiǎn)單的產(chǎn)品，采用線性結(jié)構(gòu)可以有效帶動(dòng)訪客參與，促進(jìn)轉(zhuǎn)化行為。 企業(yè)產(chǎn)品官網(wǎng)的路徑一般是頭部圖片-產(chǎn)品展示-注冊(cè)試用。

比如辦公協(xié)同應(yīng)用官網(wǎng)頂部沒有導(dǎo)航，只預(yù)留了登錄和注冊(cè)入口。 頁面信息按照“頁眉圖片-功能概覽-功能詳情-客戶展示-注冊(cè)試用”由淺入深、由宏觀到微觀的順序組織，引導(dǎo)訪問者完成瀏覽和轉(zhuǎn)化。 頁面底部會(huì)出現(xiàn)一行弱鏈接：

線性結(jié)構(gòu)的缺點(diǎn)是訪問者無法按照他們想要的方式瀏覽網(wǎng)站，例如，當(dāng)他們找不到他們渴望了解的關(guān)鍵信息（如價(jià)格頁面）時(shí)，他們可能會(huì)感到沮喪。

2.越扁平越有效

使用扁平化結(jié)構(gòu)可以減少網(wǎng)頁的深度，讓訪問者以更少的點(diǎn)擊次數(shù)到達(dá)目標(biāo)頁面，也有利于搜索引擎抓取的效率。 在尋找企業(yè)產(chǎn)品官網(wǎng)案例的過程中，我發(fā)現(xiàn)大部分功能比較簡(jiǎn)單的產(chǎn)品都使用一級(jí)導(dǎo)航，而對(duì)于規(guī)模較大的產(chǎn)品，其導(dǎo)航級(jí)別最多只能到二級(jí)。 可見，扁平化結(jié)構(gòu)的導(dǎo)航是網(wǎng)站導(dǎo)航的主流。

比如企業(yè)郵件應(yīng)用和Slack就是扁平化結(jié)構(gòu)的典型代表。 他們的導(dǎo)航只有一層，所有的頁面入口都放在外面。 最重要的功能和定價(jià)位于前兩個(gè)位置，其余按重要性降序排列。 最右邊通常有一個(gè)注冊(cè)或登錄入口：

對(duì)于一些大型企業(yè)產(chǎn)品，首先要盡可能簡(jiǎn)化選項(xiàng)，舍棄不必要的信息，隱藏次要信息，然后再考慮在有限的空間內(nèi)展示完整的信息入口。

比如是一個(gè)大型的CRM應(yīng)用，公司有3個(gè)子產(chǎn)品。 官網(wǎng)首頁有5個(gè)一級(jí)導(dǎo)航，其中前兩個(gè)是折疊導(dǎo)航。 最重要導(dǎo)航的下拉菜單按照產(chǎn)品和解決方案兩個(gè)維度展示相應(yīng)的信息。 帶有圖標(biāo)和介紹，有序直觀：

在下拉菜單中，收集了客戶案例、幫助中心、產(chǎn)品演示等資源入口，并將這些信息以清晰的組織方式聚集在一起，讓想了解更多信息的人可以自行探索：

也有大公司使用類似的結(jié)構(gòu)：

3.確保訪客知道他們?cè)谀睦?/p>

網(wǎng)站是一個(gè)虛擬空間，訪問者在頁面之間的跳轉(zhuǎn)是不可預(yù)測(cè)的。 如果沒有清晰的導(dǎo)航隨時(shí)提醒他們所在的頁面，他們?cè)缇兔月妨恕?為了讓訪問者時(shí)刻知道自己在哪里，需要在不同頁面保持一致的導(dǎo)航，滾動(dòng)頁面時(shí)保持不變。

繼續(xù)這個(gè)例子，主頁導(dǎo)航在滾動(dòng)時(shí)保持常駐。 當(dāng)點(diǎn)擊首頁導(dǎo)航到達(dá)子產(chǎn)品頁面時(shí)，導(dǎo)航保持不變，只是在原來的主LOGO旁邊增加了一個(gè)子產(chǎn)品LOGO表示當(dāng)前頁面，點(diǎn)擊主LOGO即可返回主頁：

當(dāng)子頁面開始向下滾動(dòng)時(shí)，導(dǎo)航會(huì)暫時(shí)消失，當(dāng)它滾動(dòng)到第一屏下方時(shí)，導(dǎo)航會(huì)出現(xiàn)并永久停留。 注意到此時(shí)導(dǎo)航樣式悄然發(fā)生了變化——主LOGO被簡(jiǎn)化了，右側(cè)部分變成了當(dāng)前子產(chǎn)品頁面的3個(gè)導(dǎo)航。 整個(gè)過渡過程非常自然：

再看看設(shè)計(jì)。 到達(dá)子產(chǎn)品頁面后，主導(dǎo)航將被保留。 隨著頁面的滾動(dòng)，子產(chǎn)品導(dǎo)航會(huì)推出主導(dǎo)航，取代主導(dǎo)航的位置：

尖端：

1.規(guī)劃訪客的瀏覽流程，保持順暢自然的體驗(yàn)。

2. 保持導(dǎo)航結(jié)構(gòu)一致，確保用戶始終知道他們?cè)谀睦铩?/p>

3. 保持導(dǎo)航簡(jiǎn)單，刪除不必要的項(xiàng)目。

4. 簡(jiǎn)單就好，但要確保提供訪問者所需信息的訪問權(quán)限。

4. 無處不在的 CTA 推動(dòng)轉(zhuǎn)化

CTA（Call to，user call）是指訪問者在瀏覽官網(wǎng)時(shí)期望完成的指定行為，通常包括：注冊(cè)、試用申請(qǐng)、郵件訂閱、軟件下載等。CTA是推廣該網(wǎng)站的主要手段官網(wǎng)轉(zhuǎn)換。 對(duì)于企業(yè)產(chǎn)品官網(wǎng)來說，醒目的CTA按鈕是標(biāo)配。

1.視覺風(fēng)格一定要搶眼

既然官網(wǎng)的目標(biāo)是完成轉(zhuǎn)化，那么CTA按鈕一定是整個(gè)頁面最醒目的、最吸引眼球的。 許多研究表明，綠色按鈕的點(diǎn)擊率最高，其次是藍(lán)色按鈕，但我認(rèn)為這不是絕對(duì)的。 按鈕的顏色取決于官網(wǎng)的整體配色方案和品牌基調(diào)。 在此前提下，增加對(duì)比度，讓按鈕從背景中脫穎而出。 風(fēng)格突出核心CTA，次要CTA可以相對(duì)弱化。

按鈕使用品牌顏色：紅色。

2、文案需要觸發(fā)點(diǎn)擊的欲望

CTA按鈕的文案應(yīng)該是一目了然的動(dòng)詞短語。 使用“立即/立即”等具有緊迫感的詞或“免費(fèi)”等利益導(dǎo)向的詞，可以有效激起用戶的點(diǎn)擊欲望。 常用的文案有：免費(fèi)/立即試用、免費(fèi)/立即注冊(cè)、觀看演示、了解更多等。

CTA按鈕會(huì)在網(wǎng)頁上多次出現(xiàn)，所以文案最好保持一致。 進(jìn)階的方法是根據(jù)用戶瀏覽的上下文，使用更有針對(duì)性的文案。

3.保持可見，重復(fù)

CTA按鈕一般與銷售主張同時(shí)出現(xiàn)，主要分布在官網(wǎng)三個(gè)位置：頂部導(dǎo)航、首屏大圖、頁面底部。 頂部導(dǎo)航的位置可以保證按鈕始終可見。 首屏大圖按鈕是視覺核心，頁面底部位置是終極調(diào)用。 三個(gè)位置相互呼應(yīng)，缺一不可。

4. 不要忽視次要 CTA

原則上應(yīng)該只有一個(gè)CTA按鈕，但近年來，越來越多的企業(yè)產(chǎn)品官網(wǎng)會(huì)在主CTA按鈕旁邊放置一個(gè)二級(jí)CTA按鈕，為訪問者提供二次選擇。 在退而求其次的情況下。 對(duì)于企業(yè)產(chǎn)品的用戶，在注冊(cè)前提供產(chǎn)品試用或視頻演示，可以大大增強(qiáng)對(duì)產(chǎn)品的了解。

5.嵌入簡(jiǎn)單表格，降低注冊(cè)門檻

在 CTA 按鈕旁邊放置一個(gè)簡(jiǎn)單的內(nèi)聯(lián)表單可以簡(jiǎn)化后續(xù)的轉(zhuǎn)換過程。 例如，當(dāng)用戶點(diǎn)擊注冊(cè)按鈕時(shí)，一般需要填寫用戶名、郵箱、密碼等信息，如果表單項(xiàng)比較復(fù)雜，用戶很可能會(huì)放棄填寫。 如果一開始只需要郵箱地址，這樣就大大降低了注冊(cè)門檻。 另一方面，即使用戶放棄填寫后續(xù)的注冊(cè)流程，公司至少已經(jīng)拿到了客戶的郵箱信息。

像這樣的電子郵件表單是最常見的：

然后直接列出所有需要填寫的注冊(cè)項(xiàng)，適用于注冊(cè)項(xiàng)少于三個(gè)的情況：

5、客戶案例提升信任度

企業(yè)級(jí)（to B）產(chǎn)品不像消費(fèi)者級(jí)（to C）產(chǎn)品那樣常見和容易獲得。 企業(yè)客戶在選擇產(chǎn)品時(shí)更加謹(jǐn)慎。 官方網(wǎng)站應(yīng)該有助于消除他們的疑慮并建立對(duì)產(chǎn)品的信任。 最好的方法是展示購買過產(chǎn)品的客戶的成功故事。 你的客戶是你產(chǎn)品的天然代言人，他們比你的產(chǎn)品本身更有說服力。

1.使用真實(shí)客戶頭像增加可信度

與純文字展示相比，真實(shí)的客戶頭像可以大大提升客戶評(píng)論的可信度。 比較下面的兩個(gè)圖像。