由于小程序本身的特殊性， UI 设计师不能像设计 App 一般自由。为后续 UI 设计师和小程序前端开发可以降低沟通和返工成本。我们来谈谈小程序和 App 设计差异，具体表现差异。

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

1）功能支持

众所周知，小程序是基于微信的应用程序用程序。开发必须依靠微信给出的界面（微信给出的是什么），可实现的功能受到很大限制。此外，小程序上线仅2年，部分功能不完善。

App 依靠于手机系统，可以实现复杂且多的功能，App 开发已经积累了近10年，各种控制相对完善。换句话说，开发人员的能力越大，显示效果就越丰富。

2）内存体积

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

App 不不一样了。没有这部分的限制，我们在更新软件时经常看到几十兆、几百兆甚至游戏。G下载体积。

3)体验流畅

小程序的体验略逊于 App ，小程序不那么稳定，容易出现错误的闪回，特别是在一些复杂的功能应用程序中，虽然小程序已经优化了很多，但有时仍然会有一种卡住的感觉。

二、差异在哪里？具体表现？

1)顶导航栏

App：可保留导航栏，也可去除，可扩展性强，灵活性高。

小程序：导航栏右侧有一个胶囊，除和编辑的胶囊（titlebar），导航中不能添加其他功能。App 转小程序时，导航栏的功能应改变位置或放置在导航栏下。

实现效果也略有欠缺，比如微信提供两个导航栏:本地和自定义:

（2）虽然自定义导航栏可以删除原始导航栏，并支持图片通过导航栏，但所有页面都需要重新调整（原导航栏的高度消失，界面元素将上移），而小程序不支持单个页面修改。

这是目前最麻烦的地方，量级小的应用还可以，量级大的工作量大大增加。

同时，自定义导航容易导致标题不对齐、页面模型不同安全区域不同、页面整体下拉等问题。

建议在页面多、复杂的情况下，尽量减少自定义导航的使用，导航栏背景和图片背景等马蜂窝连接，效果也不错。

3）标签栏

App：至少可以支持2个，最多5个tab可自定义切换、图标底部标签栏高度。

小程序:至少可以支持2个，最多5个tab使用原生控件时，切换应遵循 icon 尺寸81*81px。

在使用自定义标签栏时，可以支持添加交互效果，如提示气泡的数量，但体验几乎比原始的差。如果标签页是第一次进入页面，则标签栏切换会导致跳动，需要开发和避免。

建议不带有交互的情况，尽量使用原生控件，就像站酷小程序 一样。

4）拖动排序

App：流畅，体验好，比如发朋友圈拖照片排名。

小程序:除非有必要，否则不建议使用拖动排序。图片和列表在 Android模型体验不足，会卡住。

建议用上下按钮代替上下拖动，或者用标记的方式对图片进行排序。

5）文本省略

App：每天所需的文字、段落都能达到效果。

小程序：文本限制行数，添加省略号，增加全文扩展计划，实现问题。无法预测行尾位置的省略。

建议在文本末尾增加全文展开按钮或控制字数。

6）原生组件

App：可定制组件库，对开发设计限制较低。

小程序：部分组件是由微信创建的原始组件，包括系统相机、输入框、地图和文本输入...等等，原控件的使用有一定的限制，不能用于滚动、轮播、选择器、拖动区域，最高级别不能覆盖，可修改的参数由微信提供。

建议在设计时修改原控件，而不是自制控件。同时注意使用场景，避免无法实现。

7）动画实现

App：动画流畅，无卡顿，基本上可以实现你想要的一切。

小程序：动画能力低于 H5 和 App ，动画消耗了很多性能，尤其是 Android 模型，卡顿有点明显。当加载代码包时，当微信认为这个小程序占用了太多的内存时，它会强行退出这个小程序，以确保微信的正常使用。

建议简化动画，尽量做减法设计。

3.总结

由于小程序本身的特殊性，在和 App 设计的会有一些的不同之处，例如：

1.尽量减少使用自定义导航。

2.无交互，尽量使用原生控件。

3.用上下按钮代替上下拖动，或者用标记排序图片。

4.增加全文展开按钮或控制字数，在文本末尾增加全文展开。

5.在设计过程中，根据原始控件进行修改，而不是自制控件。同时注意使用场景，避免无法实现。

6.动画简化，尽量做减法设计。