網(wǎng)店運(yùn)營與管理課件 第四章 網(wǎng)店裝修與設(shè)計(jì)

網(wǎng)店運(yùn)營與管理第四

章網(wǎng)店裝修與設(shè)計(jì)店招的設(shè)計(jì)與制作/海報(bào)的設(shè)計(jì)與制作/店鋪主圖的設(shè)計(jì)與制作目錄CONTENTS店招的設(shè)計(jì)與制作海報(bào)的設(shè)計(jì)與制作010203店鋪主圖的設(shè)計(jì)與制作店招的設(shè)計(jì)與制作01第四章網(wǎng)店裝修與設(shè)計(jì)4.1.1店招的設(shè)計(jì)

店招是店鋪首頁的第一個(gè)板塊，是店鋪的招牌，是店鋪品牌展示的窗口。有特色的店招對店鋪形成品牌和展現(xiàn)商品定位具有不可替代的作用。店招的內(nèi)容一般包括Logo、店鋪名稱、店鋪性質(zhì)、店鋪理念或促銷活動(dòng)信息等。第四章網(wǎng)店裝修與設(shè)計(jì)4.1.1店招的設(shè)計(jì)

店招的設(shè)計(jì)主要體現(xiàn)在Logo、促銷商品、收藏和關(guān)注、優(yōu)惠券等能夠直接吸引客戶的元素上，這些元素的結(jié)合使用，可以將營銷信息凸顯出來，下面分別對這些元素進(jìn)行介紹。LogoLogo的效果直接影響著客戶對店鋪的印象。Logo是店鋪的形象標(biāo)志，在店招或商品上添加Logo可以加深客戶對店鋪的印象。收藏和關(guān)注在店招中添加收藏和關(guān)注模塊，可以引導(dǎo)客戶快速收藏和關(guān)注店鋪，為其后期購買商品做準(zhǔn)備。促銷商品在店招中添加促銷商品，不僅能讓客戶進(jìn)店第一眼就看到促銷信息，引導(dǎo)其查看，還能起到宣傳的作用。該方法是店鋪營銷中常用的方法。優(yōu)惠券在店招中添加優(yōu)惠券，可以方便客戶快速查看優(yōu)惠信息，并進(jìn)一步瀏覽優(yōu)惠商品，從而促使客戶購買。第四章網(wǎng)店裝修與設(shè)計(jì)4.1.2店招的布局

店招是店鋪中曝光量最大的板塊之一，如何將店鋪的優(yōu)惠信息、活動(dòng)內(nèi)容、促銷款式、收藏、關(guān)注等內(nèi)容通過不同的方式展現(xiàn)到店招中，是店招布局中的難點(diǎn)。下面將介紹常見的4種布局。1.簡潔布局

簡潔布局比較強(qiáng)調(diào)品牌Logo和廣告語，部分店鋪還在店招中添加了收藏鏈接等小控件，使店招功能更豐富。簡潔布局店招如圖4-1所示。第四章網(wǎng)店裝修與設(shè)計(jì)4.1.2店招的布局2.促銷活動(dòng)布局

促銷活動(dòng)布局是在簡潔布局的基礎(chǔ)上添加促銷信息或活動(dòng)商品信息，讓店鋪的優(yōu)惠信息在店招中展示。但是，需要注意不要讓店招中的信息過于雜亂，影響店鋪的整體美觀性。促銷活動(dòng)布局店招如圖4-2所示。第四章網(wǎng)店裝修與設(shè)計(jì)4.1.2店招的布局3.互動(dòng)布局

互動(dòng)布局是指店招以互動(dòng)信息為主，如關(guān)注、分享、會(huì)員、品牌故事等，有利于提高店鋪與客戶的互動(dòng)性，加強(qiáng)客戶與店鋪的聯(lián)系。互動(dòng)布局店招如圖4-3所示。第四章網(wǎng)店裝修與設(shè)計(jì)4.1.2店招的布局4.左中右布局

左中右布局指將店招分為3個(gè)部分，分門別類地對商品和店鋪信息進(jìn)行展示。左中右布局店招如圖4-4所示。第四章網(wǎng)店裝修與設(shè)計(jì)4.1.3店招的制作

通欄店招是淘寶網(wǎng)中運(yùn)用十分廣泛的一種店招。通欄店招不但可以包含常規(guī)店招的基本信息，還能置入導(dǎo)航條。下面將制作生鮮店的通欄店招，采用左中右布局。店招左邊為店鋪Logo，中間為店鋪的名稱，右邊為互動(dòng)內(nèi)容，使店招效果更加美觀。下面介紹使用Photoshop制作店招的具體步驟。

第一步：打開Photoshop，新建圖片大小為1920像素×150像素，分辨率為72像素/英寸（1英寸=2.54厘米，余同），名為“店招”的文件；單擊“視圖”按鈕，讓圖像中顯示標(biāo)尺，拖動(dòng)繪制出圖4-5所示的參考線。第四章網(wǎng)店裝修與設(shè)計(jì)4.1.3店招的制作

第二步：選擇“矩形工具”，并設(shè)置填充色為黃色，RGB值為（240，189，11），在底端區(qū)域繪制矩形，如圖4-6所示。第四章網(wǎng)店裝修與設(shè)計(jì)4.1.3店招的制作

第三步：連按“Ctrl++”組合鍵，放大視圖，選擇“橢圓工具”，在工具屬性欄選擇工具模式為“形狀”，繪制“橢圓1”并取消填充顏色，設(shè)置描邊為2像素，并設(shè)置顏色為藍(lán)色，RGB值為（9，48，241）。繪制形狀如圖4-7所示。第四章網(wǎng)店裝修與設(shè)計(jì)4.1.3店招的制作

第四步：選擇“橢圓1”，按“Ctrl+J”組合鍵，復(fù)制一個(gè)形狀圖層，選擇“編輯”菜單中的“變換”選項(xiàng)，然后選擇“縮放”選項(xiàng)，如圖4-8所示。第四章網(wǎng)店裝修與設(shè)計(jì)4.1.3店招的制作

第五步：設(shè)置縮放比例為“80%”，效果如圖4-9所示。第四章網(wǎng)店裝修與設(shè)計(jì)4.1.3店招的制作

第六步：選擇“橢圓1拷貝”，右擊，在彈出的快捷菜單中選擇“柵格化圖層”，選擇“矩形選框工具”，將“橢圓1拷貝”的左右兩側(cè)線條刪除，效果如圖4-10所示。第四章網(wǎng)店裝修與設(shè)計(jì)4.1.3店招的制作

第七步：選擇“直排文字工具”，在圖形缺口處添加“現(xiàn)摘”“現(xiàn)發(fā)”文字，顏色為黑色，并設(shè)置字體為“微軟雅黑”；在圖形中間位置添加“果豐”文字，設(shè)置字體為“方正粗宋_GBK”，字體顏色為綠色，RGB值為（105，235，10）。調(diào)整文字大小和位置等，完成Logo制作，效果如圖4-11所示。第四章網(wǎng)店裝修與設(shè)計(jì)4.1.3店招的制作

第八步：選擇“橫排文字工具”，在Logo右側(cè)添加“果豐生鮮旗艦店”文字，顏色為綠色，并設(shè)置字體為“方正粗宋_GBK”。調(diào)整文字大小和位置等，調(diào)整后效果如圖4-12所示。第四章網(wǎng)店裝修與設(shè)計(jì)4.1.3店招的制作

第九步：打開素材文件“4.1.jpg”，將素材圖片依次拖到店招的右側(cè)，調(diào)整大小和位置等，如圖4-13所示。第四章網(wǎng)店裝修與設(shè)計(jì)4.1.3店招的制作

第十步：使用“橫排文字工具”和“矩形工具”，分別為右側(cè)素材圖片添加文字，效果如圖4-14所示。第四章網(wǎng)店裝修與設(shè)計(jì)4.1.3店招的制作

第十一步：使用“橫排文字工具”和“矩形工具”，在店鋪名后添加“關(guān)注”元素，效果如圖4-15所示。第四章網(wǎng)店裝修與設(shè)計(jì)4.1.3店招的制作

第十二步：使用“橫排文字工具”，在底端黃色區(qū)域添加導(dǎo)航條文字，效果如圖4-16所示。第四章網(wǎng)店裝修與設(shè)計(jì)4.1.3店招的制作

第十三步：保存圖像并查看完成后的效果，如圖4-17所示。海報(bào)的設(shè)計(jì)與制作02第四章網(wǎng)店裝修與設(shè)計(jì)4.2.1海報(bào)設(shè)計(jì)的技巧

海報(bào)是店鋪首頁最醒目的區(qū)域，位于店招的下方。店招下方可以是一張海報(bào)，也可以是輪播的多張海報(bào)。海報(bào)是網(wǎng)店視覺和營銷設(shè)計(jì)的重點(diǎn)。如果首頁海報(bào)視覺設(shè)計(jì)效果好，不但可以大大提升店鋪整體的美觀度，還可以對店鋪中的主推商品起到積極的推廣作用。第四章網(wǎng)店裝修與設(shè)計(jì)4.2.1海報(bào)設(shè)計(jì)的技巧1.不雜亂，細(xì)節(jié)做點(diǎn)綴

首頁海報(bào)中的主體商品不能太多，否則會(huì)造成畫面雜亂，影響店鋪整體的視覺美觀度。在細(xì)節(jié)上，要做到前后呼應(yīng)，不能為了添加細(xì)節(jié)而添加細(xì)節(jié)。圖4-18所示為常規(guī)海報(bào)的展示。第四章網(wǎng)店裝修與設(shè)計(jì)4.2.1海報(bào)設(shè)計(jì)的技巧2.元素主次分明，排列有序

海報(bào)的主題一般在背景、商品和文案中體現(xiàn)，而這些元素往往是雜亂無章的，需要對其進(jìn)行有條理地分類整理、提煉，突出主要信息。同時(shí)，海報(bào)元素要分主次，背景不能比主體突出，促銷信息應(yīng)該醒目顯示。圖4-19所示為主次分明的海報(bào)效果。第四章網(wǎng)店裝修與設(shè)計(jì)4.2.1海報(bào)設(shè)計(jì)的技巧3.留白

客戶在瀏覽了多個(gè)店鋪首頁后，眼睛往往會(huì)在不同的顏色和結(jié)構(gòu)切換中感到疲勞，因此店鋪首頁的海報(bào)設(shè)計(jì)可以適當(dāng)留白，以減輕客戶的視覺負(fù)擔(dān)。例如，在海報(bào)周圍留出一些空白，給客戶簡單舒適的視覺體驗(yàn)，從而讓客戶對店鋪產(chǎn)生好的印象。圖4-20所示為留白海報(bào)的效果。第四章網(wǎng)店裝修與設(shè)計(jì)4.2.2海報(bào)設(shè)計(jì)的要點(diǎn)

要使海報(bào)達(dá)到美觀、吸引客戶注意的效果，就要對海報(bào)的主題、構(gòu)圖和配色進(jìn)行綜合考慮。1.主題

無論是新品上市還是活動(dòng)促銷，海報(bào)設(shè)計(jì)都應(yīng)該圍繞一個(gè)主題。一般情況下，海報(bào)主題通過簡潔精練的文字搭配主體商品來表現(xiàn)，是海報(bào)的第一視覺點(diǎn)，讓客戶直觀地看到海報(bào)傳達(dá)的重要信息。此外，應(yīng)根據(jù)商品和活動(dòng)特點(diǎn)為海報(bào)選擇合適的背景。在編輯文案時(shí)，建議文案的字體不要超過3種，同時(shí)用稍大或個(gè)性化的字體突出主題和商品的特征，如圖4-21所示。第四章網(wǎng)店裝修與設(shè)計(jì)4.2.2海報(bào)設(shè)計(jì)的要點(diǎn)2.構(gòu)圖

構(gòu)圖的好壞直接影響著海報(bào)效果的好壞，海報(bào)構(gòu)圖主要分為左右構(gòu)圖、左中右三分式構(gòu)圖、上下構(gòu)圖、底面構(gòu)圖和斜切構(gòu)圖5種形式。圖4-22所示為左右構(gòu)圖。第四章網(wǎng)店裝修與設(shè)計(jì)4.2.2海報(bào)設(shè)計(jì)的要點(diǎn)3．配色

海報(bào)需要保持色調(diào)的統(tǒng)一，重要的文字信息應(yīng)該用突出醒目的顏色進(jìn)行強(qiáng)調(diào)，可通過明暗對比和顏色搭配來確定海報(bào)的整體風(fēng)格。海報(bào)中不要使用過多的顏色，以免頁面雜亂。圖4-23所示即為色調(diào)統(tǒng)一、文字突出的海報(bào)。第四章網(wǎng)店裝修與設(shè)計(jì)4.2.3海報(bào)設(shè)計(jì)的表現(xiàn)手法

靈活運(yùn)用海報(bào)的設(shè)計(jì)和布局可以提升海報(bào)的美觀度，快速吸引客戶的注意力。好的海報(bào)表現(xiàn)手法則能讓客戶在第一時(shí)間了解海報(bào)中的重要信息，甚至對商品產(chǎn)生親切感和信任感。海報(bào)設(shè)計(jì)的表現(xiàn)手法主要有3種，如表4-1所示。第四章網(wǎng)店裝修與設(shè)計(jì)4.2.4海報(bào)的制作

首頁海報(bào)需要結(jié)合店鋪的整體風(fēng)格進(jìn)行制作，下面介紹使用Photoshop制作海報(bào)的具體步驟。

第一步：打開Photoshop，新建圖片大小為1920像素×700像素，分辨率為72像素/英寸，名為“全屏海報(bào)”的文件。

第二步：將前景色的RGB值設(shè)置為（211，226，240），按“Alt+Delete”組合鍵將背景層填充為前景色。

第三步：打開素材文件“4.2.jpg”，將產(chǎn)品素材拖動(dòng)到圖像中，調(diào)整大小和位置等，并設(shè)置圖層的混合模式為“正片疊底”，如圖4-24所示。第四章網(wǎng)店裝修與設(shè)計(jì)4.2.4海報(bào)的制作

第四步：打開素材文件“4.3.jpg”，將需要的部分素材拖動(dòng)到圖像中，調(diào)整大小和位置等，并設(shè)置圖層的混合模式為“濾色”或“疊加”，如圖4-25所示。第四章網(wǎng)店裝修與設(shè)計(jì)4.2.4海報(bào)的制作

第五步：選擇“橫排文字工具”，字體設(shè)置為“方正粗宋_GBK”，顏色為藍(lán)色，RGB值設(shè)置為（82，146，236），添加文字“鮮爽多汁清新清香”，調(diào)整大小和位置等，如圖4-26所示。第四章網(wǎng)店裝修與設(shè)計(jì)4.2.4海報(bào)的制作

第六步：新建圖層，選擇“矩形選框工具”，在文字下方繪制黃色矩形，并添加白色文字“現(xiàn)摘現(xiàn)發(fā)”，如圖4-27所示。第四章網(wǎng)店裝修與設(shè)計(jì)4.2.4海報(bào)的制作

第七步：保存圖像并查看完成后的效果，如圖4-28所示。店鋪主圖的設(shè)計(jì)與制作03第四章網(wǎng)店裝修與設(shè)計(jì)4.3.1主圖尺寸規(guī)范與素材選擇

客戶通常是從商品主圖中獲得商品信息的。作為商品信息的核心載體，主圖需要具有吸引力，使客戶產(chǎn)生瀏覽欲望，從而進(jìn)入商品詳情頁瀏覽更多信息。因此，主圖效果的好壞在很大程度上影響著店鋪流量的高低。一張好的主圖可以為店鋪運(yùn)營節(jié)省很多宣傳推廣費(fèi)用，也是店鋪營銷成功的關(guān)鍵因素。第四章網(wǎng)店裝修與設(shè)計(jì)4.3.1主圖尺寸規(guī)范與素材選擇1.主圖的尺寸規(guī)范

不同的電子商務(wù)平臺對商品主圖有不同的要求，接下來主要說明淘寶網(wǎng)的主圖尺寸規(guī)范。淘寶網(wǎng)的標(biāo)準(zhǔn)主圖為310像素×310像素的正方形圖片。對800像素×800像素以上的圖片，可在商品詳情頁中使用放大鏡功能，使用該功能可以直接放大主圖，在主圖中查看商品的細(xì)節(jié)。在計(jì)算機(jī)上編輯發(fā)布商品時(shí)，主圖位置一般可以上傳5張不同角度的圖片，一般最后一張主圖要用白底圖。商家要充分重視這5張主圖的設(shè)計(jì)，這5張主圖要盡量從不同角度來展示商品的特征。商家也可以在主圖位置發(fā)布視頻，方便客戶查看實(shí)物效果。第四章網(wǎng)店裝修與設(shè)計(jì)4.3.1主圖尺寸規(guī)范與素材選擇2.主圖的素材選擇

主圖作為表現(xiàn)商品的第一要素，其素材的選擇也要遵循一定的規(guī)律，主圖素材的選擇規(guī)律如表4-2所示。第四章網(wǎng)店裝修與設(shè)計(jì)4.3.2主圖的營銷體現(xiàn)1.賣點(diǎn)清晰

賣點(diǎn)是指商品具備的別出心裁或與眾不同的特色，既可以是商品的款式或材質(zhì)，也可以是商品的價(jià)格等。賣點(diǎn)清晰是指客戶即使一掃而過，也能快速明白商品的優(yōu)勢是什么、和別家的商品有什么不同。一張主圖中賣點(diǎn)不需要很多，但要能夠直擊要害，以直接的方式打動(dòng)客戶。許多商品的賣點(diǎn)都是大同小異的，這時(shí)，優(yōu)化賣點(diǎn)就會(huì)成為體現(xiàn)營銷價(jià)值、吸引客戶眼球的關(guān)鍵。圖4-29中，左圖想要體現(xiàn)的商品賣點(diǎn)是久戴耳朵不痛，該圖場景是正確的，但背景過于單調(diào)，并沒有體現(xiàn)出商品優(yōu)勢，因此該主圖中賣點(diǎn)不夠突出，不符合視覺營銷的需求；而右圖則傳達(dá)了更多信息并體現(xiàn)了營銷特點(diǎn)。第四章網(wǎng)店裝修與設(shè)計(jì)4.3.2主圖的營銷體現(xiàn)2.商品的大小適中

主圖中商品過大則顯得臃腫，過小則不利于突出商品的主體地位，從而使?fàn)I銷效果達(dá)不到要求。而大小合適的商品能增強(qiáng)客戶瀏覽時(shí)的視覺舒適感，提高點(diǎn)擊率。圖4-30中，右圖的橘子與葉子形成對比，客戶可以感受到橘子的實(shí)際大小，并且能感受到橘子的新鮮，極大地提高了瀏覽的直觀度，甚至能讓客戶產(chǎn)生吃到口中汁水飽滿的味覺體驗(yàn)，這樣的展示效果比左圖一堆橘子堆放在一處，讓客戶直觀地感覺到一個(gè)橘子很小，甚至口感也普通的展示效果好。第四章網(wǎng)店裝修與設(shè)計(jì)4.3.2主圖的營銷體現(xiàn)3.宜簡不宜繁

由于客戶瀏覽主圖的速度較快，因此主圖傳達(dá)的信息越簡單明確就越容易被客戶接受。商品雜亂、文案信息多、背景雜、水印夸張等都會(huì)阻礙信息的傳達(dá)，從而影響營銷效果。圖4-31中，左圖和右圖都是化妝品。左圖設(shè)計(jì)簡潔大氣、唯美清新，少量的文字很好地展現(xiàn)了其賣點(diǎn)。而右圖用了多個(gè)部分來體現(xiàn)其賣點(diǎn)，并用了大量文字來說明化妝品的特點(diǎn)及促銷信息，但文字太小，信息展現(xiàn)不夠完整，從而會(huì)使客戶快速跳過該主圖。第四章網(wǎng)店裝修與設(shè)計(jì)4.3.2主圖的營銷體現(xiàn)4.豐富細(xì)節(jié)

商家可通過放大細(xì)節(jié)提高主圖的點(diǎn)擊率，也可以在主圖上添加除標(biāo)題文字外的補(bǔ)充文字，如商品名稱、特點(diǎn)、包郵、特價(jià)等內(nèi)容。豐富主圖的細(xì)節(jié)，可以使賣點(diǎn)更加突出，從而促進(jìn)商品的營銷。第四章網(wǎng)店裝修與設(shè)計(jì)4.3.3主圖的制作

主圖的設(shè)計(jì)一定要有亮點(diǎn)。以下將制作一款野生松茸的主圖，主要通過添加背景來突出產(chǎn)品質(zhì)感，再通過促銷文案來傳遞營銷信息吸引消費(fèi)者的注意力。下面介紹使用Photoshop制作主圖的具體步驟。

第一步：打開Photoshop，新建圖片大小為800像素×800像素，分辨率為72像素/英寸，名為“商品主圖.psd”的圖像文件。打開素材文件“4.4.jpg”，將背景拖動(dòng)到新建的主圖中，調(diào)整大小和位置等，并設(shè)置圖層的不透明度為“70%”，如圖4-32所示。第四章網(wǎng)店裝修與設(shè)計(jì)4.3.3主圖的制作

第二步：打開素材文件“4.5.jpg”，對產(chǎn)品進(jìn)行摳圖，將產(chǎn)品素材拖動(dòng)到主圖中，調(diào)整位置和大小等，如圖4-33所示。第四章網(wǎng)店裝修與設(shè)計(jì)4.3.3主圖的制作

第三步：在工具箱中選