PM必懂的前端知识

前端技术：用来开发和实现客户端产品的技术

一、前端技术分类

1、分类

① APP：Android、iOS、Windows Phone

② 网页：Html、CSS、JavaScript

③ 桌面应用：Windows、Mac OS、Linux

2、职能分类

① 移动开发工程师：Android、iOS

② web前端开发工程师：H5

③ 桌面客户端开发工程师：Windows、Mac

二、Android及iOS技术特点及应用

1、应用特点

Android应用特点： ① 安装文件扩展名为.apk

                                    ② 手机尺寸多样化，适配工作量大

                                    ③ 系统开源，可定制化开源

                                    ④ 应用市场碎片化严重，多渠道

                                    ⑤ 手机硬件跨度大，应用支持情况多样

iOS应用特点： ① 安装文件扩展名为.api

                            ② 手机尺寸相对单一，适配工作适中

                            ③ 系统封闭，不可定制化系统

                            ④ 官方指定应用市场，单一渠道

                            ⑤ 手机硬件差异小，应用支持情况统一

2、基本控件

UI控件：构成产品界面的基本元素，根据作用及操作不同，区分为不同种类的控件

Android基本控件:

        ① 按钮：Button

        ② 文本展示框：TextView

        ③ 文本输入框：EditText

        ④ 图片展示框：ImageView

        ⑤ 列表展示容器：ListView

        ⑥ 表格展示容器：GridView

iOS基本控件：

        ① 按钮：UIButton

        ② 文本展示框：UILabel

        ③ 文本输入框：UITextField

        ④ 图片展示框：UIImageView

        ⑤ 列表展示容器：UITableview

        ⑥ 表格展示容器：UICollectionView

3、界面布局

界面布局：各种UI控件按照一定的布局规则组合在一起，构成一个独立的产品界面。

布局原理应用与产品设计

      ① 产品设计时考虑每一个控件的边界属性（文本的最长展示范围，不同屏幕尺寸的适配）；

      ② 内容型控件需指明内容对齐方式（文本展示框内容的对齐方式，图片拉伸方式）；

UI控件三要素

大小、位置、外观（内容）

4、适配

所有的显示问题，最终都归结为 适配问题。产品经理需要了解适配原理，通过适配方案反向推出能降低适配难度的设计原型。

适配类型

① 界面布局适配

     等比缩放（适合图片类）；

     高度不变，水平间距缩小（适合设计组件，如搜索框）

② 应用素材适配

      Android：点9图，常应用于对话框背景图片中。

      iOS：@2x、@3x

屏幕分辨率知识汇总

屏幕的清晰程度由屏幕分辨率和屏幕尺寸大小共同决定

① 屏幕尺寸：屏幕对角线的长度，单位是英寸，1英寸=2.54厘米

② 屏幕分辨率：在横向宽度，竖向高度像素点数，单位是px，1px=1个像素点（像素是没有物理大小的，能变大，能变小。同一个设备，像素个数是固定的）

③ 屏幕像素密度（PPI）：屏幕每英寸上的像素点数，单位是dpi

④ 像素（px）是设计师的最小设计单位，点（pt）是ios最小的开发单位

5、IOS & 安卓交互区别

三、前端主要语言

• 只会基本的HTML/CSS, 可以将设计图转化为HTML/CSS, 俗称切图

• 懂一些Javascript，主要是使用现成的框架，jQuery，Bootstrap等等

• 知道jQuery，Bootstrap的局限，在需要时可以直接编写原生JS/CSS

• 对JS/CSS非常了解，热衷于利用浏览器的各种最新特性实现各种炫酷效果

• 可以根据需要写出封装良好的JS类库或者开发框架

1、Html：超文本标记语言

     搭建网页的基础语言，以标签形式表示网页组成元素，通过浏览器解析还原成视觉页面

2、CSS：层叠样式表

     给页面装饰的衣服，定义统一样式风格，给Html页面元素进行展示样式渲染。

3、Javascript

     实现页面交互、动效

4、jQuery

Javascript库，主要面向查询（Query）。简单理解，就是javascript里面那些需要用一行行代码实现的在jQuery里面可以直接打包成模块，调取对应的接口使用，模块化的使用方式让开发者可以很快就开发出酷炫的页面。

5、Bootstrap

Bootstrap也是对Javascript进行封装，它在jQuery的基础上进行更加人性化的完善，其实就是更方便了。它有很多现成的组件，比如导航栏、下拉菜单、按钮，都定义好了样式和交互，直接成套拿来用就行了。

四、静态页面和动态页面

分静态网页和动态网页的共同之处。首先，它们的目标都是呈现内容给用户；其次，内容都是用超文本标记语言（HTML）表示的

•静态页面：htm、html、shtml、xml；
•动态页面：asp、jsp、php、perl、cgi；

1）静态页面

   ① 开发技术

           HTML或XML即可完成静态页面制作

   ② 优点

         · 托管没有任何要求
         · 不需要编译，相应速度快
         · 搜索引擎容易识别
         · 网站更安全，减少攻击

   ③ 缺点

         · 内容固定，交互性差，维护复杂

2）动态页面

    ① 开发技术

        · HTML+JavaScript(Node.js) 
        · HTML+PHP 
        · HTML+ASP.NET(或ASP) 
        · HTML+JSP
        · HTML+CGI(早期的动态网页技术)

   ② 优点

       · 维护方便，基本能实现各种需求
       · 查询信息方便，能存储大量数据

   ③ 缺点

       · 需要专业技术人员提供维护保障数据库的安全和保密性
       · 不利于搜索引擎收录
       · 制作成本高

五、Html 5 和 Native应用

Html 5应用：通过网页Web技术实现的客户端产品，具备轻量化、易维护的特点。

 Native应用：通过各移动平台技术实现的客户端产品，具备体验好、功能丰富的特点。

混合应用：结合Html 5 和 Native 应用混合实现，在Native中嵌套H5页面代替部分功能，具备动态扩展、高灵活性的特点。

六、产品经理如何将技术应用到产品设计中

1、设计产品原型时，结合产品思维与实现思维；

2、组件化设计思路，从开发角度思考问题，设计可复用产品模块；

3、明确技术边界，基于现有技术设计产品原型；