解析如何設計好看有好賣(mài)的企業(yè)官網(wǎng)發(fā)布者：本站     時(shí)間：2021-12-15 11:12:06

在談到企業(yè)產(chǎn)品的營(yíng)銷(xiāo)時(shí)(本文中提到的“企業(yè)產(chǎn)品”是指“給企業(yè)客戶(hù)使用的軟件/應用”)，一種觀(guān)點(diǎn)認為客戶(hù)肯定是靠線(xiàn)下推廣來(lái)獲取的，另一種觀(guān)點(diǎn)認為應該讓用戶(hù)主動(dòng)購買(mǎi)而不是被動(dòng)推銷(xiāo)，持這種觀(guān)點(diǎn)的公司尤其重視通過(guò)產(chǎn)品官網(wǎng)來(lái)獲客。無(wú)論持哪種觀(guān)點(diǎn)，不可否認的是官網(wǎng)是客戶(hù)對你產(chǎn)品的第一印象，很多潛在客戶(hù)在購買(mǎi)之前都是先通過(guò)官網(wǎng)來(lái)了解產(chǎn)品的。然而很多公司在產(chǎn)品官網(wǎng)設計這件事上投入的精力還不及線(xiàn)下推廣的萬(wàn)分之一，有的只把官網(wǎng)當作擺設，粗制濫造套個(gè)模板結束，甚至還忽略了移動(dòng)端適配。

作為企業(yè)產(chǎn)品的設計師，我們要如何設計好看又好賣(mài)的產(chǎn)品官網(wǎng)，有沒(méi)有一些套路可循?

企業(yè)產(chǎn)品官網(wǎng)的作用是傳達信息和促進(jìn)轉化。傳達信息是告訴訪(fǎng)客這款產(chǎn)品是什么/能為你公司做什么/為什么值得我購買(mǎi)，再配合一些增強說(shuō)服力的手段來(lái)促進(jìn)轉化——將盡量多的訪(fǎng)客(潛在客戶(hù))轉化為注冊用戶(hù)并最終完成購買(mǎi)。按照用戶(hù)瀏覽網(wǎng)站的順序，有以下5大設計要點(diǎn)：

善用首屏大圖吸引視線(xiàn)

銷(xiāo)售主張明確傳達產(chǎn)品價(jià)值

合理的導航方便訪(fǎng)客獲取信息

無(wú)處不在的CTA推動(dòng)轉化

客戶(hù)案例增強信任感

一. 善用首屏大圖吸引視線(xiàn)

首屏大圖占據了官網(wǎng)最寶貴的第一屏，它決定了訪(fǎng)客對官網(wǎng)的第一印象。首屏大圖可以輔助產(chǎn)品Slogan來(lái)有效傳達產(chǎn)品價(jià)值，同時(shí)還會(huì )影響到官網(wǎng)整體的氣質(zhì)。常見(jiàn)的首屏大圖有以下5種表現形式：

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

在實(shí)景照片這個(gè)形式上，企業(yè)級產(chǎn)品的表現力遠不及消費級產(chǎn)品(對比一下Salesforce和Apple的官網(wǎng)就知道了)，因為企業(yè)的商務(wù)屬性決定了他們不能像消費級產(chǎn)品那樣大膽地彰顯個(gè)性。企業(yè)產(chǎn)品官網(wǎng)一般會(huì )用客戶(hù)使用產(chǎn)品的場(chǎng)景照來(lái)說(shuō)明產(chǎn)品給他們工作帶來(lái)的益處，或用一些開(kāi)闊的風(fēng)景照來(lái)表現公司的價(jià)值觀(guān)和愿景。

這種傳統的照片形式常見(jiàn)于一些大公司，例如微軟的CRM產(chǎn)品Microsoft Dynamics 365：

解析如何設計好看有好賣(mài)的企業(yè)官網(wǎng),PS教程,

客服應用HelpCrunch則用來(lái)表現公司未來(lái)的愿景：

解析如何設計好看有好賣(mài)的企業(yè)官網(wǎng),PS教程,

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

經(jīng)過(guò)設計處理之后的概念圖，比真實(shí)照片的表現空間更大，可以通過(guò)一些隱喻的手法來(lái)傳達產(chǎn)品價(jià)值。

Zendesk用形象的概念圖來(lái)輔助傳達產(chǎn)品的價(jià)值主張——We can lend a hand。

解析如何設計好看有好賣(mài)的企業(yè)官網(wǎng),PS教程,

3. 插畫(huà)最適合講故事

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

Intercom用生動(dòng)的手繪風(fēng)插畫(huà)描繪了一副工作中遭遇的混亂場(chǎng)景，引出了使用Intercom可以結束這一切混亂的概念：

解析如何設計好看有好賣(mài)的企業(yè)官網(wǎng),PS教程,

Atlassian用配色明快的圖形插畫(huà)描繪了齊心協(xié)力的工作場(chǎng)景，烘托出“Team up”的產(chǎn)品價(jià)值主張：

解析如何設計好看有好賣(mài)的企業(yè)官網(wǎng),PS教程,

4. 產(chǎn)品界面圖簡(jiǎn)單直觀(guān)

簡(jiǎn)單直觀(guān)的運用產(chǎn)品界面圖作為首屏大圖，讓用戶(hù)對產(chǎn)品使用過(guò)程有一種直觀(guān)的體驗，也是一種對于自己產(chǎn)品的設計很有自信的表現。

云存儲應用Box用產(chǎn)品界面和照片混搭的形式來(lái)表現“Work as One”的產(chǎn)品理念：

解析如何設計好看有好賣(mài)的企業(yè)官網(wǎng),PS教程,

5. 客戶(hù)照片更具說(shuō)服力

使用真實(shí)客戶(hù)的肖像作為首屏大圖，兼具客戶(hù)案例的作用，使產(chǎn)品更有說(shuō)服力。

自助建站應用Squarespace用高清的客戶(hù)肖像圖配合產(chǎn)品界面，來(lái)表現他們的應用可以為不同人群定制專(zhuān)屬網(wǎng)站的理念：

解析如何設計好看有好賣(mài)的企業(yè)官網(wǎng),PS教程,

6.視頻是流行趨勢

用視頻代替靜態(tài)圖出現在首屏成為近年來(lái)流行的一大趨勢，比起靜態(tài)圖，動(dòng)態(tài)視頻更容易吸引目光。視頻的內容可以是產(chǎn)品功能解說(shuō)/客戶(hù)案例講述/企業(yè)文化傳播等，視頻的觸發(fā)方式有自動(dòng)播放/預加載/點(diǎn)擊播放等。

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

解析如何設計好看有好賣(mài)的企業(yè)官網(wǎng),PS教程,

Tips：

1. 首屏大圖和銷(xiāo)售主張是官網(wǎng)的重中之重，既是營(yíng)銷(xiāo)的核心，同時(shí)也是頁(yè)面布局和表現的核心。

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

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

二. 銷(xiāo)售主張明確傳達產(chǎn)品價(jià)值

當用戶(hù)被首屏大圖吸引住目光之后，想要進(jìn)一步留住客戶(hù)，就必須立即向他們傳達產(chǎn)品的核心價(jià)值，讓他明白購買(mǎi)你們的產(chǎn)品可以獲得什么好處。在營(yíng)銷(xiāo)領(lǐng)域，這被稱(chēng)為USP(Unique Selling Proposition)，意為“獨特的銷(xiāo)售主張”。

1. 銷(xiāo)售主張需要多次強調

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

a.首屏標題

首屏大標題是USP的核心，簡(jiǎn)短明確的slogan是一個(gè)強有力的開(kāi)場(chǎng)白。通常位于官網(wǎng)首屏最顯眼的位置，用大字體突出，同時(shí)可以用小字在旁邊進(jìn)行輔助說(shuō)明。

MailChimp的首屏標題簡(jiǎn)短有力：

解析如何設計好看有好賣(mài)的企業(yè)官網(wǎng),PS教程,

b.強化闡述

用來(lái)強化和豐富USP，讓它看起來(lái)更有說(shuō)服力?？梢詮恼娉霭l(fā)列舉產(chǎn)品功能、強調產(chǎn)品優(yōu)勢，也可以從側面來(lái)印證，比如成功案例、資質(zhì)證書(shū)等。

MailChimp用與首屏標題同樣風(fēng)格的文案，配合界面圖來(lái)強化USP：

解析如何設計好看有好賣(mài)的企業(yè)官網(wǎng),PS教程,

c.最后重申

當訪(fǎng)客瀏覽了長(cháng)篇的強化闡述，瀏覽到頁(yè)面底部時(shí)，最后再重申一下USP，首尾呼應。

MailChimp在頁(yè)面底部最后重申，號召轉化行動(dòng)：

解析如何設計好看有好賣(mài)的企業(yè)官網(wǎng),PS教程,

2. 文案風(fēng)格會(huì )影響銷(xiāo)售主張的表現力

根據不同的產(chǎn)品功能和品牌調性，銷(xiāo)售主張的文案風(fēng)格也各不相同，主要有以下幾種類(lèi)型：

a.清晰直白的功能陳述

清晰直白的功能陳述可能會(huì )有點(diǎn)無(wú)趣，但卻是最直觀(guān)、最易于理解的。用一句話(huà)講清楚你的產(chǎn)品是做什么的，比含糊其辭的描述更容易讓訪(fǎng)客產(chǎn)生好感。

Xero是一款為小型企業(yè)提供會(huì )計服務(wù)的應用，他們用一句話(huà)清晰傳達了Xero的功能價(jià)值與目標用戶(hù)：

解析如何設計好看有好賣(mài)的企業(yè)官網(wǎng),PS教程,

b.令人印象深刻的號召型言語(yǔ)

使用一些強有力、干脆利落的slogan，去號召用戶(hù)行動(dòng)。使用這類(lèi)USP的公司一般都已建立了一定的用戶(hù)基礎和品牌形象。

光看Asana的大標題是不是很難猜到這個(gè)公司是提供什么服務(wù)?即便如此，這幾句簡(jiǎn)短大氣的標語(yǔ)還是能給人留下深刻印象：

解析如何設計好看有好賣(mài)的企業(yè)官網(wǎng),PS教程,

c.抓住用戶(hù)痛點(diǎn)，喚起情感共鳴

這種類(lèi)型的slogan一般會(huì )從反面切入描述痛點(diǎn)，例如“工作不用那么麻煩，用xxx你可以…”，然后引出產(chǎn)品可以解決這些痛點(diǎn)。這是一種逆向思維，通過(guò)描述產(chǎn)品可以“規避負面結果”來(lái)突出其解決問(wèn)題的能力，這是與“獲得正面結果”相反的一種思路。

Basecamp整個(gè)官網(wǎng)的措辭風(fēng)格都是如此：

解析如何設計好看有好賣(mài)的企業(yè)官網(wǎng),PS教程,

d.動(dòng)態(tài)多合一

在尋找案例的過(guò)程中，還發(fā)現了一種動(dòng)態(tài)的多合一文案表現形式。它的做法是保持核心文案固定不變，其余的則不斷切換。動(dòng)態(tài)的表現形式更吸睛，也賦予了USP更全面的展現。

Atlassian旗下的Confluence品牌的核心價(jià)值是“make better by working together”，因此在動(dòng)態(tài)slogan中保持核心文案不變，切換開(kāi)頭的主語(yǔ)來(lái)突出產(chǎn)品的適用范圍：

解析如何設計好看有好賣(mài)的企業(yè)官網(wǎng),PS教程,

Tips：

1.規劃USP時(shí)要站在客戶(hù)角度，強調你的產(chǎn)品能為他們帶來(lái)什么好處。

2.不要怕首屏標題太短講不清功能，旁邊小字的作用就是補充說(shuō)明，同時(shí)豐富排版。

3.沒(méi)人會(huì )喜歡空洞的營(yíng)銷(xiāo)口號和行話(huà)，客戶(hù)喜歡能解答疑惑、簡(jiǎn)單直白的USP。

三. 合理的導航方便訪(fǎng)客獲取信息

當訪(fǎng)客被你的首屏大圖和價(jià)值主張吸引之后，接下來(lái)他可能想要在你的官網(wǎng)上四處看看了解更多信息。合理清晰的導航可以帶領(lǐng)訪(fǎng)客快速找到想要的信息。導航是網(wǎng)站的路標，也是網(wǎng)站組織架構的體現。如果訪(fǎng)客的瀏覽體驗不順暢，他們會(huì )對你的產(chǎn)品和公司失去信心。

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

導航是網(wǎng)站組織架構的體現。在規劃網(wǎng)站架構前，首先明確一個(gè)問(wèn)題：我們是否需要導航?當你的目的是引導訪(fǎng)客按照預設路徑進(jìn)行瀏覽，不希望他們跳出當前頁(yè)面，這個(gè)時(shí)候可以沒(méi)有導航。這樣的網(wǎng)站組織方式也叫線(xiàn)性結構：

解析如何設計好看有好賣(mài)的企業(yè)官網(wǎng),PS教程,

對于功能簡(jiǎn)單的產(chǎn)品，使用線(xiàn)性結構能有效帶動(dòng)訪(fǎng)客參與性，推動(dòng)轉化行為。企業(yè)產(chǎn)品官網(wǎng)的路徑通常為頭圖-產(chǎn)品展示-注冊試用。

例如辦公協(xié)作應用Trelllo的官網(wǎng)頂部沒(méi)有導航，只保留了登陸和注冊入口。頁(yè)面的信息組織按照“頭圖-功能總覽-功能細節-客戶(hù)展示-注冊試用”的順序由淺入深、從宏觀(guān)到微觀(guān)的順序引導訪(fǎng)客完成瀏覽和轉化。到頁(yè)面底部才會(huì )出現一排弱弱的鏈接：

解析如何設計好看有好賣(mài)的企業(yè)官網(wǎng),PS教程,

解析如何設計好看有好賣(mài)的企業(yè)官網(wǎng),PS教程,

線(xiàn)性結構的劣勢在于訪(fǎng)客不能按照自己的想法瀏覽網(wǎng)站，比如當他們找不到急切想了解的關(guān)鍵信息比如價(jià)格頁(yè)時(shí)，可能會(huì )覺(jué)得沮喪。

2. 越扁平越有效

使用扁平結構可以減小網(wǎng)頁(yè)深度，讓訪(fǎng)客用較少的點(diǎn)擊就能到達目標頁(yè)面，同時(shí)有利于搜索引擎抓取效率。在尋找企業(yè)產(chǎn)品官網(wǎng)案例的過(guò)程中我發(fā)現，對于功能相對簡(jiǎn)單的產(chǎn)品大多使用一級導航，而對于規模龐大的產(chǎn)品，他們的導航層級最多也只到二級?？梢?jiàn)扁平結構的導航是網(wǎng)站導航的主流。

例如企業(yè)郵件應用Mailchimp和Slack就是扁平結構的典型代表，它們的導航都只有一級，把所有頁(yè)面入口都放在外面，最重要的功能、定價(jià)位于前兩個(gè)位置，其余的根據重要性遞減排列，最右邊一般會(huì )放注冊或登陸入口：

解析如何設計好看有好賣(mài)的企業(yè)官網(wǎng),PS教程,

對于一些規模龐大的企業(yè)產(chǎn)品，首先要盡量精簡(jiǎn)選項，舍棄不必要的信息、隱藏次要信息，再考慮在有限的空間里把信息入口展現完整。

以Intercom為例，它是一款大型CRM應用，公司旗下有三大子產(chǎn)品。官網(wǎng)首頁(yè)設置了5個(gè)一級導航，其中前兩個(gè)是折疊導航。最重要的Products導航的下拉菜單中按照產(chǎn)品和解決方案兩個(gè)維度展示了對應的信息。配合icon和簡(jiǎn)介，有序又直觀(guān)：

解析如何設計好看有好賣(mài)的企業(yè)官網(wǎng),PS教程,

在Resource下拉菜單中則收攏了客戶(hù)案例、幫助中心、產(chǎn)品演示等資源入口，用清晰的組織方式把這些信息集中在一起，讓想要了解更多信息的人自己去探索：

解析如何設計好看有好賣(mài)的企業(yè)官網(wǎng),PS教程,

使用類(lèi)似結構的還有Atlassian等大型公司：

解析如何設計好看有好賣(mài)的企業(yè)官網(wǎng),PS教程,

3. 確保訪(fǎng)客清楚自己所處的位置

網(wǎng)站是一個(gè)虛擬空間，訪(fǎng)客在頁(yè)面之間的跳轉是無(wú)法預料的，如果沒(méi)有清晰的導航在時(shí)刻提醒他們所在的頁(yè)面，他們早就已經(jīng)迷路了。要讓訪(fǎng)客時(shí)刻知道自己所處的位置，就要在不同頁(yè)面上保持導航的一致性，并在滾動(dòng)頁(yè)面時(shí)保持常駐。

繼續以Intercom為例，首頁(yè)導航在滾動(dòng)時(shí)保持常駐。當點(diǎn)擊首頁(yè)導航到達子產(chǎn)品頁(yè)面后，導航保持一致，只是在原先的主LOGO旁多了一個(gè)子產(chǎn)品LOGO來(lái)表明當前所在頁(yè)面，點(diǎn)擊主LOGO可以返回首頁(yè)：

解析如何設計好看有好賣(mài)的企業(yè)官網(wǎng),PS教程,

子頁(yè)面開(kāi)始向下滾動(dòng)時(shí)導航暫且消失，當滾動(dòng)到首屏以下時(shí)導航出現并常駐，注意到此時(shí)的導航樣式已經(jīng)悄然發(fā)生了變化——簡(jiǎn)化了主LOGO，右邊部分變成了3個(gè)針對當前子產(chǎn)品頁(yè)面的導航。整個(gè)變化過(guò)程過(guò)渡地十分自然：

解析如何設計好看有好賣(mài)的企業(yè)官網(wǎng),PS教程,

再看看Atlassian的設計。到達子產(chǎn)品頁(yè)后會(huì )保留主導航，隨著(zhù)頁(yè)面滾動(dòng)，子產(chǎn)品導航會(huì )把主導航推出，繼而代替主導航的位置：

解析如何設計好看有好賣(mài)的企業(yè)官網(wǎng),PS教程,

Tips：

1.規劃訪(fǎng)客的瀏覽歷程，保持順暢自然的體驗。

2.保持導航結構的一致性，確保用戶(hù)始終知道自己所處的位置。

3.保持導航的使用簡(jiǎn)單性，刪除不必要項目。

4.簡(jiǎn)單很好，但是要確保提供了訪(fǎng)客想要獲得的信息入口。

四. 無(wú)處不在的CTA推動(dòng)轉化

CTA(Call to Action，用戶(hù)行為召喚)是指希望訪(fǎng)客在瀏覽官網(wǎng)時(shí)完成的指定行為，通常有：注冊、申請試用、郵件訂閱、軟件下載等等。CTA是促進(jìn)官網(wǎng)完成轉化的主要手段，對于企業(yè)產(chǎn)品官網(wǎng)，醒目的CTA按鈕是標配。

1. 視覺(jué)樣式必須醒目

既然官網(wǎng)的目標是完成轉化，那么CTA按鈕一定是整個(gè)頁(yè)面中最醒目、最聚焦視線(xiàn)的。很多研究證明綠色按鈕的點(diǎn)擊率最高，藍色其次，但我認為這并不絕對。按鈕顏色取決于官網(wǎng)的整體配色和品牌調性，在這個(gè)前提下，拉大對比度，讓按鈕從背景中突出即可。樣式上突出核心CTA，次級CTA可以相對弱化。