3-3 網(wǎng)店規(guī)劃與設(shè)計(jì)

網(wǎng)店運(yùn)營(yíng)與管理第二講網(wǎng)店的設(shè)計(jì)主講：劉崇巍教學(xué)目標(biāo)知識(shí)目標(biāo)：能力目標(biāo)：素養(yǎng)目標(biāo)：2.能合理規(guī)劃、設(shè)計(jì)網(wǎng)店。3.體會(huì)網(wǎng)店裝修中的審美藝術(shù)。1.掌握網(wǎng)店規(guī)劃、設(shè)計(jì)要領(lǐng)。主要內(nèi)容任務(wù)1網(wǎng)店系統(tǒng)框架——網(wǎng)店的設(shè)計(jì)規(guī)劃方案任務(wù)1網(wǎng)店系統(tǒng)框架——網(wǎng)店首頁(yè)設(shè)計(jì)任務(wù)2網(wǎng)店的裝修——專題設(shè)計(jì)任務(wù)2網(wǎng)店的裝修——店招設(shè)計(jì)

任務(wù)2網(wǎng)店的裝修——導(dǎo)航設(shè)計(jì)任務(wù)2網(wǎng)店的裝修——首屏櫥窗設(shè)計(jì)任務(wù)2網(wǎng)店的裝修——主圖設(shè)計(jì)任務(wù)2網(wǎng)店的裝修——詳情頁(yè)設(shè)計(jì)

1.網(wǎng)店首頁(yè)構(gòu)成（1）店招（2）導(dǎo)航（3）主圖（4）首屏櫥窗（5）專題（6）詳情頁(yè)一、網(wǎng)店首頁(yè)二、網(wǎng)店首頁(yè)案例—三只松鼠網(wǎng)店首頁(yè)

1.網(wǎng)店欄目和頁(yè)面設(shè)計(jì)策劃（1）為什么要進(jìn)行策劃（2）網(wǎng)店的欄目策劃（3）網(wǎng)店的頁(yè)面策劃三、網(wǎng)店頁(yè)面元素與布局

1.網(wǎng)店欄目和頁(yè)面設(shè)計(jì)策劃（1）為什么要進(jìn)行策劃專業(yè)的網(wǎng)店策劃，可以帶來(lái)以下幾個(gè)好處：

三、網(wǎng)店頁(yè)面元素與布局①避免日后返工，提高運(yùn)營(yíng)效率很多網(wǎng)店店主不是IT行業(yè)人士，總是在不斷地修改網(wǎng)店頁(yè)面。所以，為了避免以后不停地返工修改網(wǎng)店頁(yè)面，事先對(duì)網(wǎng)店的各個(gè)環(huán)節(jié)進(jìn)行細(xì)致的策劃是非常重要的。

1.網(wǎng)店欄目和頁(yè)面設(shè)計(jì)策劃（1）為什么要進(jìn)行策劃

三、網(wǎng)店頁(yè)面元素與布局②避免重復(fù)燒錢(qián)，節(jié)約運(yùn)營(yíng)成本當(dāng)網(wǎng)店設(shè)計(jì)好之后，為什么總是沒(méi)有買(mǎi)家？即使花很多錢(qián)去推廣，到最后也沒(méi)有留住買(mǎi)家。那是因?yàn)榫W(wǎng)店的各個(gè)環(huán)節(jié)，尤其是用戶的體驗(yàn)環(huán)節(jié)定位出了問(wèn)題。所以店鋪?zhàn)龀鰜?lái)之后，總是無(wú)法留住買(mǎi)家。因此，如果想節(jié)省網(wǎng)店推廣的錢(qián)，那就仔細(xì)反省一下網(wǎng)店自身的定位，做好網(wǎng)店的策劃。

1.網(wǎng)店欄目和頁(yè)面設(shè)計(jì)策劃（1）為什么要進(jìn)行策劃

三、網(wǎng)店頁(yè)面元素與布局③避免投資浪費(fèi)，提高成功幾率在開(kāi)始網(wǎng)店之前，一定要做一次細(xì)致地策劃，如市場(chǎng)的考察、贏利模式的研究、網(wǎng)店的定位。只有進(jìn)行了專業(yè)的思考和策劃，才可以使投資人的錢(qián)不白花，避免投資浪費(fèi)。

1.網(wǎng)店欄目和頁(yè)面設(shè)計(jì)策劃（1）為什么要進(jìn)行策劃

三、網(wǎng)店頁(yè)面元素與布局④避免教訓(xùn)，成功運(yùn)營(yíng)策劃網(wǎng)店時(shí)，不但要策劃網(wǎng)店的具體內(nèi)容欄目，更多的時(shí)候要策劃網(wǎng)店的市場(chǎng)定位、運(yùn)營(yíng)模式、運(yùn)營(yíng)成本等重要的運(yùn)用環(huán)節(jié)。2.網(wǎng)店的欄目策劃網(wǎng)店欄目策劃的重要性常被忽略。其實(shí)。網(wǎng)店欄目策劃對(duì)于網(wǎng)店的成敗有著非常直接的關(guān)系，網(wǎng)店欄目兼具以下兩個(gè)功能，二者缺一不可。三、網(wǎng)店頁(yè)面元素與布局①提綱摯領(lǐng)，點(diǎn)題明義

所謂的“提綱”就是網(wǎng)店的欄目。而網(wǎng)店欄目的規(guī)劃，其實(shí)就是對(duì)網(wǎng)店內(nèi)容的高度提煉。用最簡(jiǎn)練的語(yǔ)言提煉出網(wǎng)店中每一個(gè)部分的內(nèi)容，清晰地告訴買(mǎi)家有哪些信息和功能。2.網(wǎng)店的欄目策劃網(wǎng)店欄目策劃的重要性常被忽略。其實(shí)。網(wǎng)店欄目策劃對(duì)于網(wǎng)店的成敗有著非常直接的關(guān)系，網(wǎng)店欄目兼具以下兩個(gè)功能，二者缺一不可。三、網(wǎng)店頁(yè)面元素與布局②指引迷途，清晰導(dǎo)航除了“提綱”的作用之外，網(wǎng)店欄目還應(yīng)該為瀏覽者提供清晰直觀的指引，幫助買(mǎi)家方便地找到所需的商品。網(wǎng)店欄目的導(dǎo)航作用，通常包括以下兩種情況：2.網(wǎng)店的欄目策劃網(wǎng)店欄目策劃的重要性常被忽略。其實(shí)。網(wǎng)店欄目策劃對(duì)于網(wǎng)店的成敗有著非常直接的關(guān)系，網(wǎng)店欄目兼具以下兩個(gè)功能，二者缺一不可。三、網(wǎng)店頁(yè)面元素與布局②指引迷途，清晰導(dǎo)航除了“提綱”的作用之外，網(wǎng)店欄目還應(yīng)該為瀏覽者提供清晰直觀的指引，幫助買(mǎi)家方便地找到所需的商品。網(wǎng)店欄目的導(dǎo)航作用，通常包括以下兩種情況：

（a）頂部導(dǎo)航

它可以幫助買(mǎi)家快速找到所需欄目。通常來(lái)說(shuō)，頂部導(dǎo)航的位置是固定的，以減少瀏覽者查找的時(shí)間。（b）產(chǎn)品欄目導(dǎo)航

一般產(chǎn)品欄目導(dǎo)航在頁(yè)面的左側(cè)，也就是寶貝分類。產(chǎn)品分類越清晰越好，通過(guò)單擊分類可以快速找到相應(yīng)的產(chǎn)品信息。

3、網(wǎng)店的頁(yè)面策劃

網(wǎng)店頁(yè)面是網(wǎng)店銷(xiāo)售商品的最終表現(xiàn)層，也是買(mǎi)家訪問(wèn)網(wǎng)店的直接接觸層。對(duì)于頁(yè)面設(shè)計(jì)的評(píng)估，最有發(fā)言權(quán)的是網(wǎng)店的買(mǎi)家，好的網(wǎng)店策劃者要善于從買(mǎi)家的瀏覽行為中捕捉買(mǎi)家的意見(jiàn)。

網(wǎng)店策劃者在做頁(yè)面策劃時(shí)應(yīng)該遵循以下原則（a）符合客戶心理的網(wǎng)店特點(diǎn)及行業(yè)屬性

在買(mǎi)家打開(kāi)頁(yè)面的第一瞬間，讓買(mǎi)家直觀地感受到網(wǎng)店所要傳遞的理念及特征。如頁(yè)面色彩、圖片、布局等。（b）符合買(mǎi)家的瀏覽習(xí)慣

根據(jù)頁(yè)面內(nèi)容的重要性進(jìn)行排序，讓買(mǎi)家用最少的光標(biāo)移動(dòng)，找到所需信息。（c）符合買(mǎi)家的使用習(xí)慣根據(jù)網(wǎng)絡(luò)買(mǎi)家的習(xí)慣，將店鋪?zhàn)钣刑厣纳唐贩胖糜谛涯康奈恢?，便于買(mǎi)家的查找及實(shí)用。（d）圖文搭配，重點(diǎn)突出買(mǎi)家對(duì)圖片的認(rèn)知程度遠(yuǎn)高于對(duì)文字的認(rèn)知程度，適當(dāng)?shù)厥褂脠D片可以提高買(mǎi)家的關(guān)注度。此外，確立頁(yè)面的視覺(jué)焦點(diǎn)也很重要，過(guò)多的干擾元素會(huì)讓買(mǎi)家不知所措。（e）利用搜索引擎優(yōu)化減少Flash和大圖片的使用，過(guò)多文字描述，以便搜索引擎更容易收錄網(wǎng)店，讓買(mǎi)家更容易找到所需商品。（一）網(wǎng)店布局的基本元素在一個(gè)完整的淘寶旺鋪中，網(wǎng)店頁(yè)面通常包括的元素有：店招、公告、促銷(xiāo)欄、寶貝分類導(dǎo)航、寶貝展示區(qū)、寶貝描述、計(jì)數(shù)器、歡迎歡送、聯(lián)系方式等。

店招：

顧名思義，店招是一個(gè)店鋪的招牌。對(duì)于網(wǎng)店的店招來(lái)說(shuō)，必須是放在店鋪的最上方，用來(lái)說(shuō)明經(jīng)營(yíng)項(xiàng)目，是招攬顧客的牌子。店招首先應(yīng)說(shuō)明店鋪是經(jīng)營(yíng)什么的，有什么特色使顧客必須在這里停留，同時(shí)還要注意店招太小，不能做短了，否則會(huì)顯示得既不專業(yè)又不協(xié)調(diào)。

公告欄它是每家店鋪必備的欄目。是用來(lái)向買(mǎi)家展示自己店鋪里有什么新品、新優(yōu)惠政策的絕佳平臺(tái)，同時(shí)也是買(mǎi)家獲取店鋪信息的重要渠道。促銷(xiāo)欄促銷(xiāo)欄的長(zhǎng)度一般是750像素左右，高度沒(méi)有限制，這里比店招有更重要的廣告價(jià)值。促銷(xiāo)欄通常越大越好，但高度不能太高，其中的內(nèi)容要有動(dòng)感，給顧客一種像在看電視的感覺(jué)，內(nèi)容也不要過(guò)于單一。動(dòng)態(tài)的內(nèi)容最好置于整個(gè)促銷(xiāo)欄的左上方，因?yàn)檫@里正處在顧客視野的正中央，最容易引起注意。

寶貝分類導(dǎo)航

這也是每個(gè)店鋪都有的。在建立目錄時(shí)應(yīng)遵循一些原則，比如說(shuō)按照字母順序來(lái)排列產(chǎn)品分類，并在頂上加以注解，這樣就會(huì)更人性化，節(jié)省顧客搜尋所需寶貝的時(shí)間。店鋪類目的裝修是重中之重。在店鋪類目中，不僅可以很方便地利用各種圖片來(lái)展示商品分類，還可以通過(guò)圖片及圖片上的文字來(lái)表達(dá)的任何內(nèi)容。注：店鋪分類的顏色、圖案和文字最好與店招有一定的呼應(yīng)，這樣在整體上會(huì)有一種連續(xù)性和協(xié)調(diào)感。寶貝描述

該內(nèi)容是在買(mǎi)家對(duì)產(chǎn)品有興趣之后，點(diǎn)擊進(jìn)入后看到的頁(yè)面。這里對(duì)大家來(lái)說(shuō)可操作的內(nèi)容是最多的，需要注意的是要使描述具有層次性，條理清楚，各個(gè)部分經(jīng)歷獨(dú)立。計(jì)數(shù)器

計(jì)數(shù)器不是必備的，但是，它能使賣(mài)家更好地揣摩買(mǎi)家的心思。如果店鋪人氣很高，買(mǎi)家看到他中意的東西之后又看到人氣這么旺，肯定是保質(zhì)保量，并且售后可能也不會(huì)很差，于是就留下一個(gè)很好的印象，非常有利于成交。注：通?？梢蕴砑佑?jì)數(shù)器的地方：公告欄、分類導(dǎo)航欄、描述模板。聯(lián)系方式

對(duì)于旺鋪來(lái)說(shuō)，聯(lián)系方式最好放在促銷(xiāo)模板的右下角，因?yàn)槿藗兊牧?xí)慣通常都是把署名、聯(lián)系方式、日期等放在右下角。在描述模板的頂端或底端也都可以添加聯(lián)系方式。對(duì)于普通店鋪來(lái)說(shuō)，聯(lián)系方式可以放在公告欄或者分類的頂端。（二）網(wǎng)店版面布局設(shè)計(jì)網(wǎng)店頁(yè)面設(shè)計(jì)要講究編排和布局，雖然網(wǎng)店頁(yè)面設(shè)計(jì)不同于平面設(shè)計(jì)，但它們有許多相近之處，應(yīng)加以利用和借鑒。為了達(dá)到最佳的視覺(jué)效果，應(yīng)講究整體布局的合理性，使瀏覽者有一個(gè)流暢的視覺(jué)體驗(yàn)。版面布局設(shè)計(jì)原則a主次分明，中心突出在一個(gè)頁(yè)面上，必須考慮視覺(jué)的中心，這個(gè)中心一般在屏幕的中央，或者在中間偏上的部位。因此，一些重要的商品一般可以安排在這個(gè)部位，在視覺(jué)中心以外的地方就可以安排那些稍微次要的內(nèi)容，這樣在頁(yè)面上就突出了重點(diǎn)，做到主次有別。b大小搭配、喜歡呼應(yīng)對(duì)待商品展示的多個(gè)圖片的安排要互相錯(cuò)開(kāi)，使大小圖像之間有一定的間隔，這樣可以使頁(yè)面錯(cuò)落有致，避免重心偏離。c頁(yè)面布局時(shí)的一些元素格式美觀的正文、和諧的色彩搭配、較好的對(duì)比度、具有較強(qiáng)可讀性的文字、生動(dòng)的背景圖案、大小適中的頁(yè)面元素、布局勻稱、不同元素之間有足夠空白、各元素之間保持平衡、文字準(zhǔn)確無(wú)誤、無(wú)錯(cuò)別字、無(wú)拼寫(xiě)錯(cuò)誤。d文本和背景的色彩考慮到大多數(shù)人使用256色顯示模式，因此一個(gè)頁(yè)面顯示的顏色不宜過(guò)多，主題顏色通常只需要2~3種，并采用一種標(biāo)準(zhǔn)色。e簡(jiǎn)潔一致性保持簡(jiǎn)潔的常用做法是使用醒目的標(biāo)題，這個(gè)標(biāo)題常常采用圖形表示，但圖形同樣要求簡(jiǎn)潔，另一種保持簡(jiǎn)潔的做法是限制所用字體和顏色的數(shù)目。要保持一致性，各個(gè)頁(yè)面文本、主要圖形、標(biāo)題或符號(hào)旁邊留下相同的空白。網(wǎng)店頁(yè)面內(nèi)容的排版頁(yè)面上文本的排版：一般文本的排版整體性好，瀏覽起來(lái)通暢而絲毫沒(méi)有阻礙，理解內(nèi)容更加容易。文字的大小應(yīng)該適中，如果太大瀏覽起來(lái)增加翻頁(yè)的難度，太小看起來(lái)太累。因此這是很值得每一個(gè)設(shè)計(jì)者慎重考慮的。用色一般區(qū)別于主體的顏色，它可以起到強(qiáng)調(diào)作用，但凡事都是過(guò)猶不及，一個(gè)整體的文字內(nèi)容里用的顏色太多，勢(shì)必會(huì)影響讀者的理解，也會(huì)影響使用心情，導(dǎo)致厭倦情緒。文本的排版頁(yè)面上圖片的排版圖片在網(wǎng)頁(yè)設(shè)是計(jì)中也占據(jù)很重要的地位，由于圖片的加入使網(wǎng)店頁(yè)面更加豐富多彩，所以用好圖片是非常重要的。幾個(gè)值得注意的：圖片不能太大，受寬帶的限制，人們是很難忍受等待之苦的，這就要求把圖片的體積縮小，同時(shí)又要使圖片盡量清楚、直觀，最大限度地發(fā)揮它的作用；另外圖片的排布也很講究，特別是多圖的情況下，既要使圖片與圖片之間有聯(lián)系，同時(shí)又要融為一個(gè)整體，使看起來(lái)有條理。如圖三、網(wǎng)店內(nèi)容與功能模塊設(shè)計(jì)

1.網(wǎng)店定位——網(wǎng)站功能定位四、網(wǎng)店的規(guī)劃與設(shè)計(jì)(1)產(chǎn)品介紹(2)信息發(fā)布(3)客戶服務(wù)(4)在線銷(xiāo)售(5)網(wǎng)上調(diào)研(6)網(wǎng)絡(luò)推廣(7)業(yè)務(wù)管理

2.網(wǎng)店結(jié)構(gòu)與功能設(shè)計(jì)四、網(wǎng)店的規(guī)劃與設(shè)計(jì)(1)信息發(fā)布(2)產(chǎn)品管理(3)訂單管理(4)會(huì)員管理(5)郵件列表(6)論壇管理(7)在線服務(wù)(8)站內(nèi)檢索(9)流量統(tǒng)計(jì)

3.企業(yè)網(wǎng)店形象設(shè)計(jì)四、網(wǎng)店的規(guī)劃與設(shè)計(jì)（1）域名設(shè)計(jì)（2）LOGO設(shè)計(jì)（3）網(wǎng)站風(fēng)格設(shè)計(jì)①LOGO②色彩③字體④圖片⑤符號(hào)、線條、圖標(biāo)、版面布局、

瀏覽方式、內(nèi)容等方面的統(tǒng)一

4.企業(yè)網(wǎng)店在線服務(wù)四、網(wǎng)店的規(guī)劃與設(shè)計(jì)五、網(wǎng)絡(luò)書(shū)店的商品分類建設(shè)1.產(chǎn)品分類

產(chǎn)品分類是電子商務(wù)網(wǎng)站的邏輯思路的體現(xiàn)，關(guān)乎到后期商品上架，也便于消費(fèi)者查詢，起到的是索引作用。五、網(wǎng)絡(luò)書(shū)店的商品分類建設(shè)1.產(chǎn)品分類—電子商務(wù)書(shū)店產(chǎn)品分類五、網(wǎng)絡(luò)書(shū)店的商品分類建設(shè)1.產(chǎn)品分類—電子商務(wù)書(shū)店產(chǎn)品分類五、網(wǎng)絡(luò)書(shū)店的商品分類建設(shè)2.為自己的網(wǎng)絡(luò)書(shū)店設(shè)計(jì)產(chǎn)品分類五、網(wǎng)絡(luò)書(shū)店的商品分類建設(shè)2.為自己的網(wǎng)絡(luò)書(shū)店設(shè)計(jì)產(chǎn)品分類一級(jí)分類與二級(jí)分類

五、網(wǎng)絡(luò)書(shū)店的商品分類建設(shè)3.任務(wù)按照所學(xué)和分析，根據(jù)自己網(wǎng)絡(luò)書(shū)店的定位與規(guī)劃，設(shè)置產(chǎn)品分類。六、案例1：辦公用品專營(yíng)店裝修方案1.辦公用品專營(yíng)店裝修方案總覽2.裝修設(shè)計(jì)原則3.主體風(fēng)格設(shè)計(jì)4.裝修分頁(yè)面設(shè)計(jì)