由于小程序本身的特殊性，導(dǎo)致 UI 設(shè)計師不能夠如同設(shè)計 App 一般自如。為了后續(xù) UI 設(shè)計師和小程序前端開發(fā)能減少溝通，返工成本，將在這里和大家聊聊小程序和 App 設(shè)計的差異，以及差異具體的表現(xiàn)。

本文僅為個人工作學(xué)習(xí)心得，可能概述的較片面，有錯誤不妥之處歡迎指出。

1.為什么有差異——缺乏自主性

1）功能支持

小程序我們都知道是基于微信的應(yīng)用程序，開發(fā)必須依靠微信給的接口（微信給啥就是啥），能實現(xiàn)的功能被大大的限制了。而且小程序上線也就2年的時候，還有一些功能不完善。

App 依靠于手機(jī)系統(tǒng)，可以實現(xiàn)復(fù)雜且多的功能，App 開發(fā)已經(jīng)有近10年的積累，各類控件比較完善，換句話說就是開發(fā)者能力越大，展示效果越豐富。

2）內(nèi)存體積

小程序代碼提交不能超過規(guī)定大小2M，這部分程度上限制了開發(fā)的可能性。

App 就不同了，沒有這部分的限制，我們更新軟件的時候經(jīng)?？吹綆资?，幾百兆，甚至游戲類的幾個G的下載體積。

3）體驗及流暢

小程序的體驗略遜于 App , 小程序使用時沒有那么穩(wěn)定，容易出現(xiàn)錯誤閃退，特別是在一些功能復(fù)雜的應(yīng)用中，雖然說小程序已經(jīng)優(yōu)化了很多，有時仍會出現(xiàn)卡頓感。

2.差異在哪里？具體表現(xiàn)

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

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

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

實現(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ù)量氣泡等，但是體驗相比原生差一點(diǎn)，如果標(biāo)簽頁是首次進(jìn)入的頁面，那么標(biāo)簽欄切換會造成跳動，需要開發(fā)做規(guī)避。

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

3）拖動排序

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

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

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