一、前端技术分类

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

(一)分类

1、APP

Android、iOS、Windows Phone

2、网页

Html、Css、JavaScript

3、桌面应用

Windows、MacOS、Linux

（二）职能分类

1、移动开发工程师（Android、iOS）

2、web前端开发工程师（H5）

3、桌面客户端开发工程师（Windows、Mac）

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

（一）UI控件

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

（二）界面布局

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

布局原理应用与产品设计：

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

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

UI控件三要素：

1、大小

2、位置

布局：线性布局、相对布局

3、外观（内容）

（三）Android及iOS应用适配

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

1、界面布局适配（相对布局）

2、应用素材适配

（1）Android：点9图

（2）iOS：@2x、@3x

3、功能适配

三、网页技术基础

Html页面是骨架，CSS是给Html页面装饰的衣服，同一个Html页面根据不同的CSS可实现不同的展示效果

Web页面可实现对PC浏览器和手机浏览器的适配，一套网页可在不同的设备上呈现不同的展示效果

修改网页内容不需要重新发布客户端产品，只需要网页重新更新，可进行热更新

Html：超文本标记语言

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

CSS：层叠样式表

定义统一样式风格，给Html页面元素进行展示样式渲染

四、Html5和Native应用

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

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

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

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

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

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

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