前端技術(shù)：用來(lái)開(kāi)發(fā)和實(shí)現(xiàn)客戶端產(chǎn)品的技術(shù)

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

1、分類

① APP：Android、iOS、Windows Phone

②?網(wǎng)頁(yè)：Html、CSS、JavaScript

③ 桌面應(yīng)用：Windows、Mac OS、Linux

2、職能分類

①?移動(dòng)開(kāi)發(fā)工程師：Android、iOS

②?web前端開(kāi)發(fā)工程師：H5

③?桌面客戶端開(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ū)分為不同種類的控件

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ì)原型。

適配類型

① 界面布局適配

等比縮放(適合圖片類)；

高度不變，水平間距縮小(適合設(shè)計(jì)組件，如搜索框)

② 應(yīng)用素材適配

Android：點(diǎn)9圖，常應(yīng)用于對(duì)話框背景圖片中。

iOS：@2x、@3x

屏幕分辨率知識(shí)匯總屏幕的清晰程度由屏幕分辨率和屏幕尺寸大小共同決定

① 屏幕尺寸：屏幕對(duì)角線的長(zhǎng)度，單位是英寸，1英寸=2.54厘米

② 屏幕分辨率：在橫向?qū)挾?#xff0c;豎向高度像素點(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, 俗稱切圖

? 懂一些Javascript，主要是使用現(xiàn)成的框架，jQuery，Bootstrap等等

? 知道jQuery，Bootstrap的局限，在需要時(shí)可以直接編寫(xiě)原生JS/CSS

? 對(duì)JS/CSS非常了解，熱衷于利用瀏覽器的各種最新特性實(shí)現(xiàn)各種炫酷效果

? 可以根據(jù)需要寫(xiě)出封裝良好的JS類庫(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ù)，主要面向查詢(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)容給用戶；其次，內(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)各種需求

· 查詢信息方便，能存儲(chǔ)大量數(shù)據(jù)

③ 缺點(diǎ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)的客戶端產(chǎn)品，具備輕量化、易維護(hù)的特點(diǎn)。

Native應(yīng)用：通過(guò)各移動(dòng)平臺(tái)技術(shù)實(shí)現(xiàn)的客戶端產(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)品原型；

總結(jié)

以上是生活随笔為你收集整理的标记页面区分渠道php,PM必懂的前端知识的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。