1、一定要使用相關圖片
在挑選圖片的時候一定要精挑細選。
合適而好的圖片能夠提升整體體驗,而不合適的圖片選擇則可能毀掉整個設計。在選取圖片的時候,儘量選擇貼合主題,內容一致,主旨和目的相匹配的圖片,這樣可以避免用戶的預期和內容產生割裂感。就像討厭標題黨一樣,用戶會因為首圖和內容的不匹配而對網站內容失去信任,飛速離去。
2、讓首圖成為核心
首圖是承載內容的重要容器。
你想要讓內容不同凡響,又能夠從整個設計中脫穎而出,那麼就要用好首圖。在視覺上設計優秀的首圖能夠讓用戶每次打開網站的時候都為之駐足。
在首圖的設計上,蘋果每次都為我們提供了最優秀的案例。
3、拿出情感化的設計
將情感融入設計,並且用情感來說法用戶,才是首圖的設計之道。只有能夠觸動用戶情緒的設計更具有說服力。
很多時候,我們使用創意也好,借助熱門IP也好,精心打磨文案也好,也只是希望讓首圖能夠讓用戶驚喜、喜歡、需要,最終是要通過它調動起用戶的情緒。
4、一定要高清
圖片一定不要出現模糊或者像素化的情況,雖然這是一個低級錯誤,但是很多時候還是難以避免。
低素質的圖片是非常容易讓人產生疏離感的,在高清屏幕到處都是的今天,模糊不清的圖片是無法接受的(專門的像素風是另外一種情況)。
5、強化CTA按鈕
網頁首圖常常和行為召喚(CTA)按鈕搭配著使用。由於首圖配圖通常在視覺上極其突出,但是搭配有行為召喚按鈕的首圖,其本質上是用來吸引用戶,傳遞信息,並引導用戶去點擊按鈕的,所以行為召喚按鈕和視覺信息豐富的圖片之間,不應該互相干預,而是通過設計,讓CTA按鈕更加突出,讓圖片處於輔助的位置,最終達到吸引、引導的目的。
6、控制對比度
對比度是任何設計中都必須注意的點,在設計首圖的時候同樣需要注意。
首圖中的文本和排版也需要用心設計,通常需要選擇加粗且易讀的字體。如果你的圖片和文字疊加到了一起,那麼需要注意背景的圖片和前景的文字之間的對比,確保文本是能夠被清晰分辨的。通常,設計師會在圖片上疊加上一個半透明的有色圖層來降低繁複色彩的視覺信息量和干擾。
7、兼顧不同的屏幕尺寸
如今的內容都需要考慮跨平台、跨設備、跨平台的兼容和適配性,當你的圖片出現在不同尺寸的屏幕上的時候,它是否能夠正常顯示,正確顯示,並且符合不同平台、不同屏幕的顯示需求。
8、考慮使用插畫
在網頁首圖中使用插畫能夠賦予首圖以個性。相比於圖片,插畫更加個性化,插畫的內容更加自由,也更容易控制,從內容到技術均是如此。
Dropbox 就使用插畫來呈現、表達複雜的內容:
結語
網頁首圖絕對是真個設計中最關鍵的部分之一。選取素質高,有趣的圖片,同網站的內容結合起來,參考上面的這些最佳實踐,你的網頁首圖應該能夠更上一層樓。
原文地址: uxplanet
原文作者: Nick Babich
優設譯文: @陳子木
本文地址: http://www.uisdc.com/best-practices-for-hero-images