本官方小程序设计文档为你解读微信小程序设计指南和小程序开发指南 小程序开发 ，主要是界面设计和风格设计指南，同时也对小程序设计风格提出一些建议.

从微信、公众号、微信支付、小程序小程序开发系统，微信正逐步从“即时通讯工具”转变为“操作系统”。但特别的是，微信这个跨平台的操作系统，需要兼顾iOS和Android的UI标准。

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

阅读微信官方设计文档是最有效的方式，其中提供了大量的用户界面示例。开发者只需要严格按照这个设计文档来制作美观实用的 UI。具有交互模式。

为了帮助您更快地理解设计文档，特地准备了这份文档解读。移动应用程序设计和网页设计之间的差异比较。

现在 小程序软件定制 ，花一半时间阅读这篇文章，你就会掌握设计文档的全部要点。

微信小程序设计基本规则

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

友好、礼貌、清晰、清晰方便、优雅、统一、稳定

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

设计文档还提供了这部分组件的详细描述，包括每个组件的适用范围。同时还提供了Sketch和Photoshop设计模板，方便UI设计师直接使用。

懒人素材库推荐：没有太多设计经验的开发者尽量使用微信提供的组件样式，在快速开发的前提下保证小程序的用户体验。

1.友好有礼貌

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

首先，每个页面都应该关注一个关键功能，而不是与那个功能无关。

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

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

其次，页面的导航应该像用户期望的那样工作。

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

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

小程序的设计目标应该是快速解决用户问题。并为其提供清晰且预期的步骤导航。而这与张小龙在演讲中提到的“跑出去”的概念是一致的。

2.一目了然

当用户操作小程序时，小程序应清楚地为用户指示当前状态小程序开发系统，同时尽量减少用户的操作限制和等待时间。

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

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

官方底部和顶部标签样式

开发者可以定义导航栏和页内导航的样式和颜色。在定义颜色时，开发者需要注意元素的识别，避免炫目、按钮和文字可见度差。

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

同时，对于页面中的加载提示，建议使用本地加载反馈，而不是全局加载反馈。加载时间较长时，懒人建站：建议提供进度条，减少用户等待的焦虑。

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

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

操作反馈时使用toast，询问行为时使用modal，表单提交后使用page。

Toast、模式和成功页面

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

文档规定了表单填写错误的提示样式。

表单错误提示示例

如果表单出现错误，小程序会在顶部弹出提示，并且错误项的右侧提供错误图标，方便用户定位问题。

3.方便优雅

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

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

扫描银行卡快速填写内容

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

微信官方在文档中提到，可点击元素要足够大，让用户有清晰的点击反馈。给懒人建站的建议：文案和不迷惑用户的图标也是减少误用的重要方法之一。

4.团结稳定

在设计文档中，关于 Unity 和 Stability 的表述更倾向于“Unity”。也就是说，小程序整体上应该为用户提供统一的功能，避免在同一视觉元素的不同页面中出现不同的样式。

这个原则有助于保证用户的认知稳定性。在设计的时候，设计师应该尽量避免一个小程序中多个元素的风格大相径庭的情况。这样既不能保证小程序的视觉统一性，也会严重损害用户的认知稳定性。

在开发过程中，可以在全局WXSS文件中指定相同组件的样式，以便在开发过程中快速重用和视觉统一。

微信小程序设计与PC页面设计差异对比

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

基于这份设计文档，我们解释了小程序UI设计与传统移动应用设计和网页设计的区别。

1.如果你是网页设计师

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

移动端和桌面端的区别在于：因此，提醒网页设计师在设计小程序界面时要注意这些区别：2.如果你是移动端UI设计师

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

好消息：移动端 UI 中的大部分设计思维和范式都可以用在小程序设计中，而设计师不需要为 iOS 和 Android 设计界面，部分可以根据具体情况进行讨论。

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

另外，微信小程序的风格与iOS HIG和Material Design这两种设计范式有很大的不同。在设计的时候，需要注意设计文档中的描述和示例，这样才能设计出标准的小程序界面。

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

原文：

【昱远信息系统开发定制】