第七講：網(wǎng)店首頁設(shè)計(jì)與裝修

電子商務(wù)基礎(chǔ)（課程）項(xiàng)目三網(wǎng)店裝修網(wǎng)店首頁設(shè)計(jì)與裝修第七講一、復(fù)習(xí)次課內(nèi)容1.網(wǎng)店信息應(yīng)從哪些方面定位？2.PC端網(wǎng)店裝修基礎(chǔ)有哪些？3.移動(dòng)端網(wǎng)店裝修注意事項(xiàng)？4.移動(dòng)端頁面基礎(chǔ)設(shè)置有哪些？5.移動(dòng)端網(wǎng)店裝修常用模塊有哪些？應(yīng)如何管理移動(dòng)端模塊？小測驗(yàn)1.中國最大的第三方品牌及零售平臺(tái)是（

）。A.淘寶

B.天貓

C.拼多多

D.京東2.根據(jù)業(yè)務(wù)范圍不同，B2B電子商務(wù)平臺(tái)可劃分為綜合性B2B和垂直型B2B，以下屬于垂直型B2B平臺(tái)的是（）。3.淘寶網(wǎng)個(gè)人開店要求年滿（）周歲。A.18B.12C.16D.20A.中國化工網(wǎng)

B.聰網(wǎng)

C.阿里巴巴

D.環(huán)球資源網(wǎng)4.商品定價(jià)要考慮的因素有（）。A.商品款式劃分B.動(dòng)因素C.商品成本因素D.市場競爭5.針對拼購兼社交渠道“玩家”的京喜平臺(tái)，店鋪類型有三種，分別是（）。A.專賣店B.專營店C.自營店D.旗艦店小測驗(yàn)1.中國最大的第三方品牌及零售平臺(tái)是（B）。A.淘寶

B.天貓

C.拼多多

D.京東2.根據(jù)業(yè)務(wù)范圍不同，B2B電子商務(wù)平臺(tái)可劃分為綜合性B2B和垂直型B2B，以下屬于垂直型B2B平臺(tái)的是（A）。3.淘寶網(wǎng)個(gè)人開店要求年滿（C）周歲。A.18B.12C.16D.20A.中國化工網(wǎng)

B.聰網(wǎng)

C.阿里巴巴

D.環(huán)球資源網(wǎng)4.商品定價(jià)要考慮的因素有（ABCD）。A.商品款式劃分B.動(dòng)因素C.商品成本因素D.市場競爭5.針對拼購兼社交渠道“玩家”的京喜平臺(tái)，店鋪類型有三種，分別是（ABD）。A.專賣店B.專營店C.自營店D.旗艦店網(wǎng)店首頁的布局1.網(wǎng)店首頁應(yīng)如何布局？2.網(wǎng)店首頁的設(shè)計(jì)方法有哪些？3.網(wǎng)店首頁的設(shè)計(jì)過程有哪幾步？4.什么是店標(biāo)（Logo）？店標(biāo)展現(xiàn)位置一般放在哪里？5.店標(biāo)展現(xiàn)形式有哪幾種？店標(biāo)設(shè)計(jì)原則有哪些？6.什么是Banner？Banner的作用有哪些？7.Banner設(shè)計(jì)要點(diǎn)有哪些？Banner排版布局有哪幾種？Banner視覺文案設(shè)計(jì)有哪幾種？8.高點(diǎn)擊率主圖的呈現(xiàn)特點(diǎn)有哪些？高點(diǎn)擊率主圖優(yōu)化注意事項(xiàng)有哪些？高點(diǎn)擊率主圖的構(gòu)圖方法有哪些？一、網(wǎng)店首頁的布局

一網(wǎng)店首頁的布局網(wǎng)店首頁的布局可根據(jù)產(chǎn)品和營銷不斷變化，同一個(gè)網(wǎng)店在不同的節(jié)日也會(huì)設(shè)計(jì)不同的布局。如2021年雙11期間樸西天貓旗艦店的首頁，整體采用小清新顏色體系，布局了店招、海報(bào)、優(yōu)惠活動(dòng)、商品列表、分類、頁尾模塊。二、網(wǎng)店首頁的設(shè)計(jì)方法

二網(wǎng)店首頁的設(shè)計(jì)方法首先采用Photoshop軟件對首頁整體完成商品圖片效果設(shè)計(jì)后，用切片工具按模塊切開，利用“文件->導(dǎo)出->存儲(chǔ)為web格式”功能，保存格式為“僅限圖像”后生成一個(gè)名為images的文件夾，把images里面的圖片上傳到圖片空間。打開千牛賣家后臺(tái)的店鋪裝修里進(jìn)行模板拼接設(shè)置上傳。這種方法優(yōu)點(diǎn)是在Photoshop中進(jìn)行整體設(shè)計(jì)，整個(gè)首頁風(fēng)格統(tǒng)一拼接精確。1.采用Photoshop設(shè)計(jì)二網(wǎng)店首頁的設(shè)計(jì)方法首先采用Photoshop軟件對首頁整體完成商品圖片效果設(shè)計(jì)后，用切片工具按模塊切開，利用文件菜單中的“存儲(chǔ)為web格式”功能，保存格式為“HTML和圖像”后生成一個(gè)名為images的文件夾和一個(gè)網(wǎng)頁，把images里面的圖片上傳到圖片空間。

其次將生成的網(wǎng)頁在Dreamweaver軟件打開，分別給不同的切片加上商品的連接，商品鏈接可從淘寶圖片空間獲取對應(yīng)的圖片的地址連接，完成以后直接復(fù)制代碼，在千牛平臺(tái)的店鋪裝修里進(jìn)行模板拼接設(shè)置上傳，將代碼粘貼到網(wǎng)店首頁模塊的源代碼中即可。

2.采用Photoshop編輯和Dreamweaver代碼組合設(shè)計(jì)二網(wǎng)店首頁的設(shè)計(jì)方法采用Photoshop中進(jìn)行商品圖片處理后，將圖片上傳到圖片空間，在千牛平臺(tái)的店鋪裝修里裝修市場中提供了大量的設(shè)計(jì)模板可以選擇使用，根據(jù)模板靈活拼接設(shè)置上傳，圖片和鏈接都在網(wǎng)站在線完成。利用這種方法缺點(diǎn)是裝修模板需要按月付費(fèi)，優(yōu)點(diǎn)是操作簡單，有很多現(xiàn)成的模板可以套用。

3.采用Photoshop編輯和裝修市場模板組合設(shè)計(jì)三、網(wǎng)店首頁的設(shè)計(jì)過程

三網(wǎng)店首頁的設(shè)計(jì)過程網(wǎng)店首頁整體效果設(shè)計(jì)1在Photoshop軟件中進(jìn)行首頁的設(shè)計(jì),注意各模塊要按淘寶店鋪裝修尺寸設(shè)計(jì),考慮到賣家端不同的屏幕尺寸,請盡量將核心內(nèi)容放在圖片居中的區(qū)間內(nèi),店招、海報(bào)產(chǎn)品、商品要放置在頁面中間950px范圍內(nèi)。三網(wǎng)店首頁的設(shè)計(jì)過程網(wǎng)店首頁整體效果設(shè)計(jì)1應(yīng)用參考線工具和切片工具,對效果圖進(jìn)行多次切片,最終成形多個(gè)切片圖,如圖，將切片后的圖片上傳到圖片空間。三網(wǎng)店首頁的設(shè)計(jì)過程店鋪后臺(tái)模塊上傳2打開千牛后臺(tái),進(jìn)入店鋪裝修,選擇PC店鋪裝修中的首頁,點(diǎn)擊裝修頁面,在模塊列表中選擇布局管理功能,通過拖動(dòng)左側(cè)模塊,將頁面布局和首頁相匹配,其中全屏海報(bào)用到的是全屏寬圖模塊、小海報(bào)用到的是圖片輪播模塊,商品展示都用自定義內(nèi)容區(qū)模塊。三網(wǎng)店首頁的設(shè)計(jì)過程店鋪后臺(tái)模塊上傳2進(jìn)入圖片空間,找到店招圖片下方的復(fù)制鏈接按鈕,將圖片在淘寶平臺(tái)的存儲(chǔ)地址粘貼到剪貼板,轉(zhuǎn)換到店鋪裝修的頁面編輯頁面,選擇店招模塊的編輯功能,選擇自定義招牌選項(xiàng),點(diǎn)擊插入圖片按鈕,在彈出的圖片頁面中,將從圖片空間選擇圖片,確定后即完成店招設(shè)置。（1）網(wǎng)店首頁店招設(shè)置三網(wǎng)店首頁的設(shè)計(jì)過程店鋪后臺(tái)模塊上傳2選擇頁頭模塊,將頁頭背景圖更換,選擇橫向平鋪,使店招兩邊顏色和店招統(tǒng)一。選擇頁面模塊,將頁面背景色設(shè)置為#003663，并將顯示功能打勾。（2）網(wǎng)店首頁頁頭設(shè)置三網(wǎng)店首頁的設(shè)計(jì)過程店鋪后臺(tái)模塊上傳2全屏海報(bào)需使用全屏寬圖模塊實(shí)現(xiàn)。點(diǎn)擊全屏寬圖模塊右上角的編輯按鈕,在彈出的對話框中,選擇所需的圖片地址和鏈接地址,注意圖片寬要大于1920像素。（3）全屏海報(bào)設(shè)置三網(wǎng)店首頁的設(shè)計(jì)過程店鋪后臺(tái)模塊上傳2在自定義區(qū)編輯頁面中選擇插入表格按鈕,在彈出的頁面中設(shè)置相應(yīng)的行、列、寬度、邊框等參數(shù)，利用表格作為圖片的容器。將光標(biāo)定位在單元格內(nèi),選擇圖片按鈕,插入相應(yīng)的圖片,并設(shè)置相應(yīng)的圖片地址和鏈接地址,注意自定義區(qū)的顯示標(biāo)題設(shè)置為不顯示。（4）商品展示模塊設(shè)置四、店標(biāo)（Logo）設(shè)計(jì)店標(biāo)展現(xiàn)位置1店標(biāo)（Logo）設(shè)計(jì)店鋪Logo是識(shí)別店鋪的標(biāo)志，把店鋪的形象與概念轉(zhuǎn)化為視覺印象。代表店鋪的風(fēng)格、品位，起到宣傳的作用。要能夠配合市場對消費(fèi)者進(jìn)行適當(dāng)?shù)囊曈X刺激和吸引，更加人性化，更有針對性。華為Logo雷士照明Logo小米Logo店標(biāo)（Logo）設(shè)計(jì)——店標(biāo)展現(xiàn)位置PC端店鋪店招PC端店鋪搜索頁店標(biāo)（Logo）設(shè)計(jì)——店標(biāo)展現(xiàn)位置移動(dòng)端店鋪首頁移動(dòng)端店鋪搜索頁店標(biāo)展現(xiàn)形式2店標(biāo)（Logo）設(shè)計(jì)——店標(biāo)展現(xiàn)形式純文字Logo純圖形Logo圖文結(jié)合Logo店標(biāo)設(shè)計(jì)原則3店標(biāo)（Logo）設(shè)計(jì)——店標(biāo)設(shè)計(jì)原則原創(chuàng)性統(tǒng)一性與店鋪風(fēng)格一致目標(biāo)顧客群界定清晰產(chǎn)品和標(biāo)志具備統(tǒng)一性適合網(wǎng)店風(fēng)格清晰度高素材無版權(quán)糾紛店標(biāo)（Logo）設(shè)計(jì)——店標(biāo)設(shè)計(jì)原則易識(shí)別性合法性符合《電子商務(wù)法》符合新《廣告法》遵守法律法規(guī)簡單且易識(shí)別保持視覺平衡講究線條流暢五、Banner設(shè)計(jì)Banner概述1認(rèn)識(shí)BannerBanner指的是網(wǎng)店頁面的橫幅廣告，也是店鋪風(fēng)格最直觀的展現(xiàn)位置，對于營造氛圍起著巨大的作用。淘寶、速賣通店鋪中的首頁焦點(diǎn)輪播圖、促銷海報(bào)、商品推薦和商品焦點(diǎn)圖采用的都是Banner的形式。因?yàn)橛猛緩V泛，所以Banner成為了網(wǎng)店產(chǎn)品信息傳播的最主要途徑之一，也是店鋪吸引流量和提高轉(zhuǎn)化率的重要工具。Banner的作用第一視覺：吸引

第二視覺：告訴受眾“這是什么”第三視覺：怎么找我Banner設(shè)計(jì)要點(diǎn)2Banner設(shè)計(jì)要點(diǎn)圖像清晰風(fēng)格統(tǒng)一定位精準(zhǔn)主題明確首先要根據(jù)推廣目的確定主題，推廣的目的不同，Banner的表現(xiàn)形式也就不同網(wǎng)店裝修的所有元素都要服務(wù)于頁面的整體視覺風(fēng)格，配色和字體也要遵守視覺識(shí)別規(guī)范主要是對于消費(fèi)群體和價(jià)格的定位有關(guān)視覺設(shè)計(jì)的一切圖片質(zhì)量都必須保證是高品質(zhì)的Banner排版布局3Banner排版布局采用左圖右文或右圖左文的兩欄結(jié)構(gòu)進(jìn)行布局。布局方式結(jié)構(gòu)穩(wěn)重、平衡，商品展示與文案宣傳并重，容易讓瀏覽者產(chǎn)生視覺焦點(diǎn)，界面效果強(qiáng)烈且突出兩欄結(jié)構(gòu)上下結(jié)構(gòu)屬于兩欄結(jié)構(gòu)布局的一種，這種布局方式結(jié)構(gòu)穩(wěn)定，而且可以形成一個(gè)明確的視覺焦點(diǎn)，比較容易突出主題上下結(jié)構(gòu)Banner排版布局更具層次感，服飾、鞋包類需要模特展示的商品適合使用三欄式結(jié)構(gòu)，這種布局方式通常是將文案放在中間，用一側(cè)的近景模特與另一側(cè)的遠(yuǎn)景模特產(chǎn)生對比和呼應(yīng)三欄結(jié)構(gòu)組合式結(jié)構(gòu)是常規(guī)三欄結(jié)構(gòu)的一種變化，這種布局方式減少了文案的占用面積，用更多的篇幅展示商品，相對來說，更適合用于促銷活動(dòng)海報(bào)組合結(jié)構(gòu)Banner排版布局傾斜結(jié)構(gòu)斜切結(jié)構(gòu)的布局會(huì)讓畫面顯得時(shí)尚且具有動(dòng)感。有的時(shí)候我們需要讓畫面平衡，而其他一些時(shí)候我們需要破壞平衡來吸引消費(fèi)者的注意Banner視覺文案設(shè)計(jì)4Banner視覺文案設(shè)計(jì)一張優(yōu)秀的Banner需要一個(gè)出色的標(biāo)題，如果主標(biāo)題不能吸引消費(fèi)者的眼球，消費(fèi)者就會(huì)失去繼續(xù)訪問頁面的意愿，從而離開頁面，增加店鋪的跳失率標(biāo)題抓住商品鮮明的特點(diǎn)，置于廣告畫面的主要視覺部位，使消費(fèi)者在接觸畫面的瞬間立即感受到其獨(dú)特性，引起消費(fèi)者的視覺興趣，達(dá)到刺激消費(fèi)者購買欲望的目的文案創(chuàng)意Banner視覺文案設(shè)計(jì)網(wǎng)店Banner往往占據(jù)網(wǎng)店的核心位置，為了吸引消費(fèi)者的注意，通常會(huì)與社會(huì)流行的熱點(diǎn)話題、熱門影視劇等相聯(lián)系。熱點(diǎn)話題高點(diǎn)擊率主圖的呈現(xiàn)特點(diǎn)六、高點(diǎn)擊率主圖的構(gòu)圖技巧高點(diǎn)擊率主圖優(yōu)化注意事項(xiàng)高點(diǎn)擊率主圖的構(gòu)圖技巧

2

1

3知識(shí)目標(biāo)了解高點(diǎn)擊率主圖的重要性；了解高點(diǎn)擊率主圖的優(yōu)化注意事項(xiàng)；能力目標(biāo)掌握高點(diǎn)擊率主圖的特點(diǎn)；掌握高點(diǎn)擊率主圖的構(gòu)圖技巧；高點(diǎn)擊率主圖的呈現(xiàn)特點(diǎn)

一高點(diǎn)擊率主圖的呈現(xiàn)特點(diǎn)這種圖只呈現(xiàn)商品完整外觀、細(xì)節(jié)或者附帶一些贈(zèng)品等，以商品本身為主體。能快速引起買家的注意，讓買家直觀的看到商品款式，顏色，賣相等信息，適用于買家對于外觀有追求的類目，比如服飾，首飾、玩具等類目。1.以商品本身為主體，呈現(xiàn)商品屬性一高點(diǎn)擊率主圖的呈現(xiàn)特點(diǎn)這種圖不僅會(huì)呈現(xiàn)商品本身，還會(huì)出現(xiàn)環(huán)境的圖片信息，來配合商品本身。把商品放在具體的使用場景中，能夠讓買家產(chǎn)生聯(lián)想，拉進(jìn)買家與商品的距離，刺激買家進(jìn)行點(diǎn)擊，比如家居用品、母嬰用品等。2.通過環(huán)境配合，呈現(xiàn)商品使用場景一高點(diǎn)擊率主圖的呈現(xiàn)特點(diǎn)這種圖會(huì)展示商品使用后的效果圖或?qū)Ρ葓D等，突出商品的功效、特性、賣點(diǎn)，引起買家心里共鳴，激起買家購買欲望。如為了展現(xiàn)置物架的承重特性，圖片設(shè)計(jì)成好幾個(gè)成年人趴在上面；瓷磚清潔劑圖片的設(shè)計(jì)讓買家能夠感受到迅速的去污功效。3.通過效果展示，凸顯商品功能或特性一高點(diǎn)擊率主圖的呈現(xiàn)特點(diǎn)圖片設(shè)計(jì)成通過展示買家秀或者買家的好評，提升顧客對產(chǎn)品的使用信心；或者設(shè)計(jì)成明星代言，吸引買家的注意，引導(dǎo)買家進(jìn)行點(diǎn)擊。4.通過使用者的評價(jià)，提升買家對商品的信任度高點(diǎn)擊率主圖優(yōu)化注意事項(xiàng)

二高點(diǎn)擊率主圖優(yōu)化注意事項(xiàng)大多數(shù)顧客都會(huì)被高質(zhì)量的圖片吸引，進(jìn)而點(diǎn)擊并且進(jìn)入店鋪瀏覽并購買，因此主圖一定要清晰和精美。1.主圖的質(zhì)量一定要高2.主圖中要體現(xiàn)出商品關(guān)鍵信息主圖的作用不僅僅只是美觀，更多的是在于體現(xiàn)出商品關(guān)鍵信息，即商品的主要關(guān)鍵詞（進(jìn)店流量最大的關(guān)鍵詞），它直接影響主圖的點(diǎn)擊率。二高點(diǎn)擊率主圖優(yōu)化注意事項(xiàng)

主圖上面覆蓋大量的文字，使得產(chǎn)品變得很難識(shí)別，而且整幅圖看起來雜亂不堪，就像墻上貼滿了小廣告，這類主圖形式就被稱之為牛皮癬主圖。3.拒絕牛皮癬主圖高點(diǎn)擊率主圖的構(gòu)圖技巧

三高點(diǎn)擊率主圖的構(gòu)圖技巧左右構(gòu)圖法1

左右構(gòu)圖是文字與圖片相結(jié)合的一種方式，一般文字放在左側(cè)，圖片放在右側(cè)，文字與圖片的比例為1：2。這種構(gòu)圖方法的優(yōu)點(diǎn)是賣