微信小程序和APP存在著明顯的不同，小程序不占內(nèi)存的，APP需要下載占據(jù)很大的手機(jī)內(nèi)存。所以APP的設(shè)計和小程序的設(shè)計是存在一定的區(qū)別的。APP和小程序的設(shè)計具體區(qū)別表現(xiàn)在什么地方呢？實(shí)搜的小編就詳細(xì)的為大家總結(jié)一下具體的差距。

1）頂部導(dǎo)航欄

App：可以保留導(dǎo)航欄，也可以去掉，可拓展性強(qiáng)，靈活性高。

小程序：導(dǎo)航欄右側(cè)有個無法去除和編輯的膠囊（titlebar），設(shè)計時也不能在導(dǎo)航上增加其他功能。所以在App轉(zhuǎn)小程序時，導(dǎo)航欄的功能要換位置或者在放在導(dǎo)航欄下。

實(shí)現(xiàn)效果也略欠缺一些，例如微信提供原生和自定義的兩種導(dǎo)航欄：

（一）原生的導(dǎo)航欄支持更改顏色，但字體顏色僅支持黑/白兩種；

（二）雖然自定義的導(dǎo)航欄可以去除原生導(dǎo)航欄，支持圖片通到導(dǎo)航欄上，但是所有頁面都需要重新調(diào)整（原先導(dǎo)航欄的高度沒有了，界面元素會跟著上移），而小程序不支持單個頁面修改。

這是目前最麻煩的地方，量級小的應(yīng)用還可以，量級大的導(dǎo)致工作量大大增加。

同時，自定義導(dǎo)航容易帶來標(biāo)題無法對齊、頁面機(jī)型不同安全區(qū)域不同、全局刷新時頁面會被整個下拉等等問題。

建議頁面多、復(fù)雜的情況，盡量減少使用自定義導(dǎo)航，也可以使用像馬蜂窩一樣，導(dǎo)航欄背景和圖片背景銜接，效果也不錯。

2）標(biāo)簽欄

App：可支持最少2個，最多5個的tab切換，圖標(biāo)大小以及底部標(biāo)簽欄高度可自定義。

小程序：也可支持最少2個，最多5個的tab切換，使用原生控件時，要遵從icon尺寸81*81px。

使用自定義標(biāo)簽欄時，可支持加入交互效果，例如提示數(shù)量氣泡等，但是體驗(yàn)相比原生差一點(diǎn)，如果標(biāo)簽頁是首次進(jìn)入的頁面，那么標(biāo)簽欄切換會造成跳動，需要開發(fā)做規(guī)避。

建議不帶有交互的情況，盡量使用原生控件，就像站酷小程序一樣。

3）拖動排序

App：流暢、體驗(yàn)佳，例如發(fā)朋友圈時拖動照片排序。

小程序：除非必要，否則不建議使用拖動排序。圖片和列表拖動在Android機(jī)型上體驗(yàn)不夠，會有卡頓的情況。

建議使用上下按鈕替換上下拖動，或者圖片排序使用標(biāo)記的方式來進(jìn)行排序。

4）文本省略

App：可實(shí)現(xiàn)日常所需的所有文字、段落效果。

小程序：文本限制行數(shù)，加省略號，并且增加全文展開方案實(shí)現(xiàn)有問題。無法預(yù)估到行尾位置省略。

建議通過換行增加全文展開按鈕，或者控制字?jǐn)?shù)，文本末尾增加全文展開。

5）原生組件

App：可以自定義組件庫，對開發(fā)設(shè)計限制低。

小程序：部分組件是由微信創(chuàng)建的原生組件，有系統(tǒng)相機(jī)、輸入框、地圖、文本輸入...等等，原生控件使用有一定的限制，不能在滾動、輪播、選擇器、拖動區(qū)域中使用，層級最高無法被覆蓋，可供修改的參數(shù)由微信提供。

建議在設(shè)計時以原生控件為基礎(chǔ)修改，不要自造控件。同時注意使用場景，以免無法實(shí)現(xiàn)。

6）動畫實(shí)現(xiàn)

App：動畫流暢、無卡頓，想要的基本都能實(shí)現(xiàn)。

小程序：動畫能力低于H5和App，動畫對性能消耗大，尤其是在Android機(jī)型上，卡頓有稍顯明顯。當(dāng)加載代碼包時，當(dāng)微信認(rèn)為這個小程序占用過多的內(nèi)存，會把此小程序強(qiáng)行退出，以保證微信的正常使用。

建議動畫精簡，盡量做減法設(shè)計。以上就是關(guān)于APP和小程序設(shè)計的具體的區(qū)別，大家在設(shè)計小程序的時候應(yīng)該注意到他們之間的區(qū)別，才能更好的為用戶提供更多的流暢的體驗(yàn)。

標(biāo)簽：