以“封装”的思维，来做原型

原型是产品经理岗位最基本也是最重要的产出了，那么作为我们产品汪的日常工作，效率就很关键了，想要提高效率，不妨试一试用“封装”的思维方式来做原型吧~

封装的概念

不管大家是不是技术出身，整天被互联网浪潮浸泡的我们，对于JAVA中三大特性：“封装”、“继承”、“多态”，总是有所耳濡目染的吧。也正是由于这三大特性，才使得JAVA从互联网的“雨露均沾”中脱颖而出，“偏偏只宠JAVA一人啊”。

1. 定义

封装（Encapsulation）是面向对象方法的重要原则，就是把对象的属性和操作（或服务）结合为一个独立的整体，并尽可能隐藏对象的内部实现细节。

2. 优点

1. 提高复用性；
2. 无需了解实现细节；
3. 内部结构可自由修改。

3. “讲人话”

好了，大家可能会说这是什么鬼，赶紧“讲人话”…我们直观地理解一下，意思大概是这样的：这个封装好的功能我管他如何实现的呢，我们直接拿过来用就行了；某些地方用着不爽怎么办，那就在原来的基础上改啊，尺寸不合适我调尺寸，颜色不好看我调颜色，调完以后呢，还是直接安上去就能用。

嗯，封装的意思，好像就是这样的。

那么，怎样以这种思维方式来提高我们做原型的效率呢？大家接着往下看~

做原型，“封装”的五层次

第一层次：组合

嗯，没错，你可能已经猜到了，第一层次就是这个非常low的，Axure中的组合功能。

既然这么low，那么我们为什么还要讲呢？毕竟是第一层次嘛，总是那么高屋建瓴地俯瞰众生，这样也不好对不对（虽然笔者从来都是仰视）。

优点：

1. 复制粘贴方便
2. 位置挪动方便

如果没用组合，万一你下个版本要把一个区域的东西换到另一个位置上去呢？万一你整个页面要出现类似的东西好多遍呢？你会怎么办？你能怎么办？

貌似只能鼠标拖个范围选中一大坨东西了，嗯，组合主要解决的就是这个问题。

第二层次：母版

我们就随便举一个例子，就拿一个网站的顶部导航来说。对于一个产品原型，搞二三十个界面很随意吧，然后我们就假设20个原型界面都有这个顶部导航，就算我们用了组合，那也得复制1遍，粘贴19遍吧。如果其中的内容发生了变更，那我们怎么办呢，只能改1遍，然后再粘贴19遍。

年轻人为什么要这么折磨自己呢？

所以，会多处用到的相同内容尽量用母版。同时，母版顺便解决了排列不齐的问题。

what？你说不知道母版怎么用？你也不知道母版怎么就解决了排列不齐的问题了？

那就继续往下看吧。

这是一个APP的基础框架底板，母版功能就在鼠标右键啊。

然后呢，我们还可以设置母版的位置，至于这三种位置到底是怎么用呢，大家自己试，自己动手，丰衣足食。

第三层次：组件

好了，刚才我们说的前两个层次，都是针对同一个项目内部的。当我们做的项目足够多了以后，会发现更多共性的内容，这个时候，就需要总结这些具有共性的组件啦。

我们拿分页功能 （Pagination）举个例子吧，这个功能够常见吧，但我们总结细分一下，分页的类型也可以分为好多种啊，大家总结过么？

笔者总结的有八种，放上去实在太多了，就选择其中四种给大家展示一下吧。

分页功能只是组件总结的冰山一角呀，我们能总结的实在是太多了，只说分类，不说内容，大类就可以分为六类，小类的话，只是常用组件就可以分为二十项：

为了满足大家的好奇心，我们就再举一个例子吧。大家可知道，文字的颜色和大小，在不同的场景下，可是大有讲究的，详细说来，我们可以总结为以下十种：

组件总结两方面：

1. 一方面是需要自己在工作的过程中，不断总结沉淀自己的内容。
2. 另一方面也需要不断地收集现成的优质资源。

说实话，笔者画了那么多次的轮播图，如果是没用现成组件，我还真得研究一下怎么做。（有可能不会做0.0）

第四层次：框架

从组件再往上提升一个层次的话，就到了框架层了。前面我们只是总结了一个个的功能组件都是什么样子的，当我们经历的不同类型的项目足够多了以后，我们也可以接着总结一下：不同产品的框架都是个什么样纸？

例如：小程序平台框架，短视频平台框架，在线教育平台框架，内容分享平台框架，等等等等。

把这个层次的内容总结完之后，可就真是打通了任督二脉，十八般武艺样样精通了啊。

我们还是举一个例子吧，看一下内容类平台的个人中心，大致是个什么风格：

做内容类产品的小伙伴，看到此图后，有没有一种莫名的亲切感呢~

第五层次：组件库

同学们，这可是“封装”思维做原型的最高境界啦，哪位同学能总结到这一层次，那都不用感觉，人生肯定到达了巅峰，人生肯定到达了高潮呀！升职，加薪，成为高富帅，迎娶白富美……嗯，想多了…

不过在做原型这一境界，绝对可以让我们独孤求败了！

那么，组件库该如何建立呢？

笔者常用的组件库，从大类划分的话，其实就是APP端和WEB端了。然后，将我们第三层次总结的组件和第四层次总结的框架，再次进行归纳总结，你猜怎么着~第五层次成了！

耳听为虚眼见为实，来来来，晓庄同学给大家真真切切地分享一个实际案例，大家可以自己动手看看哦~

http://www.axureux.com/demo/LibrariesMobLite/menu.html

“闲言碎语”

以一句IT界的经典话语总结一下，何为“封装”思维吧：我们不生产代码，我们只是IT界的搬运工！

在公司的项目中，产品经理属于产品的设计层次，程序员属于产品的实现层次。我们换到互联网的视角，来再看看这个问题：其实99%的程序员也只是在“代码搬运”的工作，大到例如“Struts”框架，小到诸如“if。

…else…”语句，有多少是程序员一个字符一个字符的敲出来的呢？答案是显而易见的，他们实现的方式跟我们今天所讲“封装”思维，其实是一样一样的~

不要以创造性的思维来进行思考，我们需要的只是创新，因为我们所处的，是一个应用型技术的时代！

结语

今天我们讨论了以“封装”的思维，来做原型的五个层次，掌握了这五个层次，那做原型对我们来说，可真就是手到擒来了呀。

一个人能走多远，关键在于与谁同行！很高兴学习分享的道路上，能够与您相伴。如果以上内容对您有所帮助的话，也希望能够点赞打赏一下，晓庄同学在此叩谢！

本文由 @晓庄同学 原创发布于人人都是产品经理，未经许可，禁止转载。

题图来自Unsplash，基于CC0协议。

作者暂无likerid, 赞赏暂由本网站代持，当作者有likerid后会全部转账给作者（我们会尽力而为）。


Support author:
Author's Filecoin address:
Or you can use Likecoin to support author: