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

在開發(fā)上：

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

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

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

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

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

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

app例圖

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

h5例圖

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

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

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

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

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

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