基于SKU的頁面快速搭建工具設計

3 評論 11788 瀏覽 70 收藏 9 分鐘

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

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

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

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

接下來,開始產品的設計前準備

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

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

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

我們拿出市面上的各種頁面進行調研,會發現,基本上一個頁面的構成,無外乎以下幾種元素:

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

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

基于SKU的電商業務場景頁面搭建,是相對標準化的。商品作為頁面的核心元素,頁面的布局會對商品的屬性產生較強的依賴,比如:

  1. 運營如何進行商品選品?如何將商品集合添加為頁面內容?
  2. 商品的展現形式是什么?平鋪?錨點?還是瀑布流?不同的展現形式,能承載的業務能力也不同

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

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

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

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

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

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

針對模塊細節,顆粒度定義,功能設計,就不展開描述了,我們就整體產品規劃做一下描述。

從能力上,不同公司的業務場景下,對模塊的抽象程度不同,抽象出來的模塊也可能包含部分業務含義,拿在做的結構及模塊輸出舉例,對內的產品模型如下:

對外的商業模式及產品模型,這邊簡單描述下:

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

接下來,我們聊一下產品的實現層級設置:

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

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

獨立性、易用性、穩定性、靈活性、可擴展、可追溯,是工具類產品的核心。

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

要做好一個完整的產品,需要在細節把控到位,針對性的有如下tips:

  1. 熟練掌握前端頁面調試工具(chrome即可);
  2. 底層模塊設計時對數據庫和高并發業務場景的考量;
  3. 工具類產品的邊界,有所為,有所不為;
  4. 做好長期規劃及版本迭代計劃。

 

作者:whisperbot,公眾號:靈魂為自己找一個伴侶(ID:vashresources)

本文由 @whisperbot 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 怎么做頁面搭建的產品規劃啊

    來自廣東 回復
  2. 太棒了,樓主真的很厲害

    來自廣東 回復
  3. 厲害了!工具類設計很考驗設計人員的框架化、組件化思維、以及場景考究。

    來自廣東 回復