2017年最新小程序制作规范

　　从微信、公众号、微信支付再到小程序，微信正在从一个「即时通讯工具」变成一个「操作系统」。而大家在制作的时候也总是会拿app来进行比较，hishop在制作小程序时看了小程序的UI部分的设计原则，今天就拿它和苹果的HIG(Human Interface Guidelines)做个比较（公众号快速注册并认证小程序），其实两者在一些大的原则处理上可以说是一致的。

　　一、友好礼貌

　　对应苹果规范：Less is more

　　苹果早在iOS7的时候就做了非常大的界面调整，以内容为主，去掉所有干扰用户的元素，这个风格一直延续至今。

　　微信小程序的设计规范在一开始就坚持了这个原则，并以正反例示意。不允许在搜索的页面上放置不相关的元素，尽量添加最近搜索词，常用搜索词;也不要给用户太多的选择项。

　　官方错误示例，在搜索页面添加无用信息

　　页面的导航也要按照用户的预期进行，进入一个页面时，不应该弹出无关的广告，尽量要少使用弹窗一类的控件。

　　官方错误示例，进入页面弹出与功能无关广告

　　二、清晰明确

　　对应苹果规范：Clarity

　　苹果的HIG三大原则之首就是清晰，这里面包含了几种含义，其中之一就是为了通过导航栏设置解答用户的三大疑问：

　　当前在哪

　　可以去到哪

　　去的地方是可以做什么的

　　微信小程序的设计规范中也再次强调了导航设计清晰的重要性，并且直接在微信层面就把当前去哪和如何回去的问题解决了。一般导航栏除了根据自己品牌的调性去更改颜色之外，没有什么需要去做的了。

　　最好不要在微信导航页面内再镶嵌一个自有导航栏，如果需要尽量使用Tab,包括底部和顶部样式，数量尽量控制在2-4个，放太多不利于用户操作。

　　官方提供的底部标签和顶部Tab样式

　　三、反馈及时

　　对应苹果规范：Responsiveness

　　微信小程序规范花了大量的篇幅强调加载页面必须要及时有反馈。除了启动页有logo之外，其余元素都不能改动，很多程序内的反馈动画都是微信自定义的，这一点跟iOS原生app的灵活性有很大的差别。

　　但是不管是微信小程序还是iOS原生app，他们在大的原则上是一致的，必须要确保界面对用户的操作做出及时的响应反馈，哪怕是在加载。

　　下拉刷新样式和局部加载示例

　　而微信小程序提供了三种结果提示方式，提示效果从轻至强分别为小弹窗提示、模态框提示和单独成功结果页面。小编建议在操作反馈时用模态框提示，询问行为的时候用小弹窗提示，表单提交后用单独页面提示。

　　模态框提示、小弹窗提示、成功结果页面

　　对于异常情况的处理设计，一定要基于异常情况要明确告知用户哪里出了问题，、应该如何解决。如果在表单中出现错误，小程序应该在顶部弹出提示，并在错误项目的右侧提供错误icon，以便用户定位问题。

　　表单错误提示示例