編輯導(dǎo)語：如今很多企業(yè)對于官網(wǎng)的設(shè)計(jì)并不重視，但是大家想了解一個(gè)企業(yè)時(shí)，首先就會想到找一下這個(gè)企業(yè)的官網(wǎng)如何；所以企業(yè)官網(wǎng)是一個(gè)非常重要的獲客渠道，設(shè)計(jì)一個(gè)好的官網(wǎng)也可以提升轉(zhuǎn)化率；本文作者分享了關(guān)于官網(wǎng)設(shè)計(jì)的思考和誤區(qū)，我們一起來看一下。

企業(yè)官網(wǎng)是用戶了解產(chǎn)品信息，企業(yè)傳遞品牌價(jià)值的重要渠道，企業(yè)官網(wǎng)還可以為公司帶來用戶的轉(zhuǎn)化營收。

那如何設(shè)計(jì)才能讓品牌在眾多產(chǎn)品中脫穎而出，并且推動用戶為產(chǎn)品買單？

在酷家樂企業(yè)官網(wǎng)的設(shè)計(jì)實(shí)踐中，通過我們的不斷探索與實(shí)驗(yàn)，新版官網(wǎng)上線后，月均轉(zhuǎn)化率提升了54%，這里我們有一些思考同時(shí)也有一些探索中的誤區(qū)分享給大家。

一、目標(biāo)

在開始設(shè)計(jì)前，我們已經(jīng)有一個(gè)版本的企業(yè)官網(wǎng)，通過分析發(fā)現(xiàn)，舊版本有較多明顯問題。

有一個(gè)誤區(qū)是，當(dāng)重設(shè)計(jì)開始時(shí)，容易陷入到舊版的設(shè)計(jì)模式中，為解決舊版本的問題而開始設(shè)計(jì)，這種方式有可能會導(dǎo)致與最終的目標(biāo)方向出現(xiàn)偏離；因此，在項(xiàng)目初始階段，團(tuán)隊(duì)成員共同設(shè)定清晰的目標(biāo)非常重要，圍繞核心目標(biāo)，設(shè)計(jì)中的每個(gè)元素都要為這個(gè)目標(biāo)服務(wù)。

經(jīng)過團(tuán)隊(duì)內(nèi)多角色討論與分析，最終確定重設(shè)計(jì)的目標(biāo)是：

• 提升獲客轉(zhuǎn)化；
• 提升產(chǎn)品氣質(zhì)；
• 沉淀設(shè)計(jì)資產(chǎn)；

二、提升獲客轉(zhuǎn)化

獲客轉(zhuǎn)化作為產(chǎn)品的業(yè)務(wù)目標(biāo)，關(guān)鍵首先是用戶——用戶是誰，用戶有什么特征，只有當(dāng)我們足夠了解用戶與用戶行為發(fā)生的原因，才可以更好實(shí)現(xiàn)用戶轉(zhuǎn)化。

通過對內(nèi)外部人員的訪談，閱讀客服反饋文檔、了解用戶數(shù)據(jù)情況等方式去了解用戶，我們發(fā)現(xiàn)了目標(biāo)用戶所具有的一些主要特征：

2. 細(xì)分用戶情況

普通設(shè)計(jì)師：自己使用，關(guān)注產(chǎn)品功能是否符合自己的需求，例如設(shè)計(jì)能力和渲染效果等。

設(shè)計(jì)主管or專業(yè)負(fù)責(zé)人：關(guān)注產(chǎn)品功能，學(xué)習(xí)成本、管理能力，也關(guān)注產(chǎn)品公司的品牌實(shí)力情況。

小微企業(yè)負(fù)責(zé)人或個(gè)體老板：關(guān)注產(chǎn)品功能、學(xué)習(xí)成本、售后培訓(xùn)，讓不是專業(yè)設(shè)計(jì)師的員工快速學(xué)習(xí)并使用，幫助銷售業(yè)績的上漲。

通過用戶研究，我們了解到是什么因素影響了用戶轉(zhuǎn)化，借此可以更好的組織信息構(gòu)建。

3. 頁面重構(gòu)

相信大家已經(jīng)聽過AIDA模型、FABE法則等，通過這些經(jīng)典方法可以幫助我們快速的搭建了一個(gè)良好的網(wǎng)站框架；再結(jié)合用戶研究結(jié)論和多次的腦暴會議，我們確定了新的頁面思路：A 打造信息分層、B 突出產(chǎn)品核心價(jià)值、C 縮短轉(zhuǎn)化路徑。

A、打造信息分層

用戶來到網(wǎng)站后，如何快速尋找并獲得想要的信息，建立對產(chǎn)品的價(jià)值認(rèn)同從而實(shí)現(xiàn)轉(zhuǎn)化，是打造信息分層的重點(diǎn)。

在這個(gè)轉(zhuǎn)化的過程中，用戶通常會經(jīng)歷這么幾個(gè)重要步驟：產(chǎn)品or品牌初識 — 逐步了解 — 強(qiáng)化認(rèn)知 — 打消疑慮 — 行為轉(zhuǎn)化。

基于用戶行為路徑，我們改版了酷家樂首頁和產(chǎn)品頁的頁面框架，下面是改版前后框架對比：

優(yōu)化后效果圖對比

B、突出產(chǎn)品核心價(jià)值

在用戶研究中我們發(fā)現(xiàn)，產(chǎn)品功能是所有用戶的共同關(guān)注點(diǎn)。

對企業(yè)官網(wǎng)來說，除了露出產(chǎn)品功能優(yōu)勢，還需打造產(chǎn)品差異于競品的核心價(jià)值，那酷家樂產(chǎn)品的核心價(jià)值是什么？

經(jīng)過不斷的討論、分析，以及來自用戶的聲音，在眾多產(chǎn)品優(yōu)勢中我們希望重點(diǎn)透出酷家樂產(chǎn)品的快速設(shè)計(jì)和渲染能力，這是用戶買單的關(guān)鍵決策點(diǎn)也是產(chǎn)品想要打造區(qū)別于競品的核心競爭優(yōu)勢。

在整體頁面的顯示優(yōu)先級、區(qū)塊的投入比上，設(shè)計(jì)突出強(qiáng)調(diào)了產(chǎn)品的設(shè)計(jì)和渲染能力，并在內(nèi)容細(xì)節(jié)處強(qiáng)調(diào)了產(chǎn)品利益點(diǎn)。

在產(chǎn)品介紹頁中，同樣重點(diǎn)突出產(chǎn)品功能區(qū)塊。

C、縮短轉(zhuǎn)化路徑

在打造信息分層時(shí)，我們提到用戶的轉(zhuǎn)化過程會歷經(jīng)幾個(gè)重要步驟，但并不代表用戶一定會經(jīng)歷完整過程才會轉(zhuǎn)化，當(dāng)用戶在某一節(jié)點(diǎn)做出行動時(shí)，我們需及時(shí)的給予入口，讓用戶快速轉(zhuǎn)化。

1）即時(shí)行為召喚

我們?yōu)橛脩舻霓D(zhuǎn)化，設(shè)置了多個(gè)即時(shí)行為召喚入口：

• 右上角免費(fèi)通話按鈕；
• 重要模塊免費(fèi)試用（如banner、產(chǎn)品優(yōu)勢等）；
• 右側(cè)懸浮試用入口；
• 客服咨詢；
• 底部快速入口。

在交互方式上，除了最簡單的需用戶主動觸發(fā)的行為按鈕外，我們也做了一些其他的嘗試，希望與用戶產(chǎn)生更友好的互動。

友好的客服呼出方式：

客服是用戶更進(jìn)一步了解產(chǎn)品的重要入口，如何不打擾用戶又能引起用戶注意與我們產(chǎn)生進(jìn)一步交互，我們在視覺和交互上設(shè)計(jì)了2種方式。

視覺上，客服以真實(shí)人像的方式顯示，并且根據(jù)不同質(zhì)量的客戶渠道來源，以不同的客服身份感知，給予高質(zhì)量用戶更好的身份認(rèn)同。

交互上，當(dāng)用戶來到網(wǎng)站后，我們會在幾秒內(nèi)以對話框的方式彈出一條消息，并利用小紅點(diǎn)的消除心理，在客服頭像上顯示消息數(shù)提示，用戶可通過點(diǎn)擊客服頭像或點(diǎn)擊對話框與客服對話。

當(dāng)結(jié)束對話關(guān)閉消息彈窗后，右下角會動態(tài)彈出客服最新一條的消息內(nèi)容，用戶無需點(diǎn)開，即可看到最新信息，進(jìn)行選擇性回復(fù)。

底部快捷入口：

比表單更簡短的信息輸入，用戶瀏覽了網(wǎng)站的完整信息后，可通過底部入口快速轉(zhuǎn)化。

2）表單的優(yōu)化

表單設(shè)計(jì)需遵循清晰、簡單、高效的原則，避免過長表單讓用戶在錄入過程中枯燥乏味，進(jìn)而流失；而B端官網(wǎng)的最終用戶是某個(gè)公司或團(tuán)體，因此還需讓用戶明確行為的身份角色認(rèn)知。

優(yōu)化表單設(shè)計(jì)時(shí)，我們對輸入項(xiàng)重新排序，把企業(yè)名稱和用戶職位優(yōu)先級提高，無團(tuán)體的個(gè)人用戶看到這樣的信息，可以意識到自己的角色和產(chǎn)品的適配性問題；另外，我們把重復(fù)無用的錄入信息做刪減，確保用戶只提交最有效最精簡的信息，提高了信息的有效性，也縮短了用戶錄入的信息量和時(shí)長。

僅通過表單的優(yōu)化，我們過濾掉了35%的無效線索，并為后續(xù)客服的跟進(jìn)節(jié)省了人工成本。

綜上所述，我們從了解用戶，建立框架，輸出內(nèi)容，一步步推動了用戶建立認(rèn)知到最終行為的轉(zhuǎn)化。

三、提升產(chǎn)品氣質(zhì)

官網(wǎng)是企業(yè)產(chǎn)品、品牌曝光的重要渠道，是塑造企業(yè)品牌形象的一部分，我們在對用戶進(jìn)行訪談時(shí)發(fā)現(xiàn)：

重設(shè)計(jì)時(shí)，提升產(chǎn)品氣質(zhì)的傳達(dá)也是重要一環(huán)，而影響產(chǎn)品氣質(zhì)傳達(dá)的主要是2點(diǎn)：視覺和文案。

1）視覺提升

調(diào)研國內(nèi)外B端產(chǎn)品的設(shè)計(jì)趨勢，B端產(chǎn)品官網(wǎng)的設(shè)計(jì)風(fēng)格上普通傾向穩(wěn)重/商業(yè)化特征、色彩偏向冷暗色，利用熟悉度偏見、格式塔心理學(xué)，我們選擇在同類風(fēng)格基礎(chǔ)上優(yōu)化視覺，提升用戶認(rèn)同感。

酷家樂產(chǎn)品感知關(guān)鍵詞：

通過產(chǎn)品關(guān)鍵詞推導(dǎo)，設(shè)計(jì)2個(gè)風(fēng)格方向概念稿：

考慮產(chǎn)品屬性，用戶人群特征等綜合因素，現(xiàn)階段我們選擇了方向2，更強(qiáng)調(diào)專業(yè)與產(chǎn)品實(shí)景感。

Icon的表現(xiàn)手法上，也根據(jù)實(shí)際應(yīng)用場景需求，拓展了線、面，2種風(fēng)格圖標(biāo)，均使用異形圖標(biāo)，強(qiáng)化圖形的含義表達(dá)。

2）文案升級

通常而言，產(chǎn)品文案直接由市場或運(yùn)營同事產(chǎn)出，設(shè)計(jì)師只需對內(nèi)容復(fù)制粘貼再考慮視覺排版方式；但在探索實(shí)驗(yàn)中，我們發(fā)現(xiàn)，即便是由專業(yè)的市場或運(yùn)營同學(xué)提供的內(nèi)容，也并不一定是用戶關(guān)注和感興趣的；特別是部分公司更關(guān)注線下營銷，線上復(fù)制線下內(nèi)容，這種輸出方式可能不利于品牌傳遞以及線上獲客。

因此，文案作為企業(yè)官網(wǎng)的重要設(shè)計(jì)元素，我們在團(tuán)隊(duì)內(nèi)發(fā)起了文案共創(chuàng)，集合多角色的力量深入討論文案內(nèi)容，并進(jìn)行數(shù)據(jù)的測試與驗(yàn)證。

在文案創(chuàng)作上，我們明確的原則是：清晰、專業(yè)。

清晰 Clear：

產(chǎn)品文案需表述清晰，易于閱讀、理解與記憶。

這是由企業(yè)官網(wǎng)的信息量級決定的，當(dāng)紛繁復(fù)雜的信息呈現(xiàn)在用戶面前時(shí)，用戶如何快速消化和理解這些信息？

特別是一些產(chǎn)品想要強(qiáng)調(diào)所有內(nèi)容信息，不斷疊加不斷重復(fù)內(nèi)容，這種方式既不利于用戶體驗(yàn)，也不易于用戶理解與記憶產(chǎn)品；再加上用戶耐性是有限的，不會逐字逐句的閱讀，因此更需要產(chǎn)品文案詳略得當(dāng)、清晰明了。

專業(yè) Professional：

專業(yè)不代表晦澀難理解，在一些公司宣傳文案中，特別喜歡高度概括、抽象的詞匯表達(dá)產(chǎn)品概念；當(dāng)大家都在使用這種方式的時(shí)候，這些內(nèi)容很難具有專業(yè)、真實(shí)的力量。

因此，介紹產(chǎn)品時(shí)使用通俗一些但更真實(shí)的文案語言，使用數(shù)字化的內(nèi)容進(jìn)行產(chǎn)品佐證，會更具真實(shí)的力量打動用戶；而適時(shí)的在一些地方，露出產(chǎn)品的專業(yè)性與權(quán)威性，也可以為企業(yè)營造良好的品牌形象。

四、沉淀設(shè)計(jì)資產(chǎn)

官網(wǎng)設(shè)計(jì)在公司資源占比不多，可企業(yè)官網(wǎng)承載內(nèi)容、頁面量級非常大，這種情況下建立統(tǒng)一的框架規(guī)范，抽離通用的模塊規(guī)則可以幫助設(shè)計(jì)和開發(fā)效率的大幅提升，而這些通用規(guī)則還可橫向拓展到公司其他項(xiàng)目中。

五、寫在最后

企業(yè)官網(wǎng)的項(xiàng)目量級在公司級項(xiàng)目中占比并不重，團(tuán)隊(duì)成員主要是視覺和運(yùn)營互相配合；這一類的項(xiàng)目雖然簡單，但設(shè)計(jì)師可選擇把握主動性，借此拓展自己專業(yè)深度和廣度，汲取到更多其他知識。

其次，拉動同事合作非常重要，在這個(gè)項(xiàng)目中，視覺設(shè)計(jì)師主導(dǎo)了整個(gè)項(xiàng)目的推進(jìn)；聯(lián)合運(yùn)營同事發(fā)起用戶研究，發(fā)起每周團(tuán)隊(duì)腦暴，推進(jìn)項(xiàng)目建立數(shù)據(jù)測試方法，以及與其他團(tuán)隊(duì)合作規(guī)范產(chǎn)品上線的標(biāo)準(zhǔn)等等。

整個(gè)項(xiàng)目，我們從目標(biāo)出發(fā)，一步步探索實(shí)踐，以小團(tuán)隊(duì)的力量打造了高轉(zhuǎn)化的企業(yè)官網(wǎng)，在探索過程中因?yàn)楦鞣N原因還有很多不足和遺憾，希望與大家一起思考、努力和共勉！

作者：柚幾；公眾號：酷家樂用戶體驗(yàn)設(shè)計(jì)，歡迎關(guān)注，交流探討。

本文由 @酷家樂用戶體驗(yàn)設(shè)計(jì) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash，基于 CC0 協(xié)議