根據(jù)美國(guó)國(guó)稅局（IRS）的數(shù)據(jù)，目前全球有520萬(wàn)家B2B企業(yè)，這是多么龐大的數(shù)額。然而，它確實(shí)體現(xiàn)出了一些相當(dāng)令人擔(dān)憂的問題，首先，市場(chǎng)上有這么多的公司，為什么我們只能說出這么少的名字？

對(duì)營(yíng)銷的最小關(guān)注仍然是如此多的B2B網(wǎng)站在灰色地帶的發(fā)展。雖然一些促銷策略可能會(huì)花很多錢，但是其他的策略相對(duì)便宜和直接。

對(duì)于B2B公司來說，網(wǎng)頁(yè)設(shè)計(jì)是在數(shù)百個(gè)相似的網(wǎng)站中脫穎而出的好方法。問題是- B2B網(wǎng)站設(shè)計(jì)的概念甚至不應(yīng)該是昂貴的，它必須是舒適的，所有的功能都是有意義的。這甚至是當(dāng)?shù)仄髽I(yè)也能負(fù)擔(dān)得起的。

成功 B2B網(wǎng)站設(shè)計(jì)的10個(gè)技巧

1、了解用戶流程

在B2B中，企業(yè)很少追求品牌知名度本身的目標(biāo)，更重要的是將你的訪問者轉(zhuǎn)化為潛在客戶和買家。不管你的目標(biāo)是什么，聯(lián)系、電話或銷售，你都應(yīng)該知道用戶需要什么才能達(dá)到目標(biāo)，并考慮幫助他們達(dá)到目標(biāo)的最佳方式。

在市場(chǎng)營(yíng)銷中，將用戶的行為從A映射到Z的過程稱為“用戶流”。簡(jiǎn)單的用戶流程如下圖所示：

上面的清單并不復(fù)雜或完美，但是這里的目標(biāo)并不復(fù)雜，它的簡(jiǎn)單目的是讓用戶訂閱博客。

2、使用面包屑導(dǎo)航

有不同的工具和設(shè)計(jì)方法來安排用戶瀏覽網(wǎng)站的方式，對(duì)于提供大量服務(wù)的B2B網(wǎng)站，面包屑導(dǎo)航是最好的解決方案。

快速總結(jié)：面包屑導(dǎo)航起源于童話故事Hansel和Gretel，就像在故事中一樣，breadcrumb（在本例中是以前頁(yè)面的列表）幫助用戶跟蹤網(wǎng)站上的所有移動(dòng)，以便他們可以隨時(shí)返回到任何頁(yè)面。

上圖中的導(dǎo)航系統(tǒng)是面包屑導(dǎo)航的一個(gè)典型例子，看看用戶如何總能回到他們以前瀏覽過的任何頁(yè)面？

一些設(shè)計(jì)師對(duì)面包屑導(dǎo)航運(yùn)用有問題，因?yàn)樗雌饋聿惶珪r(shí)尚。然而，你總是可以用一種創(chuàng)意性的方式來接近“軌跡”。

3、遵循“黃金比例”

對(duì)于那些在設(shè)計(jì)或藝術(shù)理論方面沒有太多經(jīng)驗(yàn)的人，這里有一個(gè)“黃金比例”的簡(jiǎn)要介紹?？茖W(xué)家們?cè)跊]有深入研究其背后的數(shù)學(xué)原理的情況下，一度計(jì)算出了一個(gè)具有美感的完美矩形的參數(shù)——它的長(zhǎng)度必須等于其寬度的1.6倍，300×485像素矩形就可以被認(rèn)為是完美的。

如果從那個(gè)三角形中畫出一個(gè)正方形，他們就會(huì)看到下面的圖形：

然后，您可以保持相同的速度，從每個(gè)較小的矩形中畫一個(gè)正方形。

這是“黃金比例”的一種視覺表現(xiàn)，一種創(chuàng)造美學(xué)吸引力比例的方式。有一件事可能還不清楚——你如何在設(shè)計(jì)網(wǎng)站時(shí)使用黃金分割？

Mashable是這樣做的：主頁(yè)使用比例矩形和正方形，以獲得更好的視覺效果。

4、使用進(jìn)度條指示頁(yè)面的加載狀態(tài)

現(xiàn)在一個(gè)眾所周知的事實(shí)是，頁(yè)面加載時(shí)間太長(zhǎng)可能會(huì)讓用戶失去動(dòng)力。然而，即使你的網(wǎng)站還沒有達(dá)到火箭速度，也不應(yīng)該意味著你必須失去訪問者。

解決這種情況的可靠方法是通知用戶加載頁(yè)面的進(jìn)度，你可以通過設(shè)置最簡(jiǎn)單的進(jìn)度條來實(shí)現(xiàn)這一點(diǎn)，這些進(jìn)度條不會(huì)讓你的網(wǎng)站慢下來，也可以讓用戶放心，他們不會(huì)白白等待。

5、保持核心數(shù)據(jù)在第一個(gè)滾動(dòng)

尼爾森諾曼集團(tuán)（Nielsen Norman Group）的研究顯示，74%的用戶注意力集中在網(wǎng)站的前兩卷內(nèi)容上。事實(shí)上，只有6-8%的人有足夠的興趣、時(shí)間或精力從頭到尾閱讀頁(yè)面內(nèi)容。

對(duì)于網(wǎng)頁(yè)設(shè)計(jì)師來說，這里的教訓(xùn)在于內(nèi)容的優(yōu)先級(jí)。雖然你的頁(yè)面應(yīng)該從一個(gè)介紹開始，然后慢慢滑到一個(gè)CTA （call-to-action），這似乎是合乎邏輯的，但事實(shí)并非如此。確保在第一卷中展示所有商品——最好的功能，最方便的建議。一旦你用最吸引人的報(bào)價(jià)吸引了認(rèn)真的買家，他們會(huì)進(jìn)一步閱讀你的其他信息，這樣可以節(jié)省訪問者的時(shí)間并獲得更多的線索。

6、在用戶完成一個(gè)重要的操作之后使用謝謝頁(yè)面

無(wú)論在現(xiàn)實(shí)生活中還是在網(wǎng)上，說“謝謝”似乎都是微不足道的細(xì)節(jié)。然而，在這兩種情況下，贏得別人的信任和給人一個(gè)好的外表態(tài)度可能是至關(guān)重要的。當(dāng)涉及到網(wǎng)站設(shè)計(jì)時(shí)，感謝頁(yè)面會(huì)做一些重要的事情：

增加了一點(diǎn)個(gè)性化，用戶并不僅僅是你的百度分析中的一個(gè)數(shù)字，或者是你底線的一個(gè)銷售，一點(diǎn)點(diǎn)人類的感激會(huì)讓每個(gè)人感到特別和被關(guān)心。

提高品牌知名度，你可以用一種創(chuàng)意性的、令人難忘的風(fēng)格來設(shè)計(jì)你的“謝謝”頁(yè)面。這將是一個(gè)驚喜，并給用戶另一個(gè)機(jī)會(huì)記住你。

狀態(tài)跟蹤，如果用戶下載了一本電子書或白皮書，訂閱了一份時(shí)事通訊，或者留下了一條消息，那么讓他們知道這個(gè)操作成功是很重要的。將訪問者重定向到謝謝”頁(yè)面是一種表示“一切正?！钡姆绞?。

7、概述主要及次要的行動(dòng)召喚（CTA）

作為面向轉(zhuǎn)換的頁(yè)面（將用戶引向特定目標(biāo)）的創(chuàng)建者，有一個(gè)“最期望的結(jié)果”的原則。要詳細(xì)說明，頁(yè)面上可以有幾個(gè)動(dòng)作調(diào)用，但是其中一個(gè)調(diào)用顯然比其他調(diào)用更重要。

如果這是你的網(wǎng)站的情況，考慮清楚地區(qū)分最需要的CTA。這可以通過更改CTA本身的位置或指向下一步的按鈕的大小來實(shí)現(xiàn)。

區(qū)分不同的CTAs允許您引導(dǎo)用戶獲得最期望的結(jié)果，而不會(huì)將他們的選擇限制在一個(gè)選項(xiàng)上。

8、更改已訪問鏈接的顏色

任何讓你的網(wǎng)站的訪問者難以理解的行為都已經(jīng)讓網(wǎng)站本身變得不那么友好了，為了確保每一頁(yè)都盡可能使用舒適，你必須注意細(xì)節(jié)。

被訪問鏈接的顏色是那些小細(xì)節(jié)之一，這些小細(xì)節(jié)對(duì)輕松地傳遞重要信息大有幫助。一個(gè)最被低估的設(shè)計(jì)細(xì)節(jié)，知道他們已經(jīng)看到了一個(gè)頁(yè)面可以幫助用戶避免惱人的?似曾相識(shí)?效果。

在為這篇博客文章做研究時(shí)，我們點(diǎn)擊了尼爾森·諾曼（Nielsen Norman）團(tuán)隊(duì)一位作者的個(gè)人資料頁(yè)面。當(dāng)鏈接變成紫色時(shí)，我們很方便地看到我們已經(jīng)訪問了它（見上圖）。

9、充分利用404頁(yè)面

當(dāng)您的網(wǎng)站出現(xiàn)錯(cuò)誤時(shí)，第一個(gè)沖動(dòng)是進(jìn)入技術(shù)細(xì)節(jié)，這樣您就可以解釋代碼中出現(xiàn)了什么錯(cuò)誤。然而，就像量子物理學(xué)一樣，高級(jí)編碼并不容易理解。因此，您不應(yīng)該使用它來解釋錯(cuò)誤。

相反，用清晰的語(yǔ)言來溝通錯(cuò)誤。即使您沒有完全解釋問題，用戶至少也會(huì)理解發(fā)生了什么。有一些方法可以處理404頁(yè)面：

是創(chuàng)意性的，如果網(wǎng)站上有錯(cuò)誤，為什么不利用這個(gè)不幸的情況開幾個(gè)玩笑呢？這將顯示個(gè)性，并可能減輕用戶對(duì)錯(cuò)誤的挫敗感。

是建設(shè)性的，如果有些東西不工作，解釋用戶應(yīng)該做什么，以及如何解決問題。

無(wú)論您選擇哪一個(gè)，都不要隱藏在代碼和模棱兩可的短語(yǔ)后面，例如：“親愛的用戶，這里有一個(gè)錯(cuò)誤#5505”。在上圖中，TechCrunch是404s中健康、建設(shè)性對(duì)話的一個(gè)例子。

10、使用塊和表來構(gòu)造信息

將內(nèi)容組織成塊和表是確保用戶閱讀您的副本的好方法，通過這種方式可以完成很多事情——首先，頁(yè)面不再那么長(zhǎng)了（還記得我們從長(zhǎng)頁(yè)面中學(xué)到了什么嗎？）此外，對(duì)于任何需要比較的內(nèi)容，表格都是一個(gè)很好的表示。正因?yàn)槿绱?，他們現(xiàn)在正乘勢(shì)而上。

最佳B2B網(wǎng)站設(shè)計(jì)的4個(gè)例子

為了更好地理解當(dāng)前商業(yè)到商業(yè)網(wǎng)站的設(shè)計(jì)趨勢(shì)，持續(xù)不斷地尋找創(chuàng)意是至關(guān)重要的。最優(yōu)秀的設(shè)計(jì)師經(jīng)常瀏覽網(wǎng)頁(yè)，看看在現(xiàn)代設(shè)計(jì)中使用了哪些實(shí)踐。

我們想確定你不會(huì)沒有靈感就留下來，這就是為什么我們收集了4個(gè)b2b電子商務(wù)網(wǎng)頁(yè)設(shè)計(jì)的正確方法的例子-享受！

1、Quid

Quid首先吸引你眼球的是其主頁(yè)的極簡(jiǎn)主義。沒有過多的噱頭，網(wǎng)站保證了較短的加載時(shí)間和良好的移動(dòng)優(yōu)化。Quid網(wǎng)站是您期望從B2B公司的企業(yè)頁(yè)面中得到的東西——優(yōu)雅、精確、全面。

2、Blake Envelopes

Blake envelope可能看起來像是一個(gè)完全不同的網(wǎng)站，Quid的顏色是深的，Blake envelope的顏色是淺的；在b2b電子商務(wù)網(wǎng)站的設(shè)計(jì)中，留白占了很大比重。然而，這兩家網(wǎng)站的發(fā)展趨勢(shì)是一樣的，精確、切中要害的極簡(jiǎn)主義。

Blake envelope值得擁有一個(gè)單獨(dú)的“wow”，因?yàn)樗乃阉鳈C(jī)制，它有一個(gè)龐大的過濾系統(tǒng)，允許用戶通過一個(gè)簡(jiǎn)單的設(shè)計(jì)找到他們一直在尋找的東西。

3、D.FY

無(wú)論誰(shuí)設(shè)計(jì)了這個(gè)網(wǎng)站，他都非常清楚自己的手藝。乍一看，D.FY看起來就像一個(gè)尋呼機(jī)，而且很神奇。這種最佳的b2b 網(wǎng)頁(yè)設(shè)計(jì)巧妙地使用視頻內(nèi)容來展示他們正在做的事情，這并不是每個(gè)b2b公司都已經(jīng)養(yǎng)成的習(xí)慣。

同時(shí)，注意有多少小細(xì)節(jié)是從頭到尾考慮的。例如，在頁(yè)面底部有許多滾動(dòng)條，以便用戶可以估計(jì)頁(yè)面的長(zhǎng)度。滑塊上的文字保持了一種連貫的風(fēng)格，不會(huì)在頁(yè)面上留下混亂。

4、Shipwise

甚至不需要測(cè)試公司的產(chǎn)品，你就可以從第一個(gè)卷軸看出他們有一個(gè)聰明的設(shè)計(jì)師。一個(gè)極簡(jiǎn)主義的主題與視覺，標(biāo)題和標(biāo)題給你所有的基本信息，船明智的果殼。

再往下滾動(dòng)一點(diǎn)，你可能會(huì)驚訝于這家公司如何很好地使用字體和顏色來展示其風(fēng)格和品牌。白色和藍(lán)色的組合，加上偶爾的黑色的觸摸，做了它的工作-網(wǎng)站看起來超級(jí)優(yōu)雅。

關(guān)于設(shè)計(jì)者如何使字體與圖片很好地配合，還有其他細(xì)節(jié)需要注意。例如，通過不同尋常地合并二者，通過文本重疊圖像，網(wǎng)站感覺不到傳統(tǒng)和模板化，這正是您在B2B公司的自定義網(wǎng)頁(yè)設(shè)計(jì)中所尋找的。

最后

目前市場(chǎng)上有超過500萬(wàn)家B2B企業(yè)，為了讓銷售更容易，關(guān)鍵是你不能看起來完全像你的競(jìng)爭(zhēng)對(duì)手。最簡(jiǎn)單的脫穎而出的方法之一是了解如何設(shè)計(jì)一個(gè)驚人的B2B網(wǎng)站。

最重要的是充分利用網(wǎng)站的導(dǎo)航，并確保用戶在瀏覽網(wǎng)站時(shí)感到輕松。為此，您需要概述一個(gè)用戶流程，試驗(yàn)導(dǎo)航模型，并指導(dǎo)訪問者完成旅途中的每一步。

一些視覺上的小技巧也會(huì)被證明是有用的——例如，通過遵循“黃金分割率”，你會(huì)立刻對(duì)你的用戶群更有吸引力。你甚至可以創(chuàng)意性地設(shè)計(jì)“404”頁(yè)面，讓人們記住。

然而，要想成為一個(gè)很棒的網(wǎng)站，最重要的一步是接觸設(shè)計(jì)師。在設(shè)計(jì)公司，我們?cè)O(shè)計(jì)B2B網(wǎng)站已有多年，我們知道所有的最佳實(shí)踐的響應(yīng)網(wǎng)站，并不斷學(xué)習(xí)新的方法，以保持領(lǐng)先的趨勢(shì)。如果你需要一個(gè)高質(zhì)量的網(wǎng)頁(yè)設(shè)計(jì)，請(qǐng)與我們聯(lián)系！