企業(yè)網(wǎng)站是企業(yè)在互聯(lián)網(wǎng)上進行網(wǎng)絡營銷和形象宣傳的平臺，相當于企業(yè)的網(wǎng)絡名片，不但對企業(yè)的形象是一個良好的宣傳，同時可以輔助企業(yè)的銷售，通過網(wǎng)絡直接幫助企業(yè)實現(xiàn)產(chǎn)品的銷售，企業(yè)可以利用網(wǎng)站來進行宣傳、產(chǎn)品資訊發(fā)布、招聘等等，因此一個精致的企業(yè)官網(wǎng)對產(chǎn)品來說至關重要，那么，企業(yè)官網(wǎng)怎么做呢？這5大設計要點教你搭建好看又好賣的企業(yè)產(chǎn)品官網(wǎng)！

在談到企業(yè)產(chǎn)品的營銷時（本文中提到的“企業(yè)產(chǎn)品”是指“給企業(yè)客戶使用的軟件/應用”），一種觀點認為客戶肯定是靠線下推廣來獲取的，另一種觀點認為應該讓用戶主動購買而不是被動推銷，持這種觀點的公司尤其重視通過產(chǎn)品官網(wǎng)來獲客。

無論持哪種觀點，不可否認的是官網(wǎng)是客戶對你產(chǎn)品的第一印象，很多潛在客戶在購買之前都是先通過官網(wǎng)來了解產(chǎn)品的。然而很多公司在產(chǎn)品官網(wǎng)設計這件事上投入的精力還不及線下推廣的萬分之一，有的只把官網(wǎng)當作擺設，粗制濫造套個模板結束，甚至還忽略了移動端適配。

作為企業(yè)產(chǎn)品的設計師，我們要如何設計好看又好賣的產(chǎn)品官網(wǎng)，有沒有一些套路可循？

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

一、善用首屏大圖吸引視線二、銷售主張明確傳達產(chǎn)品價值三、合理的導航方便訪客獲取信息四、無處不在的CTA推動轉化五、客戶案例增強信任感

一、善用首屏大圖吸引視線

首屏大圖占據(jù)了官網(wǎng)最寶貴的第一屏，它決定了訪客對官網(wǎng)的第一印象。首屏大圖可以輔助產(chǎn)品Slogan來有效傳達產(chǎn)品價值，同時還會影響到官網(wǎng)整體的氣質。常見的首屏大圖有以下 5 種表現(xiàn)形式：

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

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

這種傳統(tǒng)的照片形式常見于一些大公司，例如微軟的CRM產(chǎn)品Microsoft Dynamics 365：

客服應用HelpCrunch則用來表現(xiàn)公司未來的愿景：

2.概念圖用隱喻表達產(chǎn)品價值

經(jīng)過設計處理之后的概念圖，比真實照片的表現(xiàn)空間更大，可以通過一些隱喻的手法來傳達產(chǎn)品價值。

Zendesk用形象的概念圖來輔助傳達產(chǎn)品的價值主張——We can lend a hand。

3.插畫最適合講故事

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

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

Atlassian用配色明快的圖形插畫描繪了齊心協(xié)力的工作場景，烘托出“Team up”的產(chǎn)品價值主張：

4.產(chǎn)品界面圖簡單直觀

簡單直觀的運用產(chǎn)品界面圖作為首屏大圖，讓用戶對產(chǎn)品使用過程有一種直觀的體驗，也是一種對于自己產(chǎn)品的設計很有自信的表現(xiàn)。

云存儲應用Box用產(chǎn)品界面和照片混搭的形式來表現(xiàn)“Work as One”的產(chǎn)品理念：

5.客戶照片更具說服力

使用真實客戶的肖像作為首屏大圖，兼具客戶案例的作用，使產(chǎn)品更有說服力。

自助建站應用Squarespace用高清的客戶肖像圖配合產(chǎn)品界面，來表現(xiàn)他們的應用可以為不同人群定制專屬網(wǎng)站的理念：