后台系统就像是建筑根基，假如根基打不稳，装修得再漂亮也都是徒劳。所以，所有的后端开发和优化都应当摆在前端之前，产品经理也应当在产品开发设计之前就完善后端逻辑，为前端产品设计做好“后勤工作”。

上篇文章已经为大家介绍了后台系统三要素中的两点，分别是：业务和逻辑。在这里我就不多做回顾了，没有看过的同学们可以戳此链接前往：《从0到1，搭建营销中心——认识后台系统（上）》。

今天讲的后台系统模块化偏实战，对设计交互原型图感到烦恼的同学应该会有所帮助；另外，我还会将自己总结的“如何快速制作原型图PP”T用简单易懂的图文展示给大家，之后会单独写一篇详细介绍。

那么开篇絮叨就到这里。

本文关键词：PRD，交互原型图，模块化，抄袭or借鉴。

何为PRD

在开始进入的文章前，我们先问一下自己，我们现在做的PRD文档，到底是在画画呢？还是真的在写文档？笔者很坦白的说，在公司里和内部人员交流、评审的都只是画的原型图，如下图：

又或者如下图：

笔者认为，以上这些都不能算作PRD，那么完整的PRD到底是怎么样的？

言简意赅：产品 需求 文档

• 产品：是围绕着一个完整的产品，而非零碎的功能点；
• 需求：能够讲述清楚产品背景、目的，用户价值和需求；
• 文档：能够作为资料被长期存档和更新迭代，且任何人都可以随时翻阅并且能够清晰了解整个产品；

如下图：

又或者如下图：

以上的两份案例，是较为完整的PRD产品需求文档。（两份分别是用Word和Axure编写，只展示了部分，如有需要源文件资源的，可以私信笔者）

笔者必须郑重提醒各位新晋产品经理：切忌成为功能经理。

模块化思维

讲完了PRD相关的内容，进入本文的正题，后台系统设计的第三个要素：模块化设计。

模块化设计是指：利用模块化思维，异类求同、同类求和的方式，组成产品模块，再将大模块打散拆分成小模块进行设计的一种方式。

在这里，有必要解释一下，何为“异类求同、同类求和”——

异类求同

异类求同的概念是指，将看似不相关的业务或功能通过系统逻辑进行串联，比如仓库与收银台，看似完全不相干，但是从系统逻辑来分析，收银台结账后仓库库存会自动扣减，那么在两者就可以进行串联。

知道了两者的关联性后，在设计仓库模块和收银模块时，就可以将两者的串联关系体现在页面设计上了。

同类求和

同类求和的概念比较好理解，就是将相同或相似业务或功能尝试放在一起分析，有必要的话可以进行模块合并。

在这里也举个例子，比如营销中心会有优惠券、满减、满赠等活动形式，那么我们就需要将同类型的活动放在一起设计，方便技术开发，同样也为后期维护带来方便。（这里先不剧透营销中心的内容，具体营销中心的规划设计可以看后面的文章）

模块化设计

以上是对模块化思维的描述，接下来进入模块化设计的阶段。模块化设计主要分两部分来说：开源选型和交互规则。

开源模板选型（Ant Design）

所谓的开源就是开放源代码的意思，简而言之就是由一群思想境界极高的开发人员，将源代码公开让他人获取并使用。

那么从产品的角度来看，源代码带来了丰富多样的设计模板，也就是我们这节要讲的开源模板选型。我们使用开源模板的好处主要有两点：

1. 交互原型图设计起来比较方便，不需要自己从0开始画，一些列表、按钮、input框、下拉框等组件都是现成的。

2. 对于开发而言，设计的模板和代码是共通的，我们通过模板上复制一个按钮到原型图上，开发也同样会找该样式的源代码进行编写，省去了很多开发工作量。

关于开源模板的话，网上有许多，比如国外的ACE，腾讯的Weui，Frozen UI等，在这里为大家主要推荐由阿里蚂蚁金服开源的“Ant Design”。

事先申明，笔者并不是阿里的托，阿里也不需要我在这里托。具体资源看下面：

效果预览：https://pro.ant.design/index-cn

资源下载：http://design.alipay.com/resource

交互规则

Ant Design的交互原型我就不展开细说了，笔者会借着尼尔森交互原则中的部分和Ant Design的设计规范来为大家共同展示，完整的尼尔森十大交互原则，笔者会和另外一本书“Don’t Make Me Think”作为一篇来写。

（1）一致性原则

顾名思义，一致性是指页面的样式，动效，文案，交互手势保持一致。

如上图所示，当鼠标悬浮上输入框或选择框时，方框都会变蓝，这是一种反馈式交互。

（2）易扫原则

后台系统的页面往往会数据量较大，列表页繁多，详情页更是信息堆积如山，如何让用户在最短的时间内浏览完页面上的内容，抓取到最重要的信息，这就是易扫原则。

详情页通常是后台系统最难设计的页面之一，因为任何信息都有可能需要展示详情，而详情页需要展示的内容也是多样化的。Ant Design通过层级式的设计，将信息流分隔成多个模块，将不同维度的内容用Tab进行切换，将主次关系通过颜色、字体、大小、高亮等形式凸现出来。让用户能够在较短的时间内浏览完信息量巨大的页面，而毫无疲惫感。

（3）人性化帮助原则

iPhone之所以成为街机，就是因为上到80岁老奶奶，下到3岁小孩，都可以毫不费力的上手。原因就在于iPhone的人性化帮助几乎都属于“无需提示”级别的，滑动手势、底布BUTTON按钮、3Dtouch、删除按钮时的抖动等等，都没有用任何的提示文本。

后台系统不像iPhone，无法做到“无需提示”，但是适时的提示和一些防错提示是很必要的。当鼠标悬浮到icon图标上后，提示文字适时的出现，告诉用户该按钮的用途，这就节省了很大的学习和试错成本；幽灵按钮和标签放在一起，无需提示，用户就知道该按钮是用来新增标签的，完全不需要一行提示文“新增标签”，页面更整洁。

本文由 @小鸡腿 原创发布于人人都是产品经理，未经许可，禁止转载

题图来自 Unsplash，基于 CC0 协议