前端技术：用来开发和实现客户端产品的技术
一、前端技术分类
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、明确技术边界，基于现有技术设计产品原型；
网友评论