圖片樣式

產品公司的官網設計如何能讓其更美觀

在談到企業產品的營銷時(本文中提到的“企業產品”是指“給企業客戶運用的軟件/應用”),一種觀念以為客戶肯定是靠線下推行來獲取的,另一種觀念以為應該讓用戶主動購置而不是被動采購,持這種觀念的公司特別注重經過產品官網來獲客。無論持哪種觀念,不可承認的是官網是客戶對你產品的第一印象,很多潛在客戶在購置之前都是先經過官網來理解產品的。但是很多公司在產品官網設計這件事上投入的精神還不及線下推行的萬分之一,有的只把官網當作擺設,粗制濫造套個模板完畢,以至還疏忽了挪動端適配。

作為企業產品的設計師,我們要如何設計美觀又好賣的產品官網,有沒有一些套路可循?

企業產品官網的作用是傳達信息和促進轉化。傳達信息是通知訪客這款產品是什么/能為你公司做什么/為什么值得我購置,再配合一些加強壓服力的手腕來促進轉化——將盡量多的訪客(潛在客戶)轉化為注冊用戶并最終完成購置。依照用戶閱讀網站的次第,有以下5大設計要點:

善用首屏大圖吸收視野

銷售主張明白傳達產品價值

合理的導航便當訪客獲取信息

無處不在的CTA推進轉化

客戶案例加強信任感

一. 善用首屏大圖吸收視野

首屏大圖占領了官網最珍貴的第一屏,它決議了訪客對官網的第一印象。首屏大圖能夠輔助產品Slogan來有效傳達產品價值,同時還會影響到官網整體的氣質。常見的首屏大圖有以下5種表現方式:

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

在實景照片這個方式上,企業級產品的表現力遠不及消費級產品(比照一下Salesforce和Apple的官網就曉得了),由于企業的商務屬性決議了他們不能像消費級產品那樣大膽地彰顯個性。企業產品官網普通會用客戶運用產品的場景照來闡明產品給他們工作帶來的好處,或用一些開闊的景色照來表現公司的價值觀和愿景。

這種傳統的照片方式常見于一些大公司,例如微軟的CRM產品Microsoft Dynamics 365:

客服應用HelpCrunch則用來表現公司將來的愿景:

2. 概念圖用隱喻表達產品價值

經過設計處置之后的概念圖,比真實照片的表現空間更大,能夠經過一些隱喻的手法來傳達產品價值。

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

3. 插畫最合適講故事

近年來一些企業重塑品牌向更年輕更有生機的方向開展。插畫的方式有利于塑造輕松時髦的品牌氣質,同時也是最合適用來講故事的表達方式。

Intercom用生動的手繪風插畫描畫了一副工作中遭遇的紊亂場景,引出了運用Intercom能夠完畢這一切紊亂的概念:

Atlassian用配色明快的圖形插畫描畫了齊心協力的工作場景,襯托出“Team up”的產品價值主張:

4. 產品界面圖簡單直觀

簡單直觀的運用產品界面圖作為首屏大圖,讓用戶對產品運用過程有一種直觀的體驗,也是一種關于本人產品的設計很有自信的表現。

云存儲應用Box用產品界面和照片混搭的方式來表現“Work as One”的產品理念:

5. 客戶照片更具壓服力

運用真實客戶的肖像作為首屏大圖,兼具客戶案例的作用,使產品更有壓服力。

自助建站應用Squarespace用高清的客戶肖像圖配合產品界面,來表現他們的應用能夠為不同人群定制專屬網站的理念:

6.視頻是盛行趨向

用視頻替代靜態圖呈現在首屏成為近年來盛行的一大趨向,比起靜態圖,動態視頻更容易吸收眼光。視頻的內容能夠是產品功用講解/客戶案例講述/企業文化傳播等,視頻的觸發方式有自動播放/預加載/點擊播放等。

自助建站應用Weebly的首頁視頻交融了各類用戶的生活狀態和運用場景,來表現“DO WHAT YOU LOVE”的產品理念:

 

Tips:

1. 首屏大圖和銷售主張是官網的重中之重,既是營銷的中心,同時也是頁面規劃和表現的中心。

2. 首屏大圖是傳達產品品牌的絕佳時機。

3. 不同子產品頁能夠用不同的首屏大圖,但是要留意尺寸微風格堅持分歧。

二. 銷售主張明白傳達產品價值

當用戶被首屏大圖吸收住眼光之后,想要進一步留住客戶,就必需立刻向他們傳達產品的中心價值,讓他明白購置你們的產品能夠取得什么益處。在營銷范疇,這被稱為USP(Unique Selling Proposition),意為“共同的銷售主張”。

1. 銷售主張需求屢次強調

在企業產品官網中,銷售主張會屢次呈現,完好的銷售主張通常會由以下三個根本局部組成:首屏標題、強化論述和最后重申。

a.首屏標題

首屏大標題是USP的中心,簡短明白的slogan是一個強有力的收場白。通常位于官網首屏最顯眼的位置,用大字體突出,同時能夠用小字在旁邊停止輔助闡明。

MailChimp的首屏標題簡短有力:

b.強化論述

用來強化和豐厚USP,讓它看起來更有壓服力。能夠從正面動身羅列產品功用、強調產品優勢,也能夠從側面來印證,比方勝利案例、資質證書等。

MailChimp用與首屏標題同樣作風的文案,配合界面圖來強化USP:

c.最后重申

當訪客閱讀了長篇的強化論述,閱讀到頁面底部時,最后再重申一下USP,首尾照應。

MailChimp在頁面底部最后重申,號召轉化行動:

2. 文案作風會影響銷售主張的表現力

依據不同的產品功用和品牌調性,銷售主張的文案作風也各不相同,主要有以下幾品種型:

a.明晰直白的功用陳說

明晰直白的功用陳說可能會有點無趣,但卻是最直觀、最易于了解的。用一句話講分明你的產品是做什么的,比模糊其辭的描繪更容易讓訪客產生好感。

Xero是一款為小型企業提供會計效勞的應用,他們用一句話明晰傳達了Xero的功用價值與目的用戶:

b.令人印象深入的號召型言語

運用一些強有力、痛快利落的slogan,去號召用戶行動。運用這類USP的公司普通都已樹立了一定的用戶根底和品牌形象。

光看Asana的大標題是不是很難猜到這個公司是提供什么效勞?即使如此,這幾句簡短大氣的標語還是能給人留下深入印象:

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

這品種型的slogan普通會從背面切入描繪痛點,例如“工作不用那么費事,用xxx你能夠…”,然后引出產品能夠處理這些痛點。這是一種逆向思想,經過描繪產品能夠“躲避負面結果”來突出其處理問題的才能,這是與“取得正面結果”相反的一種思緒。

Basecamp整個官網的措辭作風都是如此:

d.動態多合一

在尋覓案例的過程中,還發現了一種動態的多合一文案表現方式。它的做法是堅持中心文案固定不變,其他的則不時切換。動態的表現方式更吸睛,也賦予了USP更全面的展示。

Atlassian旗下的Confluence品牌的中心價值是“make better by working together”,因而在動態slogan中堅持中心文案不變,切換開頭的主語來突出產品的適用范圍:

Tips:

1.規劃USP時要站在客戶角度,強調你的產品能為他們帶來什么益處。

2.不要怕首屏標題太短講不清功用,旁邊小字的作用就是補充闡明,同時豐厚排版。

3.沒人會喜歡空泛的營銷口號和行話,客戶喜歡能解答疑惑、簡單直白的USP。

三. 合理的導航便當訪客獲取信息

當訪客被你的首屏大圖和價值主張吸收之后,接下來他可能想要在你的官網上四處看看理解更多信息。合理明晰的導航能夠率領訪客快速找到想要的信息。導航是網站的路標,也是網站組織架構的表現。假如訪客的閱讀體驗不順暢,他們會對你的產品和公司失去自信心。

1. 不是一切網站都需求導航

導航是網站組織架構的表現。在規劃網站架構前,首先明白一個問題:我們能否需求導航?當你的目的是引導訪客依照預設途徑停止閱讀,不希望他們跳出當前頁面,這個時分能夠沒有導航。這樣的網站組織方式也叫線性構造:

關于功用簡單的產品,運用線性構造能有效帶動訪客參與性,推進轉化行為。企業產品官網的途徑通常為頭圖-產品展現-注冊試用。

例如辦公協作應用Trelllo的官網頂部沒有導航,只保存了登陸和注冊入口。頁面的信息組織依照“頭圖-功用總覽-功用細節-客戶展現-注冊試用”的次第由淺入深、從宏觀到微觀的次第引導訪客完成閱讀和轉化。到頁面底部才會呈現一排弱弱的鏈接:

線性構造的優勢在于訪客不能依照本人的想法閱讀網站,比方當他們找不到急迫想理解的關鍵信息比方價錢頁時,可能會覺得懊喪。

2. 越扁平越有效

運用扁平構造能夠減小網頁深度,讓訪客用較少的點擊就能抵達目的頁面,同時有利于搜索引擎抓取效率。在尋覓企業產品官網案例的過程中我發現,關于功用相對簡單的產品大多運用一級導航,而關于范圍龐大的產品,他們的導航層級最多也只到二級。可見扁平構造的導航是網站導航的主流。

例如企業郵件應用Mailchimp和Slack就是扁平構造的典型代表,它們的導航都只要一級,把一切頁面入口都放在外面,最重要的功用、定價位于前兩個位置,其他的依據重要性遞加排列,最右邊普通會放注冊或登陸入口:

關于一些范圍龐大的企業產品,首先要盡量精簡選項,舍棄不用要的信息、躲藏次要信息,再思索在有限的空間里把信息入口展示完好。

以Intercom為例,它是一款大型CRM應用,公司旗下有三大子產品。官網首頁設置了5個一級導航,其中前兩個是折疊導航。最重要的Products導航的下拉菜單中依照產品和處理計劃兩個維度展現了對應的信息。配合icon和簡介,有序又直觀:

在Resource下拉菜單中則收攏了客戶案例、協助中心、產品演示等資源入口,用明晰的組織方式把這些信息集中在一同,讓想要理解更多信息的人本人去探究:

運用相似構造的還有Atlassian等大型公司:

3. 確保訪客分明本人所處的位置

網站是一個虛擬空間,訪客在頁面之間的跳轉是無法意料的,假如沒有明晰的導航在時辰提示他們所在的頁面,他們早就曾經迷路了。要讓訪客時辰曉得本人所處的位置,就要在不同頁面上堅持導航的分歧性,并在滾動頁面時堅持常駐。

繼續以Intercom為例,首頁導航在滾動時堅持常駐。當點擊首頁導航抵達子產品頁面后,導航堅持分歧,只是在原先的主LOGO旁多了一個子產品LOGO來標明當前所在頁面,點擊主LOGO能夠返回首頁:

子頁面開端向下滾動時導航暫且消逝,當滾動到首屏以下時導航呈現并常駐,留意到此時的導航款式曾經悄然發作了變化——簡化了主LOGO,右邊局部變成了3個針對當前子產品頁面的導航。整個變化過程過渡地非常自然:

再看看Atlassian的設計。抵達子產品頁后會保存主導航,隨著頁面滾動,子產品導航會把主導航推出,繼而替代主導航的位置:

Tips:

1.規劃訪客的閱讀進程,堅持順暢自然的體驗。

2.堅持導航構造的分歧性,確保用戶一直曉得本人所處的位置。

3.堅持導航的運用簡單性,刪除不用要項目。

4.簡單很好,但是要確保提供了訪客想要取得的信息入口。

四. 無處不在的CTA推進轉化

CTA(Call to Action,用戶行為召喚)是指希望訪客在閱讀官網時完成的指定行為,通常有:注冊、申請試用、郵件訂閱、軟件下載等等。CTA是促進官網完成轉化的主要手腕,關于企業產品官網,醒目的CTA按鈕是標配。

1. 視覺款式必需醒目

既然官網的目的是完成轉化,那么CTA按鈕一定是整個頁面中最醒目、最聚焦視野的。很多研討證明綠色按鈕的點擊率最高,藍色其次,但我以為這并不絕對。按鈕顏色取決于官網的整體配色和品牌調性,在這個前提下,拉大比照度,讓按鈕從背景中突出即可。款式上突出中心CTA,次級CTA能夠相對弱化。

Invision的按鈕運用了品牌色:紅色。

2. 文案需求引發點擊愿望

CTA按鈕文案應該是了如指掌的動詞短語,運用含有緊迫感的文字例如“立刻/馬上”,或者利益導向的文字例如“免費”,能夠有效引發用戶的點擊愿望。常用的文案有:免費/立刻試用、免費/立刻注冊、觀看演示、理解更多等等。

CTA按鈕會在網頁中呈現屢次,因而在文案上最好堅持分歧性,進階辦法是依據用戶閱讀的上下文運用更針對性的文案。

3. 堅持不斷可見,重復強調

CTA按鈕普通與銷售主張同時呈現,主要散布在官網的三個位置:頂部導航、首屏大圖、頁面底部。頂部導航的位置能夠保證按鈕不斷可見,首屏大圖上的按鈕是視覺中心,頁面底部的位置則作為終極召喚。三個位置相互照應,缺一不可。

4. 次級CTA也不容無視

準繩上來說CTA按鈕應該只要一個,但近年來越來越多的企業產品官網會在主要CTA按鈕旁邊放一個次級CTA按鈕,為訪客提供第二選擇,這樣做能夠讓訪客在不想點擊主按鈕的狀況下退而求其次。關于企業產品的用戶來說,在注冊之前提供產品試用或視頻演示能大大促進對產品的理解。

5. 嵌入簡易表單,降低注冊門檻

在CTA按鈕旁放置一個簡易的內嵌表單,相當于簡化了后續的轉化流程。例如,當用戶點擊注冊按鈕之后普通會被請求填寫用戶名、郵箱、密碼等信息,假如表單項很復雜,用戶很可能會放棄填寫。假如一開端只需求填寫郵箱,這就大大降低了注冊門檻。另外一方面,即便用戶在后續的注冊流程中放棄了填寫,那企業至少曾經get到客戶的郵箱信息了。

相似Shopify這樣的郵箱表單是最常見的:

Webflow則直接把需求填寫的注冊項全列出來,這適用于注冊項在三個以內的狀況:

五. 客戶案例加強信任感

企業級(to B)產品不像消費級(to C)產品那么普遍和易獲取,企業客戶在選擇產品的時分更為謹慎,官網要協助消弭他們的疑慮,樹立對產品的信任感,最好的方式就是把已購置產品的客戶勝利案例展現出來。你的客戶就是你產品天生的代言人,他們比你的產品自身更有壓服力。

1. 用真實的客戶頭像提升可信度

比起單純的文字展現,真實的客戶頭像能夠大大提升客戶評論的可信度。比照下面兩張圖感受一下。

Webflow的客戶評論:

Intercom的客戶評論:

2. 講故事,更容易感動用戶

比起一句話評論,用戶顯然更容易承受并記住一個真實場景下的故事。有的企業官網會花一整個版面的篇幅來講這個故事,從痛點到運用過程再到最后的獲益,有理有據令人信服。

Intercom在客戶故事這方面下足了功夫,每個重點客戶都有內容豐厚的專題頁,里面有客戶公司簡介,描繪了用Intercom的哪些產品處理了哪些問題,有從他們產品角度動身的第三人稱描繪,也有客戶的第一人稱陳說:

越來越多的公司曾經不滿足于靜態講故事,例如Invision,他們開端運用更專業、更有壓服力的采訪短片來作為客戶勝利案例:

3. 準確的數字更有壓服力

比起描繪水平文案相似:這款產品協助我們“大大提升了效率”、“取得了更多用戶咨詢量”,人們更喜歡看到這樣的描繪:這款產品協助我們“減少了18%的操作時間”、“提升了25%的用戶咨詢量”。準確的數字比含糊的范圍來的更有依據、更有壓服力。

Intercom的每個客戶案例中都有準確的數據支撐:

4. 大公司的案例會強化自信心

大公司的口碑效應還用說么。假如你有大客戶,那毫不猶疑地把他們的LOGO展現出來吧。

看看Invision的大客戶logo墻:

寫在最后

除了上面提到的5大要點之外,還有一些提升網站體驗的辦法,例如:A/B Test、響應式設計、優化加載時間等。

最后補充一點:關于消費級(to C)產品,例如我們熟習的Evernote、Dropbox,他們的運用者與他們官網的訪客根本是同一個人。而關于企業級(to B)產品來說,產品運用者和購置者常常不是同一個人,也就是說產品運用者可能是客服人員,而官網的訪客卻可能是主管或采購之類擔任買單的人。因而,企業產品官網的設計要統籌運用者和購置者的不同角色,洞察目的客戶所在行業特征,最大化展現產品在提升企業效率或收益上的優勢。


手机捕鱼平台 pk10个人投注心得分享 体彩湖北11选5神彩通 516棋牌平台 排列三开奖软件下载 陕西快乐十分分布图 新疆11选5前三开奖号 东方五分彩技巧 陕西福彩快乐10分选号技巧 2018年废品行业最赚钱的商机 股票分析软件哪个好用 股票分析师群 股票涨跌幅如何计算 辽宁11选5彩票平台 河南11选5开奖结果走势图 大足中敖农村养什么赚钱快 美国高频彩