您是否知道網(wǎng)絡訪問者只需50 毫秒即可根據(jù)您的網(wǎng)站設計對您的業(yè)務形成意見？

您是否還知道，一旦網(wǎng)絡訪問者對您的網(wǎng)站形成意見，他們大約需要15 秒來決定是留下還是離開？

再加上人們在網(wǎng)上的注意力不斷縮短，保持網(wǎng)絡訪問者的參與變得越來越具有挑戰(zhàn)性。

盡管吸引人們的注意力以降低跳出率似乎是一項艱巨的任務，但一些公司通過接受一些提高轉(zhuǎn)化率和參與度的網(wǎng)站趨勢做得很好。

那么，這些公司到底在做什么，你如何“竊取”并在你的網(wǎng)站上使用它？

今天，我們將研究一些最令人驚嘆和最成功的網(wǎng)站，以了解他們?nèi)绾卧O計網(wǎng)站以實現(xiàn)最大的參與度和轉(zhuǎn)化率，以及如何做到這一點。

準備好？讓我們潛入水中。

1.Mailchimp

Mailchimp 是一家以電子郵件營銷服務而聞名的一體化整合營銷公司。該公司已經(jīng)經(jīng)營了近 20 年，這就是他們正在做的事情。

突出使用大膽的顏色

一旦您登陸網(wǎng)站，您就會看到明亮的黃色。顏色與黑色字體形成鮮明對比，使文本脫穎而出并引起您的注意。

背景還有助于最重要的 CTA 脫穎而出——“選擇計劃”，將您引導至 Mailchimp 的定價頁面，以及“注冊”。

但這并不是網(wǎng)站上所有這些鮮艷的黃色。

當您瀏覽主頁時，Mailchimp 會在整個網(wǎng)站的其他 CTA 中使用這種黃色?，F(xiàn)在黃色的 CTA 按鈕與網(wǎng)站其余部分的白色背景形成鮮明對比，使它們更加突出并吸引您的注意力。

出色地使用空白

Mailchimp 將他們最重要的內(nèi)容放在首頁的前面和中心，周圍有很多空白。這樣，網(wǎng)絡訪問者將只關(guān)注此內(nèi)容。

更重要的是，Mailchimp 使用一個簡單的插圖來強調(diào)他們?yōu)榭蛻籼峁┑膬r值主張。

無可挑剔的排版使用

該公司使用粗體和大寫字母來引起您對重要內(nèi)容的注意。粗體字母還有助于快速傳達最重要的觀點，例如使用他們的服務的好處。

2.特斯拉

特斯拉是一家創(chuàng)新、環(huán)保的汽車制造公司。該公司專注于通過制造和銷售全電動汽車來減少在汽車中使用燃料造成的污染。

你可以從特斯拉的網(wǎng)站布局中學到什么？

有一個簡短而直接的買家旅程

當您登陸特斯拉的網(wǎng)站時，您所看到的只是您可以購買的汽車選項。當您訪問該網(wǎng)站時，您應該做的事情不會分散您的注意力——購買電動汽車。

此外，特斯拉在其網(wǎng)站上不包含諸如汽車描述或評論之類的營銷內(nèi)容，網(wǎng)絡訪問者會花費太多時間。相反，他們有一個句子副本，以確保網(wǎng)絡訪問者仍然超級專注于購買汽車。

因此，所有這一切都有助于減少買家的旅程，因為您所要做的就是找到您想要的汽車，單擊“自定義訂單”按鈕，下訂單并等待汽車交付。

像特斯拉這樣的網(wǎng)站布局旨在讓客戶盡可能輕松地購買他們需要的東西，這有助于提高銷量。

以產(chǎn)品為中心

如前所述，當您登陸該網(wǎng)站時，您首先會注意到的是他們提供的所有產(chǎn)品。

但這不是最好的部分。

最好的部分是產(chǎn)品圖像的生動程度，立即引起您的注意。更重要的是，照片背景與產(chǎn)品顏色形成鮮明對比，使產(chǎn)品更加突出。

特斯拉用來讓你專注于他們的產(chǎn)品的另一個技巧是沒有任何其他視覺效果讓你分心。因此，您所做的就是專注于您想要的產(chǎn)品并購買它。

與用戶互動

單擊“自定義訂單”按鈕后，您將被定向到一個頁面，您可以在其中個性化汽車的外部和內(nèi)部。

從您想要的車輪類型到內(nèi)飾顏色，您將與網(wǎng)站密切互動，根據(jù)自己的喜好定制汽車。

3.亞馬遜

亞馬遜是一家電子商務巨頭，它徹底改變了在線購物體驗。該公司支持超過100 萬家小型企業(yè)，全球每月用戶超過 1 億。

這就是為什么有這么多來自世界各地的人在亞馬遜上購物的原因。

您可以輕松瀏覽網(wǎng)站

有這么多的商品要賣，你可能會認為亞馬遜的網(wǎng)站可能雜亂無章，但事實并非如此。

該網(wǎng)站采用開放式布局，網(wǎng)格結(jié)構(gòu)有助于保持一切井井有條。亞馬遜還使用卡片布局對產(chǎn)品進行分類，并通過 CTA 將您引導至包含更多產(chǎn)品的頁面。

亞馬遜的網(wǎng)站設計非常精簡，以至于您在尋找自己想要的東西時不會迷失方向，從而使網(wǎng)絡訪問者更容易轉(zhuǎn)化為購買客戶。

出色地使用清晰的圖像

由于該網(wǎng)站的目標是讓您購買他們在該網(wǎng)站上營銷的產(chǎn)品，因此亞馬遜提供了每種產(chǎn)品的生動照片。這樣，您可以快速評估產(chǎn)品是否正是您所需要的。

亞馬遜還使用顏色對比——圖像顏色鮮艷——使圖像在背景中更加突出，以吸引網(wǎng)絡訪問者的注意力。

網(wǎng)絡訪問者花在網(wǎng)站上查看照片的時間越多，將他或她轉(zhuǎn)化為付費客戶的機會就越大，從而降低跳出率。

此外，CTA 戰(zhàn)略性地放置在持有每種產(chǎn)品的卡片中，使客戶更容易購買。

提供直接的買家旅程

只需點擊幾下即可從產(chǎn)品查看到下訂單。

該網(wǎng)站使查找、檢查和決定是否購買產(chǎn)品變得容易，因為產(chǎn)品以易于訪問的方式組織并且對網(wǎng)站訪問者清晰可見。

短暫而直接的旅程使客戶更容易從網(wǎng)站上購買，從而促進銷售并增加利潤。

使購買體驗個性化

當您登錄時，亞馬遜會要求您分享一些信息，這些信息構(gòu)成了個性化用戶體驗的基礎(chǔ)。

現(xiàn)在，亞馬遜使用人工智能來學習你的購物和瀏覽模式，然后根據(jù)這些模式推薦產(chǎn)品，讓你的購物體驗更簡單。

因此，由于平臺提供的個性化推薦，客戶最終從該網(wǎng)站購買了不止一件商品也就不足為奇了。

最終，訪問者越快找到他們需要的東西，甚至獲得個人推薦，就越容易將他們轉(zhuǎn)化為付費客戶。

4.網(wǎng)飛

Netflix 是一家通過將任何家庭變成電影院來徹底改變電影觀看的公司。該公司在全球擁有超過 2 億付費用戶，幾乎贏得了所有人的青睞。

這是一件大事，這就是為什么這么多人喜歡在電影之外使用 Netflix 的原因。

很好地使用了黑暗模式

Netflix 的網(wǎng)站提供了深色背景，這對眼睛很舒服，讓您更容易連續(xù)觀看而不會刺激眼睛。

更重要的是，如果您在手機或其他 OLED 屏幕上觀看，黑暗模式可以幫助您節(jié)省電池壽命。

出色地使用空白

價值主張和 CTA 是首要和中心，以吸引您的注意力到您需要在網(wǎng)站上做的事情——找一部電影看。

除了整齊地藏在網(wǎng)站左角的公司名稱外，價值主張和 CTA 是主頁上唯一的內(nèi)容。因此，它使網(wǎng)站訪問者保持專注。

該公司使用的另一個巧妙技巧是將主頁背景作為您在網(wǎng)站上找到的電影的照片拼貼。

有趣的是，它并沒有分散注意力，而是充當了網(wǎng)絡訪問者的預告片，讓他們感到被迫注冊以查看公司提供的更多內(nèi)容。

易于導航

Netflix采用極簡設計手法，首頁導航菜單“Language”和“Sign In”只有兩個菜單按鈕。這使網(wǎng)站訪問者專注于吸引注意力的價值主張，引導他們創(chuàng)建帳戶并開始觀看。

此外，滾動瀏覽主頁，您會發(fā)現(xiàn)以網(wǎng)格結(jié)構(gòu)組織的其余內(nèi)容可幫助客戶快速瀏覽以找到支付訂閱費所需的所有信息。

幾乎不使用副本

Netflix 將極簡主義提升到一個全新的水平，僅使用一句話內(nèi)容來解釋您為會員付費會得到什么。

現(xiàn)在，這有助于網(wǎng)站訪問者避免分心，只關(guān)注平臺提供的事實，這表明最終注冊成為會員。

出色地使用排版

該平臺使用粗體和大寫字母來突出最重要的內(nèi)容，并幫助用戶快速瀏覽內(nèi)容以做出購買決定。

文字與深色背景形成鮮明對比，吸引您的注意力。

無可挑剔地使用生動的圖像

Netflix使用簡短、清晰的視頻和動畫來幫助用戶清楚地了解他們在注冊后將獲得什么。

現(xiàn)在，這些視頻和動畫與背景形成鮮明對比，有助于讓您專注于它們。

5.Fitbit

Fitbit 是一家健身公司，多年來一直在銷售追蹤器和手表，以幫助客戶控制自己的健康。該公司擁有近 3000 萬活躍用戶。

以下是 Fitbit 網(wǎng)站如何讓客戶專注于購買產(chǎn)品。

具有簡約的設計

Fitbit在主頁上只有三個菜單按鈕。每個菜單按鈕都是代表 Fitbit 提供的產(chǎn)品類別。

將鼠標懸停在每個菜單按鈕上會為您提供可以瀏覽的其他感興趣頁面的列表。

您還應該將您的產(chǎn)品分類，以使您的網(wǎng)站看起來整潔有序。

但最重要的是，幫助網(wǎng)絡訪問者更快地找到您的產(chǎn)品并輕松瀏覽整個網(wǎng)站。

使用清晰的圖像

Fitbit在整個網(wǎng)站上 使用其產(chǎn)品的清晰生動的圖像來引起人們的注意。

圖像與背景形成鮮明對比，使它們更加突出。

Fitbit包括一張名人的照片，以使網(wǎng)絡訪問者對其產(chǎn)品更感興趣并提高他們的可信度。

優(yōu)秀的CTA定位

每張照片都有一個 CTA 按鈕，該按鈕清晰突出顯示，您不容錯過。

CTA 按鈕很明顯，因為它們包含一個箭頭并且周圍有大量空白。

突出使用大膽的顏色

Fitbit在整個網(wǎng)站上使用各種大膽的顏色來突出最重要的元素。

該公司通過組合不同的顏色來創(chuàng)造對比，使產(chǎn)品和內(nèi)容更加清晰和引人注目，從而實現(xiàn)了這一目標。

大量使用排版

Fitbit使用不同大小的文本來吸引您的注意力：他們的產(chǎn)品、服務和優(yōu)惠。

他們使用大而粗體的文本來幫助網(wǎng)絡訪問者快速記錄他們提供的信息以做出購買決定。

6.羅卡

Rocka 是一家專注于科技創(chuàng)業(yè)公司的風險投資商。多年來，該公司一直通過將創(chuàng)意轉(zhuǎn)化為成功的產(chǎn)品，從零開始創(chuàng)建科技公司。

以下是您可以從 Rocka 那里學到的東西。

出色地使用引人注目的視覺效果

當您登陸 Rocka 的網(wǎng)站時，您的注意力將被主頁上的兩個 3D 雕像所吸引。雕像脫穎而出，但不會分散您對現(xiàn)場的注意力。

事實上，它們與內(nèi)容一起被放置在網(wǎng)站的中心。因此，這些雕像不僅會吸引注意力，還會吸引注意力。

除了主頁上的兩個雕像外，Rocka 在整個網(wǎng)站上使用了更多的希臘神話 3D 雕像。

更重要的是，該網(wǎng)站在背景中使用動畫幾何形狀為整個網(wǎng)站增添了一種特殊的感覺。

這種引人注目的視覺效果令人難忘和迷人，并讓網(wǎng)絡訪問者全神貫注。

輕松導航

菜單欄只有四個菜單按鈕，使導航超級簡單快捷。本網(wǎng)站的網(wǎng)絡訪問者在嘗試瀏覽網(wǎng)站以獲取所需內(nèi)容時不會迷路。

幾個菜單按鈕有助于描繪一個簡約的設計，讓客戶專注于重要的事情。

突出使用粗體字體

當您登陸主頁時，您會看到他們的價值主張“工作的未來”用大寫的大寫字母表示。

Rocka 還在整個網(wǎng)站上使用更大的文字來吸引人們對更重要的東西的關(guān)注：他們的產(chǎn)品和服務。

出色的色彩組合

Rocka 使用五種純色作為背景，它們很好地融合在一起。

顏色有助于使每個頁面的內(nèi)容脫穎而出，而不會像在主頁上那樣分散注意力，白色文本與彩色背景形成鮮明對比，使其更加突出。

7.Asana

Asana 是一種項目管理工具，可幫助您一次管理一個或多個團隊。使用 Asana 的最佳部分是使用內(nèi)置消息傳遞工具與團隊成員協(xié)作是多么容易。

這就是 Asana 的網(wǎng)站與眾不同的原因。

出色地使用空白

Asana 使用空格來引起人們對重要內(nèi)容的注意。

當您登陸主頁時，您會看到圍繞價值主張和 CTA 的所有空白，以使它們更加突出。

價值主張的突出定位

當您登陸 Asana 的主頁時，您的注意力將被頂部的價值主張所吸引，左上角用粗體大字書寫。

但是關(guān)于價值主張的最好的部分是，Asana 向訪問者做出了一個大膽的承諾：“致力于大創(chuàng)意，沒有忙碌的工作”，這很有趣，讓訪問者想要了解更多。

在大膽的承諾之后還有一個 CTA 按鈕，它可以幫助訪問者專注于他們在網(wǎng)站上所做的事情——注冊以獲得項目管理服務。

視覺效果和短文案的完美結(jié)合

Asana只用了幾句話來解釋他們的服務以及您從使用該平臺獲得的好處，這意味著您可以立即獲得最重要的信息。

更重要的是，該網(wǎng)站使用簡短的文案和清晰的視覺效果來引導潛在客戶通過銷售渠道。

強調(diào)可信度

Asana 巧妙地在其主頁上包含來自滿意客戶的正面評價。您應該注意，該網(wǎng)站專注于知名品牌客戶的評論，以幫助提高他們對潛在客戶的可信度。

人們總是會從他們可以信任的人那里購買。因此，讓知名品牌的權(quán)威人士認可平臺對于吸引更多潛在客戶并讓他們保持足夠長的參與時間以轉(zhuǎn)化為付費客戶大有幫助。

以現(xiàn)代設計讓您的網(wǎng)站脫穎而出

您的潛在客戶可以通過查看您的網(wǎng)站來了解很多關(guān)于您公司的信息。因此，創(chuàng)建一個突出的網(wǎng)站，同時為您的潛在客戶提供他們想要的東西，這是獲得更多轉(zhuǎn)化和更高參與率的最佳方式。

那么，什么能讓你的網(wǎng)站脫穎而出呢？

使用空白讓您的潛在客戶專注于重要的事情。

采用簡約的設計，讓訪客保持參與，而不會因太多選擇而分心。

對視覺元素和背景使用大膽的顏色，以吸引人們注意您希望訪問者看到的信息。

最后，如果您銷售產(chǎn)品，您可以使您的網(wǎng)站更加以產(chǎn)品為中心，以保持您的潛在客戶參與并減少他們的買家旅程。

因此，請選擇您喜歡的元素并創(chuàng)建或改進您的網(wǎng)站設計，以吸引更多潛在客戶并讓他們保持足夠的參與度以轉(zhuǎn)化為付費客戶。

在哪里了解更多信息

要了解有關(guān)如何設計更好的網(wǎng)站和界面的更多信息，請閱讀素馬設計更多的相關(guān)于交互設計 UI 設計文章。