微信小程序和APP开发的差异

　　由于小程序系统本身的特殊性，导致 UI 设计师不能够如同我们设计 App 一般可以自如。为了企业后续 UI 设计师和小程序通过前端技术开发能减少信息沟通，返工产品成本，将在这里和大家一起聊聊小程序和 App 设计的差异，以及文化差异问题具体的表现。

　　为什么有差异 - 缺乏自主性

　　1）功能支持

　　小程序需要我们都知道是基于微信的应用系统程序，开发企业必须通过依靠微信给的接口（微信给啥就是啥），能实现的功能被大大的限制了。而且小程序进行上线时间也就2年的时候，还有对于一些社会功能结构不完善。

　　应用依靠手机系统，可以实现复杂多功能，App开发已经积累了近10年，各种控件都比较完善，换句话说，开发者的能力越大，显示效果越丰富。

　　2）内存体积

　　小程序代码不能提交超过2m 的规定大小，这部分限制了开发的可能性。

　　应用程序是不同的，没有限制这部分更新软件时，我们经常会看到几十兆，几百兆，甚至下载几个G的容量游戏类。

　　3）体验及流畅

　　小程序的体验略逊于 App , 小程序使用时没有一个那么社会稳定，容易导致出现这种错误闪退，特别是在一些基本功能进行复杂的应用中，虽然说小程序设计已经优化了我国很多，有时仍会出现卡顿感。

　　哪里不同？具体表现

　　1）顶部导航栏

　　App：可以通过保留一个导航栏，也可以直接去掉，可拓展性强，灵活性高。

　　小程序：导航栏右侧有一个胶囊(titlebar)，无法删除和编辑，无法设计为导航添加其他功能。 因此，当您应用小程序时，导航栏功能改变位置或导航栏下。

　　它也有点平庸，因为微信提供了本地和自定义导航:

　　（A）的本地支持导航栏来改变颜色，字体颜色，但仅支持黑/白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开发方式有哪几种？

下一篇: 更好的营销与分销地结合使用