微信小程序和APP開發的差異

　　由于小程序系統本身的特殊性，導致 UI 設計師不能夠如同我們設計 App 一般可以自如。為了企業后續 UI 設計師和小程序通過前端技術開發能減少信息溝通，返工產品成本，將在這里和大家一起聊聊小程序和 App 設計的差異，以及文化差異問題具體的表現。

　　為什么有差異 - 缺乏自主性

　　1）功能支持

　　小程序需要我們都知道是基于微信的應用系統程序，開發企業必須通過依靠微信給的接口（微信給啥就是啥），能實現的功能被大大的限制了。而且小程序進行上線時間也就2年的時候，還有對于一些社會功能結構不完善。

　　應用依靠手機系統，可以實現復雜多功能，App開發已經積累了近10年，各種控件都比較完善，換句話說，開發者的能力越大，顯示效果越豐富。

　　2）內存體積

　　小程序代碼不能提交超過2m 的規定大小，這部分限制了開發的可能性。

　　應用程序是不同的，沒有限制這部分更新軟件時，我們經常會看到幾十兆，幾百兆，甚至下載幾個G的容量游戲類。

　　3）體驗及流暢

　　小程序的體驗略遜于 App , 小程序使用時沒有一個那么社會穩定，容易導致出現這種錯誤閃退，特別是在一些基本功能進行復雜的應用中，雖然說小程序設計已經優化了我國很多，有時仍會出現卡頓感。

　　哪里不同？具體表現

　　1）頂部導航欄

　　App：可以通過保留一個導航欄，也可以直接去掉，可拓展性強，靈活性高。

　　小程序：導航欄右側有一個膠囊(titlebar)，無法刪除和編輯，無法設計為導航添加其他功能。 因此，當您應用小程序時，導航欄功能改變位置或導航欄下。

　　它也有點平庸，因為微信提供了本地和自定義導航:

　�。ˋ）的本地支持導航欄來改變顏色，字體顏色，但僅支持黑/白2;

　�。ǘ�）雖然我們自定義的導航欄可以通過去除原生導航欄，支持以及圖片通到導航欄上，但是對于所有管理頁面都需要進行重新開始調整（原先導航欄的高度發展沒有了，界面設計元素會跟著上移），而小程序不支持單個頁面修改。

　　這是最麻煩的地方，小應用程序還的幅度，導致了大量的工作秩序大大增加。

　　同時，自定義導航容易發展帶來標題無法進行對齊、頁面機型不同國家安全管理區域環境不同、全局刷新時頁面會被整個下拉等等這些問題。

　　建議頁面越來越復雜，盡量減少自定義導航的使用，也可以使用像馬蜂窩，導航欄背景和圖片背景鏈接，效果也不錯。

　　2）標簽欄

　　應用：可支持至少2個，最多5個標簽切換，圖標大小和底部標簽欄高度可自定義。

　　小應用程序：當能夠支持至少兩個和開關最多五個標簽，使用本機控制，按照圖標大小81 * 81px。

　　使用可以自定義標簽欄時，可支持中國加入交互作用效果，例如提示用戶數量氣泡等，但是學生體驗方式相比原生差一點，如果沒有標簽頁是首次進入的頁面，那么標簽欄切換會造成跳動，需要進行開發做規避。

　　它建議不要與交互的情況，盡量使用本地控件，比如像車站很酷的小程序。

　　3）拖動排序

　　App：流暢、體驗佳，例如發朋友圈時拖動進行照片可以排序。

　　小程序：除非必要，不建議拖動排序。 拖動圖片和列表上的Android模型體驗不夠，會出現卡頓的情況。

　　建議您使用向上和向下按鈕，而不是向上和向下拖動，或者使用標記對圖像進行排序。

　　4）文本省略

　　應用程序：所有文字可以實現日常需求，段落的效果。

　　小程序：文本進行限制行數，加省略號，并且可以增加全文內容展開研究方案設計實現有問題。無法預估到行尾位置省略。

　　我們通過增加換行按鈕建議充分擴張，或控制字的數字，文本在年底全面鋪開增加。

　　5）原生組件

　　App：可以通過自定義組件庫，對開發系統設計進行限制低。

　　小程序：部分組件是WeChat創建的原生組件，有系統攝像頭，輸入框，地圖，文字輸入...等，原生控件的使用有一定的限制，不能用于滾動，旋轉，選擇器，拖動區域，最高級別不能覆蓋，參數可以通過WeChat修改。

　　建議使用本機控件作為設計時修改的基礎，而不是自己制作控件。同時注意情景的運用，以免無法實現。

　　6）動畫實現

　　應用：動畫流暢，沒有卡頓，要基本可以實現。

　　小程序：動畫發展能力水平低于 H5 和 App ，動畫對性能進行消耗大，尤其是在 Android 機型上，卡頓有稍顯明顯。當加載系統代碼包時，當微信認為我們這個小程序需要占用企業過多的內存，會把此小程序可以強行要求退出，以保證微信的正常工作使用。

　　推薦精簡動畫，盡量做減法設計。

　　總結

　　由于小程序系統本身的開發具有特殊性，在和 App 設計的會有這樣一些的不同發展之處，例如：

　　1.多和復雜的頁面，盡量減少自定義導航的使用。

　　2. 盡可能使用本地控件，避免交互。

　　3.使用了和可選地垂直阻力向下按鈕，或圖像使用標簽來排序順序。

　　4.通過換行增加閱讀全文內容展開按鈕，或者可以控制要求字數，文本末尾增加全文展開。

　　5.設計成控制改性的基礎上，不自制控制對原生。還要注意使用的場景，所以無法實現。

　　6.動畫進行精簡，盡量做減法教學設計。

上一篇: APP開發方式有哪幾種？

下一篇: 更好的營銷與分銷地結合使用