在資源有限的前提下，就衍生出了頁面快速搭建的需求。而在這種情況下，我們往往需要一個能快速搭建的工具型產(chǎn)品，那么這類產(chǎn)品如何設計呢？

自互聯(lián)網(wǎng)誕生之初，頁面快速搭建的需求就從來沒有斷絕過，最早的純靜態(tài)PC頁面、包含商品/營銷信息的頁面、移動端自適應的復雜頁面……在互聯(lián)網(wǎng)發(fā)展的過程中，頁面的展現(xiàn)形式越來越多樣化，承載的信息也越來越多，幾乎，90%以上的信息都是以頁面作為載體，通過互聯(lián)網(wǎng)的形式，傳播到各個角落。

實際工作中，各種各樣的頁面需求也接踵而來，不論每種需求承載的底層邏輯是復雜還是簡單，都逃不了【需求設計–>交互設計–>視覺設計–>開發(fā)–>測試–>上線–>數(shù)據(jù)提取–>數(shù)據(jù)分析】這個完整的鏈路。

那么，在資源有限的前提下，就衍生出了頁面快速搭建的需求，以解決交互設計、開發(fā)、測試、數(shù)據(jù)提取與分析等多個環(huán)境的資源消耗。

接下來，開始產(chǎn)品的設計前準備。

• 首先，我們給這個工具起一個名字，并為他做一個定義：（DIY）+“提供復雜頁面快速搭建能力，易用、穩(wěn)定、靈活、可分析的工具。”
• 其次，為什么做這件事：為公司節(jié)約開發(fā)、測試資源及過程中消耗、為產(chǎn)品運營提升效率、節(jié)約開發(fā)/測試人力成本、服務集成化輸出增加整體競爭力。

可以看到，在體量足夠大的情況下，這件事是有價值的。

接下來，我們來看看模塊設計。

我們拿出市面上的各種頁面進行調(diào)研，會發(fā)現(xiàn)，基本上一個頁面的構(gòu)成，無外乎以下幾種元素：

• 內(nèi)容元素：圖片、商品、視頻、音頻等；
• 布局元素：上下滑動、左右滑動、輪播等；
• 導航元素：錨點、分tab、外鏈、集合頁等；
• 頁面層級元素：多層級頁面設計。

如果大家拿出天貓、淘寶、京東、豆瓣、螞蟻的頁面出來調(diào)研一下，會發(fā)現(xiàn)，不同業(yè)務屬性的頁面搭建，風格是完全不同的。從框架搭建和產(chǎn)品設計階段開始，就需要確認工具主要服務于哪些業(yè)務場景，并針對性地進行設計。

基于SKU的電商業(yè)務場景頁面搭建，是相對標準化的。商品作為頁面的核心元素，頁面的布局會對商品的屬性產(chǎn)生較強的依賴，比如：

1. 運營如何進行商品選品？如何將商品集合添加為頁面內(nèi)容？
2. 商品的展現(xiàn)形式是什么？平鋪？錨點？還是瀑布流？不同的展現(xiàn)形式，能承載的業(yè)務能力也不同

頁面需要進行分層級設計，第一層級，用于設計具體正常排序的模塊；第二層級，用于設計特殊布局的模塊，在第一層級之上?？梢岳斫鉃椋瑑蓚€模塊垂直疊加。這點很重要。

然后，我們要做模塊的抽象，核心是可以通過各種模塊的堆疊，完成一個頁面的搭建。有兩種產(chǎn)品設計的方向：第一種，設計純粹抽象的模塊；第二種，設計相對具象的模塊。

如何理解純粹抽象的模塊呢？

即可以任意設置內(nèi)容的不同樣式，然后根據(jù)不同的布局元素屬性，不同導航元素容器，進行組合。這是純抽象的，擴展性非常強，但是學習成本較高。這個留個懸念，大家可以選思考下。

我們用相對具象的模塊來進行設計，這種方式，會更加容易理解。

包含的模塊為：Banner、IMG、Hot Pot、商品、各類導航、宮格等。

針對模塊細節(jié)，顆粒度定義，功能設計，就不展開描述了，我們就整體產(chǎn)品規(guī)劃做一下描述。

從能力上，不同公司的業(yè)務場景下，對模塊的抽象程度不同，抽象出來的模塊也可能包含部分業(yè)務含義，拿在做的結(jié)構(gòu)及模塊輸出舉例，對內(nèi)的產(chǎn)品模型如下：

對外的商業(yè)模式及產(chǎn)品模型，這邊簡單描述下：

• 首先，工具是服務于具體公司的業(yè)務的，要先保證能滿足運營、視覺、開發(fā)以及測試的需求；
• 其次，工具類產(chǎn)品要本身獨立，成為一個產(chǎn)品，有其應有的底線，不進行強耦合；
• 再者，在工具類產(chǎn)品設計之初，就需要考慮到是否可以對外面向集團或者市場，這涉及到系統(tǒng)定位（內(nèi)網(wǎng)/外網(wǎng)）、前后端交互形式（文件/接口）、以及賬戶體系、抽象程度等多種因素的考慮；
• 最后，需要保證，對內(nèi)可以帶來資源的節(jié)約和效率的提升；對外又可以具備一定的盈利的可能性。

接下來，我們聊一下產(chǎn)品的實現(xiàn)層級設置：

其中，每一個節(jié)點均很考驗產(chǎn)品設計能力，底層模塊對應的數(shù)據(jù)結(jié)構(gòu)及圖形化配置界面（落數(shù)據(jù)）、以json文件的形式生成還是接口提供（性能和能力考量）、前端獲取json后解析的方式、渲染能力、CDN、多場景支持等等。不一一展開來講了。

最后再提一下，作為工具類產(chǎn)品，不可避免地會面臨諸多業(yè)務需求，千萬不能通過簡單的線性疊加需求來進行需求設計，否則幾個版本下來，產(chǎn)品會不堪重負，并且失去靈活性和擴展性。在進行業(yè)務需求溝通和需求拆解的過程中，要注重需求的抽象，盡量減少與業(yè)務系統(tǒng)的耦合，保持產(chǎn)品的獨立性。

獨立性、易用性、穩(wěn)定性、靈活性、可擴展、可追溯，是工具類產(chǎn)品的核心。

如果有一天，作為工具類的設計者，有一天看到用戶（運營或其他）通過自己的產(chǎn)品，搭建出的頁面非常華麗，不看配置或者代碼都不知道是使用什么模塊組合而來的，這種成就感，是無價之寶。

要做好一個完整的產(chǎn)品，需要在細節(jié)把控到位，針對性的有如下tips：

1. 熟練掌握前端頁面調(diào)試工具（chrome即可）；
2. 底層模塊設計時對數(shù)據(jù)庫和高并發(fā)業(yè)務場景的考量；
3. 工具類產(chǎn)品的邊界，有所為，有所不為；
4. 做好長期規(guī)劃及版本迭代計劃。

作者：whisperbot，公眾號：靈魂為自己找一個伴侶（ID：vashresources）

本文由 @whisperbot 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議