以“封裝”的思維,來做原型

12 評論 9443 瀏覽 91 收藏 11 分鐘

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

封裝的概念

不管大家是不是技術出身,整天被互聯網浪潮浸泡的我們,對于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
評論
評論請登錄
  1. 大佬666

    來自江蘇 回復
  2. RP文件分享下唄

    來自北京 回復
    1. 我在公眾號內分享了,公眾號:曉莊同學產品筆記。 公眾號內還可以添加我微信哈 ??

      來自河南 回復
  3. 哪位同學能總結到這一層次,那都不用感覺,人生肯定到達了巔峰,人生肯定到達了高潮呀!升職,加薪,成為高富帥,迎娶白富美……嗯,想多了…哈哈哈哈哈哈哈哈哈 ??

    來自陜西 回復
    1. ??

      來自河南 回復
  4. 產品新人,不知道可不可以收藏一下分下連接的rp文件 :mrgreen:

    來自四川 回復
  5. 現成的空間直接用不行?

    回復
    1. 必須行啊,筆者在組件總結兩方面中提到了呀:

      一方面是需要自己在工作的過程中,不斷總結沉淀自己的內容;
      另一方面也需要不斷地收集現成的優質資源。 ??

      來自河南 回復
  6. 趕緊燥起來吧,歡迎大家積極發表自己的觀點呀。對組件庫有需求的小伙伴們,也可以積極聯系曉莊同學呀。不過首先聲明一下,曉莊同學本次的組件分享方式為價值交換哦,大家可以拿其他的組件來跟曉莊同學進行交換,當然也可以簡單粗暴地拿金錢來交換呀~其實大家自己總結也是一種交換,只是交換的內容是時間和精力罷了~

    來自河南 回復
    1. how money

      來自安徽 回復
  7. 贊??

    回復
    1. 你這敷衍了事… ??

      來自河南 回復