淘寶模版是怎么設(shè)計(jì)出來的？其流程是怎樣的？

時(shí)間：2024-01-26 16:55:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2024-01-26 16:55:01 來源：網(wǎng)站運(yùn)營

淘寶模版是怎么設(shè)計(jì)出來的？其流程是怎樣的？：不請自來！我來回答下！
我曾經(jīng)在自己的博客里寫過：一個(gè)淘寶SDK簡易裝修模板的制作流程，這樣的一個(gè)制作流程，是關(guān)于簡易版的！


一個(gè)簡易模板從頭到尾的做下來要一天左右，在別人眼里也就是把圖片組合在一起，做成花花綠綠好看就行，很多淘寶店主并不知道這是一個(gè)怎么流程，面對他們的提問和要求有時(shí)候真是無法解答，欲哭無淚！


看看自己的一個(gè)簡易模板流程，無需過多吐槽！

第一階段：制作模板效果圖！

開始構(gòu)思，確定主題，收集素材，確定配色！













主題不多說，一看這么多軸承就明白！合成是關(guān)鍵，高大上就靠它了！構(gòu)思也不多說，就是體現(xiàn)軸承的氣場，“爆發(fā)吧，軸承的小宇宙！”

圖的處理：打開photoshop，這才是剛剛開始!










處理不是很精致，繼續(xù)添加其它模塊的部分，等大體定下，在根據(jù)總體來調(diào)節(jié)局部地區(qū)的細(xì)節(jié)和配色！








總體框架效果圖已經(jīng)定下！

接下來切圖，切圖就是把大圖根據(jù)店鋪的模塊來切成一張一張的小圖，這里具體不細(xì)說，還牽扯到一些圖片優(yōu)化的問題，到后面步驟自然就能看見一個(gè)個(gè)模塊的圖片被切成什么樣的小圖片！


第二階段，用淘寶sdk2.0添加代碼制作模板




啟動(dòng)sdk,準(zhǔn)備創(chuàng)建模板











模板的制作，基本也就是建立店鋪的首頁和寶貝分類頁，默認(rèn)詳情頁的框架，然后對系統(tǒng)模塊的css樣式設(shè)置的過程。








簡易模板還好，就是在原先的系統(tǒng)模塊添加樣式和圖片

每一個(gè)系統(tǒng)模塊都包含一個(gè)放圖片的文件夾和一個(gè)放CSS樣式的文件夾





把相對應(yīng)的系統(tǒng)模塊需要的圖片放到圖片文件夾





添加相對應(yīng)的CSS樣式








如此重復(fù)一個(gè)個(gè)系統(tǒng)模塊的建立，直到所有的系統(tǒng)模塊添加完畢！

主要就是設(shè)置一些系統(tǒng)模塊在950,750,190的這幾種布局樣式，寶貝推薦還有考慮到3欄，4欄，5欄，7欄的寶貝展示設(shè)置情況


打包模板，準(zhǔn)備上傳制作好的模板








填寫好模板名稱，設(shè)置好分類和價(jià)格等，制作好模板預(yù)覽圖和使用說明，準(zhǔn)備測試模板













申請審核，坐等模板上架！




——————————————2019.1.4更新————————



順便再說一下高級模板吧！高級模板除了系統(tǒng)模塊外，還可以開發(fā)制作設(shè)計(jì)師自己的模塊！


在開始建模板的時(shí)候，選擇高級模板選項(xiàng)，同樣也是通過SDK工具來制作！




如上圖，高級模板就是要多寫一部分模塊！文件名前綴tshop-pbsm這一系列的是系統(tǒng)默認(rèn)的模塊，tshop-um這一系列的就是設(shè)計(jì)師自己制作的模塊。




每個(gè)設(shè)計(jì)師模塊里面都有這幾樣，assets文件里放圖片和樣式文件，XML主要是模塊的編輯設(shè)置，PHP文件就是模塊的頁面代碼了！




XML代碼


PHP文代碼


最后，再來一個(gè)無線端的模板制作過程吧！現(xiàn)在的無線端使用率非常高！但是目前呢淘寶的電腦端模板和無線模板還不能通用，我想最難解決的恐怕還是圖片尺寸縮放的問題，電腦屏幕一個(gè)1024的尺寸安放到手機(jī)那么大的一個(gè)屏幕上，圖上的文字怎么識別才是真難題，注定必須要做兩套尺寸不同的模板來使用！