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

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

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

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

接下來(lái)，開(kāi)始產(chǎn)品的設(shè)計(jì)前準(zhǔn)備。

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

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

接下來(lái)，我們來(lái)看看模塊設(shè)計(jì)。

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

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

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

基于SKU的電商業(yè)務(wù)場(chǎng)景頁(yè)面搭建，是相對(duì)標(biāo)準(zhǔn)化的。商品作為頁(yè)面的核心元素，頁(yè)面的布局會(huì)對(duì)商品的屬性產(chǎn)生較強(qiáng)的依賴，比如：

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

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

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

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

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

我們用相對(duì)具象的模塊來(lái)進(jìn)行設(shè)計(jì)，這種方式，會(huì)更加容易理解。

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

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

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

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

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

接下來(lái)，我們聊一下產(chǎn)品的實(shí)現(xiàn)層級(jí)設(shè)置：

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

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

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

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

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

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

作者：whisperbot，公眾號(hào)：靈魂為自己找一個(gè)伴侶（ID：vashresources）

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

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