从0到1,搭建营销中心——认识后台系统(下)

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

上篇文章已经为大家介绍了后台系统三要素中的两点,分别是:业务和逻辑。在这里我就不多做回顾了,没有看过的同学们可以戳此链接前往:《从 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 图标上后,提示文字适时的出现,告诉用户该按钮的用途,这就节省了很大的学习和试错成本;幽灵按钮和标签放在一起,无需提示,用户就知道该按钮是用来新增标签的,完全不需要一行提示文“新增标签”,页面更整洁。
 
作者 @小鸡腿