91麻豆精品在线观看_一级做性色a爰片久久毛片免费_zzijzzij亚洲日本少妇jizjiz_国产日产欧美欧韩在线_日本高清在线www3344

　　電商網(wǎng)站專題背后的故事，多少人知道呢?或者，多少人想知道?不想知道可以出門左轉(zhuǎn)了，因為這篇文章，我希望通過自己的資料收集、內(nèi)容分析、實踐成果，告訴大家琳瑯滿目的專題，背后的故事。

　　PART1 專題工具的必要性

　　在這里分享一個真實的故事，作為一個系統(tǒng)搭建仍未完善的電商平臺，很多時候?qū)ｎ}的推出，采用的的是一種比較傳統(tǒng)，oh不，非常傳統(tǒng)的搭建方式。

　　第一步：運營整理需求

　　馬上就要中秋節(jié)了，領(lǐng)導(dǎo)說，咱們的月餅廠商強烈要求首頁掛上他們的宣傳廣告，并且要整一個單獨的頁面給他們做營銷!

　　運營小伙伴接到需求，好嘞!我去了解下他們想要推哪些商品，哪些是重點推廣商品。blabla

　　于是乎，刷刷整理出一份表格，里面有我需要的推的商品，希望擺放的位置，文案，活動說明，等等等等。

　　然后將它交到設(shè)計小伙伴的手中。

　　第二步：產(chǎn)出設(shè)計稿

　　設(shè)計小伙伴接到要求，馬上就噔噔噔上網(wǎng)搜素材啦，靈感迸發(fā)啦，整出一個非常喜慶的專題頁面，其中商品的各種狀態(tài)，都需要一一標(biāo)明，什么已售罄阿，不支持銷售呀，等等。

　　這些可是一個都不能少，少一個，產(chǎn)品同學(xué)可就會打回來。

　　第三步：前端寫頁面

　　設(shè)計稿出來了，前端同學(xué)就不能清閑了。我敲我敲我敲敲敲，咦，這里的陰影不好實現(xiàn)，不實現(xiàn)了。咦，這里的樣式好奇怪，我換掉。好了，就這樣吧，產(chǎn)品同學(xué)，你看著辦。

　　第四步：產(chǎn)品驗收

　　產(chǎn)品同學(xué)此時的心情時沉重的，這設(shè)計稿和靜態(tài)頁的區(qū)別，怎么有點大呢!。。。。。。不管怎么樣，最后還是要驗收的，后天就要上線了，趕緊給開發(fā)同學(xué)進行開發(fā)吧。

　　第五步：進行開發(fā)

　　開發(fā)同學(xué)心里想，又是這種專題，每次都寫一樣的內(nèi)容，煩死了。然后默默的完成它。

　　第六步：進行測試

　　測試同學(xué)心里想，又是這種專題，每次都測差不多的內(nèi)容，煩死了。然后默默的測完它。

　　第七步：運營驗收

　　運營同學(xué)心里想，每次都整這個久，效率能不能高點，可千萬別把我的商品關(guān)聯(lián)錯了!

　　于是，我們上一個專題，走完了整個開發(fā)流程，中途，還很有可能因為各種因素，導(dǎo)致不斷的返工和撕X。

　　那么，有沒有可能，這一切，都少一點套路，多一些真誠呢?我們直接一點，迅速一點，不就整一個專題嗎!

　　所以，做一個工具吧。搭建好一套可自定義的模板，每次上專題，我們把必要的設(shè)計好，把商品關(guān)聯(lián)進去，自己傳，自己看，自己檢查，不就行了。

　　那么以上的催魂七步，不就變成了：

　　第一步：運營整理需求

　　第二步：產(chǎn)出設(shè)計稿

　　第三步：運營編輯專題并自我檢查

　　簡直：完美

　　PART2 如何搭建一個專題工具

　　產(chǎn)品同學(xué)想了想，這個這個，想法不錯，那怎么實現(xiàn)呢?不急，我們分析分析一個專題的結(jié)構(gòu)，就知道，做一個什么樣的工具，能支撐我們的業(yè)務(wù)需求了。

　　特別復(fù)雜特別花哨的專題咱們就不多講了，作為一個實用主義者，我一向奉承以最小的成本推行和嘗試新的想法，有了基礎(chǔ)架構(gòu)后，還怕有啥不能迭代的么?小步快走吧同志們。

　　我們可以看到，大多數(shù)的專題頁面，其實無外乎幾個核心元素：全屏的banner圖(帶鏈接，不帶鏈接)，商品標(biāo)題區(qū)(帶鏈接區(qū)的，不帶鏈接區(qū))，商品展示區(qū)(每行展示商品個數(shù)不同)，廣告區(qū)，還有統(tǒng)一的背景色

　　當(dāng)然商品標(biāo)題區(qū)和廣告區(qū)實質(zhì)上是可以通過一個模板進行處理，無非就是鏈接和圖片不同而已。

　　好了，分析好一個專題頁面的核心元素，我們就可以著手搭建咱們的專題工具了。大家想想，一個這樣的頁面，運營最想要什么效果呢?

　　簡單快捷，設(shè)計出圖，我往上面?zhèn)?，設(shè)置好商品就行了。

　　在編輯的時候能看到實際效果，一個專題頁的內(nèi)容還是比較豐富了，一不小心整錯了，可是要扣工資了阿喂。

　　綜上，要綜合實用和美觀，我們可以運用可視化編輯的形式來實現(xiàn)專題的編輯。

　　什么是可視化編輯?我的理解就是所見即所得，不再是傳統(tǒng)后臺將頁面以表單形式來填充內(nèi)容的形式，而是能夠?qū)㈨撁婺K化，編輯的同時能實時預(yù)覽真實效果的一種方式。

　　上圖是淘寶店鋪裝修的界面，我們?nèi)粘ＹI買買的店鋪，首頁及相關(guān)頁面都是通過這一套工具搭建起來的。其核心就在于，拆解模塊，進行隨心化可視化的組合。

　　同樣的，專題工具也是一樣的道理，我們將主要的模塊拆解出來，定義每個模塊的內(nèi)容構(gòu)成，編輯操作，一個可視化的工具基本就成型啦。

　　總結(jié)方案方向的核心就在于兩點

　　找出內(nèi)容核心的關(guān)鍵要素(專題的核心組成部分)

　　找出合適的實現(xiàn)模型(可視化編輯的形式)

　　PART3 專題工具MVP模型

　　話不多說，通過以上分析，我們可以著手搭建一個自己平臺的專題編輯工具了!

　　首先，結(jié)合公司的業(yè)務(wù)，明確需要實現(xiàn)的功能點(這里只介紹編輯頁面核心內(nèi)容)，通過PART1的情況介紹，大家應(yīng)該對業(yè)務(wù)的訴求有一定概念了：

　　可自定義的背景顏色

　　全屏輪播圖模塊

　　廣告模塊

　　商品模塊

　　自定義模塊

　　整個頁面的結(jié)構(gòu)規(guī)劃如下：

　　頂部：固定的基本操作欄 。因為可視化編輯是對整個頁面進行編輯，為了方便對整體的操作，選擇將基本操作欄固定頂部，這樣，無論編輯到什么地方，都能夠很快的進行一些基礎(chǔ)的操作。

　　編輯區(qū)：通過添加各個模塊，進行內(nèi)容的編輯。編輯區(qū)時整個頁面的核心模塊，我們添加好模塊，然后通過向每個模塊中填充內(nèi)容，實現(xiàn)實時預(yù)覽的效果。并且，可通過拖動，來調(diào)整各個模塊之間擺放的位置。

　　這里重點解析一下廣告模塊和商品模塊的內(nèi)容搭建。

　　廣告模塊：PART2中有提到，我們所看到的商品標(biāo)題，帶鏈接的不帶鏈接的，或是一些帶鏈接的廣告圖。甚至優(yōu)惠券的領(lǐng)取通道，都可以通過廣告模塊來實現(xiàn)。

　　為什么呢?在限制一個模塊上傳一張圖片的情況下，如何能做到這樣靈活使用呢?

　　很簡單，在廣告圖上加熱區(qū)就行了。也就是說，我們的設(shè)計師做好一張符合尺寸的圖，上面可以是不同的店鋪通道或者優(yōu)惠券領(lǐng)取通道，只要運營在上傳廣告圖之后為這張廣告圖添加不同的熱區(qū)，不同熱區(qū)鏈接到不同網(wǎng)址即可。

　　商品模塊：商品模塊屬于專題頁的一個主體內(nèi)容，為了讓頁面展示更豐富，在有限的條件下創(chuàng)造出無限的可能。商品模塊的設(shè)置，可以設(shè)置每行顯示不同個數(shù)的商品，來適應(yīng)不同排版需求。前期只需要設(shè)計師出一個固定的模板就行了。

　　是不是很簡單?當(dāng)然，這些可變因素，是可以隨著業(yè)務(wù)要求進行調(diào)整的，大家可以根據(jù)自己業(yè)務(wù)的不同，進行不同的選擇。

　　需要注意的一點是，我們的商品列表讀取的時商品ID，那么商品的不同狀態(tài)(已售罄，已刪除等)所呈現(xiàn)的效果，都需要考慮進來。

　　總的來說，一個專題工具的搭建思路，就是這樣，從業(yè)務(wù)分析，到選擇搭建模式，再結(jié)合本身訴求進行設(shè)計。有了一個最小版本，以后的迭代無非就是豐富模板內(nèi)容，以支撐更加豐富的頁面內(nèi)容。

　　同時，還可以運用到店鋪裝修等類似的需求上，是不是覺得很棒呢!