按照“頭圖-功能總覽-功能細(xì)節(jié)-客戶(hù)展示-注冊(cè)試用”的順序由淺入深、從宏觀到微觀的順序引導(dǎo)訪客完成瀏覽和轉(zhuǎn)化。到頁(yè)面底部才會(huì)出現(xiàn)一排弱弱的鏈接：

線性結(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è)或登陸入口：

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

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

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è)：

子頁(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ò)渡地十分自然：

再看看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)的一致性，確保用戶(hù)始終知道自己所處的位置。保持導(dǎo)航的使用簡(jiǎn)單性，刪除不必要項(xiàng)目。簡(jiǎn)單很好，但是要確保提供了訪客想要獲得的信息入口。

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

CTA（Call to Action，用戶(hù)行為召喚）是指希望訪客在瀏覽官網(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的按鈕使用了品牌色：紅色。

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

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

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

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

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

最新評(píng)論