如何讓你的網(wǎng)頁首圖抓住用戶注意力
發(fā)布時間:2021-12-18 10:05 [ 我要自學(xué)網(wǎng)原創(chuàng) ] 發(fā)布人: 小劉2175

Banner 是我們最常聊到的設(shè)計元素,它是一個網(wǎng)頁的招牌,是用戶最容易看到的視覺元素。今天,我們來聊聊Banner中的急先鋒,網(wǎng)頁首圖,它的設(shè)計之道。

網(wǎng)頁設(shè)計師都明白,網(wǎng)頁對于用戶的第一印象是非常重要的,而網(wǎng)頁給用戶的第一印象很大程度上取決于網(wǎng)頁的視覺設(shè)計,F(xiàn)在的網(wǎng)頁雖然多種多樣,但是出于視覺化設(shè)計的目的,大多會使用大圖背景,或者超大尺寸的Banner。當(dāng)用戶一打開網(wǎng)頁的時候,映入用戶眼簾的Banner ,是影響視覺設(shè)計的關(guān)鍵因素,它有個專門的術(shù)語是 Hero image,我們通常稱之為首圖。所以,網(wǎng)頁首圖的設(shè)計需要特別用心的。

網(wǎng)頁首圖不僅僅是一張漂亮的圖片,它還應(yīng)該是強大的視覺傳達(dá)工具。談情懷不如講套路,今天的文章,我們就通過一系列最佳實踐來為你展示首圖設(shè)計的一些設(shè)計“套路”。


1、一定要使用相關(guān)圖片


在挑選圖片的時候一定要精挑細(xì)選。

合適而好的圖片能夠提升整體體驗,而不合適的圖片選擇則可能毀掉整個設(shè)計。在選取圖片的時候,盡量選擇貼合主題,內(nèi)容一致,主旨和目的相匹配的圖片,這樣可以避免用戶的預(yù)期和內(nèi)容產(chǎn)生割裂感。就像討厭標(biāo)題黨一樣,用戶會因為首圖和內(nèi)容的不匹配而對網(wǎng)站內(nèi)容失去信任,飛速離去。

這8個要點,能讓你的網(wǎng)頁首圖抓住用戶注意力

這個首圖的內(nèi)容實際說的是貸款,但是配圖選取的是毛巾,在信息傳達(dá)上就存在不匹配的問題。

這8個要點,能讓你的網(wǎng)頁首圖抓住用戶注意力

這個網(wǎng)站主推的產(chǎn)品就是冰激凌,內(nèi)容和圖片的一致,也符合用戶的預(yù)期。


2、讓首圖成為核心


首圖是承載內(nèi)容的重要容器。

你想要讓內(nèi)容不同凡響,又能夠從整個設(shè)計中脫穎而出,那么就要用好首圖。在視覺上設(shè)計優(yōu)秀的首圖能夠讓用戶每次打開網(wǎng)站的時候都為之駐足。

在首圖的設(shè)計上,蘋果每次都為我們提供了最優(yōu)秀的案例。

這8個要點,能讓你的網(wǎng)頁首圖抓住用戶注意力

小貼士:首圖并不需要將所有的信息都呈現(xiàn)出來,相反首圖應(yīng)該是強調(diào)重點,將最突出的部分強化并呈現(xiàn)出來。


3、拿出情感化的設(shè)計


將情感融入設(shè)計,并且用情感來說法用戶,才是首圖的設(shè)計之道。只有能夠觸動用戶情緒的設(shè)計更具有說服力。

很多時候,我們使用創(chuàng)意也好,借助熱門IP也好,精心打磨文案也好,也只是希望讓首圖能夠讓用戶驚喜、喜歡、需要,最終是要通過它調(diào)動起用戶的情緒。

這8個要點,能讓你的網(wǎng)頁首圖抓住用戶注意力

積極的情緒刺激能夠更好的建立用戶和你的網(wǎng)站之間的互動感。


4、一定要高清


圖片一定不要出現(xiàn)模糊或者像素化的情況,雖然這是一個低級錯誤,但是很多時候還是難以避免。

低素質(zhì)的圖片是非常容易讓人產(chǎn)生疏離感的,在高清屏幕到處都是的今天,模糊不清的圖片是無法接受的(專門的像素風(fēng)是另外一種情況)。

這8個要點,能讓你的網(wǎng)頁首圖抓住用戶注意力

想要用戶對你的網(wǎng)站擁有積極的情緒,那么圖片的素質(zhì)一定要有保證,高素質(zhì)的圖片能夠讓用戶準(zhǔn)確地獲得信息,清晰的圖片總能讓人看著更加舒服。


5、強化CTA按鈕


網(wǎng)頁首圖常常和行為召喚(CTA)按鈕搭配著使用。由于首圖配圖通常在視覺上極其突出,但是搭配有行為召喚按鈕的首圖,其本質(zhì)上是用來吸引用戶,傳遞信息,并引導(dǎo)用戶去點擊按鈕的,所以行為召喚按鈕和視覺信息豐富的圖片之間,不應(yīng)該互相干預(yù),而是通過設(shè)計,讓CTA按鈕更加突出,讓圖片處于輔助的位置,最終達(dá)到吸引、引導(dǎo)的目的。

這8個要點,能讓你的網(wǎng)頁首圖抓住用戶注意力

按鈕的視覺重量應(yīng)該超過圖片的視覺重量。


6、控制對比度


對比度是任何設(shè)計中都必須注意的點,在設(shè)計首圖的時候同樣需要注意。

首圖中的文本和排版也需要用心設(shè)計,通常需要選擇加粗且易讀的字體。如果你的圖片和文字疊加到了一起,那么需要注意背景的圖片和前景的文字之間的對比,確保文本是能夠被清晰分辨的。通常,設(shè)計師會在圖片上疊加上一個半透明的有色圖層來降低繁復(fù)色彩的視覺信息量和干擾。

這8個要點,能讓你的網(wǎng)頁首圖抓住用戶注意力

除此之外,你還可以使用Scrims 技術(shù),這種網(wǎng)頁技術(shù)能夠識別文本,并且讓圖片和底層的圖片之間構(gòu)成對比,確?勺x性。

小貼士:如果你打算使用使用圖文疊加的方式來設(shè)計首圖,還應(yīng)當(dāng)注意讓圖片的主體部分是清晰可見,且能夠被用戶輕松理解的。


7、兼顧不同的屏幕尺寸


如今的內(nèi)容都需要考慮跨平臺、跨設(shè)備、跨平臺的兼容和適配性,當(dāng)你的圖片出現(xiàn)在不同尺寸的屏幕上的時候,它是否能夠正常顯示,正確顯示,并且符合不同平臺、不同屏幕的顯示需求。

這8個要點,能讓你的網(wǎng)頁首圖抓住用戶注意力


8、考慮使用插畫


在網(wǎng)頁首圖中使用插畫能夠賦予首圖以個性。相比于圖片,插畫更加個性化,插畫的內(nèi)容更加自由,也更容易控制,從內(nèi)容到技術(shù)均是如此。

Dropbox 就使用插畫來呈現(xiàn)、表達(dá)復(fù)雜的內(nèi)容:

這8個要點,能讓你的網(wǎng)頁首圖抓住用戶注意力

小貼士:當(dāng)你打算在首圖當(dāng)中使用插畫的時候,請盡量保持插畫和整體設(shè)計之間的一致性,盡量讓它們看起來來源是相同的。


結(jié)語


網(wǎng)頁首圖絕對是真?zhèn)設(shè)計中最關(guān)鍵的部分之一。選取素質(zhì)高,有趣的圖片,同網(wǎng)站的內(nèi)容結(jié)合起來,參考上面的這些最佳實踐,你的網(wǎng)頁首圖應(yīng)該能夠更上一層樓。

HTML基礎(chǔ)視頻教程
我要自學(xué)網(wǎng)商城 ¥30 元
進(jìn)入購買
文章評論
0 條評論 按熱度排序 按時間排序 /350
添加表情
遵守中華人民共和國的各項道德法規(guī),
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任,
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。
V
特惠充值
聯(lián)系客服
APP下載
官方微信
返回頂部
分類選擇:
電腦辦公 平面設(shè)計 室內(nèi)設(shè)計 室外設(shè)計 機械設(shè)計 工業(yè)自動化 影視動畫 程序開發(fā) 網(wǎng)頁設(shè)計 會計課程 興趣成長 AIGC