小程序制作规范

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

　　一、友好礼貌

　　对应苹果规范：Less is more

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

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

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

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

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

　　二、清晰明确

　　对应苹果规范：Clarity

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

　　当前在哪

　　可以去到哪

　　去的地方是可以做什么的

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

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

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

　　三、反馈及时

　　对应苹果规范：Responsiveness

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

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

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

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

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

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

　　表单错误提示示例

　　四、便捷优雅

　　对应苹果规范：User Friendly

　　微信小程序主要提到了减少输入和避免误操作的问题，这跟苹果是一致的。苹果要求的最小触控范围是44pt以上，微信小程序就更为精准，把这个换算成了物理尺寸7mm-9mm之间，可点击元素要保证足够大，以便用户能够有明确的点击反馈，保证误操作概率更低。

　　微信小程序的核心也是可以敏捷的解决问题。比如，当用户在进行输入时，可以通过联想、API接口(例如扫描银行卡的方式，帮助用户快速准确的填充输入内容。

　　扫描银行卡快速填充内容

　　五、视觉规范

　　对应苹果规范：Legibility

　　苹果对于文本的可读性要求极高，并且在2015年的时候推出了自己的字体SF(San Fransisco),此外还定义了一套动态字体标准，保证任何人都可以愉悦的在iPhone和iPad上阅读。

　　而微信小程序在字体上肯定和系统保持一致，其他的考虑和苹果也是大同小异。为了保证文本清晰可读，微信更进了一步，直接把各种文本的颜色也定死了。大家在设计的时候要文本要按照微信官方给的规范进行设计。

　　就两者的控件而言，微信的控件没有发挥的空间，尺寸、颜色、字号都是规定好的，相比之下iOS的控件给开发者提供了广阔的定制空间。

　　这样的原则有助于保证用户的认知稳定性，设计师在设计小程序的时候就可以避免里面包含多种元素导致风格差异较大的情况，从一定程度上保证了小程序的视觉统一性。

　　小程序的分享是不支持链接跳转的，就是你从哪个页面分享出去，点进去就是你分享的当前截图，所以类似一些活动，当用户领取完成之后分享出去，新的用户只能看到你的结果页面，不能跳转到活动页面的首页。我们的做法是在结果页的最底部加一个按钮，写上我也要领取，让用户点进这个页面后自己跳转到活动首页，位置大概三分之二下端就可以了，因为分享截图显示的是当前页面上半部分的三分之二，底部增加按钮不影响。

　　分享显示内容是页面的三分之二

　　hishop总结：就现行总体而言苹果和微信在UI设计理念上是相通的，就是简单、清晰、反馈及时，微信刻画的要更加细致，而苹果三大设计原则中除了Clarity,还有Deference(遵从)和Depth(深度)，后两者微信提及的很少，毕竟两者的定位不同。

　　而对于UI设计师来说，微信小程序的设计思维和规范跟移动端基本无异，且不需要为iOS与Android分别设计界面，只需要将有差异的部分进行分情况讨论即可。而因为微信提供的原生控件较为有限，只提供了基本控件样式，其他控件就需要自己根据实际风格去设计了。

　　相信大家在了解以上信息之后，能够更加清楚小程序和app之间的差别，在UI层面上，小程序的界面统一，长得一副微信的样子，而app则是千人千面，更加的丰富多彩。