作为产品经理的你,这些前端知识你都知道吗?

17 评论 65658 浏览 805 收藏 12 分钟

如果评选近几年互联网行业最火的职位,产品经理一定可以排到前三。到如今,很多人毕业之后直接担任了产品经理/助理的岗位,这也得益于产品岗俨然已成为了很多企业校招时的重头戏。

与直接以产品经理岗位为职业起点的应届生不同,业内也存在很多优秀的产品经理是由如开发、视觉设计等其它岗位转化过来。对于转岗做产品的人来说,先前的工作经验无疑在一定程度上也增加了自身的优势。

行业背景

对于产品经理来说,思维逻辑能力、沟通表达能力等等都是很重要的人才衡量标准。同时若在某些岗位有比较多的了解,也会增加其竞争力。比如程序猿出身的产品经理,往往对技术实现的可行性、开发工作量等方面有一定的先天优势;视觉设计出身的产品经理,往往在页面设计、用户体验等方面更胜一筹。

换个角度来理解,产品经理需要了解产品整个研发周期相关的各种知识,才能具备成为优秀产品经理的基本素质(注意:只是具备了基本素质而已)。所以我个人坚持的一个观点就是产品经理要有孜孜不倦的学习态度,对相关的领域充满好奇心,换句说好奇心改变产品经理的视野格局(怎么这么像某个手机品牌的slogan…)。

为什么要学习前端知识?

说回来我们的主题,产品人为什么要学习前端知识?我感觉最重要的原因是两个:技术门槛低、更接近用户和UI设计,另外还会带来一个便利性。

为什么学习前端

首先,前端开发技术门槛相对较低。相比APP、后台服务器等项目,前端开发要简单的很多,对于技术门外汉来说,完全可以放下对“编程”两个字的恐惧心理,并且由于技术门槛低,做的东西更容易所见即所得,在学习过程中更能带来成就感,而这种成绩感正向的激发出更多学习热情。所以说,如果你是一名不懂技术的产品经理,强烈推荐通过前端开发这门技术来走进程序猿们的世界。

其次,前端更接近用户和UI设计。跟后端不同,用户直接面对使用的就是前端页面,所以在开发过程中需要不断地站在用户的角度去考虑问题,这在用户体验方面会和产品经理的职责产生一定的化合作用。同时,前端也需要更多的关注页面布局、视觉展现等等,这在UI设计层面也能和产品经理的职责相辅相成。所以说,站在产品经理的角度来看,前端开发相比其他技术更适合进行深层次的探索。

另外,当测试web项目前端页面时还有个好处,因为有前端知识,所以自己可以随时查看页面中各元素的属性,并能进行细节的调整且能实时看到效果。这样在和前端开发、UI设计师等沟通时更加便捷准确,经过你的试验后,可以直接跟他们说按钮的高度改为24px会不会更好一点,而不是很模糊的说按钮的高度调小一点吧。这在一定程度上也会提升整个团队的协作效率。

前端的技术体系有哪些?

学习前端知识前,首先要先从宏观层面对整个前端体系有个大致的了解。由于我也不是技术出身,更专业的分析解读可以通过查询相关的知乎问题等资料去了解,以下只是我站在产品经理角度的一些不成熟的理解,若有误欢迎请高手指正。

前端技术体系有哪些

一、入门篇:html、css

对于用户而言,最直观的东西无非就是可以肉眼看到的东西,而html/css就是用来干这个的。html 指的是超文本标签语言,说白了就是一堆标签,标签中定义了网页中展现的各种元素,比如网页的标题、正文中的文字、图片、视频等等;CSS 指层叠样式表(Cascading Style Sheets),说白了就是定义html中元素的表现形式,比如字号、颜色、对齐方式等等。

在学习阶段,要了解很多东西,包括但不局限于:

  1. 常用html标签的含义,比如<a>**</a>定义一个链接等
  2. CSS的框模型,即margin、border、padding等具体的含义代表什么;
  3. CSS选择器的种类,如元素选择器、类选择器以及通常的用法
  4. CSS定位模式都有哪些?
  5. ……

我之所以举几个例子说明,是想表明在我们学习的过程中,不要钻知识点的牛角尖,更要学会分模块的总结思考,这样才能融会贯通,学起来更加高效。在这个阶段推荐w3school 在线教程,这个网站虽然看起来非常接地气,但非常适合入门学习。

二、进阶篇:JavaScript、jQuery

通过入门篇的学习,基本上可以写一些静态的界面了。而JavaScript则是用来实现交互效果,让html、css展示的静态页面动起来。比如当鼠标悬浮到分享按钮上方,则会弹出分享渠道的一个小窗口,这个就是用JavaScript实现出来的。

JavaScript示意图

在了解一些基础的JavaScript概念之后,则可以继续学习jQuery,其实就是一个JavaScript代码库,通过jQuery能够显著降低我们编写交互效果的难度。

这个阶段同样推荐w3school 在线教程这个网站进行学习,同时也可以通过专业的渠道去了解一些前端UI框架的社区网站,提供大量 CSS 样式与 jQuery 插件,从而能够帮助我们快速的制作一些酷炫的交互网站。

以上两个篇章基本就是前端的内容,在知乎上曾看到这样一句描述,根据非常贴切:html是名词,css是形容词,javascript是动词,三个互相配合才是一个句子。对于产品经理而言,学习了解这些知识已经足够了,完成达到了学习前端的初衷,如果对此十分感兴趣,想学的更深入,则可以更进一步。

三、高手篇:web server、 php等后端知识

前端完成了浏览器页面展示的运算,页面的展现离不开服务器和数据库的支持,这就是后端的开发。后端的架构不像前端已经有很明确的标准形式,目前存在各种方案,而且技术门槛相比前端也比较高。我对这块的了解也非常少,有兴趣的同学可以移步更专业的地方去学习了解。

学习前端小心得

虽然我大一学过C++语言,但并没有走开发的路线,所学到的知识也仅限于书本,所以严格意义上我也是一个技术门外汉。因为最近的一个web项目和自身的好奇心驱动,所以才在最近不到一个月内的零散时间学习了解一些相关的知识(目前水平有限,仍需继续研究),学习过程中的一些小心得也希望能跟大家分享。

  1. 先通过文中分享的网站教程,认真过一遍html+css的知识点,尽量全面细致,有些知识点看不懂不要紧,但至少要在脑海中留下印象(下一点会说明为什么)
  2. 教程中会有一些小练习,尝试理解并能够自己写一些拓展的页面展示,过程中发现不理解的点要回过头再去细看对应的知识点(只有先留下印象才能定位到问题在哪里,然后知识点和实践结合起来更能方便理解掌握)
  3. 仿照一些简单的静态网页,比如电商登录页面,利用学到的html、css知识临摹出来,期间可以通过查看网页源码帮助自己思考(不会看源码的同学请自行百度),主要锻炼自己html标签的使用、css属性使用、以及div定位布局等方面的知识
  4. 可以先学习html+css入门的知识,写一些静态页面有了一定基础之后,再开始学习JavaScript知识,然后给制作的静态页面添加交互效果,循序渐进的学习,尽量不要想着一步到位,不然容易打消积极性
  5. 可以尝试写一下小的项目,比如个人的网站。同样在过程中会遇到很多问题,要学会不断回到第1、2点进行复盘学习帮助对知识点的加深,也要学会通过参考其它网页源码获取思路,最重要的要不断总结思考

个人练习作品分享

在学习过程中,我也尝试写了一个个人网站,目前还非常简陋(大神勿喷),分享出来供大家一起学习交流。

对了,如果想把自己的网站挂到网上,还需要学习建站技术,购买域名、主机服务器等。目前对具体的步骤我也不太清楚,今后有时间可以研究一下把网站放上去,想想还算是比较有成就感的一件事情。

如果大家感兴趣,目前只能把网页文件下载到本地,然后本地打开查看(这样也有个好处,用到的图标和背景图片可以更方便的拿到),欢迎大家交流指正。

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

 

本文由 @刘鹏 原创发布于人人都是产品经理 ,未经许可,禁止转载。

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 有什么用呢,基本上大部分的前端知识我都是精通的,后端也懂php+node,设计也可以…但这些对产品有实际加分么?没什么,大部分面试你的产品总监、负责人、老板,他们90%都只是了解一点皮毛的,更多他们还是看你之前项目经验如何?有没有一个好数据的项目产品,一个好的数据结果项目胜过前言万语。。。

    技术没用?还是有用的,一些逻辑、一些沟通,你懂的话可以直接更有底气的跟开发沟通,一些基于第三方的一些开源框架、api,你可以第一时间看懂且知道怎么利用。。。但是有什么用呢。。。外行人不懂的。

    在一个好的项目,一个好的的团队,一个靠谱的老板非常非常重要。一个人真的care不了整个大盘的。产品人尽可能为公司的项目奋斗拼搏吧,别在以一个打工者的心态去工作了, 虽然项目直接受益方不是你,但是你这会对你以后的应聘加分会增添不少分数的!

    留言 by 一个在互联网打拼12年+的从事者

    来自广东 回复
  2. 前端想转产品!

    来自上海 回复
  3. 很棒,了解了前端相关的术语,感谢。

    来自广东 回复
  4. 之前学了半个月,实在是看不懂也学不来,只要是英文差的要死,但是在工作中,每次产品需求交给开发之后,他们说推一天就一天,心都空空的?

    来自广东 回复
    1. 有那么难吗 那你axure咋学会的

      来自湖北 回复
    2. axure,不用学就会了 🙂

      来自广东 回复
  5. html是名词,css是形容词,javascript是动词,三个互相配合才是一个句子。

    来自江苏 回复
  6. 最近在自学web前端,准备转行,其实一开始对于产品经理也有过想法,现在看到LZ的文章,心里又开始有一点点小想法了,到底是产品经理还是web前端程序员??我是学习教育专业的,做过文案,也干过自媒体运营,所以LZ可以给点意见么?

    来自湖北 回复
  7. 目前做前端开发,现在有点想转产品 😮

    来自广东 回复
  8. 好棒

    来自广东 回复
  9. 作者你好,看了你的文章,以及你自己写的网站,发现我们很多共同之处,同是产品人,爱好骑行,学着前端知识,做着个人网站,我虽然在北京,但也是浙江人呢!希望能认识一下,我的个人主页:http://www.clow.net.cn/wangze_blog,愿意交个朋友的话,加个微信吧 😎

    来自北京 回复
  10. 像我这样的web开发人员,想转行当产品经理那不是还是挺有优势啊!

    来自四川 回复
    1. 优势肯定有,但是最重要的是思路的转变

      来自河南 回复
    2. 嗯嗯!

      来自四川 回复
    3. 来自北京 回复