如何在2022年為網(wǎng)站設(shè)計一個英雄形象？

時間：2023-06-02 16:54:01 | 來源：網(wǎng)站運營

時間：2023-06-02 16:54:01 來源：網(wǎng)站運營

如何在2022年為網(wǎng)站設(shè)計一個英雄形象？：優(yōu)哲研究發(fā)現(xiàn)，訪問者只需 0.05 秒就可以決定對網(wǎng)站的留存。 為了保持訪問者繼續(xù)瀏覽網(wǎng)站，我們需要創(chuàng)建引人注目且高質(zhì)量的主圖（人們看到的第一張照片、圖形或視頻），幫助網(wǎng)站代表品牌標(biāo)志的精髓和整體形象。 出色的英雄形象設(shè)計是獲得良好第一印象的關(guān)鍵，它可以對用戶產(chǎn)生巨大影響。 這是對你的網(wǎng)站進行好奇探索的起點。

根據(jù)維基百科的定義：英雄圖片是一個大的橫幅圖片，顯眼地放置在網(wǎng)頁上，通常在前面和中間。

在網(wǎng)頁設(shè)計中，英雄圖片是人們在網(wǎng)站標(biāo)題正下方的網(wǎng)頁折疊上方區(qū)域中看到的第一張照片、圖形、插圖或視頻。根據(jù)你創(chuàng)建的網(wǎng)站的目標(biāo)，英雄形象可能會覆蓋一個 CTA，鼓勵訪問者深入了解網(wǎng)站。它旨在展示你的品牌風(fēng)格，分享網(wǎng)站的目的，并讓人們興奮地探索。







正如上面的線框所示，主圖像通常占據(jù)頁面上幾乎所有的預(yù)滾動全寬空間。其他布局元素（CTA 按鈕、文本等）放置在英雄圖像上和周圍，以呈現(xiàn)一致且平衡的視覺構(gòu)圖。

為什么英雄形象很重要？

網(wǎng)站的英雄形象及其周圍的英雄內(nèi)容通常是網(wǎng)站傳達組織的 USP（獨特賣點）和連接客戶的第一個機會。

由于以下原因，英雄形象的良好設(shè)計非常重要。

給人留下很好的第一印象。英雄形象最重要的好處是它可以立即吸引訪問者的注意力。我們已經(jīng)知道，用戶對網(wǎng)站形成意見只需要 50 毫秒。因此，英雄形象有機會盡快給用戶留下深刻印象。作為網(wǎng)頁設(shè)計師，你應(yīng)該記住，你選擇的英雄圖片以及我們?nèi)绾卧谀愕捻撁嫔险故舅鼤诤艽蟪潭壬嫌绊懹脩舻那榫w和行為。

清晰地告訴訪問者你的網(wǎng)站主題。圖像比文字更能說明問題，人們可以比文字更快地解碼圖像。使用信息豐富的英雄圖像，你可以提供有關(guān)內(nèi)容的快速視覺信息，從而更好地宣傳你的品牌和產(chǎn)品。

用以提升用戶體驗。通過精心設(shè)計的英雄形象，可以激活網(wǎng)頁的美感，這在網(wǎng)絡(luò)上的激烈競爭和作為積極用戶體驗的一部分的需求上升方面意義重大。

以提高轉(zhuǎn)化率。英雄形象的正確構(gòu)圖可以加強導(dǎo)航并讓更多人關(guān)注號召性用語按鈕。如果英雄形象完成了它的工作，那么訪問者就可以成功地轉(zhuǎn)化為客戶。

如何設(shè)計一個英雄形象網(wǎng)站？

我們已經(jīng)討論了網(wǎng)頁設(shè)計中英雄形象的定義和重要性，現(xiàn)在是時候討論如何最好地在你的網(wǎng)站上使用英雄形象了。

使用高質(zhì)量和相關(guān)的圖像

英雄形象將在訪問者的腦海中創(chuàng)造你網(wǎng)站的第一印象，因此你需要確保使用有助于建立訪問者信任的高質(zhì)量圖片。但是，由于高分辨率圖像可能會使加載時間更長，因此你需要針對網(wǎng)頁對其進行優(yōu)化，以確保訪問者的質(zhì)量和高效體驗。

此外，英雄形象必須與你的品牌價值相關(guān)?；c時間問自己這些問題，以確認(rèn)網(wǎng)站形象可以清楚地放大你的價值主張：你想觸發(fā)什么情緒？你的圖像如何連接到你的 USP / ESP？圖像是否與網(wǎng)站內(nèi)容相關(guān)聯(lián)？

選擇正確的設(shè)計工具

想打造高轉(zhuǎn)化的英雄形象？選擇正確的設(shè)計工具將更輕松、更快速地完成設(shè)計。使用像 Mockplus 這樣的設(shè)計工具將為你提供大量的內(nèi)置組件，有助于提高工作效率。也是一款簡單易用的設(shè)計工具，只需簡單的拖拽，即可擁有高保真英雄形象。不僅如此，它還可以在早期階段預(yù)覽和測試你的設(shè)計，幫助找出并解決可能出現(xiàn)的可用性問題。

為你的設(shè)計添加一些交互

英雄形象的交互是影響設(shè)計的另一個因素。通過使用相同的主圖/插圖可以幫助有效地傳達品牌價值并使訪問者感覺更加緊密，從而引起他們對網(wǎng)頁的反應(yīng)。因此，參與度會增加。如果你想改善你的英雄圖像的交互，你可以使用一些基本的設(shè)計元素，比如視差滾動、圖像滑塊和鼠標(biāo)懸停效果。

使用突出的 CTA

請記住，你的網(wǎng)站的真正目的是提高轉(zhuǎn)化率，這意味著CTA 元素不能被忽略或隱藏在沒人能看到的地方。如果用戶不點擊頁面上的任何內(nèi)容，你將浪費所有時間和金錢。 CTA 的智能放置可確保訪問者的互動，從而帶來大量轉(zhuǎn)化。為了使 CTA 比平時更亮，可以使用對比度來突出顯示它，而不會影響英雄圖像的視覺吸引力。

設(shè)計時考慮真實性

我們都知道今天的受眾被刺激、廣告和噪音所淹沒，但品牌真實性可以幫助你突破噪音并使網(wǎng)站脫穎而出。如果正確使用真實的信息和逼真的圖像，你可以與觀眾產(chǎn)生更強烈的共鳴，并與他們建立更牢固的聯(lián)系。也可以考慮在整體形象設(shè)計中加入漸變色，融入品牌美感，為參觀者營造強烈的視覺記憶。

建立情感聯(lián)系

如果你在情感層面上與訪問者建立聯(lián)系，則更有可能獲得有效的轉(zhuǎn)化。你應(yīng)該有一個英雄形象，以吸引你想在訪問者心中喚起的情感。從最近的一項研究中可以了解到，情感圖像比情感文字更能影響人們。為了在觀看者中引發(fā)情緒反應(yīng)，你可以選擇具有高度情緒化的圖像。

使英雄形象與內(nèi)容對齊

在設(shè)計網(wǎng)站時，你需要為訪問者創(chuàng)造無縫體驗，為了做到這一點，應(yīng)該在設(shè)計語言和相關(guān)性方面遵循相同的設(shè)計原則。如果訪問者看到一個英雄圖像的設(shè)計方式有很多空白和最少的方法，但網(wǎng)頁的其余部分聚集在一起并充滿動畫，那么他/她會對網(wǎng)站的內(nèi)容感到困惑想交流。因此，為網(wǎng)站營造一種整體感覺并確保英雄形象有助于贊美和增強它是非常重要的。

測試和優(yōu)化你的英雄形象

如果你想知道哪個英雄圖片最適合網(wǎng)站，首先要做的是對英雄圖片進行 A/B 測試。你需要進行 A/B 測試的最重要原因之一是它可以幫助優(yōu)化網(wǎng)站的轉(zhuǎn)化率并通過了解哪個圖像產(chǎn)生更多點擊或瀏覽量來賺取更多利潤。獲得測試結(jié)果后，你可以決定哪個圖片最適合網(wǎng)站并嘗試對其進行優(yōu)化。

3個例子

1.藝術(shù)設(shè)計服務(wù)網(wǎng)站的照片英雄形象設(shè)計







這是英雄形象設(shè)計的另一個很好的例子。 藝術(shù)設(shè)計服務(wù)網(wǎng)站首頁以顏色為主要工具，將英雄插圖、文案內(nèi)容和CTA按鈕的視覺細節(jié)統(tǒng)一起來。

2.茶葉公司英雄標(biāo)題插畫設(shè)計







這個網(wǎng)站茶事活動頁面右側(cè)卡通英雄插畫，快速與主題建立視覺聯(lián)系，傳遞茶道盛況。

3.在線書店網(wǎng)站的英雄插畫設(shè)計







這是銷售兒童書籍的在線書店的網(wǎng)頁。 英雄插圖立即營造出適當(dāng)?shù)姆諊?，簡單的?biāo)語有效地鼓勵用戶訂閱。

小結(jié)

由于英雄圖片對我們的品牌認(rèn)知度、網(wǎng)站流量和轉(zhuǎn)化率有重大影響，因此我們需要創(chuàng)建一個從第一眼就吸引人們的圖片。只需遵循優(yōu)哲制定的最佳實踐，從英雄圖像示例中汲取靈感，你就可以將訪問者轉(zhuǎn)化為客戶。