App产品设计『运营工具』专题系统

这是《App产品设计指南》系列文章的第20篇内容，更多精彩可以点击下方链接查看。

《App产品设计指南》专栏目录

在App产品的运营中会根据相关事件、节点推出运营类的专题活动。这些专题页面常见实现步骤如下：

1.运营策划，整理需求；

2.设计师完成设计稿；

3.前端切图，实现交互效果；

4.后端开发，调取数据，实现业务逻辑；

5.产品研发团队测试；

6.运营验收后上线。

前面说的是一种最基础的方法，在大平台中这些专题页面实际上平台预先设计好各种组件的数据规范，展现样式，客户端预先做好埋点。运营人员在后台添加模块，添加相关组件，调取数据后生成页面就可以在前台显示了。相当于把前面步骤中的345步骤简单化、流程化、标准化和自动化。

专题页面可以是原生实现，也可以是H5实现，建议是H5实现，方便拓展。最为关键的是平台需要预先设计好相关规范，本文会和大家聊一聊专题系统的设计。我们把专题系统抽象为创建、设计、发布三个维度。

创建专题

专题的创建比较简单，简单来说就是针对信息的增删改查。

创建专题涉及的信息如下：

1.基础信息，包括名称、备注、状态、排序。

2.页面TDK信息和分享信息，其中TDK信息是H5页面的标题，描述和关键词；分享信息包括标题、描述和分享配图。

3.操作，包括编辑专题、预览专辑。

专题设计

专题设计是指在创建的页面中添加不同的组件，设置数据源的过程。

在之前的文章中我们提到过一个模型，大家可以点击下面的链接回顾。用一句话来说就是组件是用来展示给用户看的，引导用户做出下一步动作。专题页面中的组件也会多次使用到这个模型，大家可以再研究一下这个模型。

App产品设计『运营工具』banner&开屏广告&插屏广告

下面我们来介绍一下常用的一些组件。

图片

图片组件是专题系统中最常见的组件之一，上传图片后设置图片的跳转页面。注意图片的显示要根据图片能自动实现裁剪，方便用户预览显示的效果。

轮播图

轮播广告相当于多张图片的组合。在图片组件的基础上增加了2个操作：设计轮播时间，添加新的图片帧。

导航按钮

导航按钮可以有多个，如果数量较多时前端页面上会有滑动切换的效果。按钮文字不超过4个字，其他的设置和图片类似。

商品组

展示一部分商品，可以通过“查看更多”链接进入商品列表。

后台可以控制的内容如下：商品分类、商品展示数量、显示类型（列表、横向滚动）等。

除了上面提到的组件，还有视频、搜索、公告、优惠券等组件。需要根据平台业务来自主进行设计，针对中小型平台，使用图片组件就能很好地满足应用场景了。

发布专题

发布专题是指将设计好的专题发布到不同的页面，比如说首页的banner位、发现信息流中的顶部，商品详情页的广告位等等。

这里建议在专题系统中统一发布，而不是分散在不同的模块中管理。这样无论是从运营使用，还是从研发实现角度都更容易理解。

专题系统设计要点

介绍完常用组件之后，我们来介绍一下后台专题系统设计的几个要点：

1.可视化，所见即所得，方便运营人员操作。

2.设计好内容选择的标准化组件，由于要多次选择平台内容，所以选择组件一定要合理设计。

3.优先实现MVP产品而不是MDP产品，按照规划持续迭代优化。

本文中提到的专题系统应用比较广泛，其设计思路也不算复杂。产品经理理解背景，设计理念后，从0到1就能逐步的实现一个标准化系统模块了。希望本文能对大家有所帮助。

在写作过程中，如果有意见或者想法，欢迎有兴趣的读者添加我的微信一起交流探索，共同进步。