数极客首页

基于SKU的页面快速搭建工具设计

在资源有限的前提下,就衍生出了页面快速搭建的需求。而在这种情况下,我们往往需要一个能快速搭建的工具型产品,那么这类产品如何设计呢?

基于SKU的页面快速搭建工具设计

自互联网诞生之初,页面快速搭建的需求就从来没有断绝过,最早的纯静态PC页面、包含商品/营销信息的页面、移动端自适应的复杂页面……在互联网发展的过程中,页面的展现形式越来越多样化,承载的信息也越来越多,几乎,90%以上的信息都是以页面作为载体,通过互联网的形式,传播到各个角落。

实际工作中,各种各样的页面需求也接踵而来,不论每种需求承载的底层逻辑是复杂还是简单,都逃不了【需求设计–>交互设计–>视觉设计–>开发–>测试–>上线–>数据提取–>数据分析】这个完整的链路。

那么,在资源有限的前提下,就衍生出了页面快速搭建的需求,以解决交互设计、开发、测试、数据提取与分析等多个环境的资源消耗。

接下来,开始产品的设计前准备

  • 首先,我们给这个工具起一个名字,并为他做一个定义:(DIY)+“提供复杂页面快速搭建能力,易用、稳定、灵活、可分析的工具。”
  • 其次,为什么做这件事:为公司节约开发、测试资源及过程中消耗、为产品运营提升效率、节约开发/测试人力成本、服务集成化输出增加整体竞争力。

可以看到,在体量足够大的情况下,这件事是有价值的。

接下来,我们来看看模块设计。

我们拿出市面上的各种页面进行调研,会发现,基本上一个页面的构成,无外乎以下几种元素:

  • 内容元素:图片、商品、视频、音频等;
  • 布局元素:上下滑动、左右滑动、轮播等;
  • 导航元素:锚点、分tab、外链、集合页等;
  • 页面层级元素:多层级页面设计。

如果大家拿出天猫、淘宝、京东、豆瓣、蚂蚁的页面出来调研一下,会发现,不同业务属性的页面搭建,风格是完全不同的。从框架搭建和产品设计阶段开始,就需要确认工具主要服务于哪些业务场景,并针对性地进行设计。

基于SKU的电商业务场景页面搭建,是相对标准化的。商品作为页面的核心元素,页面的布局会对商品的属性产生较强的依赖,比如:

  1. 运营如何进行商品选品?如何将商品集合添加为页面内容?
  2. 商品的展现形式是什么?平铺?锚点?还是瀑布流?不同的展现形式,能承载的业务能力也不同

页面需要进行分层级设计,第一层级,用于设计具体正常排序的模块;第二层级,用于设计特殊布局的模块,在第一层级之上。可以理解为,两个模块垂直叠加。这点很重要

然后,我们要做模块的抽象,核心是可以通过各种模块的堆叠,完成一个页面的搭建。有两种产品设计的方向:第一种,设计纯粹抽象的模块;第二种,设计相对具象的模块。

如何理解纯粹抽象的模块呢?

即可以任意设置内容的不同样式,然后根据不同的布局元素属性,不同导航元素容器,进行组合。这是纯抽象的,扩展性非常强,但是学习成本较高。这个留个悬念,大家可以选思考下。

我们用相对具象的模块来进行设计,这种方式,会更加容易理解。

包含的模块为:Banner、IMG、Hot Pot、商品、各类导航、宫格等。

针对模块细节,颗粒度定义,功能设计,就不展开描述了,我们就整体产品规划做一下描述。

从能力上,不同公司的业务场景下,对模块的抽象程度不同,抽象出来的模块也可能包含部分业务含义,拿在做的结构及模块输出举例,对内的产品模型如下:

基于SKU的页面快速搭建工具设计

对外的商业模式及产品模型,这边简单描述下:

  • 首先,工具是服务于具体公司的业务的,要先保证能满足运营、视觉、开发以及测试的需求;
  • 其次,工具类产品要本身独立,成为一个产品,有其应有的底线,不进行强耦合;
  • 再者,在工具类产品设计之初,就需要考虑到是否可以对外面向集团或者市场,这涉及到系统定位(内网/外网)、前后端交互形式(文件/接口)、以及账户体系、抽象程度等多种因素的考虑;
  • 最后,需要保证,对内可以带来资源的节约和效率的提升;对外又可以具备一定的盈利的可能性。

接下来,我们聊一下产品的实现层级设置:

基于SKU的页面快速搭建工具设计

其中,每一个节点均很考验产品设计能力,底层模块对应的数据结构及图形化配置界面(落数据)、以json文件的形式生成还是接口提供(性能和能力考量)、前端获取json后解析的方式、渲染能力、CDN、多场景支持等等。不一一展开来讲了。

最后再提一下,作为工具类产品,不可避免地会面临诸多业务需求,千万不能通过简单的线性叠加需求来进行需求设计,否则几个版本下来,产品会不堪重负,并且失去灵活性和扩展性。在进行业务需求沟通和需求拆解的过程中,要注重需求的抽象,尽量减少与业务系统的耦合,保持产品的独立性

独立性、易用性、稳定性、灵活性、可扩展、可追溯,是工具类产品的核心。

如果有一天,作为工具类的设计者,有一天看到用户(运营或其他)通过自己的产品,搭建出的页面非常华丽,不看配置或者代码都不知道是使用什么模块组合而来的,这种成就感,是无价之宝。

要做好一个完整的产品,需要在细节把控到位,针对性的有如下tips:

  1. 熟练掌握前端页面调试工具(chrome即可);
  2. 底层模块设计时对数据库和高并发业务场景的考量;
  3. 工具类产品的边界,有所为,有所不为;
  4. 做好长期规划及版本迭代计划。

 

本文由 @whisperbot 原创发布。未经许可,禁止转载

题图来自Unsplash,基于CC0协议

新一代大数据用户行为分析与数据智能平台:数极客(https://www.shujike.com),是支持无埋点、前端埋点、后端埋点、API导入四种混合数据采集方式,整合分析用户行为数据和业务数据,可以自动监测网站、APP、小程序等多种渠道推广效果分析,是增长黑客们必备的互联网数据分析软件。数极客支持实时多维分析、漏斗分析、留存分析、路径分析等十大数据分析方法以及APP数据分析网站统计网站分析小程序数据统计用户画像等应用场景,业内首创了六种提升转化率的数据分析模型,是数据分析软件领域首款应用定量分析与定性分析方法的数据分析产品

发表评论

评论已关闭。

相关文章