关键词：小程序概念、设计规范、常见问题解析
2.上手快，学习曲线平滑。这是相对于开发而言，如果原本就熟悉Web开发，那上手速度会更快。
3.开发成本低。跨平台一套搞定、开发环境简单、容易学上手快、代码复用强、开发迭代周期短等特点，都会导致小程序的开发成本远低于nativeapp。比如一款类似资讯类的软件，产品+前端+服务端+设计+测试+运维，光1.0版本的费用就得20万起步，而小程序版本只需要3-5万左右。当然还有报价更低的，几千块都有人敢报。曾经有个客户要求做一个服装订制的小程序，包括展示、预约、下单、支付、个人中心等模块，需求沟通了半天最后说预算只有5000，还说上一个他们找的人只要3000，这次加钱想做的高大上一点（强人锁男.jpg），最后婉言拒掉。
6.用户体验更好。这个用户体验是泛指使用体验，而非指设计师通常理解的交互体验。小程序体量小、核心功能交互路径短、不用安装和卸载、没有乱七八糟的外部跳转，省心省力省流量，特别适用于各种生活场景，如购物、餐饮、出行扫码。
NativeAPP(原生APP)、小程序、H5的优劣对比：
快应用、支付宝小程序、百度小程序、头条抖音小程序优劣对比：
如果是熟悉APP设计流程的小伙伴，尤其是设计过iOS平台的软件，那么做起小程序肯定也是得心应手。小程序很多设计规范其实脱胎于iOS的设计规范。下面我将从常用UI组件开始分析讲解小程序各个常见组件的设计规范与用法。
而习惯用sketch为设计工具的设计师来说，可用单倍尺寸，即375x667的尺寸进行设计，设计单位为dp/pt，搭配蓝湖的自动标注，开发都能看得懂。（小程序只有宽度是有要求的，即375，但高度并不是定死的，这个取决于不同手机的屏幕规格，最好根据手上的测试机的高度来定）
对于切图，考虑到小程序的单个包容量为2M，官方文档建议尺寸为2倍图（相对于375x667的单倍尺寸而言），如果设计稿是以750宽度为准，切图可以按照1:1的做即可。如果想让图标更加清晰，也可以选择3倍图，但要控制切图的大小。
根据小程序官方文档，状态栏是不需要设计的，因为状态栏是跟着各个手机操作系统走。如下图，②是内容区，①是小程序胶囊，状态栏无需设计。设计师只需要把Android和iOS两种状态栏组件根据需要取用即可。
下面链接提供sketch状态栏组件
下面从颜色、样式、布局等方面详细介绍下导航栏。
官方给的数据是iOS系统44dp，Android系统56dp。也就是适用区间建议44dp-56dp为宜，这个可根据实际情况进行调整。
标题可以居中也可以居左，也可以没有（通常会放置searchbar搜索框），也可以用图片。
标题字号采用iOS的标准，即17dp。
导航栏颜色是完全可以自定义的，既可以定义为纯色又可以定义为渐变，也可以定义为背景图片。不过对应的，导航栏的文案和icon以及小程序胶囊的颜色也要根据情况不同进行适当的色值调整，以保证信息良好的阅读性。
搜索是用户刚需，所以搜索框的位置一般放置在显眼的位置。与nativeapp的操作栏相比，小程序的右侧多了一个小程序胶囊，那么搜索框为了避开小程序胶囊就需要做下相应调整。常用的位置是居左、居中、居下。
居左和居中会使页面布局更加紧凑，让屏幕纵向空间展示更多内容，如拼多多小程序、爱奇艺小程序、微博小程序；而居下则可以重点突出搜索功能，如转转小程序。三种方式没有明显的优劣之分，可根据产品的具体情况具体选择。
※常见问题：自定义后的导航栏与默认的导航栏有个区别，即默认的导航栏下拉刷新时，导航栏是固定的；而自定义后的导航栏下拉刷新是，只有小程序胶囊位置固定，其他元素是随着页面一起下拉刷新。导致这个问题的原因是因为层级发送了变化，默认的样式小程序胶囊与导航栏是同一层级，而自定义后，层级就发生了变化。
我们常见的二级页面导航栏只有一个返回上一层操作，但并不是说二级页面导航栏功能就是固定的，可进行自定义设计。
例如网易云音乐小程序，如果页面经过多次跳转后页面层级较深，这时如果想回到首页，就不需要一步步返回，直接点击回到首页的icon就可以了，一定程度上简化了操作。而京东小程序，则加了一个下拉抽屉，抽屉里承载了更多的快捷跳转入口。
但同时也要避免滥用，如摩点小程序的二级页面，有三个返回首页的按钮，完全没有必要，这就是滥用了。
跟nativeapp相同，分页栏的颜色是可以自定义的，选中状态通常与主题色相同。在自定义颜色选择中，务必注意保持分页栏标签的可用性、可视性和可操作性。
分页栏的样式很多，而且当选项太多时还可以X轴方向滑动。与底部tabbar的功能类似，都是进行页面切换，但通常来说，分页栏的高度不能高于底部tabbar的高度。因为底部tabbar的选项是有触摸点击交互的，而且也在拇指的操作热区内。而顶部的分页栏则不需要进行触摸点击交互，切换选项时只需要左右滑动页面即可，所以小程序的分页栏高度不能高于tabbar。
小程序提供了通用的加载样式，可用于不同的加载环境，设计师不需要额外的去设计加载样式。
开发者可在小程序里自定义页面内容的加载样式。建议不管是使用在局部还是全局加载，自定义加载样式都应该尽可能简洁，并使用简单动画告知用户加载过程。
模态的加载样式将覆盖整个页面的，由于无法明确告知具体加载的位置或内容将可能引起用户的焦虑感，因此应谨慎使用。除了在某些全局性操作下外，尽量不要使用模态的加载。
开发者可以参考图中样式，使用标题栏提示加载小程序页面内容的过程。例如：
②载入过程中,应保持动画效果;无动画效果的加载很容易让人产生该界面已经卡死的错觉。
③不要在同一个页面同时使用超过1个加载动画。
除了在用户等待的过程中需予以及时反馈外，对操作的结果也需要予以明确反馈。根据实际情况，可选择不同的结果反馈样式。对于页面局部的操作，可在操作区域予以直接反馈，对于页面级操作结果，可使用弹出式提示、模态对话框或结果页面展示。
图标型弹出提示适用于轻量级的成功提示，1.5秒后自动消失，并不打断流程，对用户影响较小，相当于NativeAPP中的toast，适用于不需要强调的操作提醒，例如成功提示。特别注意该形式不适用于错误提示，因为错误提示需明确告知用户，因而不适合使用一闪而过的弹出式提示。
文字型弹出提示适用于需要轻量化地用文字解释当前状态或提醒不严重的错误。1.5秒后自动消失，不打断流程，对用户影响较小。
对于需要用户明确知晓的操作结果状态可通过模态对话框来提示，并可附带下一步操作指引。
对于操作结果已经是当前流程的终结的情况，可使用操作结果页来反馈。这种方式最为强烈和明确的告知用户操作已经完成，并可根据实际情况给出下一步操作的指引。
在设计任何的任务和流程时，异常状态和流程往往容易被忽略，而这些异常场景往往是用户最为沮丧和需要帮助的时候，因此需要格外注意异常状态的设计，在出现异常时予以用户必要的状态提示，并告知解决方案，使其有路可退。
要杜绝异常状态下，用户莫名其妙又无处可去，停滞在某一个页面的情况。上文中所提到的模态对话框和结果页面都可作为异常状态的提醒方式。除此之外，在表单页面中尤其是表单项较多的页面中，还应明确指出出错项目，以便用户修改。
例如表单报错，在表单顶部告知错误原因，并标识出错误字段提示用户修改。
模态弹框和非模态弹框最大的区别就是是否强制用户交互。Nativeapp模态弹框会打断用户的当前操作流程，用户不在弹框上操作的话，其余功能都使用不了。模态弹框属于一种重量性反馈，一般用于用户进行重要的操作。
而小程序的模态弹框有点不一样。小程序的Navigationbar和底部Tabbar的层级优先级远高于模态弹框。这就导致Nativeapp中必须操作的模态弹框到了小程序里，是可以被切换掉的，不过只限于切换页面，并不能通过切面关掉弹框。比如打开A页面，A页面有个模态弹框，你可以通过底部Tabbar切换到B页面，然后再回到A页面，模态弹框也是存在的，需要对弹框进一步操作才能关掉。
另外，严格意义来说，弹窗时的灰色遮层不能覆盖的是右上角的小程序胶囊。因为小程序胶囊的层级优先级别是最高的。（小程序默认的navigationbar上，标题和小程序胶囊都是不能遮挡的，但是对其自定义后，标题部分是可以被遮层遮挡，但小程序胶囊不可以。）
但是，底部的Tabbar能不能强行盖住呢？可以。只要不用小程序官方提供的Tabbar组件，程序员自己写一个非标准化的Tabbar就可以。但无形中就增加了开发成本，还可能造成未知BUG，成本高收益低。所以建议尽量使用官方提供的Tabbar组件。
开发者可为小程序页面添加底部导航栏（Tabbar）。Tabbar可根据小程序自身情况来判断有没有，如果没有那么多页面内容可切换，可不做Tabbar，如腾讯漫画小程序。
小程序官方建议底部标签个数为2-5个，最多不超过5个，不过个人建议最好是3-4，因为底部两个tab的时候实在太丑。一个页面也不应出现一组以上的标签分页栏。
另外官方建议Tabbar高度为98px，即49dp。高度并没有严格限制，大部分小程序的tabbar高度都在48dp-52dp之间。
一些风格化较为强烈的小程序，是可以根据自身品牌风格进行自定义，不必遵循官方指定的默认样式。如一番赏小程序，风格化很强烈。
以前小程序对视频的支持效果一般，且在滚动空间中不能放入视频，即导致页面在Y轴滑动时，视频播放框必须是固定的。但是现在已经有成熟的解决方案了，如爱奇艺小程序，已经很好的让视频跟随页面一起Y轴滑动。
小程序的设计中间距的基础栅格单位建议为4dp，也就是宽度高度间距最好是4的倍数。
小程序官方文档提供了各种按钮的默认样式，设计师可以当做一种参考，至于实际项目中按钮的样式、色彩、各种状态，都可以根据实际项目来进行自定义。
一般来说，适配阶段不需要设计师参与。小程序可以一稿适配绝大多数机型。另外H5版本的应用也可以通过套壳的方案来快速完成一个小程序版本，不过这都是开发考虑的事。
对于熟悉Nativeapp设计规范的设计师，尤其是做过iOS平台软件的设计来说，小程序设计很容易掌握，只是小程序的平台特性，需要遵循着官方设计规范的地方多一些，再加上小程序还有许多不完善的功能组件，功能与性能都有待进一步提高。