淘寶店鋪裝修，是致力于淘寶鋪裝修的網(wǎng)站。淘寶店鋪裝修與實(shí)體店的裝修是一個(gè)意思，都是讓店鋪?zhàn)兊母?，更吸引人。對于淘寶店鋪來講，一個(gè)好的店鋪設(shè)計(jì)更為至關(guān)重要，而首頁則是頁面中的重中之重。一個(gè)好的首頁，能清晰地展示推廣寶貝，還能為客戶帶來美的享受，從而增加客戶的信任感，還能樹立起店鋪品牌形象，為店鋪推廣打下堅(jiān)實(shí)的基礎(chǔ)。下面，讓我們來了解下首頁裝修吧。
一． 首頁裝修基礎(chǔ)
1.在我們裝修店鋪之前，首先我們需要了解，我們的店鋪屬于什么版本。在2012新旺鋪里，把旺鋪版本劃分為：基礎(chǔ)版，專業(yè)版和天貓版。其中基礎(chǔ)版與專業(yè)版是為集市店用戶提供的，基礎(chǔ)版可修改的內(nèi)容與權(quán)限不大，店鋪?zhàn)兓艿较拗疲瑸槌跫壻u家簡易使用。專業(yè)版則能提供較大的自由裝修空間，足夠我們店鋪首頁風(fēng)格的實(shí)現(xiàn)。而天貓版則是為天貓店鋪提供，功能與專業(yè)版類似。
2.首頁的裝修有兩個(gè)方法：
1)一是從裝修市場直接購買裝修模板進(jìn)行裝修，比較簡易。但由于裝修模板是根據(jù)模板設(shè)計(jì)師自我感覺進(jìn)去制作，面向所有用戶。因此很難貼合自己店鋪理想中的風(fēng)格與效果，也會因?yàn)樵O(shè)計(jì)師模塊的特定效果，使得店鋪風(fēng)格與品牌形象不明顯，效果差強(qiáng)人意。
2)二是通過淘寶設(shè)計(jì)師為店鋪專門定制首頁，裝修過程相對會比較復(fù)雜。但整個(gè)首頁都會完全貼合店鋪，使店鋪風(fēng)格突出，樹立良好的品牌形象。而且寶貝擺放與排布更為自由，更能使風(fēng)格與推廣相輔相成。
二．首頁裝修的步驟
在設(shè)計(jì)師為我們設(shè)計(jì)好店鋪首頁以后，還需要把首頁裝修到我們的店鋪上去，才能達(dá)到向客戶展現(xiàn)的效果。以下，讓我們來了解一下首頁裝修的基本步驟吧。
1.布局劃分籌備工作
?。?）我們可以將首頁劃分成：店招，海報(bào)，產(chǎn)品寶貝，頁尾，四個(gè)部分。并通過PHOTOSHOP的切片工具劃分切片。我們可以使用輔助線進(jìn)行精準(zhǔn)的劃分。然后，通過“存儲為web所用格式”存儲，我們就得到了四部分獨(dú)立起來的圖片。如下圖：
?。?）我們整個(gè)首頁可分為主體部分和背景，主體部分的寬度根據(jù)店鋪性質(zhì)的不同而有著差異。一般來說，集市店的主體不可寬度為950像素，而天貓店則為990像素。在后續(xù)裝修中，我們都需要先將主體部分與背景劃分開來，將背景剪裁，留下主體部分，方便進(jìn)行裝修。
2.店招切片，上傳與拼接技巧
（1）劃分好模塊以后，我們先從店招開始裝修。通過剪裁，我們得到了店招的主體部分，店招大略可以分為兩部分：店鋪招牌和導(dǎo)航欄部分。導(dǎo)航欄是主要添加加鏈接的地方。我們可以按照加鏈接的需求，對店招進(jìn)行切片。如下圖：
（2）完成切片后，我們通過“存儲為web所用格式”進(jìn)行存儲，將格式選擇為“HTML和圖像”，我們就能得到各模塊獨(dú)立的圖片與一個(gè)HTML網(wǎng)頁文件了。
?。?）我們將切好的圖片通過上圖片空間，然后我們打開剛才的HTML文件，將店招圖片的地址按照順序替換成圖片空間的地址。將html代碼中的<table>至</table>復(fù)制到店鋪的店招上，并加上我們需要的鏈接。
?。?）完成第三步后，我們就得到了主體部分的店招了，但我們的店招是全屏1920像素的，該怎么辦呢？我們通過背景拼接達(dá)到1920像素的全屏效果。在新旺鋪中，店招背景圖片的大小限制為200K以內(nèi)，而1920*150像素的店招，只要我們稍微調(diào)節(jié)下圖片的質(zhì)量，基本上不會超過這個(gè)范圍，所以我們可以把整個(gè)店招的圖片直接當(dāng)作背景。
操作如下：進(jìn)入裝修界面，選擇裝修下拉菜單中的樣式管理
，然后點(diǎn)擊樣式編輯中的“背景設(shè)置” 
。
，然后點(diǎn)擊樣式編輯中的“背景設(shè)置” 。 在頁頭設(shè)置選項(xiàng)，將”要設(shè)置的頁面”選項(xiàng)設(shè)置為“所有頁面”，通過“更換圖片”選項(xiàng)將我們做好的店招背景更換上去，再將“背景顯示”選項(xiàng)設(shè)置為“不平鋪”，“背景對齊”選項(xiàng)設(shè)置為“居中”。最后，我們保存一下。我們就能得到1920像素的全屏店招了。具體設(shè)置參考下圖：
3.全屏海報(bào)的制作技巧
（1）完成店招之后，我們開始制作海報(bào)部分。海報(bào)是店鋪的眼睛，它能充分展現(xiàn)店鋪的品牌，風(fēng)格與大氣。而全屏海報(bào)更能充分的表現(xiàn)出這一特點(diǎn)。而制作全屏海報(bào)，我們同樣要先將海報(bào)劃分為主體部分與背景，將主體部分上傳到店鋪的自定義模塊，加上我們想要的鏈接。
（2）然后我們進(jìn)行至關(guān)重要的海報(bào)背景拼接。由于全屏海報(bào)的圖片會比較大，而背景圖片不能超過200K，所以在制作海報(bào)背景時(shí)，我們要先將主體部分的內(nèi)容刪除，如下圖：
原圖
海報(bào)主體
海報(bào)背景
?。?）由于我們用的背景是整個(gè)店鋪的背景。所以，我們需要考慮店招的高度，在事例中，我們店招的高度是150像素。所以，我們需要在海報(bào)背景圖片的上方加上150像素的留白，然后進(jìn)行保存，注意不要超出200K。效果如圖：
?。?）接下來，我們像之前制作店招一樣，進(jìn)行背景添加操作。操作如下：
進(jìn)入裝修界面，選擇裝修下拉菜單中的樣式管理
，然后點(diǎn)擊樣式編輯中的“背景設(shè)置”
。在頁面設(shè)置選項(xiàng)，將”要設(shè)置的頁面”選項(xiàng)設(shè)置為“首頁”（這個(gè)需要特別注意，否則背景應(yīng)用到所有頁面，影響店鋪展現(xiàn)效果），通過“更換圖片”選項(xiàng)將我們做好的海報(bào)背景更換上去，再將“背景顯示”選項(xiàng)設(shè)置為“不平鋪”，“背景對齊”選項(xiàng)設(shè)置為“居中”。最后，我們保存一下。我們就能得到1920像素的全屏海報(bào)了。在制作全屏海報(bào)的過程中，可能會出現(xiàn)1-2像素的細(xì)微錯(cuò)位，我們可以按照全屏海報(bào)的拼接效果，對海報(bào)背景進(jìn)行微調(diào)。具體設(shè)置參考下圖：
，然后點(diǎn)擊樣式編輯中的“背景設(shè)置”。在頁面設(shè)置選項(xiàng)，將”要設(shè)置的頁面”選項(xiàng)設(shè)置為“首頁”（這個(gè)需要特別注意，否則背景應(yīng)用到所有頁面，影響店鋪展現(xiàn)效果），通過“更換圖片”選項(xiàng)將我們做好的海報(bào)背景更換上去，再將“背景顯示”選項(xiàng)設(shè)置為“不平鋪”，“背景對齊”選項(xiàng)設(shè)置為“居中”。最后，我們保存一下。我們就能得到1920像素的全屏海報(bào)了。在制作全屏海報(bào)的過程中，可能會出現(xiàn)1-2像素的細(xì)微錯(cuò)位，我們可以按照全屏海報(bào)的拼接效果，對海報(bào)背景進(jìn)行微調(diào)。具體設(shè)置參考下圖：
4.產(chǎn)品寶貝的切片與加鏈接技巧
完成了全屏海報(bào)后，表示我們的裝修已經(jīng)攻克了最困難的問題了。接下來的部分，我們只需要將產(chǎn)品寶貝模塊進(jìn)行切片上傳以及加鏈接就可以了。以下，讓我們來了解下產(chǎn)品寶貝的切片技巧吧。
在開始之前，我們同樣要先將我們之前切好的產(chǎn)品寶貝主體部分提取出來。在產(chǎn)品寶貝模塊中，我們的寶貝擺放可能會分成幾個(gè)甚至十幾個(gè)不同的小區(qū)塊。例如，熱銷區(qū)，新品區(qū)，T恤區(qū)，連衣裙區(qū)等等。我們可以先將這些小區(qū)塊分別切出來，然后再按需求，對小區(qū)塊進(jìn)行切片，效果如下：
在切片的時(shí)候，我們一般會將標(biāo)題獨(dú)特切出，然后再針對寶貝的不同排布位置，進(jìn)行切片操作，在切片時(shí)，我們可以運(yùn)用參考先輔助進(jìn)行。而切片的基本原則是，切片盡量簡單，避免過于復(fù)雜的切片。
切片完成后，我們將切好的圖片上傳到圖片空間上，然后我們打開剛才的HTML文件，將店招圖片的地址按照順序替換成圖片空間的地址。將html代碼中的<table>至</table>部分復(fù)制到新建的“自定義模塊”中，并加上相應(yīng)的寶貝鏈接。在每一個(gè)小區(qū)塊上傳的過程中，我們可以在圖片空間新建不同的文件夾存放圖片，方便日后的圖片管理。而每個(gè)小區(qū)塊代碼,可以用獨(dú)立的自定義模塊，以方面日后修改管理。
5.頁尾的制作
首頁的制作已經(jīng)進(jìn)入尾聲了，只要進(jìn)行頁尾的最后制作，我們整個(gè)首頁就會完成。頁尾的制作跟之前寶貝的切片差別不大，我們只需要把我們需要加鏈接的模塊，按位置切片，將完成的切片上傳到圖片空間上，并將代碼上傳到預(yù)設(shè)好的頁尾模塊中去，加上我們呢的鏈接就可以了。這里需要注意的是，我們在放置代碼的時(shí)候，一定要記得放置在頁尾模塊中，否則其他頁面將顯示不了店鋪的頁尾。而頁面模塊的標(biāo)示很明顯，如下圖：
經(jīng)過以上的介紹，相信大家對首頁的裝修已經(jīng)有了一定的了解。我們只需要通過：布局劃分籌備，全屏店招制作，全屏海報(bào)制作，寶貝的切片和頁尾的制作。我們就能完成一個(gè)完成自定義的個(gè)性首頁。
其實(shí)首頁裝修并非我們中那么深奧復(fù)雜，只需要我們有一定的Photoshop基礎(chǔ)，以及足夠的耐心與細(xì)心。我們就能將首頁按照我們的想法裝修得美輪美奐，為我們的店鋪換上適合自己，風(fēng)格強(qiáng)烈的新衣。
快消品貨源網(wǎng)提供超市貨源信息,超市采購進(jìn)貨渠道。超市進(jìn)貨網(wǎng)提供成都食品批發(fā),日用百貨批發(fā)信息、微信淘寶網(wǎng)店超市采購信息和超市加盟信息.打造國內(nèi)超市采購商與批發(fā)市場供應(yīng)廠商搭建網(wǎng)上批發(fā)市場平臺,是全國批發(fā)市場行業(yè)中電子商務(wù)權(quán)威性網(wǎng)站。
本文內(nèi)容整合網(wǎng)站：百度百科、知乎、淘寶平臺規(guī)則
本文來源： 解讀淘寶首頁頁面設(shè)計(jì)技巧
