关注「知晓程序」，了解小程序的最新资讯。

　　从微信、公众账号、到微信支付，再到小程序，微信正逐渐将自己从一个「即时通讯工具」变成一个「操作系统」。但特殊的是，微信这个 跨平台操作系统需要同时兼顾 iOS 及 Android 两套 UI 标准。

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

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

里面提供了大量的用户界面实例，开发者只需严格依据这份设计文档，就可以做出兼具美观、实用的 UI 与交互模式。

　　为了帮助大家更快地理解设计文档，知晓程序（微信号 zxcx0101）专门准备了这份文档解读，不仅将设计文档的篇幅浓缩到二分之一，还在文末增加了小程序 UI 设计与传统的移动应用设计和网页设计的差异比较。

　　现在， 只需花一半的时间看这篇文章，你就能掌握设计文档的所有要点。

　　注：本文主要针对小程序开发者和 UI 设计师。如果想零基础学习小程序开发，请继续关注知晓程序（微信号 zxcx0101）的后续内容。

　　小程序官方设计文档解读

　　基本规则

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

友好礼貌

清晰明确

便捷优雅

统一稳定

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

设计文档也针对这部分组件进行了详细说明，包括每个组件的适用范围。同时，还提供了 Sketch 与 Photoshop 的设计模板，便于 UI 设计师直接使用。

知晓程序（微信号 zxcx0101）建议：没有太多设计经验的开发者请尽可能使用微信提供的组件样式，这样可以在快速开发的前提下，保证小程序的用户体验。

　　1. 友好礼貌

　　微信官方希望小程序专注解决用户当前的问题，做一个「管家」，而非是在用户处理问题时候，一直制造干扰的「推销员」。

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

　　例如，搜索页面的功能应该是「搜索」，与搜索无关的功能或内容（如 banner 广告以及诱导搜索关键词推广等）应该尽可能去除掉。

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

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

　　例如，用户跳转进入一个页面时，小程序不应该弹出与之无关的广告，因为广告不符合用户进入页面的预期。

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

　　知晓程序（微信号 zxcx0101）建议：小程序设计时应该以快速解决用户问题为目标，并为其提供明确且符合预期的步骤导航。而这与张小龙在演讲中提到的「用完即走」的概念是吻合的。

　　2. 清晰明确

　　用户在操作小程序时，小程序应该为用户明示当前状态，同时应尽力减少用户在操作上的限制和等待时间。

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

　　如果开发者有需要，可以在小程序的首页中使用页面内导航，包括顶部 Tab 样式和底部标签样式。每种样式至少需要两个标签，最多不能超过五个标签，而 微信官方给出建议是最多不要超过四个。

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

　　开发者可以定义导航栏和页面内导航的风格颜色。在定义颜色时，开发者需要注意元素辨识度，不能出现刺眼和按钮与文字可视性差的情况。

　　小程序中的加载反馈细节也是影响整体体验的重要部分。 微信提供了一个下拉刷新组件，只需要按照要求套用即可。

　　同时，页面内的加载提示推荐使用局部加载反馈而非全局加载反馈。加载时间较长时，建议提供进度条以减缓用户等待的焦灼感。

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