前端技術(shù)：用來(lái)開(kāi)發(fā)和實(shí)現(xiàn)客戶(hù)端產(chǎn)品的技術(shù)
一业舍、前端技術(shù)分類(lèi)
1、分類(lèi)
① APP：Android、iOS舷暮、Windows Phone
②?網(wǎng)頁(yè)：Html态罪、CSS、JavaScript
③ 桌面應(yīng)用：Windows下面、Mac OS复颈、Linux
2、職能分類(lèi)
①?移動(dòng)開(kāi)發(fā)工程師：Android沥割、iOS
②?web前端開(kāi)發(fā)工程師：H5
③?桌面客戶(hù)端開(kāi)發(fā)工程師：Windows耗啦、Mac
二、Android及iOS技術(shù)特點(diǎn)及應(yīng)用
1机杜、應(yīng)用特點(diǎn)
Android應(yīng)用特點(diǎn)： ① 安裝文件擴(kuò)展名為.apk
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ② 手機(jī)尺寸多樣化帜讲，適配工作量大
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ③ 系統(tǒng)開(kāi)源，可定制化開(kāi)源
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ④ 應(yīng)用市場(chǎng)碎片化嚴(yán)重椒拗，多渠道
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ⑤ 手機(jī)硬件跨度大似将，應(yīng)用支持情況多樣
iOS應(yīng)用特點(diǎn)：?① 安裝文件擴(kuò)展名為.api
????????????????????????????② 手機(jī)尺寸相對(duì)單一，適配工作適中
????????????????????????????③ 系統(tǒng)封閉蚀苛，不可定制化系統(tǒng)
????????????????????????????④ 官方指定應(yīng)用市場(chǎng)在验，單一渠道
? ? ? ? ? ? ? ? ? ? ? ? ? ? ⑤ 手機(jī)硬件差異小，應(yīng)用支持情況統(tǒng)一
2堵未、基本控件
UI控件：構(gòu)成產(chǎn)品界面的基本元素腋舌，根據(jù)作用及操作不同，區(qū)分為不同種類(lèi)的控件
Android基本控件:
??????? ① 按鈕：Button
??????? ② 文本展示框：TextView
??????? ③ 文本輸入框：EditText
??????? ④ 圖片展示框：ImageView
??????? ⑤ 列表展示容器：ListView
??????? ⑥ 表格展示容器：GridView
iOS基本控件：
??????? ① 按鈕：UIButton
??????? ② 文本展示框：UILabel
??????? ③ 文本輸入框：UITextField
??????? ④ 圖片展示框：UIImageView
??????? ⑤ 列表展示容器：UITableview
??????? ⑥ 表格展示容器：UICollectionView
3渗蟹、界面布局
界面布局：各種UI控件按照一定的布局規(guī)則組合在一起侦厚，構(gòu)成一個(gè)獨(dú)立的產(chǎn)品界面。
布局原理應(yīng)用與產(chǎn)品設(shè)計(jì)
? ? ? ① 產(chǎn)品設(shè)計(jì)時(shí)考慮每一個(gè)控件的邊界屬性（文本的最長(zhǎng)展示范圍拙徽，不同屏幕尺寸的適配）刨沦；
? ? ? ② 內(nèi)容型控件需指明內(nèi)容對(duì)齊方式（文本展示框內(nèi)容的對(duì)齊方式，圖片拉伸方式）膘怕；
UI控件三要素
大小想诅、位置、外觀（內(nèi)容）
4岛心、適配
所有的顯示問(wèn)題来破，最終都?xì)w結(jié)為 適配問(wèn)題。產(chǎn)品經(jīng)理需要了解適配原理忘古，通過(guò)適配方案反向推出能降低適配難度的設(shè)計(jì)原型徘禁。
適配類(lèi)型
① 界面布局適配
???? 等比縮放（適合圖片類(lèi)）；
???? 高度不變髓堪，水平間距縮兴椭臁（適合設(shè)計(jì)組件娘荡，如搜索框）
② 應(yīng)用素材適配
? ??? Android：點(diǎn)9圖，常應(yīng)用于對(duì)話(huà)框背景圖片中驶沼。
? ??? iOS：@2x炮沐、@3x
屏幕分辨率知識(shí)匯總
屏幕的清晰程度由屏幕分辨率和屏幕尺寸大小共同決定
① 屏幕尺寸：屏幕對(duì)角線(xiàn)的長(zhǎng)度，單位是英寸回怜，1英寸=2.54厘米
② 屏幕分辨率：在橫向?qū)挾却竽辏Q向高度像素點(diǎn)數(shù)，單位是px玉雾，1px=1個(gè)像素點(diǎn)（像素是沒(méi)有物理大小的翔试，能變大，能變小复旬。同一個(gè)設(shè)備遏餐，像素個(gè)數(shù)是固定的）
③ 屏幕像素密度（PPI）：屏幕每英寸上的像素點(diǎn)數(shù)，單位是dpi
④ 像素（px）是設(shè)計(jì)師的最小設(shè)計(jì)單位赢底，點(diǎn)（pt）是ios最小的開(kāi)發(fā)單位
5失都、IOS & 安卓交互區(qū)別
三、前端主要語(yǔ)言
? 只會(huì)基本的HTML/CSS, 可以將設(shè)計(jì)圖轉(zhuǎn)化為HTML/CSS, 俗稱(chēng)切圖
? 懂一些Javascript幸冻，主要是使用現(xiàn)成的框架粹庞，jQuery，Bootstrap等等
? 知道jQuery洽损，Bootstrap的局限庞溜，在需要時(shí)可以直接編寫(xiě)原生JS/CSS
? 對(duì)JS/CSS非常了解，熱衷于利用瀏覽器的各種最新特性實(shí)現(xiàn)各種炫酷效果
? 可以根據(jù)需要寫(xiě)出封裝良好的JS類(lèi)庫(kù)或者開(kāi)發(fā)框架
1碑定、Html：超文本標(biāo)記語(yǔ)言
? ? ?搭建網(wǎng)頁(yè)的基礎(chǔ)語(yǔ)言流码，以標(biāo)簽形式表示網(wǎng)頁(yè)組成元素，通過(guò)瀏覽器解析還原成視覺(jué)頁(yè)面
2延刘、CSS：層疊樣式表
? ? ?給頁(yè)面裝飾的衣服漫试，定義統(tǒng)一樣式風(fēng)格，給Html頁(yè)面元素進(jìn)行展示樣式渲染碘赖。
3驾荣、Javascript
? ? ?實(shí)現(xiàn)頁(yè)面交互、動(dòng)效
4普泡、jQuery
Javascript庫(kù)播掷，主要面向查詢(xún)（Query）。簡(jiǎn)單理解撼班，就是javascript里面那些需要用一行行代碼實(shí)現(xiàn)的在jQuery里面可以直接打包成模塊歧匈，調(diào)取對(duì)應(yīng)的接口使用，模塊化的使用方式讓開(kāi)發(fā)者可以很快就開(kāi)發(fā)出酷炫的頁(yè)面砰嘁。
5件炉、Bootstrap
Bootstrap也是對(duì)Javascript進(jìn)行封裝勘究，它在jQuery的基礎(chǔ)上進(jìn)行更加人性化的完善，其實(shí)就是更方便了妻率。它有很多現(xiàn)成的組件，比如導(dǎo)航欄板祝、下拉菜單宫静、按鈕，都定義好了樣式和交互券时，直接成套拿來(lái)用就行了孤里。
四、靜態(tài)頁(yè)面和動(dòng)態(tài)頁(yè)面
分靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)的共同之處橘洞。首先捌袜，它們的目標(biāo)都是呈現(xiàn)內(nèi)容給用戶(hù)；其次炸枣，內(nèi)容都是用超文本標(biāo)記語(yǔ)言（HTML）表示的
?靜態(tài)頁(yè)面：htm虏等、html、shtml适肠、xml霍衫；
?動(dòng)態(tài)頁(yè)面：asp、jsp侯养、php敦跌、perl、cgi逛揩；
1）靜態(tài)頁(yè)面
?? ① 開(kāi)發(fā)技術(shù)
???????????HTML或XML即可完成靜態(tài)頁(yè)面制作
?? ② 優(yōu)點(diǎn)
?????????· 托管沒(méi)有任何要求
???????? · 不需要編譯柠傍，相應(yīng)速度快
???????? · 搜索引擎容易識(shí)別
?????????· 網(wǎng)站更安全，減少攻擊
?? ③ 缺點(diǎn)
???????? · 內(nèi)容固定辩稽，交互性差惧笛，維護(hù)復(fù)雜
2）動(dòng)態(tài)頁(yè)面
??? ① 開(kāi)發(fā)技術(shù)
????????· HTML+JavaScript(Node.js)?
??????? · HTML+PHP?
??????? · HTML+ASP.NET(或ASP)?
????????·?HTML+JSP
??????? · HTML+CGI(早期的動(dòng)態(tài)網(wǎng)頁(yè)技術(shù))
?? ② 優(yōu)點(diǎn)
?????? · 維護(hù)方便，基本能實(shí)現(xiàn)各種需求
?????? · 查詢(xún)信息方便逞泄，能存儲(chǔ)大量數(shù)據(jù)
?? ③ 缺點(diǎn)
?????? · 需要專(zhuān)業(yè)技術(shù)人員提供維護(hù)保障數(shù)據(jù)庫(kù)的安全和保密性
?????? · 不利于搜索引擎收錄
?????? · 制作成本高
五徐紧、Html 5 和 Native應(yīng)用
Html 5應(yīng)用：通過(guò)網(wǎng)頁(yè)Web技術(shù)實(shí)現(xiàn)的客戶(hù)端產(chǎn)品，具備輕量化炭懊、易維護(hù)的特點(diǎn)并级。
?Native應(yīng)用：通過(guò)各移動(dòng)平臺(tái)技術(shù)實(shí)現(xiàn)的客戶(hù)端產(chǎn)品，具備體驗(yàn)好侮腹、功能豐富的特點(diǎn)嘲碧。
混合應(yīng)用：結(jié)合Html 5 和 Native 應(yīng)用混合實(shí)現(xiàn)，在Native中嵌套H5頁(yè)面代替部分功能父阻，具備動(dòng)態(tài)擴(kuò)展愈涩、高靈活性的特點(diǎn)望抽。
六、產(chǎn)品經(jīng)理如何將技術(shù)應(yīng)用到產(chǎn)品設(shè)計(jì)中
1履婉、設(shè)計(jì)產(chǎn)品原型時(shí)煤篙，結(jié)合產(chǎn)品思維與實(shí)現(xiàn)思維；
2毁腿、組件化設(shè)計(jì)思路辑奈，從開(kāi)發(fā)角度思考問(wèn)題，設(shè)計(jì)可復(fù)用產(chǎn)品模塊已烤；
3鸠窗、明確技術(shù)邊界，基于現(xiàn)有技術(shù)設(shè)計(jì)產(chǎn)品原型胯究；
