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

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

行業(yè)背景

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

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

為什么要學(xué)習(xí)前端知識(shí)？

說(shuō)回來(lái)我們的主題，產(chǎn)品人為什么要學(xué)習(xí)前端知識(shí)？我感覺(jué)最重要的原因是兩個(gè)：技術(shù)門(mén)檻低、更接近用戶和UI設(shè)計(jì)，另外還會(huì)帶來(lái)一個(gè)便利性。

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

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

另外，當(dāng)測(cè)試web項(xiàng)目前端頁(yè)面時(shí)還有個(gè)好處，因?yàn)橛星岸酥R(shí)，所以自己可以隨時(shí)查看頁(yè)面中各元素的屬性，并能進(jìn)行細(xì)節(jié)的調(diào)整且能實(shí)時(shí)看到效果。這樣在和前端開(kāi)發(fā)、UI設(shè)計(jì)師等溝通時(shí)更加便捷準(zhǔn)確，經(jīng)過(guò)你的試驗(yàn)后，可以直接跟他們說(shuō)按鈕的高度改為24px會(huì)不會(huì)更好一點(diǎn)，而不是很模糊的說(shuō)按鈕的高度調(diào)小一點(diǎn)吧。這在一定程度上也會(huì)提升整個(gè)團(tuán)隊(duì)的協(xié)作效率。

前端的技術(shù)體系有哪些？

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

一、入門(mén)篇：html、css

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

在學(xué)習(xí)階段，要了解很多東西，包括但不局限于：

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

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

二、進(jìn)階篇：JavaScript、jQuery

通過(guò)入門(mén)篇的學(xué)習(xí)，基本上可以寫(xiě)一些靜態(tài)的界面了。而JavaScript則是用來(lái)實(shí)現(xiàn)交互效果，讓html、css展示的靜態(tài)頁(yè)面動(dòng)起來(lái)。比如當(dāng)鼠標(biāo)懸浮到分享按鈕上方，則會(huì)彈出分享渠道的一個(gè)小窗口，這個(gè)就是用JavaScript實(shí)現(xiàn)出來(lái)的。

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

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

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

三、高手篇：web server、 php等后端知識(shí)

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

學(xué)習(xí)前端小心得

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

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

個(gè)人練習(xí)作品分享

在學(xué)習(xí)過(guò)程中，我也嘗試寫(xiě)了一個(gè)個(gè)人網(wǎng)站，目前還非常簡(jiǎn)陋（大神勿噴），分享出來(lái)供大家一起學(xué)習(xí)交流。

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

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

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

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