使用扁平結(jié)構(gòu)可以減小網(wǎng)頁(yè)深度，讓訪客用較少的點(diǎn)擊就能到達(dá)目標(biāo)頁(yè)面，同時(shí)有利于搜索引擎抓取效率。在尋找企業(yè)產(chǎn)品官網(wǎng)案例的過程中我發(fā)現(xiàn)，對(duì)于功能相對(duì)簡(jiǎn)單的產(chǎn)品大多使用一級(jí)導(dǎo)航，而對(duì)于規(guī)模龐大的產(chǎn)品，他們的導(dǎo)航層級(jí)最多也只到二級(jí)?？梢姳馄浇Y(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è)或登陸入口：
對(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)介，有序又直觀：
在Resource下拉菜單中則收攏了客戶案例、幫助中心、產(chǎn)品演示等資源入口，用清晰的組織方式把這些信息集中在一起，讓想要了解更多信息的人自己去探索：
使用類似結(jié)構(gòu)的還有Atlassian等大型公司：
3.確保訪客清楚自己所處的位置
網(wǎng)站是一個(gè)虛擬空間，訪客在頁(yè)面之間的跳轉(zhuǎn)是無(wú)法預(yù)料的，如果沒有清晰的導(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è)：
子頁(yè)面開始向下滾動(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è)變化過程過渡地十分自然：
再看看Atlassian的設(shè)計(jì)。到達(dá)子產(chǎn)品頁(yè)后會(huì)保留主導(dǎo)航，隨著頁(yè)面滾動(dòng)，子產(chǎn)品導(dǎo)航會(huì)把主導(dǎo)航推出，繼而代替主導(dǎo)航的位置：
Tips：
- 規(guī)劃訪客的瀏覽歷程，保持順暢自然的體驗(yàn)。
- 保持導(dǎo)航結(jié)構(gòu)的一致性，確保用戶始終知道自己所處的位置。
- 保持導(dǎo)航的使用簡(jiǎn)單性，刪除不必要項(xiàng)目。
- 簡(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.視覺樣式必須醒目
既然官網(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的按鈕使用了品牌色：紅色。
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.保持一直可見，反復(fù)強(qiáng)調(diào)
CTA按鈕一般與銷售主張同時(shí)出現(xiàn)，主要分布在官網(wǎng)的三個(gè)位置：頂部導(dǎo)航、首屏大圖、頁(yè)面底部。頂部導(dǎo)航的位置可以保證按鈕一直可見，首屏大圖上的按鈕是視覺核心，頁(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)品的了解。
5.嵌入簡(jiǎn)易表單，降低注冊(cè)門檻
在CTA按鈕旁放置一個(gè)簡(jiǎn)易的內(nèi)嵌表單，相當(dāng)于簡(jiǎn)化了后續(xù)的轉(zhuǎn)化流程。例如，當(dāng)用戶點(diǎn)擊注冊(cè)按鈕之后一般會(huì)被要求填寫用戶名、郵箱、密碼等信息，如果表單項(xiàng)很復(fù)雜，用戶很可能會(huì)放棄填寫。如果一開始只要求填寫郵箱，這就大大降低了注冊(cè)門檻。另外一方面，即使用戶在后續(xù)的注冊(cè)流程中放棄了填寫，那企業(yè)至少已經(jīng)get到客戶的郵箱信息了。
類似Shopify這樣的郵箱表單是最常見的：
Webflow則直接把需要填寫的注冊(cè)項(xiàng)全列出來(lái)，這適用于注冊(cè)項(xiàng)在三個(gè)以內(nèi)的情況：
五、客戶案例增強(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)論：
Intercom的客戶評(píng)論：
2.講故事，更容易打動(dòng)用戶
比起一句話評(píng)論，用戶顯然更容易接受并記住一個(gè)真實(shí)場(chǎng)景下的故事。有的企業(yè)官網(wǎng)會(huì)花一整個(gè)版面的篇幅來(lái)講這個(gè)故事，從痛點(diǎn)到使用過程再到最后的獲益，有理有據(jù)令人信服。
Intercom在客戶故事這方面下足了功夫，每個(gè)重點(diǎn)客戶都有內(nèi)容豐富的專題頁(yè)，里面有客戶公司簡(jiǎn)介，描述了用Intercom的哪些產(chǎn)品解決了哪些問題，有從他們產(chǎn)品角度出發(fā)的第三人稱描述，也有客戶的第一人稱陳述：
越來(lái)越多的公司已經(jīng)不滿足于靜態(tài)講故事，例如Invision，他們開始使用更專業(yè)、更有說(shuō)服力的采訪短片來(lái)作為客戶成功案例：
3.精確的數(shù)字更有說(shuō)服力
比起描述程度文案類似：這款產(chǎn)品幫助我們“大大提升了效率”、“獲得了更多用戶咨詢量”，人們更喜歡看到這樣的描述：這款產(chǎn)品幫助我們“減少了18%的操作時(shí)間”、“提升了25%的用戶咨詢量”。精確的數(shù)字比模糊的范圍來(lái)的更有根據(jù)、更有說(shuō)服力。
Intercom的每個(gè)客戶案例中都有精確的數(shù)據(jù)支撐：
4.大公司的案例會(huì)強(qiáng)化信心
大公司的口碑效應(yīng)還用說(shuō)么。如果你有大客戶，那毫不猶豫地把他們的LOGO展示出來(lái)吧。
看看Invision的大客戶logo墻：
寫在最后
除了上面提到的 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ì)。
要設(shè)計(jì)出好看又好賣的企業(yè)產(chǎn)品官網(wǎng)，可以參考以上的 5 大要（tao）點(diǎn)（lu），也希望大家在設(shè)計(jì)過程中少一點(diǎn)套路，多一點(diǎn)freestyle~
.jpg)
