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

一、前端技术分类

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、明确技术边界，基于现有技术设计产品原型；