全栈工程师?
嗯.....目前并不是!

10項實踐技巧,創建一個成功的B2B網站

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

據美國國稅局稱,目前全球有520萬家B2B企業。這是個令人印象深刻的數字。但是,它提出了一些相關的問題——市場上有如此之多的公司,為什麼我們叫得出名字的這麼少?

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

對於B2B公司而言,網頁設計是一個很好的營銷方式,這樣可以使其可以在數百個類似的公司中脫穎而出。但問題是——B2B網站設計的概念甚至不應該很昂貴。設計上必須讓人感到舒適,而且所有功能都要有意義。即便是當地的企業也能負擔得起。

一、成功的B2B網頁設計的10個技巧

1. 了解你的用戶流

在B2B領域,企業很少會努力實現品牌意識本身的目標,更重要的是把你的訪客轉化為潛在客戶和買家。無論你的目標是什麼——一個聯繫人、一個電話或一個銷售,你都應該知道用戶的切實需求,並考慮用何種方式才能幫助他們做到這一點。

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

上面的清單並不複雜或完善,但這裡的目標並不太複雜,其簡單的目的是讓用戶訂閱博客。

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

2. 使用麵包屑導航(文章底部有該名詞解釋1)

可以使用不同的工具和設計方法來安排用戶瀏覽網站的方式。對於提供大量服務的B2B網站,麵包屑導航是最佳解決方案。

快速總結:一個麵包屑導航起源於童話漢斯和格雷特。就像在故事中一樣,麵包屑(在本例中,是前一頁的列表)幫助用戶跟蹤他們在網站上的所有動作,以便他們可以隨時返回任何頁面。

上圖中的導航系統是麵包屑導航的教科書示例:

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

有些設計師對麵包屑導航有異議,因為它看起來不太時尚美觀。然而,你總是可以用一種創造性的方式接近“蹤跡”的。

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

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

如果要從該三角形中繪製一個正方形,則會看到以下圖形:

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

這是“黃金比例”的視覺表現——一種創造美學上吸引人的比例的方式。有一點可能還不清楚,在設計網站時如何使用黃金比例?

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

4. 使用進度條指示頁面的加載狀態

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

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

5. 將核心數據保留在第一個滾動條範圍內

根據尼爾森諾曼集團(NielsenNormanGroup)的研究:74%的用戶關注的是網站上的前兩個滾動條範圍的頁面。事實上,只有6-8%的人有足夠的興趣、時間或精力去閱讀頁面的內容。

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

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

0"

無論是在現實生活中還是在網上,說“謝謝”似乎都是無關緊要的細節。然而在這兩種情況下,要贏得別人的信任並以一種良好的態度表現自己,這可能是至關重要的。當涉及到網站設計時,感謝頁面會起到重要的作用:

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

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

0"

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

如果您的網站屬於這種情況,請考慮明確區分最理想的CTA。可以通過更改CTA本身的位置或導致下一步的按鈕大小來完成。區分CTA允許您引導用戶獲得最期望的結果,而不會將他們的選擇限制在一個選項中。

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

任何讓你的網站訪問者感到不適的行為,都已經使網站本身變得不那麼友好了。為了確保每一頁都能儘可能舒適地使用,你必須注意一些細節。

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

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

9. 善於利用404頁面

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

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

  • 要有創造力。如果網站上有錯誤,為什麼不利用這種不幸的情況開幾個玩笑呢?這將顯示用戶的個性,並可能減輕用戶對錯誤的失望。
  • 具有建設性。如果某件事不起作用,請解釋用戶應該做什麼,以及他們如何解決問題。

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

10. 使用塊和表來構造信息

0"

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

二、4個優秀B2B網頁設計案例推薦

為了更好地了解當前的企業對企業網站設計趨勢,持續尋找創意至關重要。最優秀的設計師經常瀏覽不同的網頁,以了解現代設計中使用怎樣的實踐方法。

我們想確保你不會沒有靈感,因此我們收集了4個B2B電子商務網頁設計的案例,敬請觀看:

1. Quid

網址:https://quid.com/

關於Quid,首先吸引你的是它主頁的極簡主義。沒有過多的噱頭和花樣,網站確保了一個短的加載時間和良好的移動優化。Quid網站是B2B公司的一個企業頁面所期望的樣子——優雅、精確、全業務。

2. Blake Envelopes

網址:https://www.blake-envelopes.com/

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

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

3. D.FY

網址:http://www.dfy.co.kr/#!/en/

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

0"

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

4. Shipwise

網址:http://shipwise.co/

0"

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

還有其他一些細節需要注意,設計師如何將字體與圖片良好地配合起來展示。例如:通過非常規地合併文本與圖像,使得網站看起來沒有傳統與刻板的感覺,這正是你在B2B公司的定製Web設計中所追尋的效果。

三、總結

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

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

名詞解釋

1. 麵包屑導航

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

2. CTA

CTA 即 CalltoAction,這裡把它翻譯為行為召喚,或者說是用戶行為號召。簡言之,就是在網站頁面、電子郵件等地方會出現的按鈕,希望使用者進行的行為,例如註冊會員、立刻購買等行為。

 

原文作者:Fireart設計工作室

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

翻譯:慕羽

版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《10項實踐技巧,創建一個成功的B2B網站》
文章链接:https://www.pmbear.com/archives/9444
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

大前端WP主题 更专业 更方便

联系我们联系我们