《網(wǎng)店美工》課件-第6章 網(wǎng)店首頁(yè)視覺(jué)營(yíng)銷(xiāo)設(shè)計(jì)

《網(wǎng)店視覺(jué)營(yíng)銷(xiāo)

與美工設(shè)計(jì)》[第2版]主講人：

第6章

網(wǎng)店首頁(yè)視覺(jué)營(yíng)銷(xiāo)設(shè)計(jì)ContentsPage目錄頁(yè)—2

—

配套資源請(qǐng)關(guān)注[童話電商]公眾號(hào)6.1店標(biāo)視覺(jué)營(yíng)銷(xiāo)設(shè)計(jì)6.2首頁(yè)視覺(jué)營(yíng)銷(xiāo)設(shè)計(jì)6.3店招視覺(jué)營(yíng)銷(xiāo)設(shè)計(jì)6.4首焦輪播海報(bào)視覺(jué)營(yíng)銷(xiāo)設(shè)計(jì)6.5首頁(yè)其他模塊視覺(jué)營(yíng)銷(xiāo)設(shè)計(jì)6.6店鋪首頁(yè)視覺(jué)營(yíng)銷(xiāo)設(shè)計(jì)案例第6章

網(wǎng)店首頁(yè)視覺(jué)營(yíng)銷(xiāo)設(shè)計(jì)【學(xué)習(xí)導(dǎo)圖】【學(xué)習(xí)目標(biāo)】掌握網(wǎng)店店標(biāo)的設(shè)計(jì)方法。熟悉網(wǎng)店首頁(yè)框架布局。掌握店招和首頁(yè)輪播圖的設(shè)計(jì)方法。掌握優(yōu)惠券、活動(dòng)專(zhuān)區(qū)的布局和設(shè)計(jì)方法。掌握分類(lèi)導(dǎo)航區(qū)、商品陳列區(qū)、頁(yè)尾的布局和設(shè)計(jì)方法。能設(shè)計(jì)店標(biāo)、首頁(yè)、店招、輪播海報(bào)圖。高級(jí)上檔次的首頁(yè)視覺(jué)營(yíng)銷(xiāo)設(shè)計(jì)不管是從視覺(jué)上，還是從感官上都能給消費(fèi)者帶好良好的感受和體驗(yàn)。網(wǎng)店首頁(yè)視覺(jué)營(yíng)銷(xiāo)設(shè)計(jì)的美觀性，不但可以起到品牌識(shí)別的作用，讓買(mǎi)家容易認(rèn)知該品牌，從而產(chǎn)生心理認(rèn)同感，還可以讓買(mǎi)家在瀏覽網(wǎng)店的過(guò)程中，感受到賣(mài)家的品味、店鋪的藝術(shù)氛圍。網(wǎng)店首頁(yè)視覺(jué)營(yíng)銷(xiāo)設(shè)計(jì)上有哪些要點(diǎn)呢?店鋪首頁(yè)視覺(jué)營(yíng)銷(xiāo)設(shè)計(jì)首先要在色彩方面科學(xué)搭配，不同的色點(diǎn)會(huì)讓瀏覽者產(chǎn)生不同的聯(lián)想，因此在色系選擇上要結(jié)合不同產(chǎn)品進(jìn)行選擇。其次，在布局的設(shè)計(jì)上，要結(jié)合人眼觀看和瀏覽信息的習(xí)慣，按照一定的規(guī)律來(lái)進(jìn)行布局設(shè)計(jì)和調(diào)整。最后，在店鋪首頁(yè)設(shè)計(jì)過(guò)程中，要對(duì)店鋪的“焦點(diǎn)”進(jìn)行凸顯，要讓消費(fèi)者第一次進(jìn)入店鋪后就抓住這個(gè)“焦點(diǎn)”內(nèi)容，引導(dǎo)消費(fèi)者的消費(fèi)行為，同時(shí)也更好地襯托出品牌形象。章節(jié)導(dǎo)讀ContentsPage目錄頁(yè)—5

—

配套資源請(qǐng)關(guān)注[童話電商]公眾號(hào)6.1店標(biāo)視覺(jué)營(yíng)銷(xiāo)設(shè)計(jì)6.2首頁(yè)視覺(jué)營(yíng)銷(xiāo)設(shè)計(jì)6.3店招視覺(jué)營(yíng)銷(xiāo)設(shè)計(jì)6.4首焦輪播海報(bào)視覺(jué)營(yíng)銷(xiāo)設(shè)計(jì)6.5首頁(yè)其他模塊視覺(jué)營(yíng)銷(xiāo)設(shè)計(jì)6.6店鋪首頁(yè)視覺(jué)營(yíng)銷(xiāo)設(shè)計(jì)案例6.1.1店標(biāo)的展現(xiàn)位置6.1.2店標(biāo)的設(shè)計(jì)形態(tài)6.1.3店標(biāo)的設(shè)計(jì)技巧6.1.4不同風(fēng)格的店標(biāo)設(shè)計(jì)6.1.5店標(biāo)的設(shè)計(jì)案例6.1店標(biāo)視覺(jué)營(yíng)銷(xiāo)設(shè)計(jì)店標(biāo)在網(wǎng)店中許多位置都有展現(xiàn)，對(duì)提高店鋪經(jīng)營(yíng)項(xiàng)目的辨識(shí)率與店鋪品牌宣傳起著重要作用。6.1.1店標(biāo)的展現(xiàn)位置圖1-店招中的店標(biāo)展現(xiàn)圖2-天貓商城首頁(yè)中的店標(biāo)展現(xiàn)圖3-淘寶店鋪搜索結(jié)果頁(yè)中的店標(biāo)展現(xiàn)版權(quán)侵權(quán)是指未經(jīng)版權(quán)所有者許可而發(fā)布、復(fù)制或展示受版權(quán)保護(hù)的作品。最常見(jiàn)的侵權(quán)形式之一是當(dāng)一家公司試圖使用一個(gè)看起來(lái)相似的logo或使用類(lèi)似語(yǔ)言作為另一個(gè)受版權(quán)保護(hù)的logo。如果使競(jìng)爭(zhēng)的logo標(biāo)志造成混亂，那么它的所有者將面臨侵權(quán)的法律訴訟。但是，如果相似的logo標(biāo)志代表明顯不同的產(chǎn)品或者該logo標(biāo)志屬于不同地理區(qū)域的公司，則侵權(quán)行為可能不會(huì)發(fā)生。用別人的logo會(huì)涉及侵權(quán)嗎？從設(shè)計(jì)的表達(dá)形態(tài)來(lái)看，店標(biāo)可以分為以下幾種：6.1.2店標(biāo)的設(shè)計(jì)形態(tài)

中文型店標(biāo)1中文和非中文組合型店標(biāo)3圖形型店標(biāo)

4圖文結(jié)合型店標(biāo)5英文型店標(biāo)21.中文型店標(biāo)

中文文字型店標(biāo)主要以文字單獨(dú)構(gòu)成。漢字店標(biāo)設(shè)計(jì)具有表達(dá)意思明確、視覺(jué)效果良好、易認(rèn)易記等優(yōu)點(diǎn)。

如果要選擇中文文字型店標(biāo)作為制作的目標(biāo)，特別要注意文字的精簡(jiǎn)和信息的傳達(dá)。因?yàn)榈陿?biāo)的尺寸大小有限，能夠把字看清楚并且醒目是最好的，想給予太多的信息反而會(huì)讓傳達(dá)效果大打折扣。“鮮玉奇緣”是浙江省玉環(huán)市的農(nóng)產(chǎn)品區(qū)域公共品牌。110頁(yè)的品牌視覺(jué)識(shí)別手冊(cè)詳情可掃二維碼學(xué)習(xí)?！拘袠I(yè)視野】“鮮玉奇緣”【行業(yè)視野】“鮮玉奇緣”品牌視覺(jué)識(shí)別手冊(cè)【行業(yè)視野】“鮮玉奇緣”品牌視覺(jué)識(shí)別手冊(cè)【行業(yè)視野】“鮮玉奇緣”品牌視覺(jué)識(shí)別手冊(cè)【行業(yè)視野】“鮮玉奇緣”品牌視覺(jué)識(shí)別手冊(cè)【行業(yè)視野】“鮮玉奇緣”品牌視覺(jué)識(shí)別手冊(cè)【行業(yè)視野】“鮮玉奇緣”童話電商學(xué)生助農(nóng)團(tuán)隊(duì)：視覺(jué)營(yíng)銷(xiāo)及公益首播點(diǎn)滴助力農(nóng)產(chǎn)品區(qū)域品牌的傳播之路……全國(guó)院校師生我們可一起可以探討的話題？如何用我們所學(xué)專(zhuān)業(yè)能力點(diǎn)滴去賦能縣市企業(yè)、品牌、地理標(biāo)志農(nóng)特？漢字是世界上最古老的文字之一，已有六千多年的歷史。漢字是漢民族幾千年文化的瑰寶，是中華民族智慧的結(jié)晶。漢字具有集形象、聲音和辭義三者于一體的特性，這一特性在世界文字中是獨(dú)一無(wú)二的，因此它具有獨(dú)特的魅力。在為國(guó)內(nèi)企業(yè)和品牌做標(biāo)志設(shè)計(jì)時(shí),我們應(yīng)充分發(fā)揮漢字的獨(dú)特優(yōu)勢(shì),重視漢字特點(diǎn)的挖掘,這樣有助于漢字標(biāo)志民族特性的發(fā)揚(yáng),有助于在世界藝術(shù)舞臺(tái)上創(chuàng)造出具有鮮明中國(guó)特點(diǎn)的品牌logo!讓漢字發(fā)揚(yáng)光大2.英文型店標(biāo)

英文型店標(biāo)是以英文字母為主要設(shè)計(jì)方向的logo設(shè)計(jì)。文字字體logo設(shè)計(jì)具有幾何化的造型特征，它的優(yōu)點(diǎn)是言簡(jiǎn)意賅，形態(tài)變化多樣，易懂易識(shí)別。

如果選擇英文型店標(biāo)，特別要注意店鋪出售商品的范圍和商品的風(fēng)格是否和店標(biāo)的感覺(jué)貼近。同樣，因?yàn)橛⑽臉?biāo)識(shí)不好理解，所以應(yīng)該以簡(jiǎn)單和強(qiáng)烈的視覺(jué)沖擊力為主。至于顏色搭配，也多以沖擊力強(qiáng)的對(duì)比色搭配為主。3.中文和非中文組合型店標(biāo)

圖形型店標(biāo)就是直接用圖形來(lái)作為店標(biāo)，主要特點(diǎn)就是生動(dòng)形象、便于識(shí)別與記憶。不僅如此，好的店標(biāo)甚至能傳遞企業(yè)文化，贏得客戶(hù)認(rèn)可。但其缺點(diǎn)也顯而易見(jiàn)，就是不便稱(chēng)呼和描述。3.中文和非中文組合型店標(biāo)

中文和非中文組合型店標(biāo)讓顧客有一種中西結(jié)合、和國(guó)際接軌的大牌感覺(jué)。在表達(dá)形式上，因?yàn)橛⑽牟糠衷O(shè)計(jì)感比較強(qiáng)，視覺(jué)沖擊力比較大，形式也多種多樣，所以給人的視覺(jué)感受都不錯(cuò)。

在設(shè)計(jì)組合型店標(biāo)時(shí)，如果英文的部分比較簡(jiǎn)單，那么它本身就很有視覺(jué)沖擊力，可以模仿前兩種店標(biāo)的形式將其充分表現(xiàn)；如果英文部分比較長(zhǎng)，比較復(fù)雜，那么可以把中文部分做得比較有視覺(jué)沖擊力。4.圖形型店標(biāo)5.圖文結(jié)合型店標(biāo)

圖文結(jié)合型店標(biāo)就是圖形與文字相結(jié)合的店標(biāo)形式，這種店標(biāo)既具有圖形化的視覺(jué)沖擊力，又能清楚的表述店鋪品牌信息，所以應(yīng)用得非常廣泛。

因?yàn)橛脠D形作為店標(biāo)的話，如果不帶入店名或者品牌名，記憶力是比較有限的，因此帶上文字信息后會(huì)讓人一目了然。6.1.3店標(biāo)的設(shè)計(jì)技巧2.設(shè)計(jì)要有主導(dǎo)性3.設(shè)計(jì)要有統(tǒng)一性4.設(shè)計(jì)要有識(shí)別性5.設(shè)計(jì)要有時(shí)代性6.設(shè)計(jì)要有系統(tǒng)性7.設(shè)計(jì)要有延伸性1.設(shè)計(jì)要有造型6.1.3店標(biāo)的設(shè)計(jì)技巧2.設(shè)計(jì)要有主導(dǎo)性1.設(shè)計(jì)要有造型6.1.3店標(biāo)的設(shè)計(jì)技巧3.設(shè)計(jì)要有統(tǒng)一性4.設(shè)計(jì)要有識(shí)別性

標(biāo)志的形象設(shè)計(jì)需要與該店鋪的經(jīng)營(yíng)理念、文化特色，以及經(jīng)營(yíng)的內(nèi)容和特點(diǎn)相統(tǒng)一，只有這樣才能獲得消費(fèi)者的一致認(rèn)同。

識(shí)別性是店標(biāo)設(shè)計(jì)的基本要求。通過(guò)獨(dú)具個(gè)性的標(biāo)志與其他店鋪及商品進(jìn)行區(qū)別是現(xiàn)代電子商務(wù)市場(chǎng)競(jìng)爭(zhēng)的利器，因此通過(guò)整體規(guī)劃和設(shè)計(jì)的視覺(jué)符號(hào)必須具有獨(dú)特的個(gè)性和強(qiáng)烈的沖擊力，才能具有較強(qiáng)的競(jìng)爭(zhēng)力。6.1.3店標(biāo)的設(shè)計(jì)技巧5.設(shè)計(jì)要有時(shí)代性

面對(duì)發(fā)展迅速的電商市場(chǎng)以及不斷變化的市場(chǎng)競(jìng)爭(zhēng)形式，有必要對(duì)現(xiàn)有的標(biāo)志形象進(jìn)行改進(jìn)，才能使網(wǎng)店標(biāo)志更加與時(shí)俱進(jìn)，具有鮮明的時(shí)代特征。6.設(shè)計(jì)要有系統(tǒng)性

標(biāo)志的識(shí)別設(shè)計(jì)一旦確定，隨之展開(kāi)的就是標(biāo)志的精致化。這其中包括標(biāo)志與其他基本設(shè)計(jì)要素的組合規(guī)定，目的就是要對(duì)未來(lái)標(biāo)志的應(yīng)用進(jìn)行規(guī)劃，以達(dá)到系統(tǒng)化、規(guī)范化、標(biāo)準(zhǔn)化的科學(xué)管理。6.1.3店標(biāo)的設(shè)計(jì)技巧7.設(shè)計(jì)要有延伸性

標(biāo)志的識(shí)別設(shè)計(jì)是應(yīng)用最為廣泛、出現(xiàn)頻率最高的視覺(jué)傳達(dá)要素，有時(shí)需要在各種傳播媒體上廣泛應(yīng)用。標(biāo)志圖形要根據(jù)印刷方式、制作工藝技術(shù)、材料質(zhì)地和應(yīng)用項(xiàng)目采用多種對(duì)應(yīng)性和延展性的變體設(shè)計(jì)，以產(chǎn)生切合、適宜的效果與表現(xiàn)。6.1.4不同風(fēng)格的店標(biāo)設(shè)計(jì)1.表現(xiàn)柔美型店標(biāo)2.表現(xiàn)陽(yáng)剛型店標(biāo)3.表現(xiàn)可愛(ài)型店標(biāo)6.1.4不同風(fēng)格的店標(biāo)設(shè)計(jì)1.表現(xiàn)柔美型店標(biāo)

女性相關(guān)的行業(yè)和類(lèi)目，在字體的選擇上可以選擇能體現(xiàn)圓潤(rùn)感覺(jué)的圓角，能體現(xiàn)女性身段的纖細(xì)、高挑感的瘦型；把字體做一些變形處理，或者給字體做了一些修飾，使線條的弧度感覺(jué)比較女性化。這樣才能表現(xiàn)出女性的柔美與嬌媚，體現(xiàn)出女人千嬌百媚的味道，

6.1.4不同風(fēng)格的店標(biāo)設(shè)計(jì)2.表現(xiàn)陽(yáng)剛型店標(biāo)

針對(duì)男性的行業(yè)和類(lèi)目，要重點(diǎn)表現(xiàn)男性的陽(yáng)剛之美。和柔美型店標(biāo)相比，明顯可以看出陽(yáng)剛型店標(biāo)的字體要更加剛硬一些，字的棱角也要硬一些，體現(xiàn)出力量感。

陽(yáng)剛型店標(biāo)在顏色上多以黑白灰為主，也有用到深藍(lán)色的，如“海瀾之家”，這些都是男性化的顏色。6.1.4不同風(fēng)格的店標(biāo)設(shè)計(jì)表現(xiàn)可愛(ài)型店標(biāo)

針對(duì)嬰幼兒的行業(yè)和類(lèi)目，要突出可愛(ài)、賣(mài)萌的感覺(jué)。在圖形的設(shè)計(jì)上會(huì)偏向于簡(jiǎn)單的線條、明快的顏色、鮮明的對(duì)比，線條和小動(dòng)物用的比較多。

網(wǎng)店名為“鮮果”的店標(biāo)設(shè)計(jì)案例：

主營(yíng)項(xiàng)目為水果，希望從店標(biāo)上體現(xiàn)出水果網(wǎng)店的風(fēng)格。6.1.5店標(biāo)的設(shè)計(jì)案例圖-“鮮果”店標(biāo)設(shè)計(jì)效果圖ContentsPage目錄頁(yè)—35

—

配套資源請(qǐng)關(guān)注[童話電商]公眾號(hào)6.1店標(biāo)視覺(jué)營(yíng)銷(xiāo)設(shè)計(jì)6.2首頁(yè)視覺(jué)營(yíng)銷(xiāo)設(shè)計(jì)6.3店招視覺(jué)營(yíng)銷(xiāo)設(shè)計(jì)6.4首焦輪播海報(bào)視覺(jué)營(yíng)銷(xiāo)設(shè)計(jì)6.5首頁(yè)其他模塊視覺(jué)營(yíng)銷(xiāo)設(shè)計(jì)6.6店鋪首頁(yè)視覺(jué)營(yíng)銷(xiāo)設(shè)計(jì)案例6.2.1首頁(yè)視覺(jué)水平的四大數(shù)據(jù)指標(biāo)6.2.2網(wǎng)店首頁(yè)布局6.2.3網(wǎng)店首頁(yè)設(shè)計(jì)原則6.2首頁(yè)視覺(jué)營(yíng)銷(xiāo)設(shè)計(jì)6.2.1首頁(yè)視覺(jué)水平的四大數(shù)據(jù)指標(biāo)首頁(yè)跳失率1首頁(yè)點(diǎn)擊率2首頁(yè)人均點(diǎn)擊次數(shù)3首頁(yè)平均停留時(shí)間41.首頁(yè)跳失率

圖-進(jìn)入店鋪首頁(yè)的渠道

首頁(yè)跳失率，指買(mǎi)家通過(guò)某種渠道進(jìn)入店鋪，只訪問(wèn)了一個(gè)首頁(yè)就離開(kāi)的訪問(wèn)次數(shù)占該入口總訪問(wèn)次數(shù)的比例。2.首頁(yè)點(diǎn)擊率

首頁(yè)點(diǎn)擊率是指首頁(yè)頁(yè)面上某一內(nèi)容被點(diǎn)擊的次數(shù)與被顯示次數(shù)之比，即：首頁(yè)點(diǎn)擊率=首頁(yè)點(diǎn)擊量÷首頁(yè)展現(xiàn)量。

圖-

兩類(lèi)店鋪首頁(yè)排版3.首頁(yè)人均點(diǎn)擊次數(shù)

首頁(yè)人均點(diǎn)擊次數(shù)，指在一段時(shí)間內(nèi)人均點(diǎn)擊了多少次。如圖6-25所示，假設(shè)某日點(diǎn)擊該網(wǎng)店的唯一訪問(wèn)者數(shù)為150人，在此期間內(nèi)點(diǎn)擊本店鋪首頁(yè)的總訪問(wèn)數(shù)為600次，那么首頁(yè)人均點(diǎn)擊次數(shù)為：600次÷150人=4次/人。

圖-人均點(diǎn)擊次數(shù)變化趨勢(shì)4.平均停留時(shí)長(zhǎng)

首頁(yè)平均停留時(shí)間=訪店鋪首頁(yè)的所有訪客總的停留時(shí)長(zhǎng)÷訪客數(shù)（單位：秒），多天的平均停留時(shí)間為各天人均停留時(shí)長(zhǎng)的日均值。

和首頁(yè)人均點(diǎn)擊次數(shù)一樣，首頁(yè)平均停留時(shí)間也可以用來(lái)判斷一個(gè)店鋪首頁(yè)是否能留住訪客。行業(yè)性質(zhì)不同，每個(gè)訪客在不同行業(yè)店鋪中停留的時(shí)間差異很大。在進(jìn)行分析時(shí)，可以以一段時(shí)間內(nèi)訪客在店鋪首頁(yè)的平均停留時(shí)間作為基數(shù)，并記錄下這段時(shí)間的銷(xiāo)售量，以后再拿新數(shù)據(jù)進(jìn)行對(duì)比就知道平均停留時(shí)間內(nèi)銷(xiāo)量是提高了還是下降了。6.2.2網(wǎng)店首頁(yè)布局

如圖某天貓旗艦店首頁(yè)所示，PC端網(wǎng)店首頁(yè)主要由以下功能模塊組成：店招和導(dǎo)航欄、首焦輪播圖、優(yōu)惠券、活動(dòng)專(zhuān)區(qū)、分類(lèi)導(dǎo)航區(qū)、商品陳列區(qū)、頁(yè)尾等。這些主要模塊的功能如下：6.2.2網(wǎng)店首頁(yè)布局

1、店招：位于店鋪首頁(yè)頂端，傳達(dá)店鋪重要信息。店招展示店鋪名稱(chēng)、品牌Logo、品牌Slogan、促銷(xiāo)商品信息、店鋪收藏等內(nèi)容。2、導(dǎo)航欄：展示店鋪內(nèi)的產(chǎn)品分類(lèi)，便于用戶(hù)快速找到想要買(mǎi)的產(chǎn)品。3、首焦輪播圖：以海報(bào)形式展現(xiàn)，占據(jù)店鋪首頁(yè)中最重要的位置，作用在于傳達(dá)店鋪主推商品，店鋪的優(yōu)惠活動(dòng)，樹(shù)立品牌形象。4、優(yōu)惠券：賣(mài)家給消費(fèi)者提供的一種優(yōu)惠，需要領(lǐng)取后再使用。5、活動(dòng)專(zhuān)區(qū)：展示店鋪進(jìn)行的促銷(xiāo)活動(dòng)，包括促銷(xiāo)產(chǎn)品列表，促銷(xiāo)活動(dòng)海報(bào)或產(chǎn)品海報(bào)等。6、分類(lèi)導(dǎo)航區(qū)：設(shè)置分類(lèi)導(dǎo)航和熱詞搜索來(lái)進(jìn)行分流，可以按照顧客的消費(fèi)訴求和搜索習(xí)慣來(lái)進(jìn)行分類(lèi)，提供便捷的用戶(hù)體驗(yàn)。7、商品陳列區(qū)：陳列店鋪中的商品。8、頁(yè)尾：可以展示店鋪優(yōu)勢(shì)、品牌歷史文化、服務(wù)等內(nèi)容。6.2.3網(wǎng)店首頁(yè)設(shè)計(jì)原則

網(wǎng)店首頁(yè)設(shè)計(jì)原則1243注重色彩搭配要有“形”

有質(zhì)感有氛圍環(huán)境

ContentsPage目錄頁(yè)—45

—

配套資源請(qǐng)關(guān)注[童話電商]公眾號(hào)6.1店標(biāo)視覺(jué)營(yíng)銷(xiāo)設(shè)計(jì)6.2首頁(yè)視覺(jué)營(yíng)銷(xiāo)設(shè)計(jì)6.3店招視覺(jué)營(yíng)銷(xiāo)設(shè)計(jì)6.4首焦輪播海報(bào)視覺(jué)營(yíng)銷(xiāo)設(shè)計(jì)6.5首頁(yè)其他模塊視覺(jué)營(yíng)銷(xiāo)設(shè)計(jì)6.6店鋪首頁(yè)視覺(jué)營(yíng)銷(xiāo)設(shè)計(jì)案例6.3.1店招設(shè)計(jì)的目的和內(nèi)容6.3.2店招設(shè)計(jì)的類(lèi)型6.3.3店招設(shè)計(jì)的技巧6.3.4生鮮水果店招設(shè)計(jì)案例6.3店招視覺(jué)營(yíng)銷(xiāo)設(shè)計(jì)6.3.1店招設(shè)計(jì)的目的和內(nèi)容

店招本是由戶(hù)外的店鋪招牌延伸而來(lái)。尺寸1920*150px，面積雖小，卻至關(guān)重要。

從內(nèi)容和設(shè)計(jì)目的角度來(lái)說(shuō)，店招上可展示：

店鋪名、店鋪Logo、店鋪slogan、收藏按鈕、關(guān)注按鈕、促銷(xiāo)產(chǎn)品、優(yōu)惠券、活動(dòng)信息/時(shí)間/倒計(jì)時(shí)、搜索框、店鋪公告、網(wǎng)址、第二導(dǎo)航條、旺旺、電話熱線、店鋪資質(zhì)、店鋪榮譽(yù)等一系列有助于產(chǎn)品銷(xiāo)售、網(wǎng)店品牌提升等信息。

店招的本質(zhì)目的是讓顧客看到相關(guān)的店鋪信息，快速了解店鋪的經(jīng)營(yíng)特色。從對(duì)店鋪定位及功能上講可以將店招分為4類(lèi)（隨意設(shè)計(jì)類(lèi)型暫排除在外）6.3.2店招設(shè)計(jì)的類(lèi)型店招設(shè)計(jì)類(lèi)型124品牌宣傳為主型產(chǎn)品推廣為主型3活動(dòng)促銷(xiāo)為主型

目錄導(dǎo)航為主型

1、品牌宣傳為主

圖-品牌宣傳型店招

這類(lèi)店招首先要考慮的內(nèi)容是店鋪名、店鋪logo、店鋪slogan，因?yàn)檫@是品牌宣傳的最基本的內(nèi)容。

2、活動(dòng)促銷(xiāo)為主圖-活動(dòng)促銷(xiāo)型店招

這類(lèi)首要考慮的因素是活動(dòng)信息/時(shí)間/倒計(jì)時(shí)、優(yōu)惠券、促銷(xiāo)產(chǎn)品等活動(dòng)或者促銷(xiāo)信息；其次是搜索框、旺旺、第二導(dǎo)航條等方便用戶(hù)體驗(yàn)的內(nèi)容；再次才是店鋪名、店鋪logo、店鋪slogan等品牌宣傳為主的內(nèi)容。

3、產(chǎn)品推廣為主圖-產(chǎn)品推廣型店招

店鋪特點(diǎn)是有主推產(chǎn)品、想要主推一款或幾款產(chǎn)品。在店招圖上，這類(lèi)店鋪要主打促銷(xiāo)產(chǎn)品、促銷(xiāo)信息、優(yōu)惠券、活動(dòng)信息等促銷(xiāo)信息；其次是店鋪名、店鋪logo、店鋪slogan等品牌宣傳為主的內(nèi)容；再次是搜索框、第二導(dǎo)航條等方便用戶(hù)體驗(yàn)的內(nèi)容，

4、目錄導(dǎo)航為主圖-目錄導(dǎo)航型店招

這種店鋪的所有分類(lèi)在導(dǎo)航欄上一目了然，這樣可以提高顧客的體驗(yàn)度和親近度。在店招圖上，這類(lèi)店鋪首先展現(xiàn)合理和明顯的分類(lèi)信息，引導(dǎo)客戶(hù)輕松找到自己想要的產(chǎn)品，也可適當(dāng)?shù)丶右恍┐黉N(xiāo)信息；其次是店鋪名、店鋪SLOGAN和促銷(xiāo)信息等內(nèi)容。6.3.3店招設(shè)計(jì)的規(guī)范與技巧1.店招視覺(jué)設(shè)計(jì)規(guī)范圖-店招高度設(shè)計(jì)規(guī)范淘寶后臺(tái)的店招高度為120像素，建議設(shè)計(jì)時(shí)設(shè)定店招尺寸為950像素×120像素，加上導(dǎo)航條高度30像素，共150像素，可避免發(fā)布后導(dǎo)航不顯示的問(wèn)題6.3.3店招設(shè)計(jì)的技巧1.店招視覺(jué)設(shè)計(jì)規(guī)范店招元素設(shè)計(jì)清晰的品牌信息促銷(xiāo)信息移動(dòng)端二維碼店招和導(dǎo)航條風(fēng)格統(tǒng)一設(shè)計(jì)，突出店鋪的品牌形象店招和導(dǎo)航條風(fēng)格統(tǒng)一6.3.3店招設(shè)計(jì)的技巧2.店鋪名稱(chēng)的藝術(shù)化處理

雖然有的店鋪會(huì)在店招中添加設(shè)計(jì)好的店鋪徽標(biāo)來(lái)代替店鋪名稱(chēng)，但是文字仍是店鋪名稱(chēng)最主要的表現(xiàn)形式。因此，可以采用一種最簡(jiǎn)單、有效的方式來(lái)美化店鋪名稱(chēng)，那就是通過(guò)不同字體和字號(hào)的組合使用賦予店鋪名稱(chēng)一定的藝術(shù)感。用不同字體和字號(hào)的組合營(yíng)造藝術(shù)感01不同字體字號(hào)的組合將店鋪名稱(chēng)的文字放大，并使用不同于其他字體風(fēng)格的手寫(xiě)體，讓店鋪名稱(chēng)文字的版式更加醒目、更具藝術(shù)感6.3.3店招設(shè)計(jì)的技巧2.店鋪名稱(chēng)的藝術(shù)化處理

可以通過(guò)添加特效的方式來(lái)突出店鋪名稱(chēng)的特殊性和醒目度，這些特效包括漸變色、陰影、浮雕與發(fā)光等。添加特效，突出特殊性和醒目度02為店鋪名稱(chēng)添加特效為了將店鋪名稱(chēng)與導(dǎo)航條的顏色區(qū)分開(kāi)，使用漸變效果來(lái)修飾店鋪名稱(chēng)，營(yíng)造出層次感，貼合了店鋪中銷(xiāo)售的品牌手表的特點(diǎn)6.3.3店招設(shè)計(jì)的技巧2.店鋪名稱(chēng)的藝術(shù)化處理

有時(shí)只是采用單一的文字組合、簡(jiǎn)單的修飾并不能真正表現(xiàn)出店鋪的風(fēng)格和設(shè)計(jì)的精致感，將店鋪名稱(chēng)與合理的修飾元素進(jìn)行融合設(shè)計(jì)，以完善、修飾、隱喻或暗示某種信息讓店鋪名稱(chēng)的設(shè)計(jì)更加個(gè)性化則不失為一種好方法。使用修飾元素提升觀賞性03為店鋪名稱(chēng)添加修飾元素使用長(zhǎng)頸鹿的卡通形象來(lái)修飾店鋪名稱(chēng)，文字與圖案在外形上的契合讓店鋪名稱(chēng)更具個(gè)性和藝術(shù)感，更容易在消費(fèi)者心中形成特定的印象6.3.3店招設(shè)計(jì)的技巧3.圖層樣式的應(yīng)用用“漸變疊加”圖層樣式來(lái)表現(xiàn)導(dǎo)航條功能按鈕被鼠標(biāo)觸碰后的狀態(tài)，在視覺(jué)上形成凹陷的效果，將其與導(dǎo)航條中正常狀態(tài)下的功能按鈕區(qū)分開(kāi)

圖層樣式的作用就是對(duì)設(shè)計(jì)元素進(jìn)行修飾和美化，實(shí)現(xiàn)色彩、質(zhì)感與光澤上的變化。當(dāng)鼠標(biāo)指針觸碰到導(dǎo)航條中任意一個(gè)功能按鈕時(shí)，該按鈕就會(huì)呈現(xiàn)出不同的效果，這就是添加圖層樣式的效果，給人視覺(jué)上的錯(cuò)覺(jué)，讓按鈕上的文字更具層次感，更易于展示當(dāng)前操作的結(jié)果拓展學(xué)習(xí)：店招設(shè)計(jì)結(jié)構(gòu)居中型左右型左中右型店招設(shè)計(jì)常見(jiàn)版面結(jié)構(gòu)1243其他型拓展學(xué)習(xí)：店招設(shè)計(jì)結(jié)構(gòu)圖-店招居中型結(jié)構(gòu)圖-店招左右型結(jié)構(gòu)拓展學(xué)習(xí)：店招設(shè)計(jì)結(jié)構(gòu)圖-店招左中右型結(jié)構(gòu)圖-店招其他形式結(jié)構(gòu)6.3.4農(nóng)產(chǎn)品店招案例設(shè)計(jì)

1、分析設(shè)計(jì)工單6.3.4農(nóng)產(chǎn)品店招案例設(shè)計(jì)2、準(zhǔn)備相關(guān)素材

圖-店招所選蜂蜜產(chǎn)品

6.3.4農(nóng)產(chǎn)品店招案例設(shè)計(jì)3、確定店招字體和制圖顏色

圖-店招設(shè)計(jì)所選字體首先要設(shè)計(jì)的主題為蜂蜜，為迎合顧客網(wǎng)購(gòu)關(guān)注頁(yè)面時(shí)更適應(yīng)舒適，選擇各大網(wǎng)站常用字體微軟雅黑系列字體。6.3.4農(nóng)產(chǎn)品店招案例設(shè)計(jì)4、確定店招的主體色調(diào)和運(yùn)用顏色

因?yàn)榉洚a(chǎn)品店鋪面對(duì)的顧客群體主要為女性、老年人等群體，而且蜂蜜產(chǎn)品主要顏色為黃色和橙色等。

圖-店招設(shè)計(jì)所選顏色

所以本次店招背景是在以黃色為主體的同時(shí)，考慮增加橙色做輔助色，給人一種溫暖、燦爛、豐收和希望的感覺(jué)，從而吸引買(mǎi)家的眼球，提高情感、情緒的刺激，提升購(gòu)買(mǎi)欲。6.3.4農(nóng)產(chǎn)品店招案例設(shè)計(jì)5、確定店招布局

圖-店招設(shè)計(jì)布局6.3.4農(nóng)產(chǎn)品店招案例設(shè)計(jì)6、設(shè)計(jì)定稿效果

圖-店招設(shè)計(jì)最終效果圖6.3.4農(nóng)產(chǎn)品店招案例設(shè)計(jì)-案例實(shí)操視頻【同步實(shí)訓(xùn)】家居生活館店招設(shè)計(jì)ContentsPage目錄頁(yè)—70

—

配套資源請(qǐng)關(guān)注[童話電商]公眾號(hào)6.1店標(biāo)視覺(jué)營(yíng)銷(xiāo)設(shè)計(jì)6.2首頁(yè)視覺(jué)營(yíng)銷(xiāo)設(shè)計(jì)6.3店招視覺(jué)營(yíng)銷(xiāo)設(shè)計(jì)6.4首焦輪播海報(bào)視覺(jué)營(yíng)銷(xiāo)設(shè)計(jì)6.5首頁(yè)其他模塊視覺(jué)營(yíng)銷(xiāo)設(shè)計(jì)6.6店鋪首頁(yè)視覺(jué)營(yíng)銷(xiāo)設(shè)計(jì)案例6.4.1聚焦消費(fèi)者視線6.4.2首焦輪播海報(bào)設(shè)計(jì)三要素6.4.3溶圖的應(yīng)用6.4首焦輪播海報(bào)視覺(jué)營(yíng)銷(xiāo)設(shè)計(jì)首焦輪播海報(bào)圖位于網(wǎng)店導(dǎo)航條下方位置。主要作用是告知買(mǎi)家店鋪活動(dòng)、商品信息、店鋪動(dòng)態(tài)等。吸引眼球，聚焦買(mǎi)家視線。全屏輪播海報(bào)尺寸：全屏1920*X。設(shè)計(jì)3333原則：3段文字、3種字體、3種顏色、30%留白。6.4.1設(shè)計(jì)要點(diǎn)：聚焦買(mǎi)家視線圖-店鋪輪播海報(bào)區(qū)位置輪播海報(bào)區(qū)：由于該位置所占面積較大，所以成為最能吸引消費(fèi)者眼球的位置6.4.1設(shè)計(jì)要點(diǎn)：聚焦買(mǎi)家視線圖-首焦輪播圖位置內(nèi)容安排有趣的圖片展示，能讓消費(fèi)者通過(guò)視覺(jué)獲得較為愉悅的體驗(yàn)文案信息告知了消費(fèi)者店鋪中的優(yōu)惠活動(dòng)，因?yàn)榈赇伒膬?yōu)惠活動(dòng)信息對(duì)于大部分消費(fèi)者而言極具吸引力。同時(shí)，簡(jiǎn)潔的文字與圖形裝飾的結(jié)合讓消費(fèi)者能夠輕松地獲取相關(guān)信息6.4.1設(shè)計(jì)要點(diǎn)：聚焦買(mǎi)家視線圖-商品和促銷(xiāo)文案相結(jié)合的首焦圖首焦位置有吸引人的產(chǎn)品圖片和明顯的促銷(xiāo)信息文案，這樣的安排與表現(xiàn)能讓消費(fèi)者有進(jìn)一步瀏覽店鋪的欲望。小米的極簡(jiǎn)主義

近幾年來(lái)，伴隨眾多小米公司旗下以“MI”與“米家”品牌現(xiàn)身的數(shù)百件好設(shè)計(jì)在全球各大設(shè)計(jì)獎(jiǎng)屢獲重量級(jí)獎(jiǎng)項(xiàng)，越來(lái)越多參與評(píng)審的歐、美、日等國(guó)家的評(píng)審委員、著名設(shè)計(jì)師對(duì)小米系的參評(píng)設(shè)計(jì)由陌生到熟悉，已能較準(zhǔn)確地判別具有高度統(tǒng)一特性的小米公司產(chǎn)品設(shè)計(jì)。遠(yuǎn)遠(yuǎn)看到一件外形簡(jiǎn)潔、光潔平整、安靜雅致、無(wú)任何裝飾、或白或黑的消費(fèi)產(chǎn)品時(shí)，感性化的口語(yǔ)自然流出——MILook。

其實(shí)在小米海報(bào)設(shè)計(jì)中同樣存在著極簡(jiǎn)主義，一直以來(lái)小米的海報(bào)設(shè)計(jì)遵循兩個(gè)要點(diǎn)：一是夠直白；二是能打動(dòng)用戶(hù)。所以其海報(bào)一直以簡(jiǎn)潔的小米風(fēng)著稱(chēng)，小小的LOGO，大大的產(chǎn)品圖，加上層次分明的文案排版，一下就能抓住用戶(hù)的眼球。輪播海報(bào)圖設(shè)計(jì)有哪大三要素6.4.2首焦輪播海報(bào)設(shè)計(jì)三要素1.背景2.商品3.廣告文字6.4.2首焦輪播海報(bào)設(shè)計(jì)三要素1.背景：襯托主題，創(chuàng)造對(duì)比背景和商品的關(guān)系就像白和黑，它位于所有圖層最底層，主要是為了襯托主體，創(chuàng)造強(qiáng)烈的對(duì)比，使整個(gè)畫(huà)面更具視覺(jué)沖擊力、更突出更美觀。

圖-不同主題的背景圖以七夕節(jié)為主題的背景以“雙11”活動(dòng)為主題的背景6.4.2首焦輪播海報(bào)設(shè)計(jì)三要素2.商品：對(duì)商品要進(jìn)行美化商品圖是首焦輪播海報(bào)的核心，它直接關(guān)系到轉(zhuǎn)化率的高低。色彩得當(dāng)、畫(huà)質(zhì)清晰的商品圖能夠樹(shù)立良好的商品形象。

圖-處理前后的商品形象對(duì)比6.4.2首焦輪播海報(bào)設(shè)計(jì)三要素3.廣告文字：提煉優(yōu)化設(shè)計(jì)文字是輪播海報(bào)中重要的組成部分文字，文字具有直觀、可識(shí)別性強(qiáng)等特點(diǎn)，很多不能用圖片表達(dá)的信息都需要通過(guò)文字來(lái)傳達(dá)，如活動(dòng)的內(nèi)容、商品的名稱(chēng)、商品的價(jià)格等。

圖-不同主題的背景圖6.4.3溶圖的應(yīng)用

在選擇溶圖時(shí)要注意，要么溶圖的色調(diào)與商品相似，要么溶圖的影調(diào)與商品和諧搭配，只有滿(mǎn)足了其中的一個(gè)要求才能保證首焦輪播圖具備較理想的視覺(jué)沖擊力和渾然天成的視覺(jué)效果。溶圖

溶圖是用兩張或兩張以上的圖片拼合起來(lái)的一張圖片，構(gòu)圖嚴(yán)謹(jǐn)，細(xì)節(jié)處理得當(dāng)。ContentsPage目錄頁(yè)—82

—

配套資源請(qǐng)關(guān)注[童話電商]公眾號(hào)6.1店標(biāo)視覺(jué)營(yíng)銷(xiāo)設(shè)計(jì)6.2首頁(yè)視覺(jué)營(yíng)銷(xiāo)設(shè)計(jì)6.3店招視覺(jué)營(yíng)銷(xiāo)設(shè)計(jì)6.4首焦輪播海報(bào)視覺(jué)營(yíng)銷(xiāo)設(shè)計(jì)6.5首頁(yè)其他模塊視覺(jué)營(yíng)銷(xiāo)設(shè)計(jì)6.6店鋪首頁(yè)視覺(jué)營(yíng)銷(xiāo)設(shè)計(jì)案例6.5.1優(yōu)惠券設(shè)計(jì)6.5.2活動(dòng)專(zhuān)區(qū)布局設(shè)計(jì)6.5.3分類(lèi)導(dǎo)航區(qū)設(shè)計(jì)6.5.4商品陳列區(qū)設(shè)計(jì)6.5.5頁(yè)尾設(shè)計(jì)6.5首頁(yè)其他模塊視覺(jué)營(yíng)銷(xiāo)設(shè)計(jì)6.5.1優(yōu)惠券設(shè)計(jì)

優(yōu)惠券從發(fā)放主體的角度來(lái)說(shuō)可分為平臺(tái)券和店鋪券。本小節(jié)我們講的是在店鋪首頁(yè)范圍內(nèi)的，屬于店鋪優(yōu)惠券，常見(jiàn)類(lèi)型有滿(mǎn)減券、折扣券、無(wú)門(mén)檻券等。

圖-滿(mǎn)減優(yōu)惠券圖-滿(mǎn)減優(yōu)惠券效果圖【實(shí)操視頻】滿(mǎn)減優(yōu)惠券制作視頻較大，更多實(shí)操視頻請(qǐng)掃碼童海君團(tuán)隊(duì)配套國(guó)家精品在線課程6.5.1優(yōu)惠券設(shè)計(jì)

折扣券是用戶(hù)使用后會(huì)按一定折扣打折。無(wú)門(mén)檻優(yōu)惠券不限制訂單金額，可以直接使用，優(yōu)惠金額不會(huì)很大，需要用戶(hù)按時(shí)間要求去搶購(gòu)，獲取難度比較大。

圖-折扣優(yōu)惠券圖-無(wú)門(mén)檻優(yōu)惠券6.5.2活動(dòng)專(zhuān)區(qū)布局設(shè)計(jì)

整體型布局主次分明式布局活動(dòng)專(zhuān)區(qū)常見(jiàn)布局形式123藝術(shù)感布局1.整體型布局

整體型布局是活動(dòng)專(zhuān)區(qū)一種常見(jiàn)的布局形式，此種形式弱化了商品間的排序，讓顧客對(duì)專(zhuān)區(qū)的所有商品一視同仁，弱化產(chǎn)品之間的對(duì)比，使得專(zhuān)區(qū)所有商品渾然一體，這樣就能更好的突出整體。

圖-整體型活動(dòng)專(zhuān)區(qū)

2.主次分明式布局

這種布局方式使活動(dòng)專(zhuān)區(qū)整體上布局分明，通過(guò)大圖小圖對(duì)比，使布局清晰的同時(shí)也突出了大圖的商品。此種形式交空間交給客戶(hù)更感興趣的產(chǎn)品，可以大幅度提高商品的點(diǎn)擊率。

圖-主次分明式布局

3.主次分明式布局

藝術(shù)感布局的活動(dòng)專(zhuān)區(qū)適合產(chǎn)品較少或者主推產(chǎn)品少的店鋪，這樣的布局會(huì)給客戶(hù)一種輕松愉悅的購(gòu)物感覺(jué)，藝術(shù)氣息濃厚，提升客戶(hù)的停留時(shí)間。

圖-藝術(shù)感布局

6.5.3分類(lèi)導(dǎo)航設(shè)計(jì)

分類(lèi)導(dǎo)航可以位于首頁(yè)中的任意位置，它是首頁(yè)設(shè)計(jì)中的重要環(huán)節(jié)。對(duì)于商品種類(lèi)繁多的店鋪，好的分類(lèi)導(dǎo)航能讓消費(fèi)者快速的找到自己想要的產(chǎn)品，從而有助于最終的下單。

圖-純文字的分類(lèi)導(dǎo)航

圖-圖文結(jié)合的分類(lèi)導(dǎo)航分類(lèi)導(dǎo)航設(shè)計(jì)要點(diǎn)

（1）分類(lèi)數(shù)量不是越多越好，一般建議4-8個(gè)主營(yíng)類(lèi)目即可。（2）充分考慮產(chǎn)品屬性和大眾的瀏覽習(xí)慣。（3）新品和主打產(chǎn)品盡量靠前排。（4）清晰明了是基本的要求，不要出現(xiàn)重復(fù)包含的分類(lèi)以免浪費(fèi)資源。6.5.4商品陳列區(qū)設(shè)計(jì)

在設(shè)計(jì)店鋪首頁(yè)時(shí)，除了店招和首焦輪播區(qū)外，大部分店鋪都會(huì)使用商品陳列區(qū)來(lái)展示商品，讓消費(fèi)者大致了解店鋪中商品的形象、風(fēng)格和價(jià)格。商品陳列區(qū)也是一個(gè)比較重要且尺寸較大的區(qū)域，下面將對(duì)商品陳列區(qū)的視覺(jué)營(yíng)銷(xiāo)設(shè)計(jì)進(jìn)行介紹。1.買(mǎi)家瀏覽模式(營(yíng)造視覺(jué)動(dòng)線)

圖-F形瀏覽模式2.商品陳列布局方式(營(yíng)造視覺(jué)動(dòng)線)

圖-商品展示圖排列設(shè)計(jì)2.商品陳列布局方式

傳統(tǒng)型布局就是將商品展示圖片整齊劃一地排列在店鋪首頁(yè)之中。傳統(tǒng)型布局012.商品陳列布局方式

折線型布局就是將商品圖片按照錯(cuò)位的方式進(jìn)行排列。折線型布局022.商品陳列布局方式

隨意型布局就是將商品圖片隨意地放置在頁(yè)面中產(chǎn)生自然好看的效果。這種隨意往往需要營(yíng)造出一種特定的氛圍和感覺(jué)，讓這些商品之間產(chǎn)生一種聯(lián)系，否則界面中的商品會(huì)由于缺乏聯(lián)系而顯得突兀。隨意型布局036.5.5頁(yè)尾設(shè)計(jì)

店鋪優(yōu)勢(shì)型頁(yè)尾著重強(qiáng)調(diào)店鋪的優(yōu)勢(shì)，如工廠直銷(xiāo)、產(chǎn)地優(yōu)勢(shì)、認(rèn)證服務(wù)等內(nèi)容，這樣更容易增加消費(fèi)者對(duì)店鋪的信任，最終促成下單。圖-

店鋪優(yōu)勢(shì)型頁(yè)尾

店鋪優(yōu)勢(shì)型頁(yè)尾016.5.5頁(yè)尾設(shè)計(jì)

品牌歷史型頁(yè)尾注重企業(yè)品牌的自我介紹，通過(guò)介紹品牌發(fā)展歷史，讓顧客認(rèn)知品牌的同時(shí)也打消了顧客的疑慮，實(shí)現(xiàn)了品牌的自我增值。

圖-品牌歷史型頁(yè)尾

品牌歷史型頁(yè)尾026.5.5頁(yè)尾設(shè)計(jì)

服務(wù)型頁(yè)尾強(qiáng)調(diào)的是店鋪的服務(wù)，一般包括店鋪介紹、退換貨、會(huì)員介紹、店鋪收藏、返回頂部（一般都有）等。

圖-服務(wù)型頁(yè)尾

服務(wù)型頁(yè)尾03ContentsPage目錄頁(yè)—102

—

配套資源請(qǐng)關(guān)注[童話電商]公眾號(hào)6.1店