任務(wù)二繪制網(wǎng)頁(yè)首頁(yè)授課教師：王萍項(xiàng)目八網(wǎng)店設(shè)計(jì)與裝修目錄CONTENTS網(wǎng)店首頁(yè)的視覺(jué)營(yíng)銷應(yīng)用01網(wǎng)店首頁(yè)布局的作用02網(wǎng)店首頁(yè)布局形式03全屏海報(bào)的信息傳達(dá)04全屏海報(bào)的視覺(jué)構(gòu)圖05網(wǎng)店首頁(yè)的視覺(jué)營(yíng)銷應(yīng)用01一、網(wǎng)店首頁(yè)的視覺(jué)營(yíng)銷應(yīng)用網(wǎng)店首頁(yè)的視覺(jué)營(yíng)銷信息是消費(fèi)者了解店店鋪首頁(yè)是店鋪非常重要的流量頁(yè)面，是消費(fèi)者查找商品分類、瀏覽全店商品時(shí)會(huì)經(jīng)常跳轉(zhuǎn)到的頁(yè)面。店鋪首頁(yè)的視覺(jué)效果直接代表著店鋪的風(fēng)格和調(diào)性，鋪活動(dòng)的重要途徑，如右圖所示。網(wǎng)店首頁(yè)布局的內(nèi)容主要有：等內(nèi)容。每一個(gè)部分都有自己的功能和作用。店招通欄導(dǎo)航分類海報(bào)產(chǎn)品展示服務(wù)推薦活動(dòng)展示旺旺在線收藏品牌展示京東商城網(wǎng)站首頁(yè)我們?cè)谠O(shè)計(jì)店鋪店招時(shí)，遵循的基本原則是需要與首頁(yè)的設(shè)計(jì)風(fēng)格保持統(tǒng)一，這樣在店鋪的整體風(fēng)格上會(huì)有一個(gè)延續(xù)，以及視覺(jué)效果比較好。如果店招與店鋪的裝修風(fēng)格相差較大，會(huì)讓客戶的視覺(jué)體驗(yàn)變差?；驹瓌t店招需要向消費(fèi)者傳遞明確的信息。店招01店鋪商品、店鋪品牌、店鋪價(jià)位等重要信息，對(duì)顧客是否選擇進(jìn)入店鋪首頁(yè)瀏覽其他商品起到了一定的作用。如因此，通欄的作用就是將這些自定義頁(yè)面以清晰明確的方式進(jìn)行展示，并讓顧客馬上可以進(jìn)入。通欄的作用因?yàn)槭醉?yè)不能囊括所有的內(nèi)容和功能，比如品牌故事、信用評(píng)價(jià)、會(huì)員制度等，無(wú)法直接展示在首頁(yè)上，而是在其他自定義頁(yè)面進(jìn)行展示。店鋪通欄02店鋪導(dǎo)航一般為方便顧客搜索商品而設(shè)置，作用就如同商場(chǎng)的樓層指引牌。導(dǎo)航03海報(bào)輪播圖一般放置3至5張，放太多圖片會(huì)影響網(wǎng)店頁(yè)面的打開(kāi)速度，降低客戶體驗(yàn)度。海報(bào)數(shù)量海報(bào)輪播圖也就是我們常說(shuō)的banner，指的網(wǎng)店首頁(yè)的大圖，一般用于向消費(fèi)者展示店內(nèi)活動(dòng)、店鋪新品，或做品牌展示。將海報(bào)與活動(dòng)文案相結(jié)合，可以很好的激發(fā)消費(fèi)者的購(gòu)買欲望。海報(bào)輪播圖04為了方便客戶查找自己想要的產(chǎn)品：可能有一部分客人還有沒(méi)有看到頁(yè)面左側(cè)的分類就離開(kāi)店鋪了，這里的分類是起到分流的作用，讓客戶一目了然的指導(dǎo)店鋪經(jīng)營(yíng)的產(chǎn)品，并且目標(biāo)明確的查找，從而提高客戶尋找產(chǎn)品的速度。商品分類導(dǎo)航05這里的大圖一般是單個(gè)產(chǎn)品的主打，可以讓客服知道本店熱銷產(chǎn)品是什么。主推產(chǎn)品大圖06促銷的產(chǎn)品最容易吸引客戶的眼球。也容易刺激客人購(gòu)買，特別是限時(shí)購(gòu)買，無(wú)時(shí)無(wú)刻都必須要做，制造一種機(jī)會(huì)難得的緊張感。打折促銷海報(bào)07在客人瀏覽完頁(yè)面后，要給客人提供方便，隨時(shí)能聯(lián)系上客服，收藏店鋪返回首頁(yè)等，都特別方便，而不是到處尋找鏈接，給客服方便也就是給自己方便。頁(yè)面懸浮快捷菜單08產(chǎn)品展示是店鋪首頁(yè)布局不可缺少的部分，用于將店鋪的部分商品按照一定的維度要求展示給消費(fèi)者，功能與線下實(shí)體商店的展示陳列架一樣。產(chǎn)品展示09網(wǎng)店首頁(yè)布局的作用02展示形象商品搜索推薦和活動(dòng)網(wǎng)店首頁(yè)布局的作用我們?cè)谧龅赇仌r(shí)總是想讓顧客感受到我們的與眾不同。顧客如何感受到我們的與眾不同呢？首頁(yè)布局就是最好的方式。當(dāng)顧客無(wú)明確購(gòu)買需求時(shí)，需要一些推薦和活動(dòng)來(lái)激發(fā)顧客的潛在購(gòu)買需求。顧客從某一款商品進(jìn)入網(wǎng)店首頁(yè)時(shí)，首頁(yè)需要有搜索導(dǎo)購(gòu)功能，幫助顧客快速方便地找到所需要的商品，順利下單。展示形象商品搜索推薦和活動(dòng)網(wǎng)店首頁(yè)布局的作用網(wǎng)店首頁(yè)布局形式03這是自建電商網(wǎng)站或網(wǎng)店首頁(yè)最常見(jiàn)的布局。（1）網(wǎng)店導(dǎo)航在banner上方三、網(wǎng)店首頁(yè)布局形式這種雖然不多，但也時(shí)不時(shí)能看到，導(dǎo)航放在banner下面的好處是可以彌補(bǔ)banner中設(shè)計(jì)素材截?cái)嗟娜秉c(diǎn)，讓設(shè)計(jì)看上去完整、自然。所以說(shuō)電商企業(yè)獨(dú)立系統(tǒng)平臺(tái)布局的方式受到多方面因素的影響，不僅考慮到信息內(nèi)容所占據(jù)的空間，還包括你手頭現(xiàn)有的素材。（2）導(dǎo)航在主banner下方的布局也稱為“廠”字型布局，因?yàn)槠洳季值臉幼雍芟裰形闹械摹皬S字”。這種布局方式在國(guó)內(nèi)電商網(wǎng)店頁(yè)面經(jīng)常見(jiàn)到。（3）左拐角式布局Logo商品頻道導(dǎo)航商品導(dǎo)航Banner熱賣商品1熱賣商品2店鋪上新1店鋪上新2寶貝展示1熱賣商品3熱賣商品3網(wǎng)站公告這種布局在企業(yè)站中較難看到，用的不多，banner區(qū)域相對(duì)較大，可以作為企業(yè)獨(dú)立網(wǎng)店系統(tǒng)平臺(tái)開(kāi)發(fā)布局的一種選擇。（4）穿插式布局這種布局方式看上去更加靈活，banner區(qū)域相對(duì)較小，就可以在頁(yè)面放置更多的信息內(nèi)容。（5）轉(zhuǎn)角型布局全屏海報(bào)的信息傳達(dá)04四、全屏海報(bào)的信息傳達(dá)3種主題商品宣傳主題活動(dòng)品牌塑造全屏海報(bào)的設(shè)計(jì)內(nèi)容一般依據(jù)店鋪近期的運(yùn)營(yíng)要求而定，如店鋪近期需要推廣店內(nèi)人氣商品或新品，或者推廣店內(nèi)優(yōu)惠活動(dòng)等，就要根據(jù)不同的運(yùn)營(yíng)目標(biāo)來(lái)設(shè)計(jì)不同的海報(bào)視覺(jué)效果。一般來(lái)說(shuō)，全屏海報(bào)主要包括以下3種主題。banner作為網(wǎng)店首頁(yè)的視覺(jué)焦點(diǎn)，在信息傳達(dá)上發(fā)揮著重要作用。為了對(duì)店鋪首頁(yè)流量進(jìn)行有效的引導(dǎo)，商家需要對(duì)全屏海報(bào)的信息進(jìn)行合理傳達(dá)，從而快速吸引消費(fèi)者的注意力。在進(jìn)行全屏海報(bào)的視覺(jué)傳達(dá)時(shí)，一般需要注意以下幾個(gè)基本的要素。尺寸正確視覺(jué)效果創(chuàng)意新穎輪播圖片四要素全屏海報(bào)的視覺(jué)構(gòu)圖05五、全屏海報(bào)的視覺(jué)構(gòu)圖三角形式構(gòu)圖九宮格式構(gòu)圖對(duì)角線式構(gòu)圖中心構(gòu)圖緊湊式構(gòu)圖對(duì)稱式構(gòu)圖垂直構(gòu)圖X形構(gòu)圖放射式構(gòu)圖散點(diǎn)式構(gòu)圖全屏海報(bào)是店鋪首頁(yè)中向消費(fèi)者傳遞信息的重要模塊，其視覺(jué)表現(xiàn)的好壞直接影響著營(yíng)銷效果，好的構(gòu)圖能夠讓全屏海報(bào)的視覺(jué)效果更加出彩，下面介紹一些常用的構(gòu)圖技巧，以幫助設(shè)計(jì)人員提高圖片的視覺(jué)表現(xiàn)力。三角形式構(gòu)圖三角形構(gòu)圖可以讓畫面十分穩(wěn)定，視覺(jué)中心突出，便于消費(fèi)者快速獲取圖片信息。九宮格式構(gòu)圖九宮格式構(gòu)圖也稱為“井”字構(gòu)圖，是將整體畫面分成9格，并產(chǎn)生4個(gè)交叉點(diǎn)，交叉點(diǎn)位置即主體商品或主要信息的位置。對(duì)角線式構(gòu)圖對(duì)角線式構(gòu)圖呈現(xiàn)傾斜模式，可以使畫面更有立體感、延伸感和運(yùn)動(dòng)感，更有視覺(jué)張力。中心構(gòu)圖中心構(gòu)圖指將商品主體放在畫面中間，可以突出主體、平衡畫面，且能快速吸引消費(fèi)者的注意力。緊湊式構(gòu)圖緊湊式構(gòu)圖指將商品主體以特寫的形式放大以布滿畫面，使畫面飽滿緊湊，便于表現(xiàn)局部細(xì)節(jié)。對(duì)稱式構(gòu)圖對(duì)稱式構(gòu)圖并非追求絕對(duì)對(duì)稱，只要能體現(xiàn)視覺(jué)上的安定、均衡、協(xié)調(diào)、整齊感即可。垂直構(gòu)圖垂直構(gòu)圖通常用于直立物體的構(gòu)圖