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

在開發(fā)上：

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

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

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

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

在設(shè)計上：

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

app例圖

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

h5例圖

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

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

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

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

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

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