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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

店招：

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

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

寶貝分類導(dǎo)航

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

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

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

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

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

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

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

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

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

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

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