南順網絡

5大設計要點，搭建好看又好賣的(de)企業産品官網

企業産品官網的(de)作用是傳達信息和(hé)促進轉化。傳達信息是告訴訪客這款産品是什麽/能為(wèi)你公司做(zuò)什麽/為(wèi)什麽值得我購買，再配合一(yī)些增強說服力的(de)手段來促進轉化——将盡量多的(de)訪客（潛在客戶）轉化為(wèi)注冊用戶并最終完成購買。按照用戶浏覽網站的(de)順序，有以下 5 大設計要點：

• 一(yī)、善用首屏大圖吸引視(shì)線

• 二、銷售主張明确傳達産品價值

• 三、合理(lǐ)的(de)導航方便訪客獲取信息

• 四、無處不在的(de)CTA推動轉化

• 五、客戶案例增強信任感

一(yī)、善用首屏大圖吸引視(shì)線

首屏大圖占據了官網最寶貴的(de)第一(yī)屏，它決定了訪客對官網的(de)第一(yī)印象。首屏大圖可(kě)以輔助産品Slogan來有效傳達産品價值，同時還會影響到官網整體的(de)氣質。常見的(de)首屏大圖有以下 5 種表現形式：

1.實景照片營造場景氛圍

在實景照片這個形式上，企業級産品的(de)表現力遠不及消費級産品（對比一(yī)下Salesforce和(hé)Apple的(de)官網就知道(dào)了），因為(wèi)企業的(de)商務屬性決定了他們不能像消費級産品那樣大膽地(dì)彰顯個性。企業産品官網一(yī)般會用客戶使用産品的(de)場景照來說明産品給他們工作帶來的(de)益處，或用一(yī)些開闊的(de)風景照來表現公司的(de)價值觀和(hé)願景。

這種傳統的(de)照片形式常見于一(yī)些大公司，例如(rú)微軟的(de)CRM産品Microsoft Dynamics 365：

2.概念圖用隐喻表達産品價值

經過設計處理(lǐ)之後的(de)概念圖，比真實照片的(de)表現空間更大，可(kě)以通過一(yī)些隐喻的(de)手法來傳達産品價值。

Zendesk用形象的(de)概念圖來輔助傳達産品的(de)價值主張——We can lend a hand

3.插畫最适合講故事

近年(nián)來一(yī)些企業重塑品牌向更年(nián)輕更有活力的(de)方向發展。插畫的(de)形式有利于塑造輕松時尚的(de)品牌氣質，同時也是最适合用來講故事的(de)表達形式。

Intercom用生動的(de)手繪風插畫描繪了一(yī)副工作中遭遇的(de)混亂場景，引出了使用Intercom可(kě)以結束這一(yī)切混亂的(de)概念：

4.産品界面圖簡單直觀

簡單直觀的(de)運用産品界面圖作為(wèi)首屏大圖，讓用戶對産品使用過程有一(yī)種直觀的(de)體驗，也是一(yī)種對于自(zì)己産品的(de)設計很有自(zì)信的(de)表現。

雲存儲應用Box用産品界面和(hé)照片混搭的(de)形式來表現“Work as One”的(de)産品理(lǐ)念：

5.客戶照片更具說服力

使用真實客戶的(de)肖像作為(wèi)首屏大圖，兼具客戶案例的(de)作用，使産品更有說服力。

自(zì)助建站應用Squarespace用高(gāo)清的(de)客戶肖像圖配合産品界面，來表現他們的(de)應用可(kě)以為(wèi)不同人群定制專屬網站的(de)理(lǐ)念：

6.視(shì)頻是流行趨勢

用視(shì)頻代替靜态圖出現在首屏成為(wèi)近年(nián)來流行的(de)一(yī)大趨勢，比起靜态圖，動态視(shì)頻更容易吸引目光。視(shì)頻的(de)內(nèi)容可(kě)以是産品功能解說/客戶案例講述/企業文化傳播等，視(shì)頻的(de)觸發方式有自(zì)動播放/預加載/點擊播放等

二、銷售主張明确傳達産品價值

當用戶被首屏大圖吸引住目光之後，想要進一(yī)步留住客戶，就必須立即向他們傳達産品的(de)核心價值，讓他明白購買你們的(de)産品可(kě)以獲得什麽好處。在營銷領域，這被稱為(wèi)USP（Unique Selling Proposition），意為(wèi)“獨特的(de)銷售主張”

1.銷售主張需要多次強調

在企業産品官網中，銷售主張會多次出現，完整的(de)銷售主張通常會由以下三個基本部分組成：首屏标題、強化闡述和(hé)最後重申。

首屏大标題是USP的(de)核心，簡短(duǎn)明确的(de)slogan是一(yī)個強有力的(de)開場白。通常位于官網首屏最顯眼的(de)位置，用大字體突出，同時可(kě)以用小字在旁邊進行輔助說明。

MailChimp的(de)首屏标題簡短(duǎn)有力：

b.強化闡述

用來強化和(hé)豐富USP，讓它看起來更有說服力。可(kě)以從正面出發列舉産品功能、強調産品優勢，也可(kě)以從側面來印證，比如(rú)成功案例、資質證書等。

MailChimp用與首屏标題同樣風格的(de)文案，配合界面圖來強化USP：

c.最後重申

當訪客浏覽了長(cháng)篇的(de)強化闡述，浏覽到頁面底部時，最後再重申一(yī)下USP，首尾呼應。

MailChimp在頁面底部最後重申，号召轉化行動：

2.文案風格會影響銷售主張的(de)表現力

根據不同的(de)産品功能和(hé)品牌調性，銷售主張的(de)文案風格也各不相同，主要有以下幾種類型：

a.清晰直白的(de)功能陳述

清晰直白的(de)功能陳述可(kě)能會有點無趣，但卻是最直觀、最易于理(lǐ)解的(de)。用一(yī)句話講清楚你的(de)産品是做(zuò)什麽的(de)，比含糊其辭的(de)描述更容易讓訪客産生好感。

Xero是一(yī)款為(wèi)小型企業提供會計服務的(de)應用，他們用一(yī)句話清晰傳達了Xero的(de)功能價值與目标用戶：

b.令人印象深刻的(de)号召型言語

使用一(yī)些強有力、幹脆利落的(de)slogan，去(qù)号召用戶行動。使用這類USP的(de)公司一(yī)般都已建立了一(yī)定的(de)用戶基礎和(hé)品牌形象。

光看Asana的(de)大标題是不是很難猜到這個公司是提供什麽服務？即便如(rú)此，這幾句簡短(duǎn)大氣的(de)标語還是能給人留下深刻印象：

c.抓住用戶痛點，喚起情感共鳴

這種類型的(de)slogan一(yī)般會從反面切入描述痛點，例如(rú)“工作不用那麽麻煩，用xxx你可(kě)以…”，然後引出産品可(kě)以解決這些痛點。這是一(yī)種逆向思維，通過描述産品可(kě)以“規避負面結果”來突出其解決問題的(de)能力，這是與“獲得正面結果”相反的(de)一(yī)種思路。

Basecamp整個官網的(de)措辭風格都是如(rú)此：

d.動态多合一(yī)

在尋找案例的(de)過程中，還發現了一(yī)種動态的(de)多合一(yī)文案表現形式。它的(de)做(zuò)法是保持核心文案固定不變，其餘的(de)則不斷切換。動态的(de)表現形式更吸睛，也賦予了USP更全面的(de)展現。

Atlassian旗下的(de)Confluence品牌的(de)核心價值是“make better by working together”，因此在動态slogan中保持核心文案不變，切換開頭的(de)主語來突出産品的(de)适用範圍

編輯:--ns868