北京华网天下

【H5开发者社区】微信小程序ui设计规范汇总

2021-05-17

来源：网络整理

微信小程序的ui设计规范摘要：

微信小程序是一种全新的申请表。无需下载和安装微信小程序平台即可使用该应用程序平台。微信小程序实现了“触手可及”的应用程序梦想。用户可以扫描或搜索以打开该应用程序。

[更多原始的微信小程序技术文章共享平台：扫描代码以关注微信订阅号H5开发人员社区]

它也体现了“即用即用”的概念，用户无需担心是否安装了太多的应用程序。应用程序将随处可见并且随时可用，但无需安装或卸载。

摘要

基于微信小程序的鲜明特征微信小程序开发案例系统规划，我们为小程序界面的设计制定了指南和建议。设计指南基于充分尊重用户的知情权和操作权。它旨在在微信生态系统中建立友好，高效且一致的用户体验，同时最大程度地适应和支持不同需求，从而实现用户和小程序服务提供商的双赢局面。

友好而礼貌

为了防止用户在微信中使用小程序服务时受到周围复杂环境的干扰，小程序的设计应减少不相关的设计元素对用户目标的干扰，并礼貌地向用户展示所提供的服务通过程序。，以指导用户友好的操作。

要点

每个页面都应该有明确的重点，以便用户每次进入新页面时都能快速理解该页面的内容。确定焦点之后，请尝试避免页面上其他分散注意力的项目影响用户的决策和操作。

计数器示例显示

此页面的主题是查询，但是添加了许多与查询无关的业务条目，这与用户的期望不符，很容易使用户迷路。

更正符号

删除任何与用户目标无关的内容，弄清页面主题，并在技术和页面控制的前提下提供有助于用户目标的帮助内容，例如最近的搜索词，常用的搜索词等

计数器示例显示

没有主次操作，因此用户别无选择。

更正符号

首先，有必要避免并行进行太多操作以供用户选择。当必须并行执行多个操作时，有必要区分操作的优先级以减少用户的选择难度。

清除过程

为了使用户能够流畅地使用页面，在用户执行某个操作过程时，有必要避免用户目标过程之外的内容打扰用户。

计数器示例显示

用户打算搜索，但进入页面时突然被弹出的彩票中断；对彩票不感兴趣的用户会受到非常不友好的干扰；甚至确实有一些用户被抽奖所吸引，而在离开抽奖的主要过程之后，您可能会忘记最初的目标，从而失去了对产品真实价值的使用和理解。

清除并清除

用户进入我们的小程序页面后，我们有责任和义务明确告知用户他现在所在的位置以及他可以去的地方，并确保用户可以自由浏览该页面而不会丢失的。用户可以提供安全愉快的体验。

清晰的导航，方便携带

导航是确保用户在浏览和跳转网络时不会迷路的最关键因素。导航需要告诉用户我在哪里，我可以去哪里，如何回去以及其他问题。首先，微信系统中所有小程序的所有页面都将具有自己的导航栏，由微信提供，以解决我在哪里以及如何返回的问题。在微信级别导航中保持一致的体验可帮助用户在微信中形成统一的体验和交互式认知，而在小程序和微信之间切换时无需增加学习成本或更改使用习惯。

微信导航栏

微信导航栏直接从客户端继承。除了导航栏的颜色外，开发人员不需要也不能自定义其中的内容。但是，开发人员需要指定小程序每一页的跳转关系，以便导航系统可以合理地工作。

微信导航栏分为导航区，标题区和操作区。导航区域控制程序页面的过程。目前，导航栏分为两种基本颜色。

导航区域（iOS）

通常，导航区域中只有一个操作，可以返回到上一个界面。

导航区域（）

像iOS一样，导航区域中只有一个操作可返回到上一页，并且单击手机随附的硬件返回按钮也将起到相同的作用。

微信导航栏自定义颜色规则（iOS和）

小程序导航栏支持基本的背景颜色自定义。在满足可用性的前提下，所选颜色需要与微信提供的两组主导航栏图标相协调。建议参考以下颜色选择效果：

颜色选择方案示例

页面内的导航

开发人员可以根据自己的功能设计需要在页面中添加自己的导航。并保持不同页面之间的导航一致。但是，由于手机屏幕尺寸的限制，小程序页面的导航应尽可能简单。如果该页面仅用于常规线性浏览，则建议仅使用微信导航栏。

开发人员可以选择将选项卡和选项卡导航添加到“小程序”页面。标签的标签栏可以固定在页面的顶部或底部，方便用户在不同的标签之间切换。标签数量不得少于2个，标签数量不应超过5个。为确保可点击区域，建议标签数量不应超过4个。选项卡不得超过一组页面上的标签。

小应用程序的主页可以选择微信提供的本机底部标签的分页样式，该样式仅适用于小应用程序的主页。在开发过程中可以自定义图标样式，标签复制和复制颜色。有关特定的设置项目，请参阅开发文档。

顶部标签页栏的颜色可以自定义。在自定义颜色选择中，重要的是要注意保持分页栏选项卡的可用性，可见性和可操作性。

减少等待和及时的反馈

长时间等待页面会对用户造成不良情绪。使用微信小程序项目提供的技术可以大大减少等待时间。即便如此，当不可避免地需要加载和等待时，仍需要及时的反馈以减轻用户的等待心情。

开始页面加载

小程序启动页面是小程序在微信内容中一定程度上显示品牌特征的页面之一。此页面将突出显示迷你程序的品牌特征和加载状态。除了显示品牌徽标（徽标）之外，页面上的所有其他元素（例如加载进度指示器）均由微信统一提供，不能更改，并且不需要开发人员进行开发。

下拉页面刷新并加载

在微信小程序中，微信提供了标准的页面下拉刷新加载功能和样式。

开发人员可以自定义需要通过下拉交互刷新的页面。这种类型的互动微信将提供标准功能和样式。在样式方面，刷新图标和下拉标记已捆绑在颜色中，并分为两组阴影。开发人员在使用时应注意标题文本，下拉标记和刷新图标的和谐统一。当用户在此类页面上进行下拉交互时，将显示微信小程序页面的标准加载动画。开发人员不需要开发自己的样式

两组浅色和浅色下拉样式

微信下拉提示用于向用户明确表明迷你程序的所有者，以防止欺诈和作弊。此处的标签提供了两组深色和浅色方案。文本颜色无法自定义。定制背景色时，开发人员应注意确保对下拉标签的识别。 iOS和配色方案如下所示。

微信下拉标记错误的用例

请避免以下不正确的用法，以确保信息的可见性和页面的可用性

页内加载反馈

开发人员可以自定义中页面内容的加载样式。建议自定义加载样式（无论是部分使用还是全部使用）都应尽可能简洁，并应使用简单的动画来告知用户加载过程。开发人员还可以使用微信提供的统一页面加载样式，如图中的示例所示。

模式加载

模式加载样式将覆盖整个页面。由于无法清楚地告知特定的加载位置或内容可能会导致用户焦虑，因此应谨慎使用。除了某些全局操作外，请勿使用模式加载。

部分加载反馈

反馈仅在触发加载的页面部分执行。这种反馈机制更具针对性，页面变化很小。这是微信推荐的反馈方法。例如：

关于加载反馈的注意事项

如果加载时间较长，则应提供取消操作，并使用进度条显示加载进度。

在加载过程中，应保持动画效果；没有动画效果的加载很容易使人产生界面卡住的错觉。

请勿在同一页面上同时使用多个加载动画。

结果反馈

除了在用户等待时及时反馈信息之外，还需要对操作结果的清晰反馈。根据实际情况，可以选择不同的结果反馈方式。对于页面上的部分操作，可以在操作区域中提供直接反馈，对于页面级的操作结果，可以使用弹出提示（），模式对话框或结果页面进行显示。

页面部分操作结果的反馈

对于页面上的部分操作，可以在操作区域中提供直接反馈，例如单击多选控件之前和之后的下图。对于常用控件，微信设计中心将提供一个控件库，该控件将在其中提供完整的操作反馈。

页面全局操作结果弹出提示（）

弹出式提示（）适用于轻量级的成功提示，1.将在5秒钟后自动消失而不会中断该过程，并且对用户几乎没有影响。适用于不需要强调成功状态的操作提醒。请特别注意该表格不适合错误通知。

页面全局操作结果模式对话框

需要通过用户清楚知道的操作结果的状态可以通过模式对话框提示，并可以附加下一个操作指南。

页面全局操作结果页面

对于操作结果是当前过程结束的情况，您可以使用操作结果页面提供反馈。该方法最强烈，最清楚地告知用户操作已完成，可以根据实际情况为下一步操作提供指导。

异常是可以控制的，有回去的方法

在设计任何任务和流程时，通常容易忽略异常状态和流程。这些异常场景通常发生在用户最沮丧并需要帮助的时候。因此，有必要特别注意异常状态的设计，并在发生异常时进行处理。用户将提示必要的状态并通知解决方案，以便可以返回。

有必要防止用户莫名其妙地无所事事地被卡在特定页面上。 2. 2中提到的弹出窗口和结果页面都可以用作异常情况的提醒。此外，在表单页面中，尤其是包含许多表单项的页面中，应明确指出错误项，以便用户对其进行修改。

状态状态异常

如果表单报告错误，请在表单顶部告知错误原因，并标识错误字段以提示用户进行修改

方便而优雅

从PC时代的物理键盘和鼠标到移动时代的手指，尽管大大简化了输入设备，但手指操作的精度远不如键盘和鼠标。为了适应这种变化，开发人员需要在设计过程中充分利用手机功能，以使用户可以方便，优雅地控制界面。

减少输入

由于手机键盘区域小而密，所以难以输入，容易引起输入错误。因此，在设计小程序页面时，为了最大程度地减少用户输入，请使用现有界面或其他易于操作的选择控件来改善用户输入体验。

减少输入，巧妙地使用界面

例如，在下图中，添加银行卡时，相机识别界面用于帮助用户输入。此外，微信团队还开放了各种微信小程序界面，例如地理位置界面。充分利用这些界面将大大提高用户输入的效率和准确性，从而优化体验。

除了使用界面外，当用户必须进行手动输入时，请尝试让用户做出选择，而不是键盘输入。一方面，记忆很容易记住，并且允许用户在有限的选项中进行选择通常更容易通过记忆完全输入。另一方面，仍然认为手机键盘的密集单键输入非常容易引起输入错误。

例如，在图中，在用户搜索时提供搜索历史记录快捷方式选项将帮助用户快速搜索，并减少或避免不必要的键盘输入。

避免误操作

由于我们用手指触摸屏幕来控制手机上的界面，因此手指点击的准确性远不及鼠标。因此，在设计需要单击页面的控件时，需要充分考虑热点区域的面积，以避免可点击区域过小或过密而导致误操作。当简单地将最初在计算机屏幕上使用的接口移植到移动电话而不进行任何修改时，通常容易发生此问题。由于手机的屏幕分辨率不同，因此最适合单击的像素大小并不完全相同，但转换为物理尺寸时，大约在7mm-9mm之间。在微信提供的标准组件库中，各种控制元素都考虑了页面点击效果和不同屏幕的适应性，因此建议再次使用或模仿标准控件大小进行设计。

使用界面来提高性能

微信设计中心已经推出了一套标准的网页控件库，包括设计控件库和设计控件库。小型程序组件将在将来得到改进。这些控件充分考虑了移动页面的特性，并可以确保其在移动页面上的可用性和操作性能；同时，微信开发团队正在不断完善和扩展微信小程序界面，并提供微信公共图书馆。使用这些资源不仅可以为用户提供更快的服务，而且可以提高页面性能。它具有很大的效果，并且可以无形地改善用户体验。

统一稳定

除了上述各种原则外，建议连接到微信的小程序应始终注意不同页面之间的统一性和连续性，并尝试在不同页面上使用一致的控件和交互方法。

统一的页面体验和连续的界面元素将有助于以最低的学习成本实现使用目标，并减少由页面跳动引起的不适。因此，小型程序可以根据需要使用微信提供的标准控件来实现均匀性和稳定性。

视觉规范

为了方便设计人员进行设计，微信提供了一套用于网页设计和小程序的基本控件库；同时，它提供了方便开发人员调用的资源。

字体规格

在微信中使用字体与正在运行的系统的字体一致。常见字体大小为20、18、17、16、14、13、11（pt）。具体的使用场景如下：

字体颜色

主要内容是黑色，次要内容是灰色；时间戳记和表单的默认值为灰色；描述内容的大部分并属于主要内容，其颜色为半黑色；

蓝色是链接颜色，绿色是完成词颜色，红色是错误颜色，状态分别减少到20％和10％；

列出视觉规范

表单输入的视觉规范