這篇文章，我希望通過(guò)自己的資料收集、內(nèi)容分析、實(shí)踐成果，告訴大家如何高效搭建一個(gè)專題頁(yè)面。

一、網(wǎng)站制作設(shè)計(jì)時(shí)專題工具的必要性

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

第一步：網(wǎng)站制作需要想到運(yùn)營(yíng)整理需求

馬上就要雙 11 了，領(lǐng)導(dǎo)說(shuō)，咱們的金牌廠商要求首頁(yè)掛上他們的宣傳廣告，并且要整一個(gè)單獨(dú)頁(yè)面給他們做營(yíng)銷(xiāo)！

運(yùn)營(yíng)小伙伴接到需求，好嘞！我去了解下他們想推哪些商品，哪些是重點(diǎn)推廣商品blabla。

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

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

第二步：網(wǎng)站制作注意產(chǎn)出設(shè)計(jì)稿

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

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

第三步：網(wǎng)站制作怎樣做好前端寫(xiě)頁(yè)面

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

第四步：網(wǎng)站制作之產(chǎn)品驗(yàn)收

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

第五步：網(wǎng)站制作步驟之進(jìn)行開(kāi)發(fā)

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

第六步：網(wǎng)站制作之進(jìn)行測(cè)試

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

第七步：網(wǎng)站制作設(shè)計(jì)運(yùn)營(yíng)驗(yàn)收

運(yùn)營(yíng)同學(xué)心里想，每次都整這個(gè)久，效率能不能高點(diǎn)，可千萬(wàn)別把我的商品關(guān)聯(lián)錯(cuò)了！

于是，我們上一個(gè)專題，走完了整個(gè)開(kāi)發(fā)流程，中途，還很有可能因?yàn)楦鞣N因素，導(dǎo)致不斷的返工和撕X…

那么，有沒(méi)有可能，這一切，都少一點(diǎn)套路，多一些真誠(chéng)呢？我們直接一點(diǎn)，迅速一點(diǎn)，不就整一個(gè)專題嗎！

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

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

第一步：運(yùn)營(yíng)整理需求

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

第三步：運(yùn)營(yíng)編輯專題并自我檢查

二、網(wǎng)站制作時(shí)如何搭建一個(gè)專題工具

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

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

且看圖：

京東專題頁(yè)

我們可以看到，大多數(shù)的專題頁(yè)面，其實(shí)無(wú)外乎幾個(gè)核心元素：

全屏的banner圖（帶鏈接，不帶鏈接）

商品標(biāo)題區(qū)（帶鏈接區(qū)的，不帶鏈接區(qū)）

商品展示區(qū)（每行展示商品個(gè)數(shù)不同）

廣告區(qū)

還有統(tǒng)一的背景色

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

好了，分析好一個(gè)專題頁(yè)面的核心元素，我們就可以著手搭建咱們的專題工具了。大家想想，一個(gè)這樣的頁(yè)面，運(yùn)營(yíng)最想要什么效果呢？

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

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

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

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

淘寶店鋪裝修頁(yè)

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

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

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

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

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

三、網(wǎng)站制作的專題工具M(jìn)VP模型

通過(guò)以上分析，我們可以著手搭建一個(gè)自己平臺(tái)的專題編輯工具了！

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

1、可自定義的背景顏色

2、全屏輪播圖模塊

3、廣告模塊

4、商品模塊

5、自定義模塊

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

頂部：固定的基本操作欄 。因?yàn)榭梢暬庉嬍菍?duì)整個(gè)頁(yè)面進(jìn)行編輯，為了方便對(duì)整體的操作，選擇將基本操作欄固定頂部，這樣，無(wú)論編輯到什么地方，都能夠很快的進(jìn)行一些基礎(chǔ)的操作。

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

頂部操作欄

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

1、網(wǎng)站設(shè)計(jì)廣告模塊

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

在限制一個(gè)模塊上傳一張圖片的情況下，如何能做到這樣靈活使用呢？

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

可用熱區(qū)實(shí)現(xiàn)

2、網(wǎng)頁(yè)制作之商品模塊

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

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

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

活動(dòng)已結(jié)束樣式

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

同時(shí)，還可以運(yùn)用到店鋪裝修等類(lèi)似的需求上，是不是覺(jué)得很棒呢！

至于要使用哪些軟件，只能說(shuō)“MVP更多是一種思維和方式，具體使用何種工具要看團(tuán)隊(duì)情況”。深圳網(wǎng)站制作博納網(wǎng)絡(luò)編輯整理。