很多人認(rèn)為做詳情頁(yè)麻煩而且慢，不愿意上新詳情頁(yè)，今天教大家一種專門為大家解決詳情頁(yè)上新慢的憂慮。

那么事情就來了，我自認(rèn)為找到了一種以代碼+模板的方式在PC端快速上新的方式方法，如果不能分享出來，大家就無法幫忙確認(rèn)是否能稱之為全新、并如我一樣經(jīng)過驗(yàn)證后評(píng)定為最快！

我去年12月中從綾致時(shí)裝離職初初來到MO&Co.電商負(fù)責(zé)品牌形象的時(shí)候，遇到一個(gè)很棘手的問題，上新組的同事們幾乎都是還沒有離開校園的實(shí)習(xí)生，普通商品的上新工作又很繁重，為了完成工作量必須要經(jīng)過長(zhǎng)時(shí)間的加班才可以做完。像大部分的服裝公司一樣，MO的同事們還在用比較傳統(tǒng)的PS方法來制作商品詳情，一個(gè)熟手的平面設(shè)計(jì)師最多每天能完成6個(gè)款的商品詳情。日常工作里一些數(shù)據(jù)需要修改或者是頁(yè)面顯示的搭配款下架了，還需要找到原圖修改完之后再上傳，造成工作狀態(tài)非常混亂。

當(dāng)改用代碼+模板的方式來制作商品詳情之后，在需要單款給圖片做扣圖成白底3~5張圖的情況下，每人每天基本都可以完成12款的商品詳情，效率對(duì)比之前的老方法是翻倍的，甚至有一些非常注重快捷技巧的同事，一天甚至可以完成20款左右的商品詳情制作，當(dāng)然如果不需要做任何摳圖的工作，這個(gè)效率還可以再高很多。

現(xiàn)在話題切入到商品詳情頁(yè)上，我們首先有一件事情要先達(dá)成共識(shí)，那就是一個(gè)以代碼方式呈現(xiàn)的完整模板里一般就只包含文字信息和圖片信息，具體如下：

1．介紹商品基本資料的文字

2．帶有促銷或者品牌屬性的描述性文字

3．商品的模特圖和靜物圖

4．頁(yè)面上通用的裝飾性圖片

文字的屬性、模特圖、靜物圖等這些都比較容易理解，什么是通用的裝飾性圖片呢？舉個(gè)例子：

圖片（一）是MO&Co.商品詳情頁(yè)面里的第一張圖，棕櫚樹剪影的圖片就是屬于通用圖片。

（圖一）

（圖二）

（圖三）

由于這張圖是商品詳情頁(yè)面里面的第一張圖，非常重要，我也插一句關(guān)于我們這個(gè)模板對(duì)于這張圖的看法：

圖片（一）的顯示效果是由圖片（二）和圖片（三）兩張圖上下疊加而成，圖片（三）經(jīng)過了PS簡(jiǎn)單的加工，加入了品牌當(dāng)年的流行slogan：Forever young（永遠(yuǎn)年輕！），MO&Co.去年一年的商品詳情頁(yè)里面第一張圖都是墊的這個(gè)底（圖片三），主要是因?yàn)槲覀冮_始琢磨這個(gè)代碼+模板化上新的時(shí)候雖然也有過這種通用圖片多樣化的思考，但更多的時(shí)間其實(shí)是在溝通并思考如何通過流程、團(tuán)隊(duì)分工和技術(shù)把所需要銷售上新的商品很藝術(shù)并且快速的進(jìn)行電子化，3月著手開始做設(shè)計(jì)的時(shí)候，剛好趕上做夏季商品上新，設(shè)計(jì)師峰美女就直接這樣設(shè)計(jì)了，后面隨著工作量逐步的加大，這種進(jìn)一步的優(yōu)化就基本上只能停留在想的階段了。

其實(shí)這張通用底層圖在商品詳情頁(yè)中其實(shí)也是可以根據(jù)需求隨時(shí)進(jìn)行更換與調(diào)整的，比如像我的前東家綾致時(shí)裝那種從線下就很注重對(duì)產(chǎn)品系列差異化訴求的品牌，就可以考慮根據(jù)每年的TRENDS STORY設(shè)計(jì)出不同的通用裝飾性圖片，以便通過意境的營(yíng)造更好的詮釋出不同商品系列之間的時(shí)尚差異化。

大篇幅的基本概念溝通完畢，現(xiàn)在可以簡(jiǎn)單快速地描述一下操作步驟了，具體如下：

1.我們先按照jpg格式里面所有出現(xiàn)的圖片按照呈現(xiàn)的先后順序命好名稱，從1到多少這樣子，并把整個(gè)模版寫成一組代碼，在這組代碼里，圖片和文字都是分別按照邏輯順序進(jìn)行設(shè)置的，通俗來講就是固定好了每一個(gè)模塊的具體位置；

2. 把這組原始代碼直接設(shè)置好放在Excel表格里面；

3. 在這套工作流程里圖片和文字是分開處理的，而且在模板制作開始之前，圖片需要提前準(zhǔn)備好，精修過的模特圖、靜物圖和細(xì)節(jié)圖圖片最好都能集中在一個(gè)文件夾里面；所有模版內(nèi)所需要的模特圖、靜物圖、細(xì)節(jié)圖都在一個(gè)設(shè)計(jì)好的PS模版內(nèi)進(jìn)行剪裁，如圖片（四），并按照款號(hào)加一個(gè)上新專屬的特別符號(hào)進(jìn)行web格式存儲(chǔ)，并設(shè)置切片為：所有用戶切片；

4. 圖片在淘寶圖片空間的存儲(chǔ)，建議單獨(dú)設(shè)立上新文件夾，并在二級(jí)用款號(hào)設(shè)立每個(gè)款的專屬文件夾，上一個(gè)步驟里面所存儲(chǔ)好的圖片按照順序都有了各自在初始jpg模版中所命名都數(shù)字代碼，款號(hào)加上上新代碼，再加上從1到多少這樣子，然后把這些圖片上傳到上新到圖片空間中；

5. 由于圖片本身到數(shù)字后綴是帶順序的，上傳之后這些數(shù)字以后可以順序進(jìn)行排列；

6. 用款號(hào)在圖片空間中按款號(hào)加上新符號(hào)搜索圖片，選擇所出現(xiàn)到所有圖片，復(fù)制圖片鏈接；

7. 只需要輸入款號(hào)和圖片鏈接，也就是插入所有圖片信息，如下圖圖片（五），在款號(hào)后面的“新代碼”處，粘貼出新模版的代碼，新的商品詳情頁(yè)就完成了一個(gè)初步的原屬雛形；

8. 最后一個(gè)步驟，進(jìn)行所有文字的添加：打開DW，把新代碼復(fù)制搭理到新建頁(yè)面，看圖填寫文字，文字是在所有圖片處理好并穿插到模板里面之后，最后添加完成的，文字的完成也代表著新模版對(duì)的成，把模版的代碼直接后臺(tái)拷貝到商品詳情中，前臺(tái)就能看到一個(gè)新款到展現(xiàn)了。

通過以上這種工作步驟到拆解，我們MO電商的上新可以把所有模特圖片和文字以更好更快的方式在商品詳情中展現(xiàn)，同時(shí)藉由這種新的工作流暢所帶來的各團(tuán)隊(duì)間的配合也更緊密了，從攝影、修圖、商品、文案到上新，全部都被有機(jī)地都組合在一條流水線上，各自配合。團(tuán)隊(duì)內(nèi)協(xié)作能力大幅度大提升，所產(chǎn)生的快速反應(yīng)機(jī)制更能相應(yīng)多節(jié)奏的運(yùn)營(yíng)工作。最后如果商品有賣家免費(fèi)提供數(shù)據(jù)包那就更好了。

樂發(fā)網(wǎng)超市批發(fā)網(wǎng)提供超市貨源信息,超市采購(gòu)進(jìn)貨渠道。超市進(jìn)貨網(wǎng)提供成都食品批發(fā),日用百貨批發(fā)信息、微信淘寶網(wǎng)店超市采購(gòu)信息和超市加盟信息.打造國(guó)內(nèi)超市采購(gòu)商與批發(fā)市場(chǎng)供應(yīng)廠商搭建網(wǎng)上批發(fā)市場(chǎng)平臺(tái),是全國(guó)批發(fā)市場(chǎng)行業(yè)中電子商務(wù)權(quán)威性網(wǎng)站。

本文內(nèi)容整合網(wǎng)站：百度百科、知乎、淘寶平臺(tái)規(guī)則

本文來源： 詳情頁(yè)上新慢我有小竅門