你有没有设计过小程序和 App 的 UI 界面？

你有没有规划过小程序和 app？

你有没有开发过小程序和手机 app？

如果面试官问你，小程序设计和 APP 设计有什么区别？您知道几点时间？

相似之处在于，App 和微信在 UI 设计理念上相似，即追求简单易用的交互设计、清晰的导航路径和及时的操作反馈。

APP 和微信小程序都有自己的设计规范和开发文档，我们都需要遵循设计规范和开发规则。总的来说，可以说两人在一些主要的 UI 设计原则上是一致的。

很多人都知道小程序用完了就没了，都是去中心化的产品。同时，小程序只是微信内部的一个连接工具。

而APP可以培养忠实用户，也可以成为忠实用户最受欢迎的APP。它可以独立于微信安装在手机上，以便快速操作。

以下是雪堂军想与大家分享的 4 大不同之处：

设计风格的多样性是不同的

APP 的设计规范分为 ios 设计规范和 设计规范，不同的操作系统设计风格略有不同。APP 可以上千人，设计出很多不同的风格，比如 MBE 风格，今年流行的迷彩渐变风格等等。

小程序只能保持微信的设计风格，设计形式比较简单。想要实现不同的设计风格，需要兼容微信设计风格的地方太多了，性价比不高。比如，不同风格的按钮、个性化导航、消息提醒等，都是小程序很难做到的。

它以不同的方式打开

APP：移动应用的下载和安装需要从应用市场下载，比如 ios 要从苹果的 APP 下载，而 可以从不同的应用市场下载，这意味着对于用户来说存在很多不确定性。只有下载到手机并安装成功后才能使用，只要你不删除它，它都在你手机的桌面上。如果您不再需要它，则必须手动卸载它。这样，用户的使用成本很高。

打个比方：这就像买了一辆车，然后把它留在车库里随时开车。

小程序：无需安装，打开微信扫描即可使用。或者点击分享的链接图形，直接搜索，长按识别二维码等。看完后不需要卸载，只需关闭即可。

打个比方：就像和滴滴一起坐免费的出租车，一呼就来就说再见。

开发模式不同

应用程序：

iOS 客户端必须在 Mac 电脑上开发，开发语言为 -C，但使用的开发工具为。

客户端使用了很多开发语言，比如 java、C++、H5 等。也有很多工具。

同时，该 app 需要适配市面上很多主流手机，开发成本大。开发周期也相对较长。更麻烦的是 App 的发布。需要提交给十几家应用商店进行审核，而且每个应用商店需要的材料也不同，非常麻烦。苹果还需要购买证书等资质，审核时间为 3 天到一周。

小程序：

你只需要使用微信开发者工具进行开发，熟悉前端开发语言就可以开发。不需要了解应用程序开发语言的学生也可以这样做。开发门槛大大降低。同时，也就不用去想适应的问题了，微信已经为我们解决了。开发周期也很短，这促进了产品的快速迭代。小

程序的发布只需要提交到微信公众平台后台审核即可。审核时间少于 24 小时。

消息推送机制不同

APP是直接的手机弹窗消息提示，每隔三五次就会向用户推送广告，未读提示太多就会

强迫症;此外，该应用程序的功能非常齐全。设计师、产品经理和开发人员有如此多的想象力，没有限制。该应用程序向所有智能设备用户开放，包括手机、汽车、电脑和其他电子设备，截至 2018 年约有 21 亿部智能手机。

小程序：微信不允许小程序主动向用户发送广告和推送消息，只能使用消息模板的唯一消息推送机制。并且对消息模板也有严格的限制。

小程序的所有功能都基于微信，你可以使用微信开放的内容。如果它们未打开，则无法使用它们。仅针对所有微信用户，约 8 亿人。

以下是 APP 设计的不同实施例和小程序设计的具体模块：

顶部导航栏

App：导航栏可保留也可移走，扩展性强，灵活性高。设计师和产品经理都可以在其上创建合适的功能。交互方式也有很多。

小程序：导航栏右侧有无法移除和编辑的胶囊，设计时无法向导航中添加其他功能。可以在 App 上添加其他交互功能，但不能添加到小程序中，导航栏的功能应进行更改或放置在导航栏下方。

此外，该 还提供了两种导航栏：本机导航栏和自定义导航栏

（1） 原生导航栏支持换色，但字体颜色仅支持黑白;

（2）虽然自定义导航栏可以移除原有导航栏，并支持图片引导至导航栏，但所有页面都需要重新调整（原导航栏高度没了，界面元素会上移），小程序不支持修改单个页面。自定义导航体验不佳，尤其是页面返回逻辑和返回事件有 bug。为什么说小程序只适合轻量级的应用和工具呢？

开发者需要注意的是，自定义导航容易出现标题不一致、不同页面模型安全区域不同等问题，全局刷新时整个页面会被拉下。

如果页面多且复杂程度高，建议尽量减少使用自定义导航。主要是本地人。

标签栏

App：可支持多种标签页，可自定义图标大小和底部标签栏高度。并且支持红点提醒、数字提醒等。其他节日元素的装饰。

小程序：也可以支持最少 2 个，最多支持 5 个标签页，使用原生标签页控件时，必须遵守图标尺寸的 3 倍大小：81*81px。2 倍尺寸：54px*54px，设计师不能多玩

小程序使用自定义标签页栏时，可以支持添加交互效果，比如提示号气泡等，但体验比原来差一点，如果标签页是第一次进入页面，那么标签页栏开关会造成跳转，需要开发避免。

观点：建议在没有交互的情况下尽可能使用原生控件。

组件

App：支持自定义组件库，对开发设计限制低。设计师的玩法也可以是多种多样的，例如卡片级联效果。立体旋转效果等。这些 都做不到。

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

建议您根据设计修改原始控件，不要创建自己的控件。同时，请注意使用场景，以免无法实现。

动画

App：动画流畅无卡顿，基本可以达到想要的动画效果。例如，下拉动画可以变化。APP 代码包的大小没有限制。

小程序：动画能力低于 H5 和 App，动画消耗大量性能，尤其是在模型上，卡顿略显明显。小程序的下拉刷新功能只能以一种交互方式使用，且无法修改。

在加载代码包时，当微信认为小程序占用内存过多时，会强制退出小程序，以保证微信的正常使用。微信小程序的单个代码包不能超过 2M。

并且动画尽可能通过 CSS3 实现。你不能做复杂的动画。

从设计和产品的角度来看，如果把 APP 产品转移到小程序上，就必须做减法。

相比 APP，小程序进行了简化，突出了主要功能。您还可以将 函数更改为 / 函数以简化页面。

小程序的颜色、图标和样式应与 App 中的颜色、图标和样式保持一致，但应根据不同的目标受众进行适当的更改。减少，使用物理图标，实现页面简化和颜色均匀。

小程序内容轻巧还有一个重要原因——它减少了打开时间，用户对小程序的等待时间比 app 要少很多。这时候，如果加载动画设计好，可以作为留住用户的加分项。