輕松做出漂亮的網頁Banner設計

時間：2023-09-22 23:30:01 | 來源：網站運營

時間：2023-09-22 23:30:01 來源：網站運營

輕松做出漂亮的網頁Banner設計：網頁設計中，banner應該是最耗時間的模塊了，很多學員都比較頭疼這

一塊，其實沒有大家想象的那么難，看下面一幅圖，你看到了什么？




上圖就是典型的網頁banner，從圖中，我們看到了產品（鞋子）、文案（勇攀高峰等）、背景（山、天、樹、石等），其實百分之八九十的banner就包括這三個方面，我們簡單概括為三步驟：搭背景、輸文案、放產品。接下來，我們從這三個步驟分別分析其中的易錯點。

一、搭背景

1. 搭背景-合成細節(jié)

先來對比以下兩款banner（只看背景部分）。













問題1：圖一搜索的素材有平視有仰視比較錯亂，圖二透視關系是對的；

問題2：圖一明度從左到右一致，圖二明暗關系有層次；

問題3：圖一色系太多顯得有點花，圖二配色會比較舒服。

綜上，搭背景要注意合成細節(jié)，要看起來像是一整幅畫那么和諧，而不是硬生生的拼湊到一起，要二次處理，主要體現(xiàn)在視角、明暗和色調。

2.搭背景-是否搶鏡

先來對比以下兩款banner（只看背景部分）。













問題1：圖一素材占比重比較大，搶文案的鏡，圖二背景稍顯利索；

問題2：圖一金幣的種類比較雜亂，圖二相對單一；

問題3：圖一素材鋪的特別滿，圖二能夠給畫面留一些空隙，疏密合適。

綜上，搭背景要注意不要搶產品和文案的鏡，banner的主角是文案和產品，背景只是陪襯，所以不能搶鏡，主要體現(xiàn)在太花、太亂和太滿。

3.搭背景-有無層次

先來對比以下兩款banner（只看背景部分）。













問題1：圖一只有寬度高度而沒有厚度，圖二有遠近透視，讓畫面有了厚度；

問題2：圖一背景鋪的微微的漸變，圖二有虛實明暗大小遠近的層次關系。

綜上，搭背景要注意有層次，讓畫面不止有寬度和高度，還要有厚度，主要體現(xiàn)在三維概念和明暗虛實。

二、輸文案

1. 輸文案-整體整齊

先來對比以下兩款banner（只看文案部分）。













問題1：圖一有水平、有傾斜有些許亂，圖二整體左右對齊。

綜上，輸文案要注意整體整齊，注意不是每一句話都對齊，只要整體整齊就足矣，這樣才顯得利索。這個最簡單了，無非就是左對齊、右對齊、居中對齊、兩端對齊。

2.輸文案-緊湊清晰

先來對比以下兩款banner（只看文案部分）。0













問題1：圖一文案放的滿畫面都是，圖二文案放的比較緊湊集中；

問題2：圖一文字有部分看不清，圖二清晰明了。

綜上，輸文案要注意緊湊清晰，在這個快節(jié)奏的社會里，文案要遵循掃描式閱讀，讓用戶一眼就能抓取到信息，主要體現(xiàn)在不滿屏放、文字識別度要高。

3.輸文案-是否有主次

先來對比以下兩款banner（只看文案部分）。













問題1：圖一字號一致，沒有主次，圖二有明顯的主次關系；

問題2：圖一文案普通，沒有創(chuàng)意，圖二有文案創(chuàng)意，比較新穎。

綜上，輸文案要注意主次，只有體現(xiàn)出主次，才能有懶人閱讀法的作用，如果讓人印象深刻，主文案最好有文案創(chuàng)意，主要體現(xiàn)在字號、顏色、文案創(chuàng)意。

三、放產品

1. 放產品-是否精修

先來對比以下兩款banner（只看產品部分）。










問題1：圖一產品在畫面中比較飄，圖二產品在背景圖上比較穩(wěn)；

問題2：圖一產品色調有點暗淡不像新品，圖二比較清亮吸引人。

綜上，產品要注意精修，不能止于摳圖，要把拍出來的產品精修出高大上的感覺，讓產品在畫面中很協(xié)調，主要體現(xiàn)在立體性、光影的變化。

2.放產品-是否高清

先來對比以下兩款banner（只看產品部分）。













問題1：圖一模特圖比較模糊，圖二產品比較清晰。

綜上，產品一定要注意高清，想必不做設計的人員也不會喜歡模糊的圖，所以這是最基本最簡單的，主要體現(xiàn)在不模糊、不水印、不變形。

3.放產品-是否融入畫面

先來對比以下兩款banner（只看產品部分）。













問題1：圖一產品與模特跟背景不融合，圖二比較協(xié)調；

問題2：圖一產品識別度不高，圖二產品清晰可見；

問題3：圖一產品大小比重比較低，不能夠引起用戶的注意，圖二產品比例合理。

綜上，產品要注意與背景的融合度，不能各自為營，互不干涉，要融為一體，在一塊合情合理，主要體現(xiàn)在色調、大小、比例和前后層次。




通過以上的講解，相信大家也會覺得banner其實并不難，跟套公式一樣，每項注意就可以，我們來總結一下：

第一：搭背景，注意合成細節(jié)、是否搶鏡、層次感

第二：輸文案，注意整體整齊、緊湊清晰、有主次

第三：放產品，注意是否精修、是否高清、融合度

以上是杭州非凡進修學院Web網頁設計張老師的總結，希望能幫助大家設計出既有效率又有質量的網頁banner。