打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
小程序的制作规范

1.友好礼貌


对应苹果规范:Less is more


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


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






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





2.清晰明确


对应苹果规范:Clarity


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


  1. 当前在哪

  2. 可以去到哪

  3. 去的地方是可以做什么的


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


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






3.反馈及时


对应苹果规范:Responsiveness


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


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






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






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





4.便捷优雅


对应苹果规范:User Friendly


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


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




5.视觉规范


对应苹果规范:Legibility


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


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


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


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


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






总结


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


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


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

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
5个关键词看小程序和App的UI异同
苹果IOS轻应用来袭,小程序将成为下一个风口?5年后见分晓
如何在微信中使用支付宝支付?
创业者们怎么看微信的“小程序”?
交互设计 | 如何做好操作反馈规范的设计?
微信小程序设计规范抢先看!
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服