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

封裝的概念

不管大家是不是技術(shù)出身，整天被互聯(lián)網(wǎng)浪潮浸泡的我們，對于JAVA中三大特性：“封裝”、“繼承”、“多態(tài)”，總是有所耳濡目染的吧。也正是由于這三大特性，才使得JAVA從互聯(lián)網(wǎng)的“雨露均沾”中脫穎而出，“偏偏只寵JAVA一人啊”。

1. 定義

封裝（Encapsulation）是面向?qū)ο蠓椒ǖ闹匾瓌t，就是把對象的屬性和操作（或服務(wù)）結(jié)合為一個獨立的整體，并盡可能隱藏對象的內(nèi)部實現(xiàn)細節(jié)。

2. 優(yōu)點

1. 提高復(fù)用性；
2. 無需了解實現(xiàn)細節(jié)；
3. 內(nèi)部結(jié)構(gòu)可自由修改。

3. “講人話”

好了，大家可能會說這是什么鬼，趕緊“講人話”…我們直觀地理解一下，意思大概是這樣的：這個封裝好的功能我管他如何實現(xiàn)的呢，我們直接拿過來用就行了；某些地方用著不爽怎么辦，那就在原來的基礎(chǔ)上改啊，尺寸不合適我調(diào)尺寸，顏色不好看我調(diào)顏色，調(diào)完以后呢，還是直接安上去就能用。

嗯，封裝的意思，好像就是這樣的。

那么，怎樣以這種思維方式來提高我們做原型的效率呢？大家接著往下看~

做原型，“封裝”的五層次

第一層次：組合

嗯，沒錯，你可能已經(jīng)猜到了，第一層次就是這個非常low的，Axure中的組合功能。

既然這么low，那么我們?yōu)槭裁催€要講呢？畢竟是第一層次嘛，總是那么高屋建瓴地俯瞰眾生，這樣也不好對不對（雖然筆者從來都是仰視）。

優(yōu)點：

1. 復(fù)制粘貼方便
2. 位置挪動方便

如果沒用組合，萬一你下個版本要把一個區(qū)域的東西換到另一個位置上去呢？萬一你整個頁面要出現(xiàn)類似的東西好多遍呢？你會怎么辦？你能怎么辦？

貌似只能鼠標(biāo)拖個范圍選中一大坨東西了，嗯，組合主要解決的就是這個問題。

第二層次：母版

我們就隨便舉一個例子，就拿一個網(wǎng)站的頂部導(dǎo)航來說。對于一個產(chǎn)品原型，搞二三十個界面很隨意吧，然后我們就假設(shè)20個原型界面都有這個頂部導(dǎo)航，就算我們用了組合，那也得復(fù)制1遍，粘貼19遍吧。如果其中的內(nèi)容發(fā)生了變更，那我們怎么辦呢，只能改1遍，然后再粘貼19遍。

年輕人為什么要這么折磨自己呢？

所以，會多處用到的相同內(nèi)容盡量用母版。同時，母版順便解決了排列不齊的問題。

what？你說不知道母版怎么用？你也不知道母版怎么就解決了排列不齊的問題了？

那就繼續(xù)往下看吧。

這是一個APP的基礎(chǔ)框架底板，母版功能就在鼠標(biāo)右鍵啊。

然后呢，我們還可以設(shè)置母版的位置，至于這三種位置到底是怎么用呢，大家自己試，自己動手，豐衣足食。

第三層次：組件

好了，剛才我們說的前兩個層次，都是針對同一個項目內(nèi)部的。當(dāng)我們做的項目足夠多了以后，會發(fā)現(xiàn)更多共性的內(nèi)容，這個時候，就需要總結(jié)這些具有共性的組件啦。

我們拿分頁功能 （Pagination）舉個例子吧，這個功能夠常見吧，但我們總結(jié)細分一下，分頁的類型也可以分為好多種啊，大家總結(jié)過么？

筆者總結(jié)的有八種，放上去實在太多了，就選擇其中四種給大家展示一下吧。

分頁功能只是組件總結(jié)的冰山一角呀，我們能總結(jié)的實在是太多了，只說分類，不說內(nèi)容，大類就可以分為六類，小類的話，只是常用組件就可以分為二十項：

為了滿足大家的好奇心，我們就再舉一個例子吧。大家可知道，文字的顏色和大小，在不同的場景下，可是大有講究的，詳細說來，我們可以總結(jié)為以下十種：

組件總結(jié)兩方面：

1. 一方面是需要自己在工作的過程中，不斷總結(jié)沉淀自己的內(nèi)容。
2. 另一方面也需要不斷地收集現(xiàn)成的優(yōu)質(zhì)資源。

說實話，筆者畫了那么多次的輪播圖，如果是沒用現(xiàn)成組件，我還真得研究一下怎么做。（有可能不會做0.0）

第四層次：框架

從組件再往上提升一個層次的話，就到了框架層了。前面我們只是總結(jié)了一個個的功能組件都是什么樣子的，當(dāng)我們經(jīng)歷的不同類型的項目足夠多了以后，我們也可以接著總結(jié)一下：不同產(chǎn)品的框架都是個什么樣紙？

例如：小程序平臺框架，短視頻平臺框架，在線教育平臺框架，內(nèi)容分享平臺框架，等等等等。

把這個層次的內(nèi)容總結(jié)完之后，可就真是打通了任督二脈，十八般武藝樣樣精通了啊。

我們還是舉一個例子吧，看一下內(nèi)容類平臺的個人中心，大致是個什么風(fēng)格：

做內(nèi)容類產(chǎn)品的小伙伴，看到此圖后，有沒有一種莫名的親切感呢~

第五層次：組件庫

同學(xué)們，這可是“封裝”思維做原型的最高境界啦，哪位同學(xué)能總結(jié)到這一層次，那都不用感覺，人生肯定到達了巔峰，人生肯定到達了高潮呀！升職，加薪，成為高富帥，迎娶白富美……嗯，想多了…

不過在做原型這一境界，絕對可以讓我們獨孤求敗了！

那么，組件庫該如何建立呢？

筆者常用的組件庫，從大類劃分的話，其實就是APP端和WEB端了。然后，將我們第三層次總結(jié)的組件和第四層次總結(jié)的框架，再次進行歸納總結(jié)，你猜怎么著~第五層次成了！

耳聽為虛眼見為實，來來來，曉莊同學(xué)給大家真真切切地分享一個實際案例，大家可以自己動手看看哦~

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

“閑言碎語”

以一句IT界的經(jīng)典話語總結(jié)一下，何為“封裝”思維吧：我們不生產(chǎn)代碼，我們只是IT界的搬運工！

在公司的項目中，產(chǎn)品經(jīng)理屬于產(chǎn)品的設(shè)計層次，程序員屬于產(chǎn)品的實現(xiàn)層次。我們換到互聯(lián)網(wǎng)的視角，來再看看這個問題：其實99%的程序員也只是在“代碼搬運”的工作，大到例如“Struts”框架，小到諸如“if。

…else…”語句，有多少是程序員一個字符一個字符的敲出來的呢？答案是顯而易見的，他們實現(xiàn)的方式跟我們今天所講“封裝”思維，其實是一樣一樣的~

不要以創(chuàng)造性的思維來進行思考，我們需要的只是創(chuàng)新，因為我們所處的，是一個應(yīng)用型技術(shù)的時代！

結(jié)語

今天我們討論了以“封裝”的思維，來做原型的五個層次，掌握了這五個層次，那做原型對我們來說，可真就是手到擒來了呀。

本文由 @曉莊同學(xué) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。