產品案例：講講頁面模板設計方案的迭代歷程

01-29

如果我們經常在網上購物，就會發現各平台的促銷活動層出不窮，其對應的活動頁面也非常紛繁複雜.....作為設計人員，又該如何構思產品方案才能滿足運營人員的活動訴求，快速搭建出靈活多變的活動頁面呢？

在工作中，我也一直在不間斷的遇到類似的問題，不同階段也採用了不同的處理方案，設計思路也逐漸變得更加明朗，希望梳理分享出來後，能對大家有所啟發。

簡單粗暴

系統上線一期，主要目標是要把業務流程跑通，所以商品展現方式比較單一，按照類目進行歸集，不支持活動頁面的靈活配置。這時候運營突然策划了某個品類的促銷活動，希望能儘快上線對應的活動頁面。頁面內容其實十分簡單，就是一些圖片宣傳和不同類型的商品。但此時系統並不支持頁面的靈活配置，為了保障活動如期上線，系統只能對頁面做了定製開發。

無論是從運營的靈活性，還是研發的資源投入考慮，定製開發都不是一個長久之計，所以在這次活動之後，我們就開始思考如何把活動頁面的需求落實到後台具體功能上，隨時可以配置並上線新的頁面。

通用的模板

隨後我們就設計了一個通用的頁面模板，在後台可以配置頁面內的宣傳圖片、添加商品分類以及對應的圖標視覺元素（1-4個）、添加此商品分類下具體的商品。有個這個頁面模板之後，不需要研發介入，運營人員隨時在後台復用這套模板，配置對應活動的視覺元素並添加商品，靈活把控上線時間，十分方便。

隨著業務的不斷發展，運營活動越來越多樣，對活動頁面的要求也變得更加複雜，不再僅僅滿足於簡單的活動商品的頁面集合，而希望能直接在頁面內加入「領券」「搶購」等特色模塊。在構思產品設計方案的時候，考慮到了以下幾點：

營活動一般隔期就會更換，如果每次都需要定製開發或代碼調整，不僅僅需要投入研發資源，並且也很難滿足運營人員快速靈活上線的要求，所以肯定要做到可配置；
每次策劃的新活動，頁面內容都不完全相同，如果延續上邊的思路，設計一個固定模塊會造成頁面布局單一，無法根據活動做特定調整，所以還要做到元素的靈活配置；
運營的活動玩法總是會推陳出新，很可能沒多久就會有新的思路冒出來，所以還要考慮到設計方案的可拓展性；

自定義模板

有了以上分析，在考慮設計方案的時候，就類比到了樂高積木。初期可能只有有限個數的形狀，但每個形狀的數量可以是任意多，基於這些素材就可以搭建出各種樣式的模型。後續還可以不斷創造新的形狀，這樣就能搭建出更多模型。

在這個思路的指引下，我們抽離出了「控制項」的概念，初期有「banner控制項」、「商品控制項」、「領券控制項」、「搶購控制項」，在後台活動頁面模塊，可以隨時新增一個新的活動頁，活動頁的填充元素就可以選擇所需要的「控制項」並按照一定的順序進行排列，然後配置好每個控制項的視覺元素和商品等相關信息，這樣就能搭建出各種樣式的活動頁，最後將活動頁關聯到對應的導流入口就可以，比如首頁的banner。後續在版本迭代中可以不斷添加新的控制項進來，從而使的頁面元素更加豐富，滿足更多樣的活動形式。

總結

回看整個設計過程，一共走過了三個階段，先是最開始的頁面定製開發，然後經歷了固定模板樣式下的內容配置，最後則是引入控制項概念實現頁面的靈活配置。

對於成熟的電商平台，在活動頁面搭建這個問題上或許早就有非常成熟的產品解決方案，而作為產品人，如果一開始就能接觸了解到，固然能快速掌握對應的解決方案。但是如果能夠有幸經歷某個產品從零開始一點點完善的過程會更有意義。尤其是面對某些特定問題的時候，從最初的「盲人摸象」，通過一步步探索和思考，不斷迭代自己的設計思路，逐漸變得「柳暗花明又一村」，從而趨近更加理想的設計方案。

因為其最終收穫並不僅僅是最後的一個解決方案，而是在過程中不斷形成的產品設計方法論。換個抽象的說法，如果直接了解到最終的解決方案，收穫的只是一個「術」，但如果經歷了整個探索迭代的過程，磨練的是自己的「道」，這樣才能探索出更多的「術」。