微信小程序UI设计规范

摘要:微信小程序设计的基本原则是微信设计中心针对在微信类上线的小程序页面总结的设计指南及建议。以下设计原则都是基于对用户的尊重的基础上的，旨在微信生态类建立友好、高效、一致的用户体验的同时，最大程度顺应和支持各业务需求设计，实现用户与程序的共赢。

微信小程序设计的基本原则是微信设计中心针对在微信类上线的小程序页面总结的设计指南及建议。以下设计原则都是基于对用户的尊重的基础上的，旨在微信生态类建立有号、高效、一致的用户体验的同时，最大程度顺应和支持各业务需求设计，实现用户与程序的共赢。

有好礼貌

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

重点突出

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

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

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

操作没有注册，让用户无从选择

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

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

作为一个负责任的开发者，一旦用户进入我们的小程序页面，就有责任和义务清晰明确告知用户身在何处、又可以往何处去，确保用户在页面中游刃有余地穿梭而不迷路，这样才能为用户提供安全的愉悦的使用体验。 导航明确，来去自如 导航是确保用户在网页中浏览跳转时不迷路的最关键因素。导航需要告诉用户，我在哪，我可以去哪，如何回去等问题。

首先在微信系统内的所有小程序的全部页面，均会自带微信提供的导航栏，统一统一解决我在哪，如何回去的问题。在微信层级导航保持体验一致，有益用户在微信内形成较为统一的体验和交互认知，无需在各小程序和微信切换中新增学习成本或使用习惯。

微信导航栏

微信导航栏，直接继承于客户端，除导航栏颜色之外，开发者无需亦不可以对其中的内容进行自定义。但开发者需要规定小程序各个页面的跳转关系，让导航系统能够以合理的方式工作。 微信导航栏分为导航区域、标题区域以及操作区域。其中导航区控制程序页面进程。目前导航栏分深浅两种基本配色，在iOS和Android展示有所不同，如下图所示： 导航区（iOS） 导航区通常只有一个操作，即返回上一级界面。

开发者可定义其内容，不可对样式进行修改。 导航区（Android） 通常情况下，系统导航左侧唯一的操作为“离开小程序，回到微信，程序后台运行”。 当用户进入小程序次级页面后，我们建议小程序自身可以设计返回操作，同事用户也可以通过安卓系统自带的硬件返回按钮返回上一级。

微信导航栏自定义颜色规则（iOS和Android） 小程序导航栏支持基本的背景颜色自定义功能，选择的颜色需要在满足可用性前提下，和谐搭配微信提供的两套主导航栏图标。建议参考以下选色效果： 选色方案示例：

页面内导航

开发者可根据自身功能合计需要在页面内添加自有导航。并保持不同页面间导航一致。但是受限于手机屏幕尺寸的限制，小程序页面的导航应尽量简单，若仅为一般线性浏览的页面建议仅使用微信导航栏即可。 微信控件库提供tab导航供开发者选择。tab栏可固定在页面顶部或者底部，便于用户在不同的tab页面间作切换。为确保点击区域，tab项不得超过4项。

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

启动页设计

小程序启动也是小程序在微信内容一定程度上展现品牌特征的页面之一。 本页面将突出展示小程序品牌特征和加载状态。 启动页除LOGO品牌展示外，页面上的其他所有元素如加载进度指示，由微信统一提供且不能更改。无需开发者开发。  

下拉标示区

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



上述内容就是小编为您整理的微信小程序UI设计规范，希望能对您开发微信小程序有所帮助。

本文地址：https://www.webbj.cn/operation/xcx1892.html