設(shè)計(jì)好看又好賣的企業(yè)產(chǎn)品官網(wǎng)

2017-7-18    用心設(shè)計(jì)

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里


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

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

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

  1. 善用首屏大圖吸引視線

  2. 銷售主張明確傳達(dá)產(chǎn)品價(jià)值

  3. 合理的導(dǎo)航方便訪客獲取信息

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

  5. 客戶案例增強(qiáng)信任感

一. 善用首屏大圖吸引視線

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

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

在實(shí)景照片這個(gè)形式上,企業(yè)級(jí)產(chǎn)品的表現(xiàn)力遠(yuǎn)不及消費(fèi)級(jí)產(chǎn)品(對(duì)比一下Salesforce和Apple的官網(wǎng)就知道了),因?yàn)槠髽I(yè)的商務(wù)屬性決定了他們不能像消費(fèi)級(jí)產(chǎn)品那樣大膽地彰顯個(gè)性。企業(yè)產(chǎn)品官網(wǎng)一般會(huì)用客戶使用產(chǎn)品的場(chǎng)景照來(lái)說(shuō)明產(chǎn)品給他們工作帶來(lái)的益處,或用一些開(kāi)闊的風(fēng)景照來(lái)表現(xiàn)公司的價(jià)值觀和愿景。
這種傳統(tǒng)的照片形式常見(jiàn)于一些大公司,例如微軟的CRM產(chǎn)品Microsoft Dynamics 365:

如何設(shè)計(jì)好看又好賣的企業(yè)產(chǎn)品官網(wǎng)

客服應(yīng)用HelpCrunch則用來(lái)表現(xiàn)公司未來(lái)的愿景:

如何設(shè)計(jì)好看又好賣的企業(yè)產(chǎn)品官網(wǎng)

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

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

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

如何設(shè)計(jì)好看又好賣的企業(yè)產(chǎn)品官網(wǎng)

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

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

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

如何設(shè)計(jì)好看又好賣的企業(yè)產(chǎn)品官網(wǎng)

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

如何設(shè)計(jì)好看又好賣的企業(yè)產(chǎn)品官網(wǎng)

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

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

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

如何設(shè)計(jì)好看又好賣的企業(yè)產(chǎn)品官網(wǎng)

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

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

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

如何設(shè)計(jì)好看又好賣的企業(yè)產(chǎn)品官網(wǎng)

6.視頻是流行趨勢(shì)

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

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

如何設(shè)計(jì)好看又好賣的企業(yè)產(chǎn)品官網(wǎng)

Tips:

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

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

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

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

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

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

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

a.首屏標(biāo)題

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

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

如何設(shè)計(jì)好看又好賣的企業(yè)產(chǎn)品官網(wǎng)

b.強(qiáng)化闡述

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

MailChimp用與首屏標(biāo)題同樣風(fēng)格的文案,配合界面圖來(lái)強(qiáng)化USP:

如何設(shè)計(jì)好看又好賣的企業(yè)產(chǎn)品官網(wǎng)

c.最后重申

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

MailChimp在頁(yè)面底部最后重申,號(hào)召轉(zhuǎn)化行動(dòng):

如何設(shè)計(jì)好看又好賣的企業(yè)產(chǎn)品官網(wǎng)

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

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

a.清晰直白的功能陳述

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

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

如何設(shè)計(jì)好看又好賣的企業(yè)產(chǎn)品官網(wǎng)

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

使用一些強(qiáng)有力、干脆利落的slogan,去號(hào)召用戶行動(dòng)。使用這類USP的公司一般都已建立了一定的用戶基礎(chǔ)和品牌形象。

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

如何設(shè)計(jì)好看又好賣的企業(yè)產(chǎn)品官網(wǎng)

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

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

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

如何設(shè)計(jì)好看又好賣的企業(yè)產(chǎn)品官網(wǎng)

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

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

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

如何設(shè)計(jì)好看又好賣的企業(yè)產(chǎn)品官網(wǎng)

Tips:

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

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

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

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

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

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

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

如何設(shè)計(jì)好看又好賣的企業(yè)產(chǎn)品官網(wǎng)

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

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

如何設(shè)計(jì)好看又好賣的企業(yè)產(chǎn)品官網(wǎng)如何設(shè)計(jì)好看又好賣的企業(yè)產(chǎn)品官網(wǎng)

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

2. 越扁平越有效

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

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

如何設(shè)計(jì)好看又好賣的企業(yè)產(chǎn)品官網(wǎng)

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

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

如何設(shè)計(jì)好看又好賣的企業(yè)產(chǎn)品官網(wǎng)

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

如何設(shè)計(jì)好看又好賣的企業(yè)產(chǎn)品官網(wǎng)

使用類似結(jié)構(gòu)的還有Atlassian等大型公司:

如何設(shè)計(jì)好看又好賣的企業(yè)產(chǎn)品官網(wǎng)

3. 確保訪客清楚自己所處的位置

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

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

如何設(shè)計(jì)好看又好賣的企業(yè)產(chǎn)品官網(wǎng)

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

如何設(shè)計(jì)好看又好賣的企業(yè)產(chǎn)品官網(wǎng)

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

如何設(shè)計(jì)好看又好賣的企業(yè)產(chǎn)品官網(wǎng)

Tips:

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

2.保持導(dǎo)航結(jié)構(gòu)的一致性,確保用戶始終知道自己所處的位置。

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

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

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

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

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

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

如何設(shè)計(jì)好看又好賣的企業(yè)產(chǎn)品官網(wǎng)

2. 文案需要引發(fā)點(diǎn)擊欲望

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

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

3. 保持一直可見(jiàn),反復(fù)強(qiáng)調(diào)

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

4. 次級(jí)CTA也不容忽視

原則上來(lái)說(shuō)CTA按鈕應(yīng)該只有一個(gè),但近年來(lái)越來(lái)越多的企業(yè)產(chǎn)品官網(wǎng)會(huì)在主要CTA按鈕旁邊放一個(gè)次級(jí)CTA按鈕,為訪客提供第二選擇,這樣做可以讓訪客在不想點(diǎn)擊主按鈕的情況下退而求其次。對(duì)于企業(yè)產(chǎn)品的用戶來(lái)說(shuō),在注冊(cè)之前提供產(chǎn)品試用或視頻演示能大大增進(jìn)對(duì)產(chǎn)品的了解。

如何設(shè)計(jì)好看又好賣的企業(yè)產(chǎn)品官網(wǎng)

5. 嵌入簡(jiǎn)易表單,降低注冊(cè)門(mén)檻

在CTA按鈕旁放置一個(gè)簡(jiǎn)易的內(nèi)嵌表單,相當(dāng)于簡(jiǎn)化了后續(xù)的轉(zhuǎn)化流程。例如,當(dāng)用戶點(diǎn)擊注冊(cè)按鈕之后一般會(huì)被要求填寫(xiě)用戶名、郵箱、密碼等信息,如果表單項(xiàng)很復(fù)雜,用戶很可能會(huì)放棄填寫(xiě)。如果一開(kāi)始只要求填寫(xiě)郵箱,這就大大降低了注冊(cè)門(mén)檻。另外一方面,即使用戶在后續(xù)的注冊(cè)流程中放棄了填寫(xiě),那企業(yè)至少已經(jīng)get到客戶的郵箱信息了。

類似Shopify這樣的郵箱表單是最常見(jiàn)的:

如何設(shè)計(jì)好看又好賣的企業(yè)產(chǎn)品官網(wǎng)

Webflow則直接把需要填寫(xiě)的注冊(cè)項(xiàng)全列出來(lái),這適用于注冊(cè)項(xiàng)在三個(gè)以內(nèi)的情況:

如何設(shè)計(jì)好看又好賣的企業(yè)產(chǎn)品官網(wǎng)

五. 客戶案例增強(qiáng)信任感

企業(yè)級(jí)(to B)產(chǎn)品不像消費(fèi)級(jí)(to C)產(chǎn)品那么普遍和易獲取,企業(yè)客戶在選擇產(chǎn)品的時(shí)候更為慎重,官網(wǎng)要幫助消除他們的疑慮,建立對(duì)產(chǎn)品的信任感,最好的方式就是把已購(gòu)買產(chǎn)品的客戶成功案例展示出來(lái)。你的客戶就是你產(chǎn)品天生的代言人,他們比你的產(chǎn)品本身更有說(shuō)服力。

1. 用真實(shí)的客戶頭像提升可信度

比起單純的文字展示,真實(shí)的客戶頭像可以大大提升客戶評(píng)論的可信度。對(duì)比下面兩張圖感受一下。

Webflow的客戶評(píng)論:

如何設(shè)計(jì)好看又好賣的企業(yè)產(chǎn)品官網(wǎng)

Intercom的客戶評(píng)論:

如何設(shè)計(jì)好看又好賣的企業(yè)產(chǎn)品官網(wǎng)

2. 講故事,更容易打動(dòng)用戶

比起一句話評(píng)論,用戶顯然更容易接受并記住一個(gè)真實(shí)場(chǎng)景下的故事。有的企業(yè)官網(wǎng)會(huì)花一整個(gè)版面的篇幅來(lái)講這個(gè)故事,從痛點(diǎn)到使用過(guò)程再到最后的獲益,有理有據(jù)令人信服。

Intercom在客戶故事這方面下足了功夫,每個(gè)重點(diǎn)客戶都有內(nèi)容豐富的專題頁(yè),里面有客戶公司簡(jiǎn)介,描述了用Intercom的哪些產(chǎn)品解決了哪些問(wèn)題,有從他們產(chǎn)品角度出發(fā)的第三人稱描述,也有客戶的第一人稱陳述:

如何設(shè)計(jì)好看又好賣的企業(yè)產(chǎn)品官網(wǎng)

越來(lái)越多的公司已經(jīng)不滿足于靜態(tài)講故事,例如Invision,他們開(kāi)始使用更專業(yè)、更有說(shuō)服力的采訪短片來(lái)作為客戶成功案例:

如何設(shè)計(jì)好看又好賣的企業(yè)產(chǎn)品官網(wǎng)

3. 的數(shù)字更有說(shuō)服力

比起描述程度文案類似:這款產(chǎn)品幫助我們“大大提升了效率”、“獲得了更多用戶咨詢量”,人們更喜歡看到這樣的描述:這款產(chǎn)品幫助我們“減少了18%的操作時(shí)間”、“提升了25%的用戶咨詢量”。的數(shù)字比模糊的范圍來(lái)的更有根據(jù)、更有說(shuō)服力。

Intercom的每個(gè)客戶案例中都有的數(shù)據(jù)支撐:

如何設(shè)計(jì)好看又好賣的企業(yè)產(chǎn)品官網(wǎng)

4. 大公司的案例會(huì)強(qiáng)化信心

大公司的口碑效應(yīng)還用說(shuō)么。如果你有大客戶,那毫不猶豫地把他們的LOGO展示出來(lái)吧。

看看Invision的大客戶logo墻:

如何設(shè)計(jì)好看又好賣的企業(yè)產(chǎn)品官網(wǎng)

寫(xiě)在最后

除了上面提到的5大要點(diǎn)之外,還有一些提升網(wǎng)站體驗(yàn)的方法,例如:A/B Test、響應(yīng)式設(shè)計(jì)、優(yōu)化加載時(shí)間等。

最后補(bǔ)充一點(diǎn):對(duì)于消費(fèi)級(jí)(to C)產(chǎn)品,例如我們熟悉的Evernote、Dropbox,他們的使用者與他們官網(wǎng)的訪客基本是同一個(gè)人。而對(duì)于企業(yè)級(jí)(to B)產(chǎn)品來(lái)說(shuō),產(chǎn)品使用者和購(gòu)買者往往不是同一個(gè)人,也就是說(shuō)產(chǎn)品使用者可能是客服人員,而官網(wǎng)的訪客卻可能是主管或采購(gòu)之類負(fù)責(zé)買單的人。因此,企業(yè)產(chǎn)品官網(wǎng)的設(shè)計(jì)要兼顧使用者和購(gòu)買者的不同角色,洞察目標(biāo)客戶所在行業(yè)特征,最大化展示產(chǎn)品在提升企業(yè)效率或收益上的優(yōu)勢(shì)。

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)


分享本文至:

日歷

鏈接

個(gè)人資料

存檔