Banner 是我們最常聊到的設計元素贰您，它是一個網(wǎng)頁的招牌坏平，是用戶最容易看到的視覺元素。今天锦亦，我們來聊聊Banner中的急先鋒舶替，網(wǎng)頁首圖，它的設計之道杠园。
網(wǎng)頁設計師都明白顾瞪，網(wǎng)頁對于用戶的第一印象是非常重要的，而網(wǎng)頁給用戶的第一印象很大程度上取決于網(wǎng)頁的視覺設計。
現(xiàn)在的網(wǎng)頁雖然多種多樣陈醒，但是出于視覺化設計的目的惕橙，大多會使用大圖背景，或者超大尺寸的Banner钉跷。當用戶一打開網(wǎng)頁的時候弥鹦，映入用戶眼簾的Banner ，是影響視覺設計的關鍵因素爷辙，它有個專門的術語是 Hero image彬坏，我們通常稱之為首圖。所以犬钢，網(wǎng)頁首圖的設計需要特別用心的苍鲜。
網(wǎng)頁首圖不僅僅是一張漂亮的圖片，它還應該是強大的視覺傳達工具玷犹。談情懷不如講套路混滔，今天的文章，我們就通過一系列最佳實踐來為你展示首圖設計的一些設計“套路”歹颓。
1坯屿、一定要使用相關圖片
在挑選圖片的時候一定要精挑細選。
合適而好的圖片能夠提升整體體驗巍扛，而不合適的圖片選擇則可能毀掉整個設計领跛。在選取圖片的時候，盡量選擇貼合主題撤奸，內(nèi)容一致吠昭，主旨和目的相匹配的圖片，這樣可以避免用戶的預期和內(nèi)容產(chǎn)生割裂感胧瓜。就像討厭標題黨一樣矢棚，用戶會因為首圖和內(nèi)容的不匹配而對網(wǎng)站內(nèi)容失去信任，飛速離去府喳。
這個首圖的內(nèi)容實際說的是貸款蒲肋，但是配圖選取的是毛巾，在信息傳達上就存在不匹配的問題钝满。
這個網(wǎng)站主推的產(chǎn)品就是冰激凌兜粘，內(nèi)容和圖片的一致，也符合用戶的預期弯蚜。
2孔轴、讓首圖成為核心
首圖是承載內(nèi)容的重要容器。
你想要讓內(nèi)容不同凡響熟吏，又能夠從整個設計中脫穎而出距糖，那么就要用好首圖玄窝。在視覺上設計優(yōu)秀的首圖能夠讓用戶每次打開網(wǎng)站的時候都為之駐足。
在首圖的設計上悍引，蘋果每次都為我們提供了最優(yōu)秀的案例恩脂。
小貼士：首圖并不需要將所有的信息都呈現(xiàn)出來，相反首圖應該是強調(diào)重點趣斤，將最突出的部分強化并呈現(xiàn)出來土至。
3憨栽、拿出情感化的設計
將情感融入設計涛癌，并且用情感來說法用戶奋蔚，才是首圖的設計之道。只有能夠觸動用戶情緒的設計更具有說服力联贩。
很多時候漫仆，我們使用創(chuàng)意也好，借助熱門IP也好泪幌，精心打磨文案也好盲厌，也只是希望讓首圖能夠讓用戶驚喜、喜歡祸泪、需要吗浩，最終是要通過它調(diào)動起用戶的情緒。
積極的情緒刺激能夠更好的建立用戶和你的網(wǎng)站之間的互動感没隘。
4懂扼、一定要高清
圖片一定不要出現(xiàn)模糊或者像素化的情況，雖然這是一個低級錯誤右蒲，但是很多時候還是難以避免阀湿。
低素質(zhì)的圖片是非常容易讓人產(chǎn)生疏離感的，在高清屏幕到處都是的今天瑰妄，模糊不清的圖片是無法接受的（專門的像素風是另外一種情況）炕倘。
想要用戶對你的網(wǎng)站擁有積極的情緒，那么圖片的素質(zhì)一定要有保證翰撑，高素質(zhì)的圖片能夠讓用戶準確地獲得信息，清晰的圖片總能讓人看著更加舒服啊央。
5眶诈、強化CTA按鈕
網(wǎng)頁首圖常常和行為召喚（CTA）按鈕搭配著使用。由于首圖配圖通常在視覺上極其突出瓜饥，但是搭配有行為召喚按鈕的首圖逝撬，其本質(zhì)上是用來吸引用戶，傳遞信息乓土，并引導用戶去點擊按鈕的宪潮，所以行為召喚按鈕和視覺信息豐富的圖片之間溯警，不應該互相干預，而是通過設計狡相，讓CTA按鈕更加突出梯轻，讓圖片處于輔助的位置，最終達到吸引尽棕、引導的目的喳挑。
按鈕的視覺重量應該超過圖片的視覺重量。
6滔悉、控制對比度
對比度是任何設計中都必須注意的點伊诵，在設計首圖的時候同樣需要注意。
首圖中的文本和排版也需要用心設計回官，通常需要選擇加粗且易讀的字體曹宴。如果你的圖片和文字疊加到了一起，那么需要注意背景的圖片和前景的文字之間的對比歉提，確保文本是能夠被清晰分辨的笛坦。
通常，設計師會在圖片上疊加上一個半透明的有色圖層來降低繁復色彩的視覺信息量和干擾唯袄。
除此之外弯屈，你還可以使用Scrims 技術，這種網(wǎng)頁技術能夠識別文本恋拷，并且讓圖片和底層的圖片之間構成對比资厉，確保可讀性蔬顾。
小貼士：如果你打算使用使用圖文疊加的方式來設計首圖宴偿，還應當注意讓圖片的主體部分是清晰可見，且能夠被用戶輕松理解的诀豁。
7窄刘、兼顧不同的屏幕尺寸
如今的內(nèi)容都需要考慮跨平臺、跨設備舷胜、跨平臺的兼容和適配性娩践，當你的圖片出現(xiàn)在不同尺寸的屏幕上的時候，它是否能夠正常顯示烹骨，正確顯示翻伺，并且符合不同平臺、不同屏幕的顯示需求沮焕。
小貼士：結合響應式設計的需求吨岭，你可以使用Cloudinary 這樣的多尺寸圖片生成工具，幫你生成符合響應式圖片斷點的圖片峦树。
8辣辫、考慮使用插畫
在網(wǎng)頁首圖中使用插畫能夠賦予首圖以個性旦事。相比于圖片，插畫更加個性化急灭，插畫的內(nèi)容更加自由姐浮，也更容易控制，從內(nèi)容到技術均是如此化戳。
Dropbox 就使用插畫來呈現(xiàn)单料、表達復雜的內(nèi)容:
小貼士：當你打算在首圖當中使用插畫的時候，請盡量保持插畫和整體設計之間的一致性点楼，盡量讓它們看起來來源是相同的扫尖。
結語
網(wǎng)頁首圖絕對是真?zhèn)€設計中最關鍵的部分之一。選取素質(zhì)高掠廓，有趣的圖片换怖，同網(wǎng)站的內(nèi)容結合起來，參考上面的這些最佳實踐蟀瞧，你的網(wǎng)頁首圖應該能夠更上一層樓沉颂。
