一、设计原则
1、小程序在设计时应该注意减少无关的设计元素对用户目标的干扰，清晰的向用户展示程序提供的服务，友好的引导用户进行操作。
2、明确页面中的重点，便于用户进入页面后能快速的理解内容，应尽量避免页面上出现与页面不相关的内容，如广告等。
3、页面流程明确，避免出现用户目标流程以外的内容打断用户操作
4、明确的告知用户身在何处，又可以往何处去，确保用户在页面中游刃有余的穿梭而不迷路
二、导航
1、目的
要告诉用户，当前在哪儿，可以去哪儿，如何回去。
2、小程序导航
微信不提供统一的导航栏样式，开发者可根据需要自行设计小程序首页和次级页面界面导航，建议在次级页面左上角提供返回键。
3、官方小程序菜单
小程序的所有页面，包括小程序内嵌网页和插件都会放置。
他的位置固定，不能改变
如图
他的内容不能改变，可以选择深浅两种配色
如图
4、页面导航
1）标签分页（Tab）导航
标签数量大于等于2个，小于等于5个，建议数量不超过4个。
一个页面避免出现一组以上的标签分页栏
如图
2）顶部标签分页栏
保持分页标签的可用性、可视性、可操作性
如图
三、加载
1、启动页加载
启动页除品牌LOGO展示外，其他元素，如加载进度指示，均有微信统一提供不能更改，无需开发者开发
如图
2、页面下来加载
微信提供标准的页面下来刷新加载能力和样式，无需自行开发
如图
3、页面内容加载反馈
可自定义页面内容加载样式，建议不管是局部还是全局加载，加载样式应尽可能简洁。简单动画告知用户加载过程
如图
4、模态加载
覆盖整个页面，由于无法明确告知具体加载的位置和内容可能引发用户的焦虑感，因此谨慎使用。除了在否写全局操作下，否则不要使用模态加载。
如图
5、局部加载反馈
局部加载反馈只在触发加载的页面局部进行反馈，这样反馈更加有针对性，页面跳动小，是微信推荐的反馈方式
如图
6、全局加载反馈
推荐使用标题栏提示加载小程序页面内容过程
如图
7、加载反馈注意事项
1）若加载时间长，应提供取消操作，并使用进度条显示载入的进度
2）载入过程中，保持动画效果，无动画效果的加载很容易让人产生该界面已经卡死的错觉
3）不要在同一个页面同时使用多个加载动画
四、结果反馈
1、页面局部操作结果反馈
直接反馈，如多选按钮控件，微信设计中心提供控件库
WeUI组件库：https://developers.weixin.qq.com/miniprogram/dev/extended/weui/
如图
2、页面全局操作结果—图标型弹出提示
1.5秒后自动消失，不打断流程，对用户的影响较小
适用于轻量级的成功提示或不需要强调的操作提醒。如。成功提示，
不适用错误提示。因为错误提示需明确告知用户，而不适合使用一闪而过的弹出提示
如图
3、页面全局操作结果—文字型弹出提示
1.5秒后自动消失，不打断流程，对用户的影响较小
适用于轻量化的文字解释当前状态或提醒不严重的错误
如图
4、页面全局操作结果—模态对话框
适用于用户明确知晓的操作结果状态。
如图
5、页面全局操作结果—结果页
适用于，操作结果已是当前流程的终结情况，可使用操作结果页来反馈。这种方式明确的告知用户操作已完成，并根据实际情况给予下一步的操作的指引
如图：
五、异常可控，有路可退
异常场景往往是用户最为沮丧和需要帮助的时候，因此需要格外注意异常状态的设计，在出现异常时需要给予用户必要的状态提示，并告知解决方案，使其有路可退。
如：表单报错
如图
六、减少输入
手机键盘区域小且密集，输入困难，容易输入错误，因此在设计小程序时尽量减少用户输入。利用现有接口和其他一些易于操作的选择空间来改善用户输入体验
1、如：在添加银行卡时，采用摄像头识别来帮助用户输入
2、尽量让用户做选择，回忆易于记忆，让用户在有限的选项中做选择通常来说容易完全靠记忆输入
七、避免误操作
手机屏幕分辨率各不相同，因此最适宜点击像素尺寸也不完全一致，但换算成物理尺寸后大致是在7mm-9mm之间。
在微信提供的标准组件库中，各种控件元素均已考虑到了页面点击效果以及不同屏幕的适配，因此再次推荐使用或模仿标准控件尺寸进行设计。
八、利用接口提升性能
微信设计中心已推出了一套网页标准控件库，包括 sketch设计控件库 和 Photoshop设计控件库，后续还将完善小程序组件，这些控件都已充分考虑了移动端页面的特点，能够保证其在移动端页面上的可用性和操作性能；
九、统一稳定
注意不同页面间的统一性和延续性，在不同的页面尽量使用一致的控件和交互方式
十、视觉规范
1、字体大小
微信内字体的使用与所运行的系统字体保持一致，常用字号为20, 18, 17, 16,14 13, 11(pt)，使用场景具体如下：
2、字体颜色
主内容black 黑色，次要内容grey灰色；时间戳与表单缺省值light灰色；大段的说明内容而且属于主要内容用semi黑
蓝色为链接用色，绿色为完成字样色，红色为出错用色 Press 与 Disable 状态分别降低透明度为20%与10%
3、列表
4、表单输入
5、按钮
6、图标
微信小程序设计指南
https://developers.weixin.qq.com/miniprogram/design/
