• 這(zhè)是一個系列的文章。系列主題《人人都(dōu)可以懂的互聯網技術》
• 本系列主要分爲三大部分：設計，技術，商業。
• 喜歡的朋友記得 右上角點擊【關注】 ，持續更新。

【第零章】互聯網/技術公司是怎麼(me)運轉的？

【02】你正在使用的APP是怎麼(me)被制造出來的(下)

繼上文中【 你正在使用的APP是怎麼(me)被制造出來的 】；經(jīng)過(guò)電光火石間，“深思熟慮”後(hòu)冒出來的想法，“仔細”調研，“友好(hǎo)”研讨，“認真”準備，邁出了前半步之後(hòu)，要準備開(kāi)始動手邁出後(hòu)半步了，然後(hòu)，接著(zhe)開(kāi)會(huì)吧。

興奮地搓搓小手

完善的落地計劃

團隊針對(duì)自己的職能(néng)部分做出仔細的評估之後(hòu)，大家坐到一起(qǐ)，開(kāi)始描述(SHOW)自己的前期準備，用什麼(me)主色調，什麼(me)開(kāi)發(fā)語言，什麼(me)框架，測試流程等等；一陣專屬的高光時(shí)刻之後(hòu)，大家開(kāi)始進(jìn)入定項目落地時(shí)間表的環節；

先需要制定milestone(裡(lǐ)程碑)，即什麼(me)時(shí)候上線。然後(hòu)各團隊負責人就(jiù)可以開(kāi)始拆解任務提交各自的模塊時(shí)間表。經(jīng)過(guò)友好(hǎo)和睦的讨論之後(hòu)，大家對(duì)未來充滿信心，對(duì)自己負責的模塊是時(shí)間點表示完全沒(méi)有問題，就(jiù)開(kāi)始動手了。

開(kāi)工了

分工合作

設計 的小夥伴首當其沖，在和産品經(jīng)理深入溝通後(hòu)，開(kāi)始動手制作設計圖；這(zhè)裡(lǐ)主要是解決，這(zhè)個APP最終長(cháng)什麼(me)樣。這(zhè)個實際過(guò)程中，往往包含了平面(miàn)設計和交互設計。

平面(miàn)設計（graphic design），也稱爲視覺傳達設計，是以“視覺”作爲溝通和表現的方式，透過(guò)多種(zhǒng)方式來創造和結合符号、圖片和文字，借此作出用來傳達想法或訊息的視覺表現。

交互設計（Interaction Design)，是定義、設計人造系統的行爲的設計領域，它定義了兩(liǎng)個或多個互動的個體之間交流的内容和結構，使之互相配合，共同達成(chéng)某種(zhǒng)目的。

簡單來說(shuō)，就(jiù)是讓APP看上去怎麼(me)好(hǎo)看，排版布局怎麼(me)讓才用得更加舒服。這(zhè)裡(lǐ)往往産品經(jīng)理要和設計師投入大量的時(shí)間去做讨論和處理。而設計圖也并不是一套走天下，如果是涉及不同的平台(Android iOS PC)，還(hái)要對(duì)應不同的平台規範做出不同的處理和調整以符合平台用戶使用規範。

一般來說(shuō)，設計師是不會(huì)一下子把圖全部做完的，因爲面(miàn)對(duì)一個新的，沒(méi)有固定風格的産品，設計師往往會(huì)先出幾套不同的設計和配置，叫(jiào)做風格稿。然後(hòu)找團隊小夥伴(客戶/用戶)評審一下，讓大家挑選一個。在邊緣瘋狂試探之後(hòu)确定風格之後(hòu)才輸出完整的一套設計圖。要不，萬一大家都(dōu)不喜歡，做完一套還(hái)有三套，這(zhè)是件杯具的事(shì)情。

設計

開(kāi)發(fā) 的小夥伴這(zhè)裡(lǐ)的分工可能(néng)稍微細一點。有架構工程師，前端工程師，APP工程師，服務端(後(hòu)端)工程師。大家在完成(chéng)前期的評估之後(hòu)，架構師會(huì)根據需求制定系統開(kāi)發(fā)上的架構，就(jiù)是這(zhè)個系統，我們打算怎麼(me)做，怎麼(me)分模塊，怎麼(me)實現，有那些技術細節，有哪些難點。

接下來是服務端工程師，根據産品需求和架構，進(jìn)行服務端開(kāi)發(fā)，也就(jiù)是我們說(shuō)的後(hòu)端。這(zhè)裡(lǐ)是整套系統的核心邏輯和流程，但是用戶看不見但是不可獲取的部分，所以也很形象得叫(jiào)做【後(hòu)端】，因爲用戶看不見摸不著(zhe)，但是沒(méi)有不行。服務端工程師根據需求實現邏輯，算法，數據結構和存儲，并輸出接口(API)和文檔。

API很好(hǎo)理解，其實計算機就(jiù)是一個【輸入-處理-輸出】的過(guò)程，但是輸入從哪裡(lǐ)輸入呢，就(jiù)是從API接口輸入，然後(hòu)根據邏輯進(jìn)行處理之後(hòu)返回輸出結果。

比如：你輸入了手機号，然後(hòu)把你的手機号通過(guò)API接口發(fā)送給服務端，服務端經(jīng)過(guò)一系列的邏輯判斷和處理，最後(hòu)給你發(fā)了一個驗證碼，并返回告訴你，好(hǎo)了，請輸入驗證碼，這(zhè)就(jiù)完成(chéng)了一個閉環操作，APP前端就(jiù)會(huì)根據提示你，請輸入驗證碼。

與後(hòu)端工程師對(duì)應的，就(jiù)是前端工程師了(包括前端工程師和APP工程師，APP工程師又包含主流的Android和iOS工程師)，一般我們把網頁/小程序的開(kāi)發(fā)工程師稱爲前端工程師。

H5，其實也是網頁；HTML5是第五代HTML語言标準，隻是大家叫(jiào)多了就(jiù)用H5來代替網頁了。

小程序在很多技術層面(miàn)上體現上和網頁差不多，所以也是前端工程師負責了。

這(zhè)裡(lǐ)有點繞，總而言之，負責編寫被用戶看到的，與用戶交互的界面(miàn)的工程師統稱前端工程師，也有叫(jiào)界面(miàn)工程師的。

前端工程師根據設計師的界面(miàn)和産品需求和邏輯，編寫用戶界面(miàn)，嵌入邏輯，將(jiāng)用戶行爲和數據通過(guò)API接口與服務端進(jìn)行交互并獲取對(duì)應的結果顯示。

開(kāi)發(fā)

測試 的小夥伴，根據産品經(jīng)理的需求，編寫對(duì)應的測試用例。簡單來說(shuō)，就(jiù)是，産品設計是用戶填寫了手機号之後(hòu)能(néng)獲取登錄/注冊驗證碼，那麼(me)前置的準備就(jiù)是在登錄/注冊界面(miàn)上有一個輸入框和提交按鈕，過(guò)程就(jiù)是輸入手機号之後(hòu)，有一個提交的按鈕或者觸發(fā)方式，然後(hòu)期望得到一個登錄/注冊的驗證碼短信。這(zhè)就(jiù)是一個簡單的測試用例，當然，測試工程師不會(huì)按照你預設好(hǎo)的套路進(jìn)行的，他們會(huì)考慮到使用過(guò)程中的一系列問題，比如輸少以爲手機号，這(zhè)個時(shí)候你應該是給個錯誤提醒，而不是提交成(chéng)功。

然後(hòu)拿到開(kāi)發(fā)工程師打包好(hǎo)的APP進(jìn)行 界面(miàn)/流程/邏輯等等的測試，并將(jiāng)問題(BUG)記錄下來反饋給産品經(jīng)理或者開(kāi)發(fā)部門。

測試

驗收交付

大家熱火朝天，一頓操作猛如虎，齊心協力地把第一個版本，一般叫(jiào)做阿爾法版本或者貝塔（Beta）版本給整出來了。

可以交付驗收了

當然，這(zhè)過(guò)程中，産品經(jīng)理和項目經(jīng)理也不是閑著(zhe)打醬油，會(huì)跟進(jìn)團隊的開(kāi)發(fā)進(jìn)度，遇到的問題，解答問題，記錄、解決、升級在過(guò)程中發(fā)現的問題，可以理解成(chéng)是奶爸和監軍的模式。

完成(chéng)之後(hòu)，就(jiù)要進(jìn)行驗收交付，大家把做好(hǎo)的項目産品給裝上，業務部門(一般是産品部門或者老闆/客戶)開(kāi)始使用，體驗，檢查是否達到預期，是否實現了預設目标，達到裡(lǐ)程碑。同事(shì)開(kāi)發(fā)過(guò)程中的相關文檔，記錄整理歸檔備案。運維工程師也要開(kāi)始忙前忙後(hòu)進(jìn)行準備保障即將(jiāng)到來的正式線上環境的正常運轉。

發(fā)布準備

發(fā)布準備一般包含兩(liǎng)個部分，一個是在項目立項完成(chéng)之後(hòu)就(jiù)開(kāi)始了，諸如域名的申請注冊，備案，正式服務器的準備，各大應用市場的賬戶，認證，資質的申請等等比較零散的事(shì)情。

第二部分就(jiù)是上線前，準備市場介紹材料，客服的準備工作，系統項目的打包，簽名，部署正式環境等等。

Ready

上線

然後(hòu)就(jiù)是項目産品上線了。大家開(kāi)開(kāi)心心地期待大量用戶湧入，投資人(VC)蜂擁而至，用戶數據蹭蹭蹭地暴漲，走上人生巅峰。

上線了

下一個循環

上面(miàn)的隻是想想而已，接著(zhe)，一般情況下，就(jiù)會(huì)有各種(zhǒng)用戶反饋，各種(zhǒng)需求，各種(zhǒng)BUG，各種(zhǒng)投訴紛至沓來，産品經(jīng)理收到之後(hòu)，要根據情況做出調整和處理，和用戶團隊溝通，然後(hòu)進(jìn)入下一個叠代流程，把從前文開(kāi)始的流程再輪回一次。