B2B公司數(shù)不勝數(shù)，然而讓大眾熟知的品牌卻非常少。筆者告訴我們：營銷推廣不一定要用促銷手段，對于B2B公司而言，網(wǎng)頁設(shè)計也是一個很好的選擇。下面來看看筆者是如何分析的吧：

據(jù)美國國稅局稱，目前全球有520萬家B2B企業(yè)。這是個令人印象深刻的數(shù)字。但是，它提出了一些相關(guān)的問題——市場上有如此之多的公司，為什么我們叫得出名字的這么少？

對市場營銷的最低關(guān)注度是保持B2B網(wǎng)站在灰色地帶發(fā)展的原因。雖然一些促銷策略可能會花費一大筆錢，但其他一些則相對便宜且簡單明了。

對于B2B公司而言，網(wǎng)頁設(shè)計是一個很好的營銷方式，這樣可以使其可以在數(shù)百個類似的公司中脫穎而出。但問題是——B2B網(wǎng)站設(shè)計的概念甚至不應(yīng)該很昂貴。設(shè)計上必須讓人感到舒適，而且所有功能都要有意義。即便是當?shù)氐钠髽I(yè)也能負擔得起。

一、成功的B2B網(wǎng)頁設(shè)計的10個技巧

1. 了解你的用戶流

在B2B領(lǐng)域，企業(yè)很少會努力實現(xiàn)品牌意識本身的目標，更重要的是把你的訪客轉(zhuǎn)化為潛在客戶和買家。無論你的目標是什么——一個聯(lián)系人、一個電話或一個銷售，你都應(yīng)該知道用戶的切實需求，并考慮用何種方式才能幫助他們做到這一點。

在市場營銷中，將用戶行為從A映射到Z的過程稱為“用戶流”。簡單用戶流如下圖所示：

上面的清單并不復(fù)雜或完善，但這里的目標并不太復(fù)雜，其簡單的目的是讓用戶訂閱博客。

現(xiàn)在您已經(jīng)為自己的網(wǎng)站制定了用戶流程，重要的是要考慮用戶在途中可能遇到的所有異議（點擊網(wǎng)站鏈接，跳轉(zhuǎn)至博客頁面，最后是訂閱）。您可以使用網(wǎng)站副本或設(shè)計寫下解決這些問題的方法。我們稍后會介紹一些可能對此有所幫助的提示。

2. 使用面包屑導(dǎo)航（文章底部有該名詞解釋1）

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

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

上圖中的導(dǎo)航系統(tǒng)是面包屑導(dǎo)航的教科書示例：

看看用戶如何返回到他們以前訪問過的任何頁面？——這樣很方便，對嗎？

有些設(shè)計師對面包屑導(dǎo)航有異議，因為它看起來不太時尚美觀。然而，你總是可以用一種創(chuàng)造性的方式接近“蹤跡”的。

3. 遵循“黃金比例法則”

對于那些在設(shè)計或藝術(shù)理論方面沒有太多經(jīng)驗的人來說，這里簡要介紹一下“黃金比例”的含義。在不深入研究它背后的數(shù)學知識的情況下，科學家們曾一度計算出一個完美的矩形的參數(shù)——它的長度必須等于它寬度的1.6倍。因此300×485像素的矩形被認為是很完美的。

如果要從該三角形中繪制一個正方形，則會看到以下圖形：

然后，您可以通過從每個較小的矩形中繪制一個正方形來保持相同的速度。

這是“黃金比例”的視覺表現(xiàn)——一種創(chuàng)造美學上吸引人的比例的方式。有一點可能還不清楚，在設(shè)計網(wǎng)站時如何使用黃金比例？

下面是Mashable的實現(xiàn)方法：主頁使用比例矩形和正方形以獲得更好的視覺效果。

4. 使用進度條指示頁面的加載狀態(tài)

眾所周知，頁面加載時間太長會使用戶降級。然而，即使你的網(wǎng)站還沒有達到火箭速度的程度，也不意味著你一定失去訪客。

解決這種情況的可靠方法是通知用戶加載頁面的進度。你可以通過設(shè)置最低限度的進度條來實現(xiàn)這一點，這樣既不會減慢你的網(wǎng)站速度，又能讓用戶放心，他們不會白白等待。

5. 將核心數(shù)據(jù)保留在第一個滾動條范圍內(nèi)

根據(jù)尼爾森諾曼集團（NielsenNormanGroup）的研究：74%的用戶關(guān)注的是網(wǎng)站上的前兩個滾動條范圍的頁面。事實上，只有6-8%的人有足夠的興趣、時間或精力去閱讀頁面的內(nèi)容。

網(wǎng)頁設(shè)計師的教訓在于內(nèi)容優(yōu)先級。雖然你的頁面應(yīng)以一個介紹開始并慢慢滑入CTA（行為召喚）（文章底部有該名詞解釋2）似乎合乎邏輯，但往往情況并非如此。務(wù)必在第一個滾動條中展示所有商品/最佳功能/最方便的建議。一旦最有吸引力的報價吸引到了真正的買家，如果他們需要你的其他信息，就會進一步閱讀。這樣你就可以節(jié)省訪問時間并獲得更多潛在客戶。

6. 用戶完成重要操作后使用感謝頁面

無論是在現(xiàn)實生活中還是在網(wǎng)上，說“謝謝”似乎都是無關(guān)緊要的細節(jié)。然而在這兩種情況下，要贏得別人的信任并以一種良好的態(tài)度表現(xiàn)自己，這可能是至關(guān)重要的。當涉及到網(wǎng)站設(shè)計時，感謝頁面會起到重要的作用：

• 增添一絲個性化。一個用戶在你的谷歌分析中并不僅僅是一個數(shù)字，在你的底線上也不只是一個銷售額，一點充滿人情味的感激之情會讓每個人感受到關(guān)心。
• 提高品牌知名度。你可以用一種創(chuàng)造性的、難忘的風格來設(shè)計你的“感謝”頁面。這將是一個很好的驚喜，給用戶另一個記住你的機會。
• 狀態(tài)跟蹤器。如果用戶下載了電子書或白皮書、訂閱了時事通訊或留下了一條信息，那么讓他們知道操作成功是很重要的。將訪問者重定向到“感謝”頁面是一種表達“一切正?！钡姆绞?。

7. 概述主要和次要用戶行為召喚用語

作為面向轉(zhuǎn)換的頁面的創(chuàng)建者（引導(dǎo)用戶朝向特定目標），存在“最期望的結(jié)果”的原則。要詳細說明頁面上可能會有一些號召性用語，但其中一個顯然比其他的更重要。

如果您的網(wǎng)站屬于這種情況，請考慮明確區(qū)分最理想的CTA?？梢酝ㄟ^更改CTA本身的位置或?qū)е孪乱徊降陌粹o大小來完成。區(qū)分CTA允許您引導(dǎo)用戶獲得最期望的結(jié)果，而不會將他們的選擇限制在一個選項中。

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

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

訪問鏈接的顏色是這些小細節(jié)之一，可以很容易地傳達重要信息。最低估的設(shè)計細節(jié)之一，就是知道他們已經(jīng)看過一個頁面，這樣可以幫助用戶避免惱人的“似曾相識”效果。

在研究這篇博文時，我們點擊了左欄中尼爾森諾曼集團作者的個人資料頁面。然后，看到我們已經(jīng)訪問了鏈接，因為它變成紫色非常方便（見上圖）。

9. 善于利用404頁面

當您的網(wǎng)站出現(xiàn)錯誤時，第一個念頭是深入到技術(shù)層面，這樣你就可以解釋代碼中出現(xiàn)的錯誤。然而，就像量子物理學一樣，高級編碼也不容易理解。因此，您不應(yīng)該用它來解釋錯誤。

相反，用清晰的語言傳達錯誤，即使您沒有完全解釋問題，用戶至少也會了解發(fā)生了什么。有幾種方法可以處理404頁面：

• 要有創(chuàng)造力。如果網(wǎng)站上有錯誤，為什么不利用這種不幸的情況開幾個玩笑呢？這將顯示用戶的個性，并可能減輕用戶對錯誤的失望。
• 具有建設(shè)性。如果某件事不起作用，請解釋用戶應(yīng)該做什么，以及他們?nèi)绾谓鉀Q問題。

無論你選擇哪種方式，都不要隱藏在代碼和模棱兩可的短語后面，比如：“親愛的用戶，出現(xiàn)了一個錯誤#5505”。在上圖中，TechCrunch是404中大量運用且具有建設(shè)性對話的一個例子。

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

通過將內(nèi)容組織成塊和表來構(gòu)建內(nèi)容是確保用戶閱讀副本的好方法。你可以通過這種方式完成很多事情。首先，頁面不再那么長了。此外，表格為需要比較的任何內(nèi)容提供了很好的演示。出于這個原因，這種形式目前正在掀起新的風潮。

二、4個優(yōu)秀B2B網(wǎng)頁設(shè)計案例推薦

為了更好地了解當前的企業(yè)對企業(yè)網(wǎng)站設(shè)計趨勢，持續(xù)尋找創(chuàng)意至關(guān)重要。最優(yōu)秀的設(shè)計師經(jīng)常瀏覽不同的網(wǎng)頁，以了解現(xiàn)代設(shè)計中使用怎樣的實踐方法。

我們想確保你不會沒有靈感，因此我們收集了4個B2B電子商務(wù)網(wǎng)頁設(shè)計的案例，敬請觀看：

1. Quid

網(wǎng)址：https://quid.com/

關(guān)于Quid，首先吸引你的是它主頁的極簡主義。沒有過多的噱頭和花樣，網(wǎng)站確保了一個短的加載時間和良好的移動優(yōu)化。Quid網(wǎng)站是B2B公司的一個企業(yè)頁面所期望的樣子——優(yōu)雅、精確、全業(yè)務(wù)。

2. Blake Envelopes

網(wǎng)址：https://www.blake-envelopes.com/

布雷克信封看起來像是一個完全不同的網(wǎng)站——Quid的顏色是深色的，Blake信封的顏色是淺色的；在其B2B電子商務(wù)網(wǎng)站設(shè)計中大量使用了白色空間。然而，這兩個網(wǎng)站的趨勢都是一樣的——精確到極簡主義。

布雷克信封本身就應(yīng)該有一個單獨的“哇”搜索機制，有一個巨大的過濾器系統(tǒng)，允許用戶通過一個簡單的設(shè)計找到他們一直在尋找的東西。

3. D.FY

網(wǎng)址：http://www.dfy.co.kr/#!/en/

無論是誰設(shè)計的這個網(wǎng)站，人們都能非常清楚地了解他們的工藝。乍一看，D.FY就像一個單頁般令人驚嘆。這種B2B網(wǎng)頁設(shè)計巧妙地使用視頻內(nèi)容來展示他們正在做的事情，并不是每個B2B公司都將其視為一種習慣。

另外，請注意看它從頭到尾有多少小的細節(jié)。例如：在頁面的底部有許多滾動條，這樣用戶就可以預(yù)估頁面的長度。且滑塊上的文本保持一致，不會在頁面上留下混亂的樣子。

4. Shipwise

網(wǎng)址：http://shipwise.co/

即使不測試公司的出貨情況，你也可以從首個滾動視圖頁面中看出他們有一個聰明的設(shè)計師。一個帶有視覺效果、標題和標題的極簡主題簡單地提供了有關(guān)ShipWise的所有基本信息。進一步滾動，你可能會驚訝于這家公司是如何使用字體和顏色來展示其風格和品牌的。白色和藍色的組合以及偶爾的黑色觸摸確實起到了作用，這的確是個超級經(jīng)典且一流的網(wǎng)站。

還有其他一些細節(jié)需要注意，設(shè)計師如何將字體與圖片良好地配合起來展示。例如：通過非常規(guī)地合并文本與圖像，使得網(wǎng)站看起來沒有傳統(tǒng)與刻板的感覺，這正是你在B2B公司的定制Web設(shè)計中所追尋的效果。

三、總結(jié)

目前市場上有超過500萬家的B2B企業(yè)，讓銷售變得更容易的關(guān)鍵是你不能完全像你的競爭對手。最容易脫穎而出的方法之一就是去了解如何設(shè)計一個令人驚嘆的B2B網(wǎng)站。

充分利用網(wǎng)站的導(dǎo)航功能是關(guān)鍵，要確保用戶在瀏覽網(wǎng)站時能夠輕松自如。為此，你需要總結(jié)出一個用戶流，使用導(dǎo)航模型進行試驗，并指導(dǎo)訪客完成其瀏覽的每一步。一些視覺噱頭也可以證明是有用的。例如：通過遵守“黃金分割率”，從視覺上將會對你的用戶群更具吸引力。你甚至可以創(chuàng)造性地設(shè)計“404”頁來給人增加印象。

名詞解釋

1. 面包屑導(dǎo)航

“面包屑”一詞來自漢塞爾和格萊特爾的童話故事，他們在穿過樹林時會留下一些面包，這樣他們就可以沿著面包屑的路徑返回。在網(wǎng)站導(dǎo)航中使用相同的技術(shù)，其中向用戶顯示鏈接的蹤跡以準確地告知該網(wǎng)頁在網(wǎng)站上的位置。面包屑跟蹤的示例顯示在本文頁面的頂部。面包屑跟蹤為用戶提供了一種快速了解此網(wǎng)頁所屬部分或分支的方法。如果網(wǎng)站有很多類別且每個類別都有幾個級別，則面包屑很有用。

2. CTA

CTA 即 CalltoAction，這里把它翻譯為行為召喚，或者說是用戶行為號召。簡言之，就是在網(wǎng)站頁面、電子郵件等地方會出現(xiàn)的按鈕，希望使用者進行的行為，例如注冊會員、立刻購買等行為。

原文作者：Fireart設(shè)計工作室

原文地址：https://fireart.studio/blog/10-best-practices-for-creating-a-b2b-website-design/

翻譯：慕羽

本文由 @慕羽 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議