微信——小程序设计经验分享
微信小程序设计需要注意的要点
相比 APP ，开发一款小程序的开发成本更低、周期更短，同时开发难度和维护成本也相对降低，也就有越来越多的开发者入坑小程序。
小程序是在2017年才出现在微信里面，不需要安装和卸载，简单、方便，这也是小程序最早的理念“用完即走”。（现在更多平台也推出了自己的小程序，如：QQ，支付宝...）
今天就微信小程序设计需要注意的地方来聊一聊，希望可以帮助你能更好的完成你的小程序。
一、设计尺寸
首先就是设计尺寸，对设计师来言没有尺寸就是无“计”可施。
微信小程序的设计只需要以iPhone6 屏幕尺寸 750x1334px 为视觉稿进行设计即可，因为微信小程序以 rpx 为 css 尺寸单位，rpx 可以根据屏幕宽度进行自适应，规定屏幕宽度为 750rpx，因此在iPhone6 设计稿上 1px=1rpx，在尺寸换算上就会很简单。
小程序的所有页面，微信都会在其右上角放置官方小程序菜单。开发者不可对其内容自定义，但可选择深浅两种基本配色以适应页面设计风格，如下图。
也就是说除了这个小程序菜单区域不能编辑，其他区域都可以自由编辑。
（注：很多效果前端都可以实现，所以一定要跟同事保持良好的关系，方法自己想，我是不会告诉你们我真的答应给前端介绍对象的...）
二、字体及颜色规范
1、字体
小程序的字体依然遵循微信原生视觉规范：微信内字体的使用与所运行的系统字体保持一致，常用字号为 20, 18, 17, 16,14 13, 11(pt)。特别注意一点，很多字体文件较大，慎用！！！
2、字体颜色规范
无彩色——主内容 Black 黑色，次要内容 Grey 灰色；时间戳与表单缺省值 Light 灰色；大段的说明内容而且属于主要内容用 Semi 黑；
有彩色——蓝色为链接用色，绿色为完成字样颜色，红色为出错用色，Press 与 Disable 状态分别降低透明度为 20%与 10%；
三、顶部导航栏 navigationBar
顶部导航栏一般简称导航栏，标准高度：128rpx，一般只做底色修改，标题区与导航区要进行自定义开发也是可以的，不过要注意设计的自有导航样式与微信官方小程序菜单样式要保持一定差异，以便区分。
四、标签分页导航 tabBar
标签分页导航栏一般简称标签栏，标准高度：98rpx，可固定在页面的顶部或底部，便于用户在不同分页间做切换。标签数量在 2-5 个，为确保点击区域，建议标签数量不超过 4 项。一个页面也不应出现一组以上的标签栏，可根据产品需求选择或去掉标签栏。
1、底部标签栏
小程序首页可选择微信提供的原生底部标签分页样式，该样式仅供小程序首页使用。开发时可自定义图标样式、标签文案以及文案颜色等。特别说明：这里图标控件尺寸是 54x54px，但是小程序开发需要的是 81x81px，正好是 1.5 倍，需要注意一次给到位。
2、顶部标签栏
顶部标签分页栏颜色可自定义。在自定义颜色选择中，务必注意保持分页栏标签的可用性、可视性和可操作性。
另外就是在小程序里导航栏跟标签栏的层级是最高的，做弹窗的时候要注意，不要遮挡住导航栏跟标签栏
。
五、启动/加载
1、 启动页
小程序启动页是小程序在微信内一定程度上展现品牌特征的页面之一。本页面将突出展示小程序品牌特征和加载状态。启动页除品牌标志（Logo）展示外，页面上的其他所有元素如加载进度指示，均由微信统一提供且不能更改，无需开发者开发。
2、页面下拉刷新加载
在微信小程序内，微信提供标准的页面下拉刷新加载能力和样式，开发者无需自行开发。
3、页面内加载反馈
开发者可在小程序里自定义页面内容的加载样式。建议不管是使用在局部还是全局加载，自定义加载样式都应该尽可能简洁，并使用简单动画告知用户加载过程。
4、模态加载
模态的加载样式将覆盖整个页面，由于无法明确告知具体加载的位置或内容可能引起用户的焦虑感，因此应谨慎使用。除了在某些全局性操作下不要使用模态的加载。
5、局部加载反馈
局部加载反馈是只在触发加载的页面局部进行反馈，这样的反馈机制更加有针对性，页面跳动小，是微信推荐的反馈方式。
6、全局加载反馈
全局加载将加载图标放到导航标题左侧，使用标题栏提示加载小程序页面内容的过程。
六、注意事项
小程序上传最大不得超过2M！！！
这也就是之前说的慎用字体的原因，另外页面多的小程序图标也不要过多。
