关注“了解小程序”，了解小程序最新资讯。

从微信、公众号，到微信支付，再到小程序，微信正在逐步从“即时通讯工具”向“操作系统”转型。但特别的是，微信作为一个跨平台的操作系统，需要同时兼顾iOS和两套UI标准。

如何保证小程序的开发兼顾两个平台的界面风格并与微信本身的体验保持一致？

阅读微信官方设计文档是最有效的方法。

它提供了大量的用户界面示例。开发者只需要严格遵循这份设计文档，就能打造出美观实用的UI和交互方式。

为了帮助大家更快的理解设计文档，智雕程序（微信ID）特意准备了这份文档解读。不仅将设计文档的长度压缩到二分之一，还在文章末尾添加了小程序UI设计和传统的移动端设计。比较应用程序设计和网页设计之间的差异。

现在，只需花费一半的时间阅读本文，您就可以掌握设计文档的所有要点。

注：本文主要针对小程序开发者和UI设计师。如果您想从零开始学习小程序开发，请继续关注程序后续内容（微​​信ID）。

官方小程序设计文档解读

基本规则

微信小程序设计文档将所有设计实例分为四个部分，分别是：

友善且有礼貌

明确

方便又优雅

统一稳定

此外，微信官方还提供了一些方便开发者使用的组件。这些组件可以直接在微信官方小程序IDE中使用。

设计文件还提供了该组件的详细描述，包括每个组件的应用范围。同时还提供设计模板供UI设计师直接使用。

了解程序的建议（微信ID）：没有太多设计经验的开发者应该尽量使用微信提供的组件样式。这样可以在快速开发的前提下保证小程序的用户体验。

1. 友善、有礼貌

微信官方希望小程序能够专注于解决用户当前的问题，充当一个“管家”，而不是一个在用户处理问题时不断打扰用户的“推销员”。

首先，每个页面都应该聚焦于一个关键功能，而不应该与该功能无关。

例如，搜索页面的功能应该是“搜索”，与搜索无关的功能或内容（例如广告和搜索诱导关键词推广等）应尽可能去除。

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

其次，页面的导航应该按照用户的期望进行。

例如，当用户跳转到某个页面时，小程序不应该弹出不相关的广告，因为这些广告不符合用户进入该页面的期望。

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

了解程序（微信公众号）建议：小程序的设计应以快速解决用户问题为目标，为用户提供清晰、预期的步骤导航。这与张小龙在演讲中提到的“用完即走”的理念是一致的。

2. 清晰具体

当用户操作小程序时，小程序应该清楚地向用户表明当前的状态，同时尽量减少用户的操作限制和等待时间。

微信官方为小程序提供了全局导航栏，包括三组：导航区（后退按钮）、标题区和操作区。

如果开发者需要，可以在小程序首页使用页内导航，包括顶部标签样式和底部标签样式。每个样式至少需要两个标签，最多不超过五个标签。微信官方推荐的标签不超过四个。

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

开发人员可以定义页面内导航栏和导航的样式和颜色。在定义颜色时，开发人员需要注意元素识别，避免按钮和文本的眩光和可见度不佳。

小程序中加载反馈的细节也是整体体验的重要组成部分。微信提供了下拉刷新组件，您只需根据需要应用即可。

同时，页面内的加载提示建议使用本地加载反馈，而不是全局加载反馈。当加载时间较长时，建议提供进度条，以缓解用户等待的焦虑。

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

微信小程序提供了三种结果提示方式。提示效果从轻到强分别是小弹窗提示（）、模态框提示（）和单独的成功结果页面。开发者需要根据实际情况合理利用不同级别的提示。

知晓程序（微信ID）建议：反馈操作、询问行为时使用，提交表单后的页面使用。

，以及成功页面

本设计文档特别强调针对异常情况的设计。在小程序中，异常情况需要明确告知用户出现了问题，同时明确告知用户问题出在哪里以及如何解决。

文件规定了表单填写错误的提示方式。

表单错误消息示例

如果表单出现错误，小程序应该在顶部弹出提示，并在错误项右侧提供错误图标，帮助用户定位问题。

3、方便、优雅

微信官方希望小程序能够快速解决问题。

例如，用户在打字时，可以通过关联、API接口等方式（如扫描银行卡等）帮助用户快速、准确地填写输入内容。

扫描银行卡快速填写内容

设计时应保证用户误操作的概率较低。

微信官方在文档中提到，可点击的元素要足够大，这样用户才能有清晰的点击反馈。不过，了解程序（微信ID）提醒、文案和图标，防止用户混淆也是减少误操作的重要方法之一。

4、统一稳定

在设计文件中，关于统一、稳定的表述更倾向于“统一”。也就是说，小程序应该在整体上为用户提供统一的功能，避免相同的视觉元素在不同的页面出现不同的风格。

这些原则有助于确保用户认知的稳定性。设计者在设计时应尽量避免一个小程序中多个元素的风格差异很大的情况。这既不能保证小程序的视觉统一性，也对用户的认知稳定性造成严重损害。

知乎程序（微信ID）建议：开发过程中，可以将相同组件的样式指定在一个全局的WXSS文件中，方便开发时快速复用，保证视觉上的统一。

差异比较

如果网页设计师或者移动应用UI设计师转向开发小程序，有必要了解小程序与以往设计领域的异同。

知道程序（微信ID）基于这份设计文档，阐述了小程序UI设计与传统移动应用设计、网页设计的区别。

1.如果您是网页设计师

对于网页设计师来说，小程序界面设计最大的挑战是之前的桌面优先思维需要转向移动优先思维，因为微信小程序作为一个依赖手机运行的应用，需要专注于移动端使用。

移动版和桌面版的区别在于：

因此，认识App（微信ID）应该提醒网页设计者在设计小程序界面时需要注意这些差异：

2.如果您是移动UI设计师

对于UI设计师来说，小程序带来了好消息和坏消息。

好消息：移动UI中的​​大部分设计思维和范式都可以用在小程序设计中，设计者不需要为iOS和iOS单独设计界面。他们只需要根据具体情况讨论差异。

坏消息：微信原生提供的控件相对有限。微信只提供了按钮、提示图标、开关、多选框、复选框、滑块等多种控件。其他控件需要根据实际风格自行开发设计。

另外，微信小程序的风格与iOS HIG以及两种设计范式有较大不同。设计时，需要多关注设计文档中的说明和示例，才能设计出符合标准的小程序界面。

微信小程序设计文档解读到此结束。希望这份解读文档能够帮助开发者轻松开发体验优秀的小程序。

注：文字图片来自微信官方

本文由知知程序原创制作。关注微信ID，回复“干货信息”，获取最全面的小程序解读和开发教程文章。