首圖（Banner）設(shè)計(jì)技巧

banner圖一般來說指的就是網(wǎng)站頁面的橫幅廣告圖、它處于網(wǎng)頁首要位置，故也有人習(xí)慣稱之為首圖。banner廣告圖的設(shè)計(jì)好壞，

在很大程度上能影響到用戶對(duì)網(wǎng)站的去留，所以，創(chuàng)新互聯(lián)認(rèn)為網(wǎng)站的Banner廣告設(shè)計(jì)是十分重要的，電商網(wǎng)站更是如此，

它甚至能影響到用戶的購買欲望！

國內(nèi)設(shè)計(jì)大概很多設(shè)計(jì)師其實(shí)已經(jīng)覺察到了，網(wǎng)頁設(shè)計(jì)做得好不好，除了網(wǎng)頁本身的布局、配色以外，很大程度上依賴的是配圖的運(yùn)用技巧。

但是就算將千辛萬苦淘來的好圖往網(wǎng)頁上一攤就完事，恐怕也難取得巧妙地效果。因此，如何設(shè)計(jì)首圖，又是網(wǎng)頁設(shè)計(jì)之中一個(gè)非常重要的問題。

為此，我們就此特獻(xiàn)出八條設(shè)計(jì)技巧，全是來自實(shí)際經(jīng)驗(yàn)，以期和大家共同探討之。

一、雙色冰淇淋漸變

首圖當(dāng)作全屏出血大圖處理時(shí)，你可以將圖片調(diào)色成為雙色漸變，有點(diǎn)像我們吃的雙色冰淇淋球，選一組你認(rèn)為能激發(fā)心理氛圍的配色，最好是

對(duì)比色，帶來強(qiáng)烈的視覺落差。由于要作為背景而存在，整體的色彩明度要區(qū)別于文字的顏色。這里推薦的這一方式只需要利用PS中的“漸變映射”

工具，就能輕松獲得。

上圖所示的設(shè)計(jì)中，創(chuàng)新互聯(lián)不僅采用了這種雙色映射，還利用線條創(chuàng)造了視覺焦點(diǎn)，引導(dǎo)了用戶的視線。

二、線條引流

沒錯(cuò)，延續(xù)上一個(gè)例子所用的方法，這也不失為一種首圖設(shè)計(jì)方式。在首圖中讓線條來引導(dǎo)實(shí)現(xiàn)去穿越你想要焦點(diǎn)停留的地方。

上圖所示的設(shè)計(jì)，重點(diǎn)是模特和文字，因此，我們采用了9這個(gè)數(shù)字的線條方向，利用這個(gè)線條的環(huán)繞運(yùn)動(dòng)，最后從上至下游走過文字。這里的心理

預(yù)期是要把9筆畫完成，因此你沒有可能跳過文字。

三、動(dòng)態(tài)情景

對(duì)于首圖的選擇，你可以焦距到動(dòng)態(tài)場景。這類動(dòng)態(tài)場景由于本身模特的動(dòng)態(tài)造型，會(huì)調(diào)動(dòng)觀眾的運(yùn)動(dòng)神經(jīng)，激發(fā)頁面的活力。

大家可以想象，如果將上圖的主角換成一個(gè)靜物，效果將是不同的。這里將模特的方向加以改變后重新降低透明度的做法，帶來一定的虛實(shí)結(jié)合的感受。

四、謹(jǐn)慎配色

創(chuàng)新互聯(lián)希望大家在運(yùn)用首圖時(shí)，盡量不要去觸屏普通的風(fēng)景圖。自然風(fēng)光雖然好，但大片風(fēng)景會(huì)表現(xiàn)出一團(tuán)飽和的顏色堆疊，其實(shí)運(yùn)用在網(wǎng)頁中略顯得

沒有重點(diǎn)。因?yàn)槟阋獮樽罱K配圖運(yùn)用以后所出現(xiàn)的顏色負(fù)責(zé)，色彩盡量控制在三種顏色之內(nèi)，這條道理相信設(shè)計(jì)師們都會(huì)贊同，因此，這里的配圖的色彩

最好也能有所節(jié)制。

如這個(gè)設(shè)計(jì)中，整個(gè)圖片都呈現(xiàn)大片灰白，其實(shí)正是對(duì)顏色進(jìn)行管控的技巧。當(dāng)然你也要來個(gè)大花襖也無傷大雅，關(guān)鍵是運(yùn)用時(shí)除了要注意元素的

色彩，還要對(duì)首圖的色彩本身也足夠警惕。

五、虛擬現(xiàn)實(shí)

當(dāng)然，我們這里談的不是虛擬現(xiàn)實(shí)（VR），而是在首圖設(shè)計(jì)時(shí)，試著將靜物表現(xiàn)得更為“現(xiàn)實(shí)”，好像它們就在你的屏幕上，隨手可以取到。但這個(gè)

表達(dá)法，最緊要的是要為虛擬尋找出口，也就是說，不能完全寫實(shí)，要讓用戶看出虛擬的破綻，從而讓形象更為立體。這類表達(dá)技巧在首圖中有手機(jī)，

利用APP產(chǎn)品展示等最為常見。

這是我們今年出的一款開源的輕移動(dòng)口袋雜志，展示這個(gè)設(shè)計(jì)的時(shí)候，我們就運(yùn)用了虛擬現(xiàn)實(shí)的設(shè)計(jì)方式，增加背景圖案，并讓咖啡和太陽鏡作為一種

“休閑”的視覺提示物件，讓用戶能感受到它們的現(xiàn)實(shí)的同時(shí)又能從背景中看出“破綻”。

六、文字本身的美

每張首圖也許我們都希望能配上文字，其實(shí)文字本身也能成為一種風(fēng)景，有時(shí)候適當(dāng)運(yùn)用一些具有圖像風(fēng)格的文字，更能傳遞文字本身的能量。

如果能將文字看作圖像，書法文字是最合適不過了。書法本身的隨意瀟灑，和普通的印刷字體相比有著不可比擬的個(gè)性感。這里，運(yùn)用了書法作為主角，

本身書法作為傳統(tǒng)國粹，在東方傳統(tǒng)的行業(yè)里運(yùn)用非常應(yīng)景。當(dāng)然，這里的書法本身還可以寫得更好。

七、靜止的力量

對(duì)稱能帶來一種莊重靜止的力量，因此，在首圖設(shè)計(jì)中，你不妨采用對(duì)稱的布局方式來設(shè)計(jì)首圖。但由于對(duì)稱本身略顯得靜止呆板，因此在設(shè)計(jì)上更需要

多一些匠心，增加一些比較能突破規(guī)則小細(xì)節(jié)。

對(duì)稱的布局最好采用倒三角的構(gòu)圖，這樣視線會(huì)更靈活，從上往下會(huì)顯得更流暢，否則就會(huì)有一種滯澀不前的感受。

八、左圖右文

首圖的設(shè)計(jì)除了全屏展示，還有一種方式是可以放左邊圖片右邊文字的方式，這樣的設(shè)計(jì)技巧帶來的好處就是可以分割圖文，特別在圖片信息也同樣重要

的時(shí)候，如果把圖文混合，雙方都不夠凸顯，不如左右各凸出主角，跟隨先左后右的視線也能傳遞本身的視覺效果。

如上圖所示，左右結(jié)構(gòu)的傳達(dá)效果更為清晰明確。你不會(huì)錯(cuò)過圖片中美食的細(xì)節(jié)，也不會(huì)忽略文字的描述。色彩是鮮艷欲滴的橙色，食物和文字背景渾然一體。

首圖的設(shè)計(jì)技巧千變?nèi)f化，這里只分享一小段，你的下一個(gè)設(shè)計(jì)如果苦于沒有靈感，不妨看看本文。下一次我們將繼續(xù)分享。

我們一直在思考，如何在這個(gè)浮躁的年代，用色彩、線條、結(jié)構(gòu)、文字、靈感和創(chuàng)造力，為客戶提供一個(gè)有價(jià)值，有靈魂的網(wǎng)站，而不僅僅只是一個(gè)花瓶擺設(shè)！
創(chuàng)新互聯(lián)致力于深圳網(wǎng)站建設(shè)，網(wǎng)站設(shè)計(jì)，外貿(mào)網(wǎng)頁設(shè)計(jì)等專業(yè)建站服務(wù)，期待與你合作！

如未特殊注明，轉(zhuǎn)載請注明來自 www.muchs.cn/

網(wǎng)頁名稱：首圖（Banner）設(shè)計(jì)技巧
標(biāo)題網(wǎng)址：http://www.muchs.cn/news39/165039.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、手機(jī)網(wǎng)站建設(shè)、用戶體驗(yàn)、外貿(mào)網(wǎng)站建設(shè)、外貿(mào)建站、網(wǎng)站維護(hù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)