因?yàn)樾〕绦蜃陨淼奶厥庑?，?dǎo)致 UI 規(guī)劃師不能夠如同規(guī)劃 App 一般自若。為了后續(xù) UI 規(guī)劃師和小程序前端開(kāi)發(fā)能削減溝通，返工成本，將在這兒和咱們聊聊小程序和 App 規(guī)劃的差異，以及差異具體的表現(xiàn)。
本文僅為個(gè)人作業(yè)學(xué)習(xí)心得，可能概述的較片面，有錯(cuò)誤不當(dāng)之處歡迎指出。
目錄
1.為什么有差異？
2.差異在哪里？具體表現(xiàn)
1.為什么有差異——缺乏自主性
1）功用支撐
小程序咱們都知道是基于微信的運(yùn)用程序，開(kāi)發(fā)必須依托微信給的接口（微信給啥便是啥），能完成的功用被大大的約束了。而且小程序上線也就2年的時(shí)分，還有一些功用不完善。
App 依托于手機(jī)系統(tǒng)，能夠完成雜亂且多的功用，App 開(kāi)發(fā)現(xiàn)已有近10年的堆集，各類控件比較完善，換句話說(shuō)便是開(kāi)發(fā)者才能越大，展現(xiàn)作用越豐富。
2）內(nèi)存體積
小程序代碼提交不能超過(guò)規(guī)定大小2M，這部分程度上約束了開(kāi)發(fā)的可能性。
App 就不同了，沒(méi)有這部分的約束，咱們更新軟件的時(shí)分經(jīng)?？吹綆资?，幾百兆，甚至游戲類的幾個(gè)G的下載體積。
3）體會(huì)及流暢
小程序的體會(huì)略遜于 App , 小程序運(yùn)用時(shí)沒(méi)有那么穩(wěn)定，簡(jiǎn)單出現(xiàn)錯(cuò)誤閃退，特別是在一些功用雜亂的運(yùn)用中，雖然說(shuō)小程序現(xiàn)已優(yōu)化了很多，有時(shí)仍會(huì)出現(xiàn)卡頓感。
2.差異在哪里？具體表現(xiàn)
1）頂部導(dǎo)航欄
App：能夠保留導(dǎo)航欄，也能夠去掉，可拓展性強(qiáng)，靈活性高。
小程序：導(dǎo)航欄右側(cè)有個(gè)無(wú)法去除和修正的膠囊（titlebar），規(guī)劃時(shí)也不能在導(dǎo)航上添加其他功用。所以在 App 轉(zhuǎn)小程序時(shí)，導(dǎo)航欄的功用要換方位或許在放在導(dǎo)航欄下。
完成作用也略短缺一些，例如微信供給原生和自定義的兩種導(dǎo)航欄：
（一）原生的導(dǎo)航欄支撐更改色彩，但字體色彩僅支撐黑/白兩種；
（二）雖然自定義的導(dǎo)航欄能夠去除原生導(dǎo)航欄，支撐圖片通到導(dǎo)航欄上，但是一切頁(yè)面都需要從頭調(diào)整（原先導(dǎo)航欄的高度沒(méi)有了，界面元素會(huì)跟著上移），而小程序不支撐單個(gè)頁(yè)面修正。
這是目前較費(fèi)事的地方，量級(jí)小的運(yùn)用還能夠，量級(jí)大的導(dǎo)致作業(yè)量大大添加。
一起，自定義導(dǎo)航簡(jiǎn)單帶來(lái)標(biāo)題無(wú)法對(duì)齊、頁(yè)面機(jī)型不同安全區(qū)域不同、全局改寫時(shí)頁(yè)面會(huì)被整個(gè)下拉等等問(wèn)題。
主張頁(yè)面多、雜亂的狀況，盡量削減運(yùn)用自定義導(dǎo)航，也能夠運(yùn)用像馬蜂窩相同，導(dǎo)航欄布景和圖片布景聯(lián)接，作用也不錯(cuò)。
2）標(biāo)簽欄
App：可支撐較少2個(gè)，較多5個(gè)的tab切換，圖標(biāo)大小以及底部標(biāo)簽欄高度可自定義。
小程序：也可支撐較少2個(gè)，較多5個(gè)的tab切換，運(yùn)用原生控件時(shí)，要遵從 icon 尺度81*81px。
運(yùn)用自定義標(biāo)簽欄時(shí)，可支撐加入交互作用，例如提示數(shù)量氣泡等，但是體會(huì)相比原生差一點(diǎn)，如果標(biāo)簽頁(yè)是首次進(jìn)入的頁(yè)面，那么標(biāo)簽欄切換會(huì)造成跳動(dòng)，需要開(kāi)發(fā)做躲避。
主張不帶有交互的狀況，盡量運(yùn)用原生控件，就像站酷小程序 相同。
3）拖動(dòng)排序
App：流暢、體會(huì)佳，例如發(fā)朋友圈時(shí)拖動(dòng)照片排序。
小程序：除非必要，否則不主張運(yùn)用拖動(dòng)排序。圖片和列表拖動(dòng)在 Android機(jī)型上體會(huì)不夠，會(huì)有卡頓的狀況。
主張運(yùn)用上下按鈕替換上下拖動(dòng)，或許圖片排序運(yùn)用符號(hào)的方法來(lái)進(jìn)行排序。
4）文本省掉
App：可完成日常所需的一切文字、階段作用。
小程序：文本約束行數(shù)，加省掉號(hào)，并且添加全文打開(kāi)計(jì)劃完成有問(wèn)題。無(wú)法預(yù)估到行尾方位省掉。
主張經(jīng)過(guò)換行添加全文打開(kāi)按鈕，或許操控字?jǐn)?shù)，文本結(jié)尾添加全文打開(kāi)。
5）原生組件
App：能夠自定義組件庫(kù)，對(duì)開(kāi)發(fā)規(guī)劃約束低。
小程序：部分組件是由微信創(chuàng)立的原生組件，有系統(tǒng)相機(jī)、輸入框、地圖、文本輸入...等等，原生控件運(yùn)用有必定的約束，不能在滾動(dòng)、輪播、選擇器、拖動(dòng)區(qū)域中運(yùn)用，層級(jí)無(wú)法被覆蓋，可供修正的參數(shù)由微信供給。
主張?jiān)谝?guī)劃時(shí)以原生控件為基礎(chǔ)修正，不要自造控件。一起留意運(yùn)用場(chǎng)景，以免無(wú)法完成。
6）動(dòng)畫完成
App：動(dòng)畫流暢、無(wú)卡頓，想要的基本都能完成。
小程序：動(dòng)畫才能低于 H5 和 App ，動(dòng)畫對(duì)功能耗費(fèi)大，尤其是在 Android 機(jī)型上，卡頓有稍顯明顯。當(dāng)加載代碼包時(shí)，當(dāng)微信以為這個(gè)小程序占用過(guò)多的內(nèi)存，會(huì)把此小程序強(qiáng)行退出，以確保微信的正常運(yùn)用。
主張動(dòng)畫精簡(jiǎn)，盡量做減法規(guī)劃。
3.總結(jié)
因?yàn)樾〕绦蜃陨淼拈_(kāi)發(fā)特殊性，在和 App 規(guī)劃的會(huì)有一些的不同之處，例如：
1.頁(yè)面多、雜亂的狀況，盡量削減運(yùn)用自定義導(dǎo)航。
2.不帶有交互的狀況，盡量運(yùn)用原生控件。
3.運(yùn)用上下按鈕替換上下拖動(dòng)，或許圖片排序運(yùn)用符號(hào)的方法來(lái)進(jìn)行排序。
4.經(jīng)過(guò)換行添加全文打開(kāi)按鈕，或許操控字?jǐn)?shù)，文本結(jié)尾添加全文打開(kāi)。
5.在規(guī)劃時(shí)以原生控件為基礎(chǔ)修正，不要自造控件。一起留意運(yùn)用場(chǎng)景，以免無(wú)法完成。
6.動(dòng)畫精簡(jiǎn)，盡量做減法規(guī)劃。
