一、前端技術(shù)分類

前端技術(shù)是指用來開發(fā)和實現(xiàn)客戶端產(chǎn)品的技術(shù)

(一)分類

1、APP

Android、iOS、Windows Phone

2、網(wǎng)頁

Html、Css、JavaScript

3、桌面應(yīng)用

Windows、MacOS、Linux

（二）職能分類

1、移動開發(fā)工程師（Android、iOS）

2、web前端開發(fā)工程師（H5）

3、桌面客戶端開發(fā)工程師（Windows、Mac）

二、Android及iOS技術(shù)特點及應(yīng)用

（一）UI控件

構(gòu)成產(chǎn)品界面的基本元素，根據(jù)作用及操作的不同，區(qū)分為不同種類的控件

（二）界面布局

界面布局：各種UI控件按照一定的布局規(guī)則組合在一起，構(gòu)成一個獨立的產(chǎn)品界面。

布局原理應(yīng)用與產(chǎn)品設(shè)計：

1、產(chǎn)品設(shè)計時考慮每一個控件的邊界屬性（文本的最長展示范圍，不同屏幕尺寸的適配）

2、內(nèi)容型控件需指明內(nèi)容對齊方式（文本展示框內(nèi)容的對齊方式，圖片拉伸方式）

UI控件三要素：

1、大小

2、位置

布局：線性布局、相對布局

3、外觀（內(nèi)容）

（三）Android及iOS應(yīng)用適配

所有的顯示問題，最終都歸結(jié)為適配問題，適配問題為移動開發(fā)的一大難題之一，產(chǎn)品經(jīng)理需要了解適配原理，通過適配方案反向推出能降低適配難度的原型設(shè)計。

1、界面布局適配（相對布局）

2、應(yīng)用素材適配

（1）Android：點9圖

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

3、功能適配

三、網(wǎng)頁技術(shù)基礎(chǔ)

Html頁面是骨架，CSS是給Html頁面裝飾的衣服，同一個Html頁面根據(jù)不同的CSS可實現(xiàn)不同的展示效果

Web頁面可實現(xiàn)對PC瀏覽器和手機瀏覽器的適配，一套網(wǎng)頁可在不同的設(shè)備上呈現(xiàn)不同的展示效果

修改網(wǎng)頁內(nèi)容不需要重新發(fā)布客戶端產(chǎn)品，只需要網(wǎng)頁重新更新，可進行熱更新

Html：超文本標記語言

以標簽的形式表示網(wǎng)頁組成元素，通過瀏覽器解析還原成視覺頁面

CSS：層疊樣式表

定義統(tǒng)一樣式風格，給Html頁面元素進行展示樣式渲染

四、Html5和Native應(yīng)用

Html5應(yīng)用：通過網(wǎng)頁web技術(shù)實現(xiàn)的客戶端產(chǎn)品，具備輕量化、易維護的特點

Native應(yīng)用：通過各移動平臺技術(shù)實現(xiàn)的客戶端產(chǎn)品，具備體驗好、功能豐富的特點

混合應(yīng)用：結(jié)合Html5和Native應(yīng)用混合實現(xiàn)，在Native中嵌套H5頁面代替部分功能，具備動態(tài)擴展，高靈活性的特點

五、產(chǎn)品經(jīng)理如何將技術(shù)應(yīng)用到產(chǎn)品設(shè)計中

1、設(shè)計產(chǎn)品原型時，結(jié)合產(chǎn)品思維與實現(xiàn)思維

2、組件化設(shè)計思路，從開發(fā)角度思考問題，設(shè)計可復用產(chǎn)品模塊

3、明確技術(shù)邊界，基于現(xiàn)有技術(shù)設(shè)計產(chǎn)品原型