2017-7-21 資深UI設(shè)計者
魚小干：在談到企業(yè)產(chǎn)品的營銷時（本文中提到的“企業(yè)產(chǎn)品”是指“給企業(yè)客戶使用的軟件/應用”），一種觀點認為客戶肯定是靠線下推廣來獲取的，另一種觀點認為應該讓用戶主動購買而不是被動推銷，持這種觀點的公司尤其重視通過產(chǎn)品官網(wǎng)來獲客。無論持哪種觀點，不可否認的是官網(wǎng)是客戶對你產(chǎn)品的第一印象，很多潛在客戶在購買之前都是先通過官網(wǎng)來了解產(chǎn)品的。然而很多公司在產(chǎn)品官網(wǎng)設(shè)計這件事上投入的精力還不及線下推廣的萬分之一，有的只把官網(wǎng)當作擺設(shè)，粗制濫造套個模板結(jié)束，甚至還忽略了移動端適配。
作為企業(yè)產(chǎn)品的設(shè)計師，我們要如何設(shè)計好看又好賣的產(chǎn)品官網(wǎng)，有沒有一些套路可循？
企業(yè)產(chǎn)品官網(wǎng)的作用是傳達信息和促進轉(zhuǎn)化。傳達信息是告訴訪客這款產(chǎn)品是什么/能為你公司做什么/為什么值得我購買，再配合一些增強說服力的手段來促進轉(zhuǎn)化——將盡量多的訪客（潛在客戶）轉(zhuǎn)化為注冊用戶并最終完成購買。按照用戶瀏覽網(wǎng)站的順序，有以下5大設(shè)計要點：
首屏大圖占據(jù)了官網(wǎng)最寶貴的第一屏，它決定了訪客對官網(wǎng)的第一印象。首屏大圖可以輔助產(chǎn)品Slogan來有效傳達產(chǎn)品價值，同時還會影響到官網(wǎng)整體的氣質(zhì)。常見的首屏大圖有以下5種表現(xiàn)形式：
1. 實景照片營造場景氛圍
在實景照片這個形式上，企業(yè)級產(chǎn)品的表現(xiàn)力遠不及消費級產(chǎn)品（對比一下Salesforce和Apple的官網(wǎng)就知道了），因為企業(yè)的商務屬性決定了他們不能像消費級產(chǎn)品那樣大膽地彰顯個性。企業(yè)產(chǎn)品官網(wǎng)一般會用客戶使用產(chǎn)品的場景照來說明產(chǎn)品給他們工作帶來的益處，或用一些開闊的風景照來表現(xiàn)公司的價值觀和愿景。
這種傳統(tǒng)的照片形式常見于一些大公司，例如微軟的CRM產(chǎn)品Microsoft Dynamics 365：
客服應用HelpCrunch則用來表現(xiàn)公司未來的愿景：
2. 概念圖用隱喻表達產(chǎn)品價值
經(jīng)過設(shè)計處理之后的概念圖，比真實照片的表現(xiàn)空間更大，可以通過一些隱喻的手法來傳達產(chǎn)品價值。
Zendesk用形象的概念圖來輔助傳達產(chǎn)品的價值主張——We can lend a hand。
3. 插畫最適合講故事
近年來一些企業(yè)重塑品牌向更年輕更有活力的方向發(fā)展。插畫的形式有利于塑造輕松時尚的品牌氣質(zhì)，同時也是最適合用來講故事的表達形式。
Intercom用生動的手繪風插畫描繪了一副工作中遭遇的混亂場景，引出了使用Intercom可以結(jié)束這一切混亂的概念：
Atlassian用配色明快的圖形插畫描繪了齊心協(xié)力的工作場景，烘托出“Team up”的產(chǎn)品價值主張：
4. 產(chǎn)品界面圖簡單直觀
簡單直觀的運用產(chǎn)品界面圖作為首屏大圖，讓用戶對產(chǎn)品使用過程有一種直觀的體驗，也是一種對于自己產(chǎn)品的設(shè)計很有自信的表現(xiàn)。
云存儲應用Box用產(chǎn)品界面和照片混搭的形式來表現(xiàn)“Work as One”的產(chǎn)品理念：
5. 客戶照片更具說服力
使用真實客戶的肖像作為首屏大圖，兼具客戶案例的作用，使產(chǎn)品更有說服力。
自助建站應用Squarespace用高清的客戶肖像圖配合產(chǎn)品界面，來表現(xiàn)他們的應用可以為不同人群定制專屬網(wǎng)站的理念：
6.視頻是流行趨勢
用視頻代替靜態(tài)圖出現(xiàn)在首屏成為近年來流行的一大趨勢，比起靜態(tài)圖，動態(tài)視頻更容易吸引目光。視頻的內(nèi)容可以是產(chǎn)品功能解說/客戶案例講述/企業(yè)文化傳播等，視頻的觸發(fā)方式有自動播放/預加載/點擊播放等。
自助建站應用Weebly的首頁視頻融合了各類用戶的生活狀態(tài)和使用場景，來表現(xiàn)“DO WHAT YOU LOVE”的產(chǎn)品理念：
Tips：
1. 首屏大圖和銷售主張是官網(wǎng)的重中之重，既是營銷的核心，同時也是頁面布局和表現(xiàn)的核心。
2. 首屏大圖是傳達產(chǎn)品品牌的絕佳機會。
3. 不同子產(chǎn)品頁可以用不同的首屏大圖，但是要注意尺寸和風格保持一致。
當用戶被首屏大圖吸引住目光之后，想要進一步留住客戶，就必須立即向他們傳達產(chǎn)品的核心價值，讓他明白購買你們的產(chǎn)品可以獲得什么好處。在營銷領(lǐng)域，這被稱為USP（Unique Selling Proposition），意為“獨特的銷售主張”。
1. 銷售主張需要多次強調(diào)
在企業(yè)產(chǎn)品官網(wǎng)中，銷售主張會多次出現(xiàn)，完整的銷售主張通常會由以下三個基本部分組成：首屏標題、強化闡述和最后重申。
a.首屏標題
首屏大標題是USP的核心，簡短明確的slogan是一個強有力的開場白。通常位于官網(wǎng)首屏最顯眼的位置，用大字體突出，同時可以用小字在旁邊進行輔助說明。
MailChimp的首屏標題簡短有力：
b.強化闡述
用來強化和豐富USP，讓它看起來更有說服力?？梢詮恼娉霭l(fā)列舉產(chǎn)品功能、強調(diào)產(chǎn)品優(yōu)勢，也可以從側(cè)面來印證，比如成功案例、資質(zhì)證書等。
MailChimp用與首屏標題同樣風格的文案，配合界面圖來強化USP：
c.最后重申
當訪客瀏覽了長篇的強化闡述，瀏覽到頁面底部時，最后再重申一下USP，首尾呼應。
MailChimp在頁面底部最后重申，號召轉(zhuǎn)化行動：
2. 文案風格會影響銷售主張的表現(xiàn)力
根據(jù)不同的產(chǎn)品功能和品牌調(diào)性，銷售主張的文案風格也各不相同，主要有以下幾種類型：
a.清晰直白的功能陳述
清晰直白的功能陳述可能會有點無趣，但卻是最直觀、最易于理解的。用一句話講清楚你的產(chǎn)品是做什么的，比含糊其辭的描述更容易讓訪客產(chǎn)生好感。
Xero是一款為小型企業(yè)提供會計服務的應用，他們用一句話清晰傳達了Xero的功能價值與目標用戶：
b.令人印象深刻的號召型言語
使用一些強有力、干脆利落的slogan，去號召用戶行動。使用這類USP的公司一般都已建立了一定的用戶基礎(chǔ)和品牌形象。
光看Asana的大標題是不是很難猜到這個公司是提供什么服務？即便如此，這幾句簡短大氣的標語還是能給人留下深刻印象：
c.抓住用戶痛點，喚起情感共鳴
這種類型的slogan一般會從反面切入描述痛點，例如“工作不用那么麻煩，用xxx你可以…”，然后引出產(chǎn)品可以解決這些痛點。這是一種逆向思維，通過描述產(chǎn)品可以“規(guī)避負面結(jié)果”來突出其解決問題的能力，這是與“獲得正面結(jié)果”相反的一種思路。
Basecamp整個官網(wǎng)的措辭風格都是如此：
d.動態(tài)多合一
在尋找案例的過程中，還發(fā)現(xiàn)了一種動態(tài)的多合一文案表現(xiàn)形式。它的做法是保持核心文案固定不變，其余的則不斷切換。動態(tài)的表現(xiàn)形式更吸睛，也賦予了USP更全面的展現(xiàn)。
Atlassian旗下的Confluence品牌的核心價值是“make better by working together”，因此在動態(tài)slogan中保持核心文案不變，切換開頭的主語來突出產(chǎn)品的適用范圍：
Tips：
1.規(guī)劃USP時要站在客戶角度，強調(diào)你的產(chǎn)品能為他們帶來什么好處。
2.不要怕首屏標題太短講不清功能，旁邊小字的作用就是補充說明，同時豐富排版。
3.沒人會喜歡空洞的營銷口號和行話，客戶喜歡能解答疑惑、簡單直白的USP。
當訪客被你的首屏大圖和價值主張吸引之后，接下來他可能想要在你的官網(wǎng)上四處看看了解更多信息。合理清晰的導航可以帶領(lǐng)訪客快速找到想要的信息。導航是網(wǎng)站的路標，也是網(wǎng)站組織架構(gòu)的體現(xiàn)。如果訪客的瀏覽體驗不順暢，他們會對你的產(chǎn)品和公司失去信心。
1. 不是所有網(wǎng)站都需要導航
導航是網(wǎng)站組織架構(gòu)的體現(xiàn)。在規(guī)劃網(wǎng)站架構(gòu)前，首先明確一個問題：我們是否需要導航？當你的目的是引導訪客按照預設(shè)路徑進行瀏覽，不希望他們跳出當前頁面，這個時候可以沒有導航。這樣的網(wǎng)站組織方式也叫線性結(jié)構(gòu)：
對于功能簡單的產(chǎn)品，使用線性結(jié)構(gòu)能有效帶動訪客參與性，推動轉(zhuǎn)化行為。企業(yè)產(chǎn)品官網(wǎng)的路徑通常為頭圖-產(chǎn)品展示-注冊試用。
例如辦公協(xié)作應用Trelllo的官網(wǎng)頂部沒有導航，只保留了登陸和注冊入口。頁面的信息組織按照“頭圖-功能總覽-功能細節(jié)-客戶展示-注冊試用”的順序由淺入深、從宏觀到微觀的順序引導訪客完成瀏覽和轉(zhuǎn)化。到頁面底部才會出現(xiàn)一排弱弱的鏈接：
線性結(jié)構(gòu)的劣勢在于訪客不能按照自己的想法瀏覽網(wǎng)站，比如當他們找不到急切想了解的關(guān)鍵信息比如價格頁時，可能會覺得沮喪。
2. 越扁平越有效
使用扁平結(jié)構(gòu)可以減小網(wǎng)頁深度，讓訪客用較少的點擊就能到達目標頁面，同時有利于搜索引擎抓取效率。在尋找企業(yè)產(chǎn)品官網(wǎng)案例的過程中我發(fā)現(xiàn)，對于功能相對簡單的產(chǎn)品大多使用一級導航，而對于規(guī)模龐大的產(chǎn)品，他們的導航層級最多也只到二級?？梢姳馄浇Y(jié)構(gòu)的導航是網(wǎng)站導航的主流。
例如企業(yè)郵件應用Mailchimp和Slack就是扁平結(jié)構(gòu)的典型代表，它們的導航都只有一級，把所有頁面入口都放在外面，最重要的功能、定價位于前兩個位置，其余的根據(jù)重要性遞減排列，最右邊一般會放注冊或登陸入口：
對于一些規(guī)模龐大的企業(yè)產(chǎn)品，首先要盡量精簡選項，舍棄不必要的信息、隱藏次要信息，再考慮在有限的空間里把信息入口展現(xiàn)完整。
以Intercom為例，它是一款大型CRM應用，公司旗下有三大子產(chǎn)品。官網(wǎng)首頁設(shè)置了5個一級導航，其中前兩個是折疊導航。最重要的Products導航的下拉菜單中按照產(chǎn)品和解決方案兩個維度展示了對應的信息。配合icon和簡介，有序又直觀：
在Resource下拉菜單中則收攏了客戶案例、幫助中心、產(chǎn)品演示等資源入口，用清晰的組織方式把這些信息集中在一起，讓想要了解更多信息的人自己去探索：
使用類似結(jié)構(gòu)的還有Atlassian等大型公司：
3. 確保訪客清楚自己所處的位置
網(wǎng)站是一個虛擬空間，訪客在頁面之間的跳轉(zhuǎn)是無法預料的，如果沒有清晰的導航在時刻提醒他們所在的頁面，他們早就已經(jīng)迷路了。要讓訪客時刻知道自己所處的位置，就要在不同頁面上保持導航的一致性，并在滾動頁面時保持常駐。
繼續(xù)以Intercom為例，首頁導航在滾動時保持常駐。當點擊首頁導航到達子產(chǎn)品頁面后，導航保持一致，只是在原先的主LOGO旁多了一個子產(chǎn)品LOGO來表明當前所在頁面，點擊主LOGO可以返回首頁：
子頁面開始向下滾動時導航暫且消失，當滾動到首屏以下時導航出現(xiàn)并常駐，注意到此時的導航樣式已經(jīng)悄然發(fā)生了變化——簡化了主LOGO，右邊部分變成了3個針對當前子產(chǎn)品頁面的導航。整個變化過程過渡地十分自然：
再看看Atlassian的設(shè)計。到達子產(chǎn)品頁后會保留主導航，隨著頁面滾動，子產(chǎn)品導航會把主導航推出，繼而代替主導航的位置：
Tips：
1.規(guī)劃訪客的瀏覽歷程，保持順暢自然的體驗。
2.保持導航結(jié)構(gòu)的一致性，確保用戶始終知道自己所處的位置。
3.保持導航的使用簡單性，刪除不必要項目。
4.簡單很好，但是要確保提供了訪客想要獲得的信息入口。
CTA（Call to Action，用戶行為召喚）是指希望訪客在瀏覽官網(wǎng)時完成的指定行為，通常有：注冊、申請試用、郵件訂閱、軟件下載等等。CTA是促進官網(wǎng)完成轉(zhuǎn)化的主要手段，對于企業(yè)產(chǎn)品官網(wǎng)，醒目的CTA按鈕是標配。
1. 視覺樣式必須醒目
既然官網(wǎng)的目標是完成轉(zhuǎn)化，那么CTA按鈕一定是整個頁面中最醒目、最聚焦視線的。很多研究證明綠色按鈕的點擊率最高，藍色其次，但我認為這并不絕對。按鈕顏色取決于官網(wǎng)的整體配色和品牌調(diào)性，在這個前提下，拉大對比度，讓按鈕從背景中突出即可。樣式上突出核心CTA，次級CTA可以相對弱化。
Invision的按鈕使用了品牌色：紅色。
2. 文案需要引發(fā)點擊欲望
CTA按鈕文案應該是一目了然的動詞短語，使用含有緊迫感的文字例如“立即/馬上”，或者利益導向的文字例如“免費”，可以有效引發(fā)用戶的點擊欲望。常用的文案有：免費/立即試用、免費/立即注冊、觀看演示、了解更多等等。
CTA按鈕會在網(wǎng)頁中出現(xiàn)多次，因此在文案上最好保持一致性，進階方法是根據(jù)用戶瀏覽的上下文使用更針對性的文案。
3. 保持一直可見，反復強調(diào)
CTA按鈕一般與銷售主張同時出現(xiàn)，主要分布在官網(wǎng)的三個位置：頂部導航、首屏大圖、頁面底部。頂部導航的位置可以保證按鈕一直可見，首屏大圖上的按鈕是視覺核心，頁面底部的位置則作為終極呼喚。三個位置互相呼應，缺一不可。
4. 次級CTA也不容忽視
原則上來說CTA按鈕應該只有一個，但近年來越來越多的企業(yè)產(chǎn)品官網(wǎng)會在主要CTA按鈕旁邊放一個次級CTA按鈕，為訪客提供第二選擇，這樣做可以讓訪客在不想點擊主按鈕的情況下退而求其次。對于企業(yè)產(chǎn)品的用戶來說，在注冊之前提供產(chǎn)品試用或視頻演示能大大增進對產(chǎn)品的了解。
5. 嵌入簡易表單，降低注冊門檻
在CTA按鈕旁放置一個簡易的內(nèi)嵌表單，相當于簡化了后續(xù)的轉(zhuǎn)化流程。例如，當用戶點擊注冊按鈕之后一般會被要求填寫用戶名、郵箱、密碼等信息，如果表單項很復雜，用戶很可能會放棄填寫。如果一開始只要求填寫郵箱，這就大大降低了注冊門檻。另外一方面，即使用戶在后續(xù)的注冊流程中放棄了填寫，那企業(yè)至少已經(jīng)get到客戶的郵箱信息了。
類似Shopify這樣的郵箱表單是最常見的：
Webflow則直接把需要填寫的注冊項全列出來，這適用于注冊項在三個以內(nèi)的情況：
企業(yè)級（to B）產(chǎn)品不像消費級（to C）產(chǎn)品那么普遍和易獲取，企業(yè)客戶在選擇產(chǎn)品的時候更為慎重，官網(wǎng)要幫助消除他們的疑慮，建立對產(chǎn)品的信任感，最好的方式就是把已購買產(chǎn)品的客戶成功案例展示出來。你的客戶就是你產(chǎn)品天生的代言人，他們比你的產(chǎn)品本身更有說服力。
1. 用真實的客戶頭像提升可信度
比起單純的文字展示，真實的客戶頭像可以大大提升客戶評論的可信度。對比下面兩張圖感受一下。
Webflow的客戶評論：
Intercom的客戶評論：
2. 講故事，更容易打動用戶
比起一句話評論，用戶顯然更容易接受并記住一個真實場景下的故事。有的企業(yè)官網(wǎng)會花一整個版面的篇幅來講這個故事，從痛點到使用過程再到最后的獲益，有理有據(jù)令人信服。
Intercom在客戶故事這方面下足了功夫，每個重點客戶都有內(nèi)容豐富的專題頁，里面有客戶公司簡介，描述了用Intercom的哪些產(chǎn)品解決了哪些問題，有從他們產(chǎn)品角度出發(fā)的第三人稱描述，也有客戶的第一人稱陳述：
越來越多的公司已經(jīng)不滿足于靜態(tài)講故事，例如Invision，他們開始使用更專業(yè)、更有說服力的采訪短片來作為客戶成功案例：
3. 的數(shù)字更有說服力
比起描述程度文案類似：這款產(chǎn)品幫助我們“大大提升了效率”、“獲得了更多用戶咨詢量”，人們更喜歡看到這樣的描述：這款產(chǎn)品幫助我們“減少了18%的操作時間”、“提升了25%的用戶咨詢量”。的數(shù)字比模糊的范圍來的更有根據(jù)、更有說服力。
Intercom的每個客戶案例中都有的數(shù)據(jù)支撐：
4. 大公司的案例會強化信心
大公司的口碑效應還用說么。如果你有大客戶，那毫不猶豫地把他們的LOGO展示出來吧。
看看Invision的大客戶logo墻：
除了上面提到的5大要點之外，還有一些提升網(wǎng)站體驗的方法，例如：A/B Test、響應式設(shè)計、優(yōu)化加載時間等。
最后補充一點：對于消費級（to C）產(chǎn)品，例如我們熟悉的Evernote、Dropbox，他們的使用者與他們官網(wǎng)的訪客基本是同一個人。而對于企業(yè)級（to B）產(chǎn)品來說，產(chǎn)品使用者和購買者往往不是同一個人，也就是說產(chǎn)品使用者可能是客服人員，而官網(wǎng)的訪客卻可能是主管或采購之類負責買單的人。因此，企業(yè)產(chǎn)品官網(wǎng)的設(shè)計要兼顧使用者和購買者的不同角色，洞察目標客戶所在行業(yè)特征，最大化展示產(chǎn)品在提升企業(yè)效率或收益上的優(yōu)勢。
藍藍設(shè)計( m.cqzjtgb.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務
藍藍設(shè)計的小編 http://m.cqzjtgb.com