从0到1，搭建营销中心认识后台系统（下）

　　后台系统就像是建筑根基，假如根基打不稳，装修得再漂亮也都是徒劳。所以，所有的后端开发和优化都应当摆在前端之前，产品经理也应当在产品开发设计之前就完善后端逻辑，为前端产品设计做好“后勤工作”。
　　上篇文章已经为大家介绍了后台系统三要素中的两点，分别是：业务和逻辑。在这里我就不多做回顾了，没有看过的同学们可以戳此链接前往：《从0到1，搭建营销中心认识后台系统（上）》。
　　今天讲的后台系统模块化偏实战，对设计交互原型图感到烦恼的同学应该会有所帮助；另外，我还会将自己总结的“如何快速制作原型图PP”T用简单易懂的图文展示给大家，之后会单独写一篇详细介绍。
　　那么开篇絮叨就到这里。
　　本文关键词：PRD，交互原型图，模块化，抄袭or借鉴。
　　何为PRD
　　在开始进入的文章前，我们先问一下自己，我们现在做的PRD文档，到底是在画画呢？还是真的在写文档？笔者很坦白的说，在公司里和内部人员交流、评审的都只是画的原型图，如下图：
　　又或者如下图：
　　笔者认为，以上这些都不能算作PRD，那么完整的PRD到底是怎么样的？
　　言简意赅：产品需求文档
　　产品：是围绕着一个完整的产品，而非零碎的功能点；
　　需求：能够讲述清楚产品背景、目的，用户价值和需求；
　　文档：能够作为资料被长期存档和更新迭代，且任何人都可以随时翻阅并且能够清晰了解整个产品；
　　如下图：
　　又或者如下图：
　　以上的两份案例，是较为完整的PRD产品需求文档。（两份分别是用Word和Axure编写，只展示了部分，如有需要源文件资源的，可以私信笔者）
　　笔者必须郑重提醒各位新晋产品经理：切忌成为功能经理。
　　模块化思维
　　讲完了PRD相关的内容，进入本文的正题，后台系统设计的第三个要素：模块化设计。
　　模块化设计是指：利用模块化思维，异类求同、同类求和的方式，组成产品模块，再将大模块打散拆分成小模块进行设计的一种方式。
　　在这里，有必要解释一下，何为“异类求同、同类求和”
　　异类求同
　　异类求同的概念是指，将看似不相关的业务或功能通过系统逻辑进行串联，比如仓库与收银台，看似完全不相干，但是从系统逻辑来分析，收银台结账后仓库库存会自动扣减，那么在两者就可以进行串联。
　　知道了两者的关联性后，在设计仓库模块和收银模块时，就可以将两者的串联关系体现在页面设计上了。
　　同类求和
　　同类求和的概念比较好理解，就是将相同或相似业务或功能尝试放在一起分析，有必要的话可以进行模块合并。
　　在这里也举个例子，比如营销中心会有优惠券、满减、满赠等活动形式，那么我们就需要将同类型的活动放在一起设计，方便技术开发，同样也为后期维护带来方便。（这里先不剧透营销中心的内容，具体营销中心的规划设计可以看后面的文章）
　　模块化设计
　　以上是对模块化思维的描述，接下来进入模块化设计的阶段。模块化设计主要分两部分来说：开源选型和交互规则。
　　开源模板选型（AntDesign）
　　所谓的开源就是开放源代码的意思，简而言之就是由一群思想境界极高的开发人员，将源代码公开让他人获取并使用。
　　那么从产品的角度来看，源代码带来了丰富多样的设计模板，也就是我们这节要讲的开源模板选型。我们使用开源模板的好处主要有两点：
　　1。交互原型图设计起来比较方便，不需要自己从0开始画，一些列表、按钮、input框、下拉框等组件都是现成的。
　　2。对于开发而言，设计的模板和代码是共通的，我们通过模板上复制一个按钮到原型图上，开发也同样会找该样式的源代码进行编写，省去了很多开发工作量。
　　关于开源模板的话，网上有许多，比如国外的ACE，腾讯的Weui，FrozenUI等，在这里为大家主要推荐由阿里蚂蚁金服开源的“AntDesign”。
　　事先申明，笔者并不是阿里的托，阿里也不需要我在这里托。具体资源看下面：
　　效果预览：https：pro。ant。designindexcn
　　资源下载：http：design。alipay。comresource
　　交互规则
　　AntDesign的交互原型我就不展开细说了，笔者会借着尼尔森交互原则中的部分和AntDesign的设计规范来为大家共同展示，完整的尼尔森十大交互原则，笔者会和另外一本书“Don’tMakeMeThink”作为一篇来写。
　　（1）一致性原则
　　顾名思义，一致性是指页面的样式，动效，文案，交互手势保持一致。
　　如上图所示，当鼠标悬浮上输入框或选择框时，方框都会变蓝，这是一种反馈式交互。
　　（2）易扫原则
　　后台系统的页面往往会数据量较大，列表页繁多，详情页更是信息堆积如山，如何让用户在最短的时间内浏览完页面上的内容，抓取到最重要的信息，这就是易扫原则。
　　详情页通常是后台系统最难设计的页面之一，因为任何信息都有可能需要展示详情，而详情页需要展示的内容也是多样化的。AntDesign通过层级式的设计，将信息流分隔成多个模块，将不同维度的内容用Tab进行切换，将主次关系通过颜色、字体、大小、高亮等形式凸现出来。让用户能够在较短的时间内浏览完信息量巨大的页面，而毫无疲惫感。
　　（3）人性化帮助原则
　　iPhone之所以成为街机，就是因为上到80岁老奶奶，下到3岁小孩，都可以毫不费力的上手。原因就在于iPhone的人性化帮助几乎都属于“无需提示”级别的，滑动手势、底布BUTTON按钮、3Dtouch、删除按钮时的抖动等等，都没有用任何的提示文本。
　　后台系统不像iPhone，无法做到“无需提示”，但是适时的提示和一些防错提示是很必要的。当鼠标悬浮到icon图标上后，提示文字适时的出现，告诉用户该按钮的用途，这就节省了很大的学习和试错成本；幽灵按钮和标签放在一起，无需提示，用户就知道该按钮是用来新增标签的，完全不需要一行提示文“新增标签”，页面更整洁。