型是產品經理崗位最基本也是最重要的產出了，那么作為我們產品汪的日常工作，效率就很關鍵了，想要提高效率，不妨試一試用“封裝”的思維方式來做原型吧~

封裝的概念

不管大家是不是技術出身，整天被互聯網浪潮浸泡的我們，對于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！同學們，今天的小課堂就到這里啦，如果我有哪疏忽或者講的不對的地方可以提出來哦，咱們明天見！