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

封装的概念

不管大家是不是技术出身，整天被互联网浪潮浸泡的我们，对于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协议。

喽小伙伴们，咱们又见面了，我是咕噜铁蛋，随着移动设备的普及，移动应用程序（APP）已经成为人们日常生活中不可或缺的一部分，而原生APP和h5就是现代移动应用程序开发中的两种主要技术方式。今天铁蛋就给大家介绍介绍它们的原理以及二者之间的区别。

原生app是指使用特定的编程语言和开发工具，直接针对特定的移动设备平台（比如iOS或Android）进行开发的应用程序。这种应用程序在硬件上有更好的适应性、更高的性能和更丰富的功能。开发原生app需要掌握平台特定的编程语言和API，并且需要为不同的平台分别进行开发和发布。Android平台通常使用Java或Kotlin编程语言，而iOS平台主要使用Objective-C和Swift。原生APP开发充分利用了操作系统的功能，为本机应用程序带来了高性能和良好的用户体验。此外，原生应用程序具有很强的设备兼容性，可以直接应用于设备硬件和一些系统功能，如摄像头、GPS、蓝牙等。

H5封装（也称为Hybrid App）是指基于web技术（HTML、CSS和JavaScript）开发的应用程序，通过封装在原生app的webview中运行。H5封装的应用程序实际上是一个嵌入在原生壳中的网页，通过JavaScript与原生壳进行交互，以实现访问设备功能和提供更好的用户体验。相比于原生app，H5封装更加快速开发、跨平台兼容，也更易于更新和发布。但是在性能和用户体验上没有原生APP好。

两者的主要区别如下：

1. 开发语言：原生app使用特定平台的编程语言，如Objective-C/Swift（iOS）或Java/Kotlin（Android），H5封装使用HTML、CSS和JavaScript。

2. 性能：原生app通过直接调用设备功能和API，具有更好的性能和响应速度；而H5封装则受限于webview性能，相对较慢。

3. 功能和交互：原生app可以直接调用设备功能和接口，有更丰富的功能和交互效果；H5封装需要基于JavaScript和webview提供的接口。

4. 平台适配性：原生app需要为不同平台分别开发，而H5封装可以进行跨平台开发。

5. 更新和发布：原生app需要通过应用商店进行发布和更新，用户需要主动下载安装；而H5封装可以通过服务器端的更新实现快速发布和更新。

在一些对性能和设备功能要求较高的场景（如游戏、工具类应用等）中，原生App可能是更好的选择。而对于对性能要求相对较低、更新迭代快、预算有限的项目来说，H5应用程序可能更实用。综上所述，原生app和H5封装在开发语言、性能、功能和交互、平台适配性、更新和发布等方面都存在明显的差异。选择合适的开发方式应根据具体需求和项目情况来决定。

Ok！同学们，今天的小课堂就到这里啦，如果我有哪疏忽或者讲的不对的地方可以提出来哦，咱们明天见！