最先我們要確立APP開(kāi)發(fā)和H5開(kāi)發(fā)是不一樣的，因而在設(shè)計(jì)上也是有差別。

在開(kāi)發(fā)上：

APP應(yīng)用單獨(dú)安裝文件，不一樣服務(wù)平臺(tái)必須單獨(dú)語(yǔ)言表達(dá)開(kāi)發(fā)，如安卓系統(tǒng)Java, iPhoneObjective-C，可適用多用途迭代更新要求，版本升級(jí)維護(hù)保養(yǎng)會(huì)牽涉到手機(jī)客戶端和服務(wù)器端很有可能會(huì)出現(xiàn)資源分享；

安裝文件能夠適用無(wú)網(wǎng)絡(luò)訪問(wèn)，可以支撐點(diǎn)較比較復(fù)雜的作用邏輯性，完成深度1互動(dòng)，可用多情景；

H5是手機(jī)上web，網(wǎng)頁(yè)頁(yè)面方式開(kāi)啟，兼容多服務(wù)平臺(tái)，版本升級(jí)在服務(wù)器端，無(wú)手機(jī)客戶端資源分享，精巧輕巧；

H5必須互聯(lián)網(wǎng)適用，許多 移動(dòng)設(shè)備作用不兼容例如手機(jī)鏡頭，作用邏輯性方面適用比較有限。

在設(shè)計(jì)上：

App的頂端導(dǎo)航欄是該商品的，且深層次網(wǎng)頁(yè)頁(yè)面也是有返回按鈕，且能對(duì)設(shè)備的交互技術(shù)開(kāi)展更深入的設(shè)計(jì)。

app例圖

H5則是采用電腦瀏覽器內(nèi)置的導(dǎo)航條，沒(méi)有返回按鈕，必須在H5設(shè)計(jì)返回按鈕，且交互技術(shù)由于網(wǎng)絡(luò)資源難題比較單一。

h5例圖

“適配時(shí)字體樣式發(fā)生難題？”

了解了app和h5的差別，我們?cè)谧鲈O(shè)計(jì)的情況下就更要關(guān)心適配難題了。

立即以App的設(shè)計(jì)規(guī)格在大部分H5上是不可用的，必須實(shí)現(xiàn)實(shí)際適配。

當(dāng)手機(jī)端設(shè)計(jì)稿適配到H5時(shí)，一般會(huì)應(yīng)用這兩種方式：

1.用rem布局開(kāi)展適配。設(shè)計(jì)稿界定單倍屏的尺寸，當(dāng)必須適配到幾倍屏?xí)r前面會(huì)獲得根原素尺寸，根據(jù)根原素去開(kāi)展全自動(dòng)適配；2.應(yīng)用純px合理布局。假如單倍屏沒(méi)法符合要求，則依據(jù)具體開(kāi)發(fā)狀況，設(shè)計(jì)稿能夠空出好多個(gè)倍率圖，讓開(kāi)發(fā)應(yīng)用不一樣倍率圖，對(duì)手機(jī)上相匹配屏幕分辨率開(kāi)展適配。

由于開(kāi)發(fā)沒(méi)有應(yīng)用rem布局，僅用了純px合理布局，當(dāng)倍屏不與此同時(shí)，字體樣式會(huì)減小或變大，因此經(jīng)常出現(xiàn)這個(gè)情形時(shí)，必須了解實(shí)際適配到哪一個(gè)屏幕分辨率，讓開(kāi)發(fā)按相匹配倍率去適配，或是導(dǎo)出來(lái)相對(duì)應(yīng)的倍率圖給開(kāi)發(fā)開(kāi)展適配。