如果評選近幾年互聯(lián)網(wǎng)行業(yè)最火的職位，產(chǎn)品經(jīng)理一定可以排到前三。到如今，很多人畢業(yè)之后直接擔任了產(chǎn)品經(jīng)理/助理的崗位，這也得益于產(chǎn)品崗儼然已成為了很多企業(yè)校招時的重頭戲。

與直接以產(chǎn)品經(jīng)理崗位為職業(yè)起點的應屆生不同，業(yè)內(nèi)也存在很多優(yōu)秀的產(chǎn)品經(jīng)理是由如開發(fā)、視覺設計等其它崗位轉化過來。對于轉崗做產(chǎn)品的人來說，先前的工作經(jīng)驗無疑在一定程度上也增加了自身的優(yōu)勢。

行業(yè)背景

對于產(chǎn)品經(jīng)理來說，思維邏輯能力、溝通表達能力等等都是很重要的人才衡量標準。同時若在某些崗位有比較多的了解，也會增加其競爭力。比如程序猿出身的產(chǎn)品經(jīng)理，往往對技術實現(xiàn)的可行性、開發(fā)工作量等方面有一定的先天優(yōu)勢；視覺設計出身的產(chǎn)品經(jīng)理，往往在頁面設計、用戶體驗等方面更勝一籌。

換個角度來理解，產(chǎn)品經(jīng)理需要了解產(chǎn)品整個研發(fā)周期相關的各種知識，才能具備成為優(yōu)秀產(chǎn)品經(jīng)理的基本素質(zhì)（注意：只是具備了基本素質(zhì)而已）。所以我個人堅持的一個觀點就是產(chǎn)品經(jīng)理要有孜孜不倦的學習態(tài)度，對相關的領域充滿好奇心，換句說好奇心改變產(chǎn)品經(jīng)理的視野格局（怎么這么像某個手機品牌的slogan…）。

為什么要學習前端知識？

說回來我們的主題，產(chǎn)品人為什么要學習前端知識？我感覺最重要的原因是兩個：技術門檻低、更接近用戶和UI設計，另外還會帶來一個便利性。

首先，前端開發(fā)技術門檻相對較低。相比APP、后臺服務器等項目，前端開發(fā)要簡單的很多，對于技術門外漢來說，完全可以放下對“編程”兩個字的恐懼心理，并且由于技術門檻低，做的東西更容易所見即所得，在學習過程中更能帶來成就感，而這種成績感正向的激發(fā)出更多學習熱情。所以說，如果你是一名不懂技術的產(chǎn)品經(jīng)理，強烈推薦通過前端開發(fā)這門技術來走進程序猿們的世界。

其次，前端更接近用戶和UI設計。跟后端不同，用戶直接面對使用的就是前端頁面，所以在開發(fā)過程中需要不斷地站在用戶的角度去考慮問題，這在用戶體驗方面會和產(chǎn)品經(jīng)理的職責產(chǎn)生一定的化合作用。同時，前端也需要更多的關注頁面布局、視覺展現(xiàn)等等，這在UI設計層面也能和產(chǎn)品經(jīng)理的職責相輔相成。所以說，站在產(chǎn)品經(jīng)理的角度來看，前端開發(fā)相比其他技術更適合進行深層次的探索。

另外，當測試web項目前端頁面時還有個好處，因為有前端知識，所以自己可以隨時查看頁面中各元素的屬性，并能進行細節(jié)的調(diào)整且能實時看到效果。這樣在和前端開發(fā)、UI設計師等溝通時更加便捷準確，經(jīng)過你的試驗后，可以直接跟他們說按鈕的高度改為24px會不會更好一點，而不是很模糊的說按鈕的高度調(diào)小一點吧。這在一定程度上也會提升整個團隊的協(xié)作效率。

前端的技術體系有哪些？

學習前端知識前，首先要先從宏觀層面對整個前端體系有個大致的了解。由于我也不是技術出身，更專業(yè)的分析解讀可以通過查詢相關的知乎問題等資料去了解，以下只是我站在產(chǎn)品經(jīng)理角度的一些不成熟的理解，若有誤歡迎請高手指正。

一、入門篇：html、css

對于用戶而言，最直觀的東西無非就是可以肉眼看到的東西，而html/css就是用來干這個的。html 指的是超文本標簽語言，說白了就是一堆標簽，標簽中定義了網(wǎng)頁中展現(xiàn)的各種元素，比如網(wǎng)頁的標題、正文中的文字、圖片、視頻等等；CSS 指層疊樣式表（Cascading Style Sheets），說白了就是定義html中元素的表現(xiàn)形式，比如字號、顏色、對齊方式等等。

在學習階段，要了解很多東西，包括但不局限于：

1. 常用html標簽的含義，比如<a>**</a>定義一個鏈接等
2. CSS的框模型，即margin、border、padding等具體的含義代表什么；
3. CSS選擇器的種類，如元素選擇器、類選擇器以及通常的用法
4. CSS定位模式都有哪些？
5. ……

我之所以舉幾個例子說明，是想表明在我們學習的過程中，不要鉆知識點的牛角尖，更要學會分模塊的總結思考，這樣才能融會貫通，學起來更加高效。在這個階段推薦w3school 在線教程，這個網(wǎng)站雖然看起來非常接地氣，但非常適合入門學習。

二、進階篇：JavaScript、jQuery

通過入門篇的學習，基本上可以寫一些靜態(tài)的界面了。而JavaScript則是用來實現(xiàn)交互效果，讓html、css展示的靜態(tài)頁面動起來。比如當鼠標懸浮到分享按鈕上方，則會彈出分享渠道的一個小窗口，這個就是用JavaScript實現(xiàn)出來的。

在了解一些基礎的JavaScript概念之后，則可以繼續(xù)學習jQuery，其實就是一個JavaScript代碼庫，通過jQuery能夠顯著降低我們編寫交互效果的難度。

這個階段同樣推薦w3school 在線教程這個網(wǎng)站進行學習，同時也可以通過專業(yè)的渠道去了解一些前端UI框架的社區(qū)網(wǎng)站，提供大量 CSS 樣式與 jQuery 插件，從而能夠幫助我們快速的制作一些酷炫的交互網(wǎng)站。

以上兩個篇章基本就是前端的內(nèi)容，在知乎上曾看到這樣一句描述，根據(jù)非常貼切：html是名詞，css是形容詞，javascript是動詞，三個互相配合才是一個句子。對于產(chǎn)品經(jīng)理而言，學習了解這些知識已經(jīng)足夠了，完成達到了學習前端的初衷，如果對此十分感興趣，想學的更深入，則可以更進一步。

三、高手篇：web server、 php等后端知識

前端完成了瀏覽器頁面展示的運算，頁面的展現(xiàn)離不開服務器和數(shù)據(jù)庫的支持，這就是后端的開發(fā)。后端的架構不像前端已經(jīng)有很明確的標準形式，目前存在各種方案，而且技術門檻相比前端也比較高。我對這塊的了解也非常少，有興趣的同學可以移步更專業(yè)的地方去學習了解。

學習前端小心得

雖然我大一學過C++語言，但并沒有走開發(fā)的路線，所學到的知識也僅限于書本，所以嚴格意義上我也是一個技術門外漢。因為最近的一個web項目和自身的好奇心驅動，所以才在最近不到一個月內(nèi)的零散時間學習了解一些相關的知識（目前水平有限，仍需繼續(xù)研究），學習過程中的一些小心得也希望能跟大家分享。

1. 先通過文中分享的網(wǎng)站教程，認真過一遍html+css的知識點，盡量全面細致，有些知識點看不懂不要緊，但至少要在腦海中留下印象（下一點會說明為什么）
2. 教程中會有一些小練習，嘗試理解并能夠自己寫一些拓展的頁面展示，過程中發(fā)現(xiàn)不理解的點要回過頭再去細看對應的知識點（只有先留下印象才能定位到問題在哪里，然后知識點和實踐結合起來更能方便理解掌握）
3. 仿照一些簡單的靜態(tài)網(wǎng)頁，比如電商登錄頁面，利用學到的html、css知識臨摹出來，期間可以通過查看網(wǎng)頁源碼幫助自己思考（不會看源碼的同學請自行百度），主要鍛煉自己html標簽的使用、css屬性使用、以及div定位布局等方面的知識
4. 可以先學習html+css入門的知識，寫一些靜態(tài)頁面有了一定基礎之后，再開始學習JavaScript知識，然后給制作的靜態(tài)頁面添加交互效果，循序漸進的學習，盡量不要想著一步到位，不然容易打消積極性
5. 可以嘗試寫一下小的項目，比如個人的網(wǎng)站。同樣在過程中會遇到很多問題，要學會不斷回到第1、2點進行復盤學習幫助對知識點的加深，也要學會通過參考其它網(wǎng)頁源碼獲取思路，最重要的要不斷總結思考

個人練習作品分享

在學習過程中，我也嘗試寫了一個個人網(wǎng)站，目前還非常簡陋（大神勿噴），分享出來供大家一起學習交流。

對了，如果想把自己的網(wǎng)站掛到網(wǎng)上，還需要學習建站技術，購買域名、主機服務器等。目前對具體的步驟我也不太清楚，今后有時間可以研究一下把網(wǎng)站放上去，想想還算是比較有成就感的一件事情。

如果大家感興趣，目前只能把網(wǎng)頁文件下載到本地，然后本地打開查看（這樣也有個好處，用到的圖標和背景圖片可以更方便的拿到），歡迎大家交流指正。

下載地址：http://pan.baidu.com/s/1jG8jtWy

本文由 @劉鵬 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?，未經(jīng)許可，禁止轉載。