微信小程序规范具体说明

　　最近微信小程序开发真是一不小心就触雷，微信小程序规范还是有必要再给大家普及一下，了解了规范之后才能更好地进行小程序开发以及后续操作。

　　微信小程序设计的基本原则是微信设计中心针对在微信内上线的小程序页面总结的设计指南及建议。

　　以下设计原则都是基于对用户尊重的基础上，旨在微信生态类建立有序、高效、一致的用户体验的同时，最大程度顺应和支持各业务需求设计，实现用户与开发者的共赢。

　　第一、有好礼貌

　　为了避免用户在微信中使用小程序服务时，注意力被周围复杂环境干扰，小程序在设计时应该注意减少无关的设计元素对用户目标干扰，礼貌地向用户展示程序所提供的服务，友好地引导用户进行操作。

　　1. 重点突出

　　每个页面都应有明确的重点，以便于用户每进入一个新页面的时候都能快速地理解页面内容，在确定了重点的前提下，应尽量避免页面上出现其他干扰项影响用户的决策和操作。

　　反例示意

　　此页面的主题是查询，却添加了诸多与查询不相关的业务入口，与用户的预期不符，易造成用户的迷失。

　　纠正示意

　　去掉任何与用户目标不相关的内容，明确页面主题，在技术和页面控件允许的前提下提供有助于用户目标的帮助内容，比如最近搜索词、常用搜索词等。

　　反例示意

　　操作没有主次，让用户无从选择。

　　纠正示意

　　首先要避免并列过多操作让用户选择，在不得不并列多个操作时，需区分操作主次，减轻用户的选择难度。

　　2. 流程明确

　　为了让用户顺畅地使用页面，在用户进行某一个操作流程时，应避免出现用户目标流程之外的内容而打断用户。

　　反例示意

　　用户本打算进行搜索，在进入页面时却被突如其来的抽奖弹窗所打断;对于抽奖没有兴趣的用户是非常不友好的干扰，平添一份对开发团队的恼怒;而即使有部分用户确实被“诱人”的抽奖活动所吸引，离开主流程去抽奖之后可能就遗忘了原本的目标，进而失去了对产品真正价值的利用和认识。

　　第二、清晰明确

　　作为一个负责任的开发者，一旦用户进入我们的小程序页面，就有责任和义务清晰明确告知用户身在何处、又可以往何处去，确保用户在页面中游刃有余地穿梭而不迷失，这样才能为用户提供安全的愉悦的使用体验。

　　1. 小程序导航明确，来去自如

　　导航是确保用户在网页中浏览跳转时不迷路的最关键因素。导航需要告诉用户，我在哪，我可以去哪，如何回去等问题。首先在微信系统内的所有小程序的全部页面，均会自带微信提供的导航栏，统一统一解决我在哪，如何回去的问题。在微信层级导航保持体验一致，有益用户在微信内形成较为统一的体验和交互认知，无需在各小程序和微信切换中新增学**成本或使用**惯。

　　微信导航栏

　　微信导航栏，直接继承于客户端，除导航栏颜色之外，开发者无需亦不可以对其中的内容进行自定义。但开发者需要规定小程序各个页面的跳转关系，让导航系统能够以合理的方式工作。

　　微信导航栏分为导航区域、标题区域以及操作区域。其中导航区控制程序页面进程。目前导航栏分深浅两种基本配色，在iOS和Android展示有所不同，如下图所示：

　　导航区(iOS)

　　导航区通常只有一个操作，即返回上一级界面。开发者可定义其内容，不可对样式进行修改。

　　导航区(Android)

　　通常情况下，系统导航左侧唯一的操作为“离开小程序，回到微信，程序后台运行”。

　　当用户进入小程序次级页面后，我们建议小程序自身可以设计返回操作，同事用户也可以通过安卓系统自带的硬件返回按钮返回上一级。

　　选色方案

　　小程序导航栏支持基本的背景颜色自定义功能，选择的颜色需要在满足可用*前提下和谐搭配，微信建议参考以下选色效果：

　　页面内导航

　　开发者可根据自身功能和需要在页面内添加自有导航，并保持不同页面间导航一致。但是受限于手机屏幕尺寸的限制，小程序页面的导航应尽量简单，若仅为一般线*浏览的页面建议仅使用微信导航栏即可。

　　微信控件库提供tab导航供开发者选择，tab栏可固定在页面顶部或者底部，便于用户在不同的tab页面间作切换。为确保点击区域，tab项不得超过4项，一个页面也不应出现一组以上的tab栏。

　　2. 减少等待，反馈及时

　　页面过长时间的等待会引起用户的不良情绪，使用微信小程序项目提供的技术已能很大程度缩短等待时间。即便如此，当不可避免的出现了加载和等待的时候，需要予以及时的反馈以舒缓用户等待的不良情绪。

　　启动页设计

　　小程序启动也是小程序在微信内容一定程度上展现品牌特征的页面之一。

　　本页面将突出展示小程序品牌特征和加载状态。

　　启动页除LOGO品牌展示外，页面上的其他所有元素如加载进度指示，由微信统一提供且不能更改。无需开发者开发。

　　下拉标示区

　　微信类所有小程序页面，都会在下拉时出现微信为其统一设计的标示区。品牌展示区由品牌名称和微信小程序提示组成，目的是强化品牌和用户对小程序的产品感知。

　　下拉标示(iOS深浅两色方案)

　　微信提供深浅两套配色方案，如此处标示所示，文字颜色不可自定义，开发者在自定义背景色时，应注意保证下拉标示的辨识度。

　　下拉标示(Android深浅两色方案)

　　微信下拉提示用于给用户明确的小程序归属者，防止造假与作弊。此处标示提供深浅两套方案，文字颜色不可自定义，开发者在自定义背景色时，应注意保证下拉标示的辨识度。

　　页面刷新交互(iOS)

　　开发者可自定义需要通过下拉交互完成刷新的页面，此类交互微信将提供标准能力和样式。在样式上，刷新图标与下拉标示配色已捆绑，分为深浅两套方案，开发者在使用时，应注意头部文字、下拉标示与刷新图标的和谐统一。但用户在该类页面做出下拉交互时，出现微信小程序页面标准加载动画。开发者无需自行开发样式。

　　在开发者没有在页面顶部设计tab的情况下，若定义该页面可通过下拉动作刷新，则刷新后加载状态提示语小程序品牌展示区出现在标题栏之下，页面顶部。开发者暂无法执行定义此加载效果。

　　在开发者定义了页面顶部tab并定义该tab下的内容页面可通过下拉动作刷新，则刷新后加载状态提示语小程序品牌展示区出现在顶部tab之下，且仅刷新当前页面内容。开发者暂无法自行定义此加载效果。

　　页面刷新交互(Android)

　　与iOS相同，在样式上，Android下刷新图标与下拉标示配色已捆绑，分为深浅两套方案，开发者在使用时，应注意头部文字、下拉标识与刷新图标的和谐统一。

　　微信下拉标示错误使用案例

　　请避免以下错误使用情况，确保信息的可见*和页面的可用*。

　　页面内导航

　　微信控件库提供深浅tab导航方案供开发者选择。tab栏需固定在页面顶部，便于用户在不同的tab页面间作切换。为确保点击区域，tab项不得超过4项，一个页面也不应出现一组以上的tab栏。

　　tab栏选中态默认为100%实色，未选中态带有60%不透明度，其中选中态颜色可自定义。在自定义颜色选择中，务必保持tab的可用*、可视*和可操作*。

　　页面内加载反馈

　　开发者可在小程序自定义菜单页面内容的加载样式。建议不管是使用在局部还是全体，自定义加载样式都应该尽可能简洁，并使用简单动画告知用户加载过程。开发者也可以使用微信提供的，统一的页面加载样式，如图中例所示。

　　模态加载

　　模态的加载样式将覆盖整个页面的，由于无法明确告知具体加载的位置或内容将可能引起用户的焦虑感，因此应谨慎使用。除了在某些全局*操作下不要使用模态的菊花。

　　在小程序设计过程中尤其要注意微信小程序规范问题，不然被微信公众平台封禁就比较麻烦了，想要获取更多相关资料请持续关注微信小程序商店。

　　微信小程序ui设计规范具体说明

　　小程序违规怎么办?如何判定小程序违规?

　　开发者必须掌握的小程序发布规则