網際網路產品開發流程

網際網路公司工作流程非常簡單，是由產品經理先提出需求，畫出原型圖，然後給到設計師畫出設計圖，然後再由前端開發工程師按照設計圖實現產品。當然整個產品的開發上線過程，還需要後端工程師、測試、運維等小夥伴的共同合作才能完成。

原型圖是用一些非常簡單的線條，簡明扼要的描述出這個網頁大致的欄目區劃和功能，對於具體的樣式、顏色等細節並沒有做出額外的標註。

設計圖則是1:1的呈現網頁最終的樣式，設計圖上已經把所有的圖片、字號、距離、版式等都定好了

。

而前端開發人員，則能夠從原型圖或者設計圖上，測量出每一個數據，從而編寫程式碼。也就是說，

作為前端工程師，程式碼裡面的任何一個數據，都不是由自己拍腦門子決定的，這些資料必須全部都是從原型圖或者設計圖上測量得到的，即所有的資料都是由產品經理和設計師給出的。

曾經有很長時間，前端工程師要使用ps和fireworks這兩個軟體，來對設計圖進行測量，過程非常繁瑣。

而

現在，原型圖和設計圖，是由產品經理和設計師使用Axure和Sketch等軟體設計出來的，每一個數據都必須直觀標註出來，給到前端開發工程師直接測量使用。

Axure和Sketch這兩個軟體非常智慧，是產品經理和UI設計師必用的專業軟體

，能夠大大提高團隊的產品研發效率。

而給到前端工程師的設計圖，是一個網頁檔案，也就是說這個設計圖時。html為字尾的檔案，它是由Sketch這個軟體生成的。

開啟這個網頁檔案形式的設計圖，滾動滑鼠滾輪，可以上下滾動設計圖，點選加號和減號，可以放大和縮小設計圖，隨便點選一個區域，會彈出具體的尺寸大小資料。

網頁上要用到的圖片，每種圖片都有小中大三個尺寸，這是為了適配不同的螢幕。

對於很多小公司來說，開發團隊的組織架構、人員配備都不合理，開發流程也不正規、不專業，在這樣的團隊，會導致前端工程師包攬了一部分產品經理和設計師的工作，比如說，很多小公司會招平面設計師來代替UI設計師，而且沒有專業的產品經理，這樣網頁或者APP介面上各個區域的尺寸、圖片的尺寸、文字的大小等等，全都讓前端工程師自己自由發揮，這就讓前端工程師不斷的在那裡反反覆覆的調資料，邊調邊看效果。這就導致了前端工程師的工作效率大大降低。同時又讓不懂UI的平面設計師淪為了修圖的美工。

以上的情況，往往又會造成團隊成員之間的溝通成本、配合成本以及一些不必要的摩擦。

這就是除了網際網路產業聚集的一線城市之外的小城市的小公司，會普遍存在的問題：非專業出身的管理者，如果業務需要專業能力支撐，他們往往不能合理的組織團隊成員、合理的配置資源。當然專業的團隊也未必能保證業務的成功，但那是另外一碼事。

合適的環境，對一個人的的工作和成長異常重要。不要光悶頭搞專業，適當的瞭解一些關於產品、營銷、以及商業的知識。這樣也許你也可以實現向上管理，影響管理者，讓團隊往好的方向走。

建立專案資料夾結構

每一個專案的資料夾結構都包含以下三種名稱的資料夾：

網站首頁命名

網站首頁命名不能為中文，也不能隨便起名。

絕大多數伺服器預設的網站首頁名都為index.html

。

只要你把一個網頁的名字寫為index。html，當你輸入網站的網址的時候，伺服器就會自動提供這個網頁給使用者，所以網站首頁就要命名為index。html，一定不要命名錯了。

那麼你要建立一個專案時，可以在桌面或者c盤、d盤等任何一個地方，建立如下的目錄結構：

檔案目錄結構排列成上圖這樣，有利於開發以及其他的日常工作，因為這種排列方式，從上而下，一目瞭然，而且會顯示檔案建立的時間以及型別，當你日後要找某個檔案的話，透過時間和檔案型別等資訊就會更快更方便的找到它。

要實現這樣的圖示排列，在資料夾中點選“檢視——詳細資訊”即可。

建立好專案的資料夾目錄結構之後，可以把這些資料夾都拖拽到vscode裡面，或者在vscode中，點選

"檔案-開啟資料夾"

，選擇剛才建立的專案資料夾，這樣就在vscode中打開了專案資料夾。

然後就可以按照這種目錄結構進行專案的正式開發了。

關注我，入門網際網路行業