1小時游戲,教會4歲女兒理解互聯網產品技術

4 評論 7720 瀏覽 17 收藏 19 分鐘

互聯網產品技術對一般人好像沒接觸太多,肯定難以理解,那怎么講會讓大家更好理解呢?我想了個招兒,教會我4歲多的女兒,她如果能理解,那我想一般人都沒問題了。

一、背景

互聯網產品屆,歷年來一直有個老生常談的問題,而每當這個問題出現在知乎、脈脈一眾社交平臺時,卻總能掀起血雨腥風。

這個頗具爭議的問題就是:“產品需要懂技術嗎?”

因為自己是產品出身,除了大學里學過一些計算機知識外,并沒有自己寫過代碼。但是工作時間長了,久而久之也對技術范疇有了淺薄兒的了解。到目前為止,雖然還是不會寫也看不懂代碼,但是卻可以做到和技術同學做到完全對等的交流,甚至有時候還能和技術瞎侃下實現方案。

所以,我在想,“產品需要懂技術嗎?”這個問題是不是可以換個問法,例問:“產品和技術是如何交互的?”是不是更容易回答一些,畢竟前者問題是個辯論話題,后者問題是可以取百家答案之精華,是個覆蓋度的問題。

所以,我就想先嘗試回答我這個新問題,今天先聊一些,后續想起來再繼續補充。

回歸正題,互聯網產品技術對一般人好像沒接觸太多,肯定難以理解,那怎么講會讓大家更好理解呢?我想了個招兒,教會我4歲多的女兒,她如果能理解,那我想一般人都沒問題了。

本篇文章,我就以一個產品經理做項目的方式來展開。

先定下我們的產品目標:讓普通人可以理解基本的互聯網產品技術基礎知識。

————分割線預警(以下內容針對一般人)———

二、需求分析

接下來,先考慮2件問題:

1. 問題一:我要講解哪些基礎知識?

針對第一個問題,根據我多年的經驗,我認為可以圍繞一個話題來闡述:“平時你在電腦/手機上操作頁面時,系統是如何運行的?”

備注:我們只講應用層,如果你要提微機原理、計算機網絡,那證明你已經不是一般人了。

我認為有一組知識,可以來解答上述問題,一旦你知道了這個原理,其他更多問題都只是這個基礎的復雜加工而已。

這組知識點就3個概念:前端、后端、數據庫,然后你只需要搞懂以下4個問題,就能入門。

  1. 何為前端?前端做啥?
  2. 何為后端?后端做啥?
  3. 何為數據庫?數據庫做啥?
  4. 以上3個東東是怎么相互協作的?

2. 問題二:我要怎么講解才能讓一般人聽懂?

既然要達到讓幼兒園小朋友都能理解,那必然是游戲嘍~

大家都知道,互聯網產品在現實中都存在原型場景,從抽象的業務流程角度,現實與網絡都是一一映射的。

所以游戲設計中,第一層是現實場景與互聯網產品之間的映射比較,第二層是互聯網產品內各個環節也實體可視化,這樣兩者結合起來,大家理解就會容易很多。

三、產品設計(請叫我游戲策劃):

1. 構思

(1)腦海中獲取到的創意點兒

① 小孩對玩具都比較喜歡,前幾天剛好給女兒買了一套發條小玩具(共計10個);

② 小孩都喜歡玩過家家類游戲,對可交互類的游戲接受度更高;

③ 4歲小孩對顏色、數字、部分漢字已掌握,基本算數、邏輯推理也已具備;

④ 小孩對幼兒園也比較有歸屬感,對年級、教室都有認知;

⑤ 家里買了不少樂高玩具,小孩對拼樂高也都比較喜歡且已經可以動手拼裝,樂高顏色種類不少。

(2)我想要傳達的知識點(此處寫文章需要,下邊①②③④⑤看不懂沒關系,往后看)

① 現實世界與互聯網產品的映射表現;

② 前端、后端、數據庫的概念以及三者如何交互;

③ 前端信息提交后邏輯層不僅是后端,還可以是前端;

④ 數據庫表以及關聯表的概念;

⑤ 場景覆蓋4種典型互聯網操作場景,對應4種數據庫原子操作。

結合以上A和B,我構思出來以下發散的信息:

① 幼兒園場景,游戲主線任務就是來管理學生和班級信息;

② 小動物作為幼兒園學生,把顏色、年齡、姓名、照片小孩可以認知的元素作為學生信息表的組成;

③ 樂高組裝成幼兒園的教室,區分樓層、顏色作為教室的元素;

④ 判斷邏輯:把年齡這個因素作為提交信息后邏輯層判斷的依據;

⑤數據庫表:為了引入關聯表,需要有個班級信息表,如樓層、教室顏色與學生信息表進行關聯使用;

⑥增加場景:小朋友入學報名場景;

⑦刪除場景:小朋友轉學場景;

⑧ 修改場景:幼兒園班級教室顏色粉刷變更;

⑨ 查詢場景:統計班級小朋友總數、通過學生關聯表查詢班級信息。

以下就是我打草稿的2個原圖:

1小時游戲,教會4歲女兒理解互聯網產品技術

圖1:學生表、班級表2個數據表、增刪改查4個場景的簡要邏輯

1小時游戲,教會4歲女兒理解互聯網產品技術

圖2:針對增刪改查4個場景做了細節邏輯的補充

2. 準備素材&開發產品

分析下不同場景下需要的素材清單:

1小時游戲,教會4歲女兒理解互聯網產品技術

以下就是我準備好的素材成品(擺放沒有按照以上三類區分,大家忽略對應關系):

1小時游戲,教會4歲女兒理解互聯網產品技術

四、產品上線(含3層映射邏輯講解):

OK,產品開發完成,我們直接上線運行,同時講解開始。

首先,我們先確定下現實世界中的一些客觀信息,即就算我們沒有線上互聯網產品這套系統,這些信息在線下幼兒園場景中也一樣會真實存在。

1小時游戲,教會4歲女兒理解互聯網產品技術

以上基礎信息,會映射到互聯網產品對應的數據庫表設計中,而規則邏輯會映射到增刪改查的邏輯中。

1. 數據庫

第一個概念數據庫比較好理解,我們就拿其中一個貓頭鷹小朋友和對應的班級來對比舉例。

1小時游戲,教會4歲女兒理解互聯網產品技術

1小時游戲,教會4歲女兒理解互聯網產品技術

上邊2個圖,分別是學生信息表、班級信息表的數據表結構,大家第一感覺是啥?不就是我們天天用的excel么,excel沒用過,現在防疫期間天天門崗查溫度登記的那個紙質表格總見過吧。

沒錯,這其實就是數據庫的表現。

理解這個基礎上,我給大家再普及2個數據庫的常見概念:主鍵和外鍵。

1小時游戲,教會4歲女兒理解互聯網產品技術

除此之外,大家還需要知道數據庫有4個最基本原子操作,分別是增刪改查,就是增加數據、刪除數據、修改數據、查詢數據。這些場景的描述和解釋,下文中會按照4個場景展開描述。

數據庫的表結構和4種原子操作就是數據庫的核心內核,其他再復雜的場景都不會離開這個范疇,當然是針對除技術之外的其他人員而言。

2. 新增(幼兒園招生報名)

前文已經說了,幾乎一切互聯網都可以在現實場景中找到映射,而互聯網產品也恰恰是替代人力解決問題的。

所以,我們先還原下我設計這個游戲在現實場景中的交互流程(大家不要怕,都能看懂的)

1小時游戲,教會4歲女兒理解互聯網產品技術

根據上圖中,老師的五官承擔了與小朋友的前端交互任務,耳朵眼睛負責信息的輸入,嘴巴負責語言表達是輸出。

而老師查詢的登記簿資料就是與數據庫信息交互,最終按照招生規則判斷小朋友是否可以入學及入學分班等后端行為,是由大腦完成的。

OK,接下來,我們用我設計的游戲,即實體化的互聯網產品來模擬一遍。

第一步:前端輸入頁面

1小時游戲,教會4歲女兒理解互聯網產品技術

這個頁面如果是真的互聯網產品,就是呈現在手機或者電腦的各種頁面,這里游戲中,我們用圖畫紙可以達到同樣的目的。

那么,這個頁面就是所謂的前端,用來收集小朋友的報名信息的,等同于現實場景中老師看到/聽到/拿到你的報名信息。

這里需要填寫的4個信息,就是后端(是否可以報名成功)的輸入參數,信息填寫完成之后,點擊【報名】按鈕就會調用后端接口開始執行判斷程序,類似老師的大腦處理信息。

在這里插入一個小知識,前端判斷和后端判斷的區別,前端判斷就是不需要后端邏輯判斷前端就可以校驗的意思,例如上圖中的照片尺寸需要一寸,那么如果你提交非1寸照片是不能提交成功的,這個就不需要大腦判斷的。

第二步:后端判斷

后端判斷,在真的互聯網產品技術中,就是一段段代碼了,游戲中也沒有實體化展示這個東西,還是大腦運算,不過我用注釋來描述這里面的邏輯。

很簡單的表達,不復雜,不抽象,看圖:

1小時游戲,教會4歲女兒理解互聯網產品技術

所以,后端接口其實就是接收前端提交信息當做入參,然后內部按照一定規則運算之后,返回出參結果給到前端。而后端的復雜度就是這個規則的復雜和實現方式,而內核其實不會變化。

第三步:添加信息到數據庫(報名失敗沒有這一步)

對于報名失敗不需要寫入數據庫的情況下,是沒有這第三步的,會直接跳轉第四步。而對于報名成功的情況,后端會先把信息寫入數據庫后,然后將數據庫的信息再通過接口返回。

第四步:前端展示后端返回數據

接第二步,拿到輸出信息,然后通過前端頁面展示出來,上述有3種報名結果,對比圖如下:

1小時游戲,教會4歲女兒理解互聯網產品技術

在這里,強調下前端頁面表達,接口返回信息是數據化的,沒有任何格式,需要通過前端的各種樣式來展示頁面,例如頁面布局、顏色、動畫、固定文案等內容,可以參考上邊表格中的3個頁面展示效果。

新增場景介紹完了,這個其實也是增刪改查最復雜的案例了,接下來篇幅有限,我會不再贅述現實場景與互聯網產品的映射關系了,主要說產品與技術交互映射。

3. 刪除(幼兒園小朋友轉學)

第一步:前端輸入頁面

1小時游戲,教會4歲女兒理解互聯網產品技術

前置已經用了查詢能力(詳見下文)定位到要處理的學生對象上,老師操作“轉?!辈僮?,會出現彈窗操作確認,這個是前端實現減少誤刪除。

點擊“確定”之后,調用后端的“刪除學生信息接口”,同時傳入參數1002(學生表主鍵可以唯一確定一個學生)。

第二步:后端操作

后端“刪除接口”做的事情也比較簡單,就是直接調用數據庫本身的原子能力刪除功能,就可以將學號1002這條數據刪除掉。操作完成之后,告訴前端刪除完成。

此時數據庫里,已經沒有了1002第二條數據,如下圖:

1小時游戲,教會4歲女兒理解互聯網產品技術

4. 修改(幼兒園班級教室顏色變更)

第一步:前端輸入頁面

1小時游戲,教會4歲女兒理解互聯網產品技術

前置已經用了查詢能力(詳見下文)定位到所有班級信息,老師選擇要處理的班級信息,操作“編輯”操作,老師填寫教室變更后的顏色黃色,然后確定提交,經過彈窗確認之后,真正調用后端“修改班級信息”接口。

第二步:后端操作

后端“修改班級信息接口”做的事情也比較簡單,就是直接調用數據庫本身的原子能力修改功能,就可以將貝貝班對應的教室顏色由“綠色”變為“黃色”。操作完成之后,告訴前端刪除完成。

此時班級數據庫表里,第三條信息已經發生改變,如下圖:

1小時游戲,教會4歲女兒理解互聯網產品技術

5. 查詢(幼兒園各班級人員總數、學生所在的班級信息):

第一步:前端輸入頁面

1小時游戲,教會4歲女兒理解互聯網產品技術

這個頁面,其實集成了2個查詢類的功能:一個是按照班級查詢學生總數。另一個是通過學生,查詢班級信息。

第二步:后端操作

先說按照班級查詢學生總數,我們以聰聰班為例,后端運行邏輯如下圖所示,最后運算過后返回前端結果數為“4”即可。

1小時游戲,教會4歲女兒理解互聯網產品技術

再說按學生查詢班級信息,以貓頭鷹為例,后端運行邏輯如下圖所示,這個用到了關聯表邏輯。

1小時游戲,教會4歲女兒理解互聯網產品技術

第三步:前端展示后端返回數據

1小時游戲,教會4歲女兒理解互聯網產品技術

將上邊2個后端接口運算的結果分別返回到前端,然后前端渲染樣式展示給老師。

五、產品復盤

產品終于上線成功,沒想到寫文章這個產品做起來比準備游戲本身還要費力。這篇文章篇幅有點長,主要是圖片太多。

希望可以通過這篇文章,能夠讓不太懂互聯網產品技術的朋友們也能有所了解,對于想要轉行做產品的其他朋友,我想說這個真的是入門中最核心的知識點了。

突然發現這個路子也還不錯,既能陪女兒玩,讓她學習一些小知識,還能沉淀一些文章普及別人。

嗯,又可以搞一個系列了,哈哈。下一次不行就用游戲模擬下電商購物背后的資金、信息、供應鏈流轉吧。

 

作者:減形簡遠,轉轉交易中臺產品負責人。公眾號:產品雜談

本文由 @減形簡遠 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議

給作者打賞,鼓勵TA抓緊創作!
更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 標準的理工科。。太厲害了。思路嚴密。大人看了能學不到不少思考的過程。
    不過你給孩子講的時候,小孩子呆得住么?哈哈

    回復
    1. 哈哈,還行。她自己也對這種類似“過家家”游戲感興趣,當然她不太懂專業術語,就是在游戲過程中扮演不同角色玩一下。游戲和紙質道具還有對應起來的。

      回復
  2. 簡明易懂,非常清晰,學習了,就是對于4歲的寶寶理解來說還是很深的吧

    回復
    1. 嗯 專業術語不太懂。但是給她轉化變為游戲語言,她可以做道具層面做前端、后端、數據庫這個交互的操作。

      回復