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

封裝的概念

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

1. 定義

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

2. 優(yōu)點(diǎn)

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

3. “講人話”

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

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

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

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

第一層次：組合

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

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

優(yōu)點(diǎn)：

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

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

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

第二層次：母版

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

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

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

what？你說(shuō)不知道母版怎么用？你也不知道母版怎么就解決了排列不齊的問(wèn)題了？

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

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

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

第三層次：組件

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

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

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

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

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

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

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

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

第四層次：框架

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

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

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

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

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

第五層次：組件庫(kù)

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

不過(guò)在做原型這一境界，絕對(duì)可以讓我們獨(dú)孤求敗了！

那么，組件庫(kù)該如何建立呢？

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

耳聽(tīng)為虛眼見(jiàn)為實(shí)，來(lái)來(lái)來(lái)，曉莊同學(xué)給大家真真切切地分享一個(gè)實(shí)際案例，大家可以自己動(dòng)手看看哦~

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

“閑言碎語(yǔ)”

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

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

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

不要以創(chuàng)造性的思維來(lái)進(jìn)行思考，我們需要的只是創(chuàng)新，因?yàn)槲覀兯幍模且粋€(gè)應(yīng)用型技術(shù)的時(shí)代！

結(jié)語(yǔ)

今天我們討論了以“封裝”的思維，來(lái)做原型的五個(gè)層次，掌握了這五個(gè)層次，那做原型對(duì)我們來(lái)說(shuō)，可真就是手到擒來(lái)了呀。

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

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