企業(yè)官網(wǎng)怎么做 5大設計要點教你搭建好看又好賣的企業(yè)產(chǎn)品官網(wǎng)

騰訊ISUX 發(fā)布時間：2017-07-22 16:16:20 作者：佚名

近日，很多網(wǎng)友咨詢小編企業(yè)官網(wǎng)怎么做？今天腳本之家小編就給大家分享5大設計要點教你搭建好看又好賣的企業(yè)產(chǎn)品官網(wǎng)，這5大設計要點分別是1.善用首屏大圖吸引視線2.銷售主張明確傳達產(chǎn)品價值3.合理的導航方便訪客獲取信息等

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

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

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)首頁設置了 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的設計。到達子產(chǎn)品頁后會保留主導航，隨著頁面滾動，子產(chǎn)品導航會把主導航推出，繼而代替主導航的位置：

Tips：

規(guī)劃訪客的瀏覽歷程，保持順暢自然的體驗。保持導航結(jié)構(gòu)的一致性，確保用戶始終知道自己所處的位置。保持導航的使用簡單性，刪除不必要項目。簡單很好，但是要確保提供了訪客想要獲得的信息入口。

四、無處不在的CTA推動轉(zhuǎn)化

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的按鈕使用了品牌色：紅色。