型是產品經理崗位最基本也是最重要的產出了,那么作為我們產品汪的日常工作,效率就很關鍵了,想要提高效率,不妨試一試用“封裝”的思維方式來做原型吧~
不管大家是不是技術出身,整天被互聯網浪潮浸泡的我們,對于JAVA中三大特性:“封裝”、“繼承”、“多態”,總是有所耳濡目染的吧。也正是由于這三大特性,才使得JAVA從互聯網的“雨露均沾”中脫穎而出,“偏偏只寵JAVA一人啊”。
封裝(Encapsulation)是面向對象方法的重要原則,就是把對象的屬性和操作(或服務)結合為一個獨立的整體,并盡可能隱藏對象的內部實現細節。
好了,大家可能會說這是什么鬼,趕緊“講人話”…我們直觀地理解一下,意思大概是這樣的:這個封裝好的功能我管他如何實現的呢,我們直接拿過來用就行了;某些地方用著不爽怎么辦,那就在原來的基礎上改啊,尺寸不合適我調尺寸,顏色不好看我調顏色,調完以后呢,還是直接安上去就能用。
嗯,封裝的意思,好像就是這樣的。
那么,怎樣以這種思維方式來提高我們做原型的效率呢?大家接著往下看~
嗯,沒錯,你可能已經猜到了,第一層次就是這個非常low的,Axure中的組合功能。
既然這么low,那么我們為什么還要講呢?畢竟是第一層次嘛,總是那么高屋建瓴地俯瞰眾生,這樣也不好對不對(雖然筆者從來都是仰視)。
優點:
如果沒用組合,萬一你下個版本要把一個區域的東西換到另一個位置上去呢?萬一你整個頁面要出現類似的東西好多遍呢?你會怎么辦?你能怎么辦?
貌似只能鼠標拖個范圍選中一大坨東西了,嗯,組合主要解決的就是這個問題。
我們就隨便舉一個例子,就拿一個網站的頂部導航來說。對于一個產品原型,搞二三十個界面很隨意吧,然后我們就假設20個原型界面都有這個頂部導航,就算我們用了組合,那也得復制1遍,粘貼19遍吧。如果其中的內容發生了變更,那我們怎么辦呢,只能改1遍,然后再粘貼19遍。
年輕人為什么要這么折磨自己呢?
所以,會多處用到的相同內容盡量用母版。同時,母版順便解決了排列不齊的問題。
what?你說不知道母版怎么用?你也不知道母版怎么就解決了排列不齊的問題了?
那就繼續往下看吧。
這是一個APP的基礎框架底板,母版功能就在鼠標右鍵啊。
然后呢,我們還可以設置母版的位置,至于這三種位置到底是怎么用呢,大家自己試,自己動手,豐衣足食。
好了,剛才我們說的前兩個層次,都是針對同一個項目內部的。當我們做的項目足夠多了以后,會發現更多共性的內容,這個時候,就需要總結這些具有共性的組件啦。
我們拿分頁功能 (Pagination)舉個例子吧,這個功能夠常見吧,但我們總結細分一下,分頁的類型也可以分為好多種啊,大家總結過么?
筆者總結的有八種,放上去實在太多了,就選擇其中四種給大家展示一下吧。
分頁功能只是組件總結的冰山一角呀,我們能總結的實在是太多了,只說分類,不說內容,大類就可以分為六類,小類的話,只是常用組件就可以分為二十項:
為了滿足大家的好奇心,我們就再舉一個例子吧。大家可知道,文字的顏色和大小,在不同的場景下,可是大有講究的,詳細說來,我們可以總結為以下十種:
組件總結兩方面:
說實話,筆者畫了那么多次的輪播圖,如果是沒用現成組件,我還真得研究一下怎么做。(有可能不會做0.0)
從組件再往上提升一個層次的話,就到了框架層了。前面我們只是總結了一個個的功能組件都是什么樣子的,當我們經歷的不同類型的項目足夠多了以后,我們也可以接著總結一下:不同產品的框架都是個什么樣紙?
例如:小程序平臺框架,短視頻平臺框架,在線教育平臺框架,內容分享平臺框架,等等等等。
把這個層次的內容總結完之后,可就真是打通了任督二脈,十八般武藝樣樣精通了啊。
我們還是舉一個例子吧,看一下內容類平臺的個人中心,大致是個什么風格:
做內容類產品的小伙伴,看到此圖后,有沒有一種莫名的親切感呢~
同學們,這可是“封裝”思維做原型的最高境界啦,哪位同學能總結到這一層次,那都不用感覺,人生肯定到達了巔峰,人生肯定到達了高潮呀!升職,加薪,成為高富帥,迎娶白富美……嗯,想多了…
不過在做原型這一境界,絕對可以讓我們獨孤求敗了!
那么,組件庫該如何建立呢?
筆者常用的組件庫,從大類劃分的話,其實就是APP端和WEB端了。然后,將我們第三層次總結的組件和第四層次總結的框架,再次進行歸納總結,你猜怎么著~第五層次成了!
耳聽為虛眼見為實,來來來,曉莊同學給大家真真切切地分享一個實際案例,大家可以自己動手看看哦~
http://www.axureux.com/demo/LibrariesMobLite/menu.html
以一句IT界的經典話語總結一下,何為“封裝”思維吧:我們不生產代碼,我們只是IT界的搬運工!
在公司的項目中,產品經理屬于產品的設計層次,程序員屬于產品的實現層次。我們換到互聯網的視角,來再看看這個問題:其實99%的程序員也只是在“代碼搬運”的工作,大到例如“Struts”框架,小到諸如“if。
…else…”語句,有多少是程序員一個字符一個字符的敲出來的呢?答案是顯而易見的,他們實現的方式跟我們今天所講“封裝”思維,其實是一樣一樣的~
不要以創造性的思維來進行思考,我們需要的只是創新,因為我們所處的,是一個應用型技術的時代!
今天我們討論了以“封裝”的思維,來做原型的五個層次,掌握了這五個層次,那做原型對我們來說,可真就是手到擒來了呀。
本文由 @曉莊同學 原創發布于人人都是產品經理,未經許可,禁止轉載。
題圖來自Unsplash,基于CC0協議。
嘍小伙伴們,咱們又見面了,我是咕嚕鐵蛋,隨著移動設備的普及,移動應用程序(APP)已經成為人們日常生活中不可或缺的一部分,而原生APP和h5就是現代移動應用程序開發中的兩種主要技術方式。今天鐵蛋就給大家介紹介紹它們的原理以及二者之間的區別。
源自www.gulufenfa.com
原生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!同學們,今天的小課堂就到這里啦,如果我有哪疏忽或者講的不對的地方可以提出來哦,咱們明天見!
天,小妖先給大家獻上又一個“利器”。在之前的每一個 Demo 中,我們都不厭其煩地創建場景、創建相機、創建光源。。。經過幾次的實踐,大家現在應該也對這個流程十分熟悉了。現在,我們想擺脫這些煩雜的設置,更專注于每一篇的新知識點。于是,小妖封裝了這些基本的方法,簡化了初始化的流程。源碼見本篇 Demo : http://xngeer.frostbelt.cn/itemthreedemo/5.mgr.2.html 中引入的 ThreeMgr.js,依賴于 jQuery
這個 ThreeMgr.js,提供了哪些方法呢?我們先對比一下 5.mgr.1.html 和 5.mgr.2.html 兩個 Demo 頁的代碼:
1. 初始化
查看 ThreeMgr 源碼,我們自己有一套默認設置 defaultConfig,init 時只需要設置部分值覆蓋默認值即可。省略了煩雜的初始化過程,代碼更簡潔易記。
2. 光源
從上面也可以看到,ThreeMgr 有一個 addLight 方法,支持創建 4 種常用的光源
3. dat.GUI
小妖也封裝了上一篇講到的 dat.GUI,見 鏈接。
從這里看代碼量并沒有減少,但是不是邏輯清晰一些,可讀性強一些?
4. Stats
每次都要復制過來的幀率。。簡化為一行代碼
5. 動畫
ThreeMgr.render(Boolean is_loop, Function animate); is_loop 定義是否每幀重繪,animate 定義重繪前對場景中各元素如何修改。
嗯。。確實沒什么技術含量,只是對一些常用方法的簡單封裝,世界是由懶人創造的嘛。除了上述方法,ThreeMgr 還封裝了其它一些常用方法,感興趣的同學可以去查看下源碼,以后有用到時小妖也還會單獨說明。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。