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

企業(yè)網(wǎng)站是企業(yè)在互聯(lián)網(wǎng)上進(jìn)行網(wǎng)絡(luò)營銷和形象宣傳的平臺,相當(dāng)于企業(yè)的網(wǎng)絡(luò)名片,不但對企業(yè)的形象是一個良好的宣傳,同時可以輔助企業(yè)的銷售,通過網(wǎng)絡(luò)直接幫助企業(yè)實現(xiàn)產(chǎn)品的銷售,企業(yè)可以利用網(wǎng)站來進(jìn)行宣傳、產(chǎn)品資訊發(fā)布、招聘等等,因此一個精致的企業(yè)官網(wǎng)對產(chǎn)品來說至關(guān)重要,那么,企業(yè)官網(wǎng)怎么做呢?這5大設(shè)計要點教你搭建好看又好賣的企業(yè)產(chǎn)品官網(wǎng)!
在談到企業(yè)產(chǎn)品的營銷時(本文中提到的“企業(yè)產(chǎn)品”是指“給企業(yè)客戶使用的軟件/應(yīng)用”),一種觀點認(rèn)為客戶肯定是靠線下推廣來獲取的,另一種觀點認(rèn)為應(yīng)該讓用戶主動購買而不是被動推銷,持這種觀點的公司尤其重視通過產(chǎn)品官網(wǎng)來獲客。
無論持哪種觀點,不可否認(rèn)的是官網(wǎng)是客戶對你產(chǎn)品的第一印象,很多潛在客戶在購買之前都是先通過官網(wǎng)來了解產(chǎn)品的。然而很多公司在產(chǎn)品官網(wǎng)設(shè)計這件事上投入的精力還不及線下推廣的萬分之一,有的只把官網(wǎng)當(dāng)作擺設(shè),粗制濫造套個模板結(jié)束,甚至還忽略了移動端適配。
作為企業(yè)產(chǎn)品的設(shè)計師,我們要如何設(shè)計好看又好賣的產(chǎn)品官網(wǎng),有沒有一些套路可循?
企業(yè)產(chǎn)品官網(wǎng)的作用是傳達(dá)信息和促進(jìn)轉(zhuǎn)化。傳達(dá)信息是告訴訪客這款產(chǎn)品是什么/能為你公司做什么/為什么值得我購買,再配合一些增強說服力的手段來促進(jìn)轉(zhuǎn)化——將盡量多的訪客(潛在客戶)轉(zhuǎn)化為注冊用戶并最終完成購買。按照用戶瀏覽網(wǎng)站的順序,有以下 5 大設(shè)計要點:
一、善用首屏大圖吸引視線二、銷售主張明確傳達(dá)產(chǎn)品價值三、合理的導(dǎo)航方便訪客獲取信息四、無處不在的CTA推動轉(zhuǎn)化五、客戶案例增強信任感
一、善用首屏大圖吸引視線
首屏大圖占據(jù)了官網(wǎng)最寶貴的第一屏,它決定了訪客對官網(wǎng)的第一印象。首屏大圖可以輔助產(chǎn)品Slogan來有效傳達(dá)產(chǎn)品價值,同時還會影響到官網(wǎng)整體的氣質(zhì)。常見的首屏大圖有以下 5 種表現(xiàn)形式:
1.實景照片營造場景氛圍
在實景照片這個形式上,企業(yè)級產(chǎn)品的表現(xiàn)力遠(yuǎn)不及消費級產(chǎn)品(對比一下Salesforce和Apple的官網(wǎng)就知道了),因為企業(yè)的商務(wù)屬性決定了他們不能像消費級產(chǎn)品那樣大膽地彰顯個性。企業(yè)產(chǎn)品官網(wǎng)一般會用客戶使用產(chǎn)品的場景照來說明產(chǎn)品給他們工作帶來的益處,或用一些開闊的風(fēng)景照來表現(xiàn)公司的價值觀和愿景。
這種傳統(tǒng)的照片形式常見于一些大公司,例如微軟的CRM產(chǎn)品Microsoft Dynamics 365:
客服應(yīng)用HelpCrunch則用來表現(xiàn)公司未來的愿景:
2.概念圖用隱喻表達(dá)產(chǎn)品價值
經(jīng)過設(shè)計處理之后的概念圖,比真實照片的表現(xiàn)空間更大,可以通過一些隱喻的手法來傳達(dá)產(chǎn)品價值。
Zendesk用形象的概念圖來輔助傳達(dá)產(chǎn)品的價值主張——We can lend a hand。
3.插畫最適合講故事
近年來一些企業(yè)重塑品牌向更年輕更有活力的方向發(fā)展。插畫的形式有利于塑造輕松時尚的品牌氣質(zhì),同時也是最適合用來講故事的表達(dá)形式。
Intercom用生動的手繪風(fēng)插畫描繪了一副工作中遭遇的混亂場景,引出了使用Intercom可以結(jié)束這一切混亂的概念:
Atlassian用配色明快的圖形插畫描繪了齊心協(xié)力的工作場景,烘托出“Team up”的產(chǎn)品價值主張:
4.產(chǎn)品界面圖簡單直觀
簡單直觀的運用產(chǎn)品界面圖作為首屏大圖,讓用戶對產(chǎn)品使用過程有一種直觀的體驗,也是一種對于自己產(chǎn)品的設(shè)計很有自信的表現(xiàn)。
云存儲應(yīng)用Box用產(chǎn)品界面和照片混搭的形式來表現(xiàn)“Work as One”的產(chǎn)品理念:
5.客戶照片更具說服力
使用真實客戶的肖像作為首屏大圖,兼具客戶案例的作用,使產(chǎn)品更有說服力。
自助建站應(yīng)用Squarespace用高清的客戶肖像圖配合產(chǎn)品界面,來表現(xiàn)他們的應(yīng)用可以為不同人群定制專屬網(wǎng)站的理念:
相關(guān)文章
- 簡單而片面的說,爬蟲就是由計算機自動與服務(wù)器交互獲取數(shù)據(jù)的工具,這篇文章主要想談?wù)勁老x獲取數(shù)據(jù)的這一部分。爬蟲請注意網(wǎng)站的Robot.txt文件,不要讓爬蟲違法,也不要2017-12-18
- 設(shè)計師可能無法減少App加載頁面的等待時間,但是可以讓等待時間變得有趣~,本文主要為大家淺淡App加載頁面的等待體驗設(shè)計技巧,有興趣的朋友們就來了解下吧2017-12-15
- 表單無論實在網(wǎng)頁設(shè)置中,還是在APP、應(yīng)用程序、軟件界面中都被廣泛運行,從而一個好的表單設(shè)計就非常重要了,本文主要為大家分享幾個交互好且轉(zhuǎn)化率高的表單設(shè)計技巧,有2017-11-20
適配iPhone X要點:十分鐘快速掌握iPhone X UI界面適配技巧
目前,第一批預(yù)約iPhone X手機的朋友們已經(jīng)拿到真機了,目前還沒有適配iPhone X的應(yīng)用運營商,相信都在加班加點適配呢,本文為大家?guī)砹诉m配iPhone X的要點,讓你十分鐘快2017-11-08如何讓網(wǎng)頁可讀性更強?善用F式布局設(shè)計增強網(wǎng)頁可讀性方法解答
雖然網(wǎng)頁排版方式千變?nèi)f化,但是布局方式通常都遵循著幾種常見的規(guī)則,F(xiàn)式布局式設(shè)計能夠增強網(wǎng)頁可讀性,這種說法是有跡可循的,本文就為大家介紹如何運用F式布局,有興趣2017-11-08- 在網(wǎng)頁的設(shè)計中表單都是界面中最常見,也是最重要的組件之一,對于設(shè)計師、前端和開發(fā)者而言,應(yīng)當(dāng)對于表單的設(shè)計盡量多上心,讓它們更加易用,細(xì)致的設(shè)計對于用戶的體驗、2017-10-26
登錄頁面怎么設(shè)計更好?登錄頁面設(shè)計的15個心理學(xué)策略
有很多東西下意識地影響了我們的日常決策,這里面很多都是微妙的心理因素在起作用,大家都知道用戶體驗設(shè)計跟心理學(xué)相關(guān),甚至?xí)苯佑绊懏a(chǎn)品的轉(zhuǎn)化率,那么,登錄頁面怎么2017-10-10網(wǎng)站評論模塊怎么設(shè)計 10個關(guān)鍵點告訴你如何設(shè)計產(chǎn)品評論模塊
網(wǎng)站不僅內(nèi)容很重要,評論模塊同樣也很重要,那么,網(wǎng)站評論模塊怎么設(shè)計呢?對此,本文就為大家詳細(xì)介紹10個關(guān)鍵點告訴你如何設(shè)計產(chǎn)品評論模塊,有興趣的朋友們就來了解下2017-09-25網(wǎng)站導(dǎo)航設(shè)計怎么才是符合搜索引擎優(yōu)化?SEO網(wǎng)站導(dǎo)航建設(shè)技巧分享
搭建網(wǎng)站的任何細(xì)節(jié)都需要考慮到是否利于SEO優(yōu)化,在網(wǎng)站導(dǎo)航設(shè)計的過程中,我們應(yīng)該怎么樣進(jìn)行操作才是符合搜索引擎優(yōu)化的呢?對此,本文就為大家進(jìn)行簡單解答2017-09-21- 在做網(wǎng)站設(shè)計的過程當(dāng)中,很多人可能會對于頁腳這個方面產(chǎn)生忽略,但是實際上在我們平時的使用下來的整體的分析數(shù)據(jù)表明,頁腳對于一個網(wǎng)站來說還是有非常重要的作用的,那2017-09-04