作為產品經理的你,這些前端知識你都知道嗎?
如果評選近幾年互聯網行業最火的職位,產品經理一定可以排到前三。到如今,很多人畢業之后直接擔任了產品經理/助理的崗位,這也得益于產品崗儼然已成為了很多企業校招時的重頭戲。
與直接以產品經理崗位為職業起點的應屆生不同,業內也存在很多優秀的產品經理是由如開發、視覺設計等其它崗位轉化過來。對于轉崗做產品的人來說,先前的工作經驗無疑在一定程度上也增加了自身的優勢。
行業背景
對于產品經理來說,思維邏輯能力、溝通表達能力等等都是很重要的人才衡量標準。同時若在某些崗位有比較多的了解,也會增加其競爭力。比如程序猿出身的產品經理,往往對技術實現的可行性、開發工作量等方面有一定的先天優勢;視覺設計出身的產品經理,往往在頁面設計、用戶體驗等方面更勝一籌。
換個角度來理解,產品經理需要了解產品整個研發周期相關的各種知識,才能具備成為優秀產品經理的基本素質(注意:只是具備了基本素質而已)。所以我個人堅持的一個觀點就是產品經理要有孜孜不倦的學習態度,對相關的領域充滿好奇心,換句說好奇心改變產品經理的視野格局(怎么這么像某個手機品牌的slogan…)。
為什么要學習前端知識?
說回來我們的主題,產品人為什么要學習前端知識?我感覺最重要的原因是兩個:技術門檻低、更接近用戶和UI設計,另外還會帶來一個便利性。
首先,前端開發技術門檻相對較低。相比APP、后臺服務器等項目,前端開發要簡單的很多,對于技術門外漢來說,完全可以放下對“編程”兩個字的恐懼心理,并且由于技術門檻低,做的東西更容易所見即所得,在學習過程中更能帶來成就感,而這種成績感正向的激發出更多學習熱情。所以說,如果你是一名不懂技術的產品經理,強烈推薦通過前端開發這門技術來走進程序猿們的世界。
其次,前端更接近用戶和UI設計。跟后端不同,用戶直接面對使用的就是前端頁面,所以在開發過程中需要不斷地站在用戶的角度去考慮問題,這在用戶體驗方面會和產品經理的職責產生一定的化合作用。同時,前端也需要更多的關注頁面布局、視覺展現等等,這在UI設計層面也能和產品經理的職責相輔相成。所以說,站在產品經理的角度來看,前端開發相比其他技術更適合進行深層次的探索。
另外,當測試web項目前端頁面時還有個好處,因為有前端知識,所以自己可以隨時查看頁面中各元素的屬性,并能進行細節的調整且能實時看到效果。這樣在和前端開發、UI設計師等溝通時更加便捷準確,經過你的試驗后,可以直接跟他們說按鈕的高度改為24px會不會更好一點,而不是很模糊的說按鈕的高度調小一點吧。這在一定程度上也會提升整個團隊的協作效率。
前端的技術體系有哪些?
學習前端知識前,首先要先從宏觀層面對整個前端體系有個大致的了解。由于我也不是技術出身,更專業的分析解讀可以通過查詢相關的知乎問題等資料去了解,以下只是我站在產品經理角度的一些不成熟的理解,若有誤歡迎請高手指正。
一、入門篇:html、css
對于用戶而言,最直觀的東西無非就是可以肉眼看到的東西,而html/css就是用來干這個的。html 指的是超文本標簽語言,說白了就是一堆標簽,標簽中定義了網頁中展現的各種元素,比如網頁的標題、正文中的文字、圖片、視頻等等;CSS 指層疊樣式表(Cascading Style Sheets),說白了就是定義html中元素的表現形式,比如字號、顏色、對齊方式等等。
在學習階段,要了解很多東西,包括但不局限于:
- 常用html標簽的含義,比如<a>**</a>定義一個鏈接等
- CSS的框模型,即margin、border、padding等具體的含義代表什么;
- CSS選擇器的種類,如元素選擇器、類選擇器以及通常的用法
- CSS定位模式都有哪些?
- ……
我之所以舉幾個例子說明,是想表明在我們學習的過程中,不要鉆知識點的牛角尖,更要學會分模塊的總結思考,這樣才能融會貫通,學起來更加高效。在這個階段推薦w3school 在線教程,這個網站雖然看起來非常接地氣,但非常適合入門學習。
二、進階篇:JavaScript、jQuery
通過入門篇的學習,基本上可以寫一些靜態的界面了。而JavaScript則是用來實現交互效果,讓html、css展示的靜態頁面動起來。比如當鼠標懸浮到分享按鈕上方,則會彈出分享渠道的一個小窗口,這個就是用JavaScript實現出來的。
在了解一些基礎的JavaScript概念之后,則可以繼續學習jQuery,其實就是一個JavaScript代碼庫,通過jQuery能夠顯著降低我們編寫交互效果的難度。
這個階段同樣推薦w3school 在線教程這個網站進行學習,同時也可以通過專業的渠道去了解一些前端UI框架的社區網站,提供大量 CSS 樣式與 jQuery 插件,從而能夠幫助我們快速的制作一些酷炫的交互網站。
以上兩個篇章基本就是前端的內容,在知乎上曾看到這樣一句描述,根據非常貼切:html是名詞,css是形容詞,javascript是動詞,三個互相配合才是一個句子。對于產品經理而言,學習了解這些知識已經足夠了,完成達到了學習前端的初衷,如果對此十分感興趣,想學的更深入,則可以更進一步。
三、高手篇:web server、 php等后端知識
前端完成了瀏覽器頁面展示的運算,頁面的展現離不開服務器和數據庫的支持,這就是后端的開發。后端的架構不像前端已經有很明確的標準形式,目前存在各種方案,而且技術門檻相比前端也比較高。我對這塊的了解也非常少,有興趣的同學可以移步更專業的地方去學習了解。
學習前端小心得
雖然我大一學過C++語言,但并沒有走開發的路線,所學到的知識也僅限于書本,所以嚴格意義上我也是一個技術門外漢。因為最近的一個web項目和自身的好奇心驅動,所以才在最近不到一個月內的零散時間學習了解一些相關的知識(目前水平有限,仍需繼續研究),學習過程中的一些小心得也希望能跟大家分享。
- 先通過文中分享的網站教程,認真過一遍html+css的知識點,盡量全面細致,有些知識點看不懂不要緊,但至少要在腦海中留下印象(下一點會說明為什么)
- 教程中會有一些小練習,嘗試理解并能夠自己寫一些拓展的頁面展示,過程中發現不理解的點要回過頭再去細看對應的知識點(只有先留下印象才能定位到問題在哪里,然后知識點和實踐結合起來更能方便理解掌握)
- 仿照一些簡單的靜態網頁,比如電商登錄頁面,利用學到的html、css知識臨摹出來,期間可以通過查看網頁源碼幫助自己思考(不會看源碼的同學請自行百度),主要鍛煉自己html標簽的使用、css屬性使用、以及div定位布局等方面的知識
- 可以先學習html+css入門的知識,寫一些靜態頁面有了一定基礎之后,再開始學習JavaScript知識,然后給制作的靜態頁面添加交互效果,循序漸進的學習,盡量不要想著一步到位,不然容易打消積極性
- 可以嘗試寫一下小的項目,比如個人的網站。同樣在過程中會遇到很多問題,要學會不斷回到第1、2點進行復盤學習幫助對知識點的加深,也要學會通過參考其它網頁源碼獲取思路,最重要的要不斷總結思考
個人練習作品分享
在學習過程中,我也嘗試寫了一個個人網站,目前還非常簡陋(大神勿噴),分享出來供大家一起學習交流。
對了,如果想把自己的網站掛到網上,還需要學習建站技術,購買域名、主機服務器等。目前對具體的步驟我也不太清楚,今后有時間可以研究一下把網站放上去,想想還算是比較有成就感的一件事情。
如果大家感興趣,目前只能把網頁文件下載到本地,然后本地打開查看(這樣也有個好處,用到的圖標和背景圖片可以更方便的拿到),歡迎大家交流指正。
下載地址:http://pan.baidu.com/s/1jG8jtWy
本文由 @劉鵬 原創發布于人人都是產品經理?,未經許可,禁止轉載。
有什么用呢,基本上大部分的前端知識我都是精通的,后端也懂php+node,設計也可以…但這些對產品有實際加分么?沒什么,大部分面試你的產品總監、負責人、老板,他們90%都只是了解一點皮毛的,更多他們還是看你之前項目經驗如何?有沒有一個好數據的項目產品,一個好的數據結果項目勝過前言萬語。。。
技術沒用?還是有用的,一些邏輯、一些溝通,你懂的話可以直接更有底氣的跟開發溝通,一些基于第三方的一些開源框架、api,你可以第一時間看懂且知道怎么利用。。。但是有什么用呢。。。外行人不懂的。
在一個好的項目,一個好的的團隊,一個靠譜的老板非常非常重要。一個人真的care不了整個大盤的。產品人盡可能為公司的項目奮斗拼搏吧,別在以一個打工者的心態去工作了, 雖然項目直接受益方不是你,但是你這會對你以后的應聘加分會增添不少分數的!
留言 by 一個在互聯網打拼12年+的從事者
前端想轉產品!
很棒,了解了前端相關的術語,感謝。
之前學了半個月,實在是看不懂也學不來,只要是英文差的要死,但是在工作中,每次產品需求交給開發之后,他們說推一天就一天,心都空空的?
有那么難嗎 那你axure咋學會的
axure,不用學就會了 ??
html是名詞,css是形容詞,javascript是動詞,三個互相配合才是一個句子。
最近在自學web前端,準備轉行,其實一開始對于產品經理也有過想法,現在看到LZ的文章,心里又開始有一點點小想法了,到底是產品經理還是web前端程序員??我是學習教育專業的,做過文案,也干過自媒體運營,所以LZ可以給點意見么?
目前做前端開發,現在有點想轉產品 ??
好棒
作者你好,看了你的文章,以及你自己寫的網站,發現我們很多共同之處,同是產品人,愛好騎行,學著前端知識,做著個人網站,我雖然在北京,但也是浙江人呢!希望能認識一下,我的個人主頁:http://www.clow.net.cn/wangze_blog,愿意交個朋友的話,加個微信吧 ??
像我這樣的web開發人員,想轉行當產品經理那不是還是挺有優勢啊!
優勢肯定有,但是最重要的是思路的轉變
嗯嗯!
好