概要

鉴于微信小程序的便捷性，我们制定了相应的界面设计规范与建议。这些规范充分考虑到用户的知情权和操作权。我们的目标是，在微信生态系统中打造出友好、高效且统一的用户体验，并尽可能满足多样化的需求，从而实现用户与小程序服务提供者之间的互利共赢。

友好礼貌

为了确保用户在使用微信小程序时，不会因周遭繁杂的环境而分散注意力，小程序在开发过程中需注重简化非必要的设计元素，以降低对用户达成目标时的干扰。同时，小程序应礼貌地向用户展示其服务内容，并友好地指导用户如何进行操作。

重点突出

每个页面都必须突出一个核心主题，这样当用户踏入新页面时，可以迅速把握页面信息。在此基础上，还需努力减少页面中可能存在的其他元素，以免干扰用户的判断和操作。

反例示意

本页面以查询为主题，却引入了大量与查询无关的业务入口，这偏离了用户原本的期待，可能导致用户感到困惑。

纠正示意

确保页面内容紧扣用户需求，精简无关信息，并在技术及控件功能范围内，提供对用户目标有助的内容，例如展示近期搜索关键词、频繁使用的搜索词汇等。

反例示意

操作没有主次，让用户无从选择

纠正示意

需注意避免让用户面对过多的选项，若必须列出多个操作，则应明确操作的重要性，以此降低用户在作出选择时的复杂程度。

流程明确

为了确保用户在使用页面时能够顺畅体验，在进行特定操作步骤时，必须防止出现与用户目标流程无关的信息，以免干扰用户的正常操作。

反例示意

用户原本计划进行搜索，却因突然出现的抽奖弹窗而中断了操作；这种对不感兴趣于抽奖的用户而言，显得尤为不礼貌的干扰；纵然有些用户被那“诱人”的抽奖活动所吸引，在离开主流程参与抽奖后，很可能会忘记自己最初的目标，从而导致无法充分利用和真正理解产品的价值。

清晰明确

用户踏入我们的小程序界面后，我们便肩负起告知其具体位置以及可行路径的职责，需确保用户在页面中能够自如地浏览，不会迷失方向，从而为用户带来既安全又愉悦的使用感受。

导航明确，来去自如

导航是确保用户在网页浏览过程中不会迷失方向的核心要素。它需向用户明确指出当前位置、可前往的目的地以及如何返回等问题。具体来说，在微信平台上的所有小程序的各个页面，都内置了微信官方提供的导航栏，这一设计统一解决了用户关于“我在哪里”以及“如何返回”的疑问。保持微信层级导航的体验连贯性，有利于用户在微信平台内建立一致的体验感和交互理解，从而避免了在不同小程序或微信界面切换时产生额外的学习负担或改变既有的使用习惯。

微信导航栏

微信的导航栏，源自客户端的设计，除了调整颜色之外，开发者既不能也不能自行修改其内容。然而，开发者必须设定小程序各页面之间的跳转规则，以确保导航系统能够顺畅高效地运作。

微信界面设有导航区、标题区和操作区三个部分，导航区负责管理程序的页面流程。目前，微信的导航栏提供了深色和浅色两种不同的配色方案。

导航区（iOS）

导航区通常只有一个操作，即返回上一级界面。

导航区（）

与iOS系统类似，在导航区域中仅提供返回上一级页面的功能；与此同时，按下安卓设备内置的物理返回键，也能实现同样的效果。

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

小程序的导航栏具备调整背景颜色的功能，用户可选的颜色需确保良好的使用体验，并与微信提供的两套主要导航图标形成协调的搭配。在此推荐您参考以下配色方案以供选择。

选色方案示例

页面内导航

开发者可依据自身功能需求，在页面中增设个性化的导航元素。同时，确保各页面导航保持统一性。然而，鉴于手机屏幕尺寸的局限性，小程序的页面导航应尽量简约。若页面仅用于常规的线性浏览，则推荐仅采用微信自带的导航栏。

开发者有权限在小程序页面中设置标签页（Tab）导航功能。此导航栏可以设置在页面的上方或下方，以便用户在各个标签页之间进行便捷的切换。需要注意的是，标签页的数量应保持在2至5个之间，为了确保用户点击的舒适度，建议将标签页数量控制在4个以内。此外，一个页面中不应出现多于一个的标签页导航栏。

小程序首页支持选用微信提供的原生底部标签分页模式，此模式仅适用于小程序首页界面。在开发过程中，用户可以自行设计图标样式、标签的文字内容及其颜色等，详细的可设置选项可查阅开发指南。

页面的顶部标签栏颜色是可以根据个人喜好进行设定的。在挑选自定义颜色时，一定要确保分页标签栏的实用性、可见性和操作便捷性不受影响。

减少等待，反馈及时

长时间停留在页面会导致用户产生不悦，而采用微信小程序项目所采用的技术已显著减少了等待时长。尽管如此，在加载和等待成为无法避免的情况时，仍需及时给出反馈，以缓解用户因等待而产生的不安情绪。

启动页加载

小程序的启动界面是其在微信平台中呈现品牌特色的关键页面之一。此页面着重呈现了小程序的品牌特色及其加载过程中的状态。除了展示品牌标志（Logo）之外，页面上诸如加载进度指示等所有其他元素均由微信平台统一提供，且不可进行修改，开发者无需进行开发工作。

页面下拉刷新加载

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

开发者有权自行设定哪些页面需通过下拉操作来实现刷新，微信将为这类操作提供规范化的功能与设计风格。在视觉设计方面，刷新图标与下拉指示的配色已经配套，并提供了深色和浅色两种方案，开发者在使用时需留意页面头部文字、下拉指示与刷新图标的整体协调性。用户进行下拉操作时，微信小程序将展示其标准加载动画。开发者无需自行设计相关样式。

深浅两套下拉样式

微信下拉提示旨在为用户清晰标注小程序的归属，以避免出现伪造和舞弊行为。在此，我们提供了两种深浅不同的方案，且文字的颜色无法进行自定义。当开发者自行设定背景颜色时，务必确保下拉提示的清晰度。iOS平台上的配色方案与此保持一致，具体展示如下。

微信下拉标示错误使用案例

请避免以下错误使用情况，确保信息的可见性和页面的可用性

页面内加载反馈

开发者有权限在小程序中自行设定页面内容呈现的加载模式。在应用这一功能时，无论是应用于部分页面还是整个页面，都应尽量保持加载样式的简洁性，并通过简单的动画效果向用户展示加载状态。此外，开发者还可以选择微信平台提供的标准页面加载样式，如图例中所展示的那样。

模态加载

模态加载的样式会影响到整个页面，但因其无法确切指出加载的具体位置或内容，这可能会让用户感到不安，故而在使用时需格外小心。特别是在非全局性操作中，应尽量避免使用模态加载。

局部加载反馈

即在页面局部触发加载时实施反馈，此反馈机制更具针对性；页面改动幅度较小，这也正是微信所推崇的反馈方法。例如：

加载反馈注意事项

若加载过程耗时较长，需设置取消功能，同时通过进度条来展示加载的进展情况。

在加载过程中，务必确保动画效果持续展现；若缺少动画，用户可能会误以为界面已出现卡顿。

不要在同一个页面同时使用超过1个加载动画。

结果反馈

在用户等待期间，必须提供及时的回应。同时，对于操作完成的成果，也必须给出清晰的反馈。根据不同的情况，可以采用不同的反馈形式。对于页面上的局部操作，可以在操作区域直接给出反馈；而对于涉及整个页面的操作，则可以通过弹出提示、模态对话框或者展示结果页面来实现。

页面局部操作结果反馈

在进行页面局部操作时，用户可以在操作区域直接获得反馈，比如点击多选控件前后的效果，如图所示。针对常用控件，微信的设计团队将在设计中心设立控件库，库中包含的控件将提供全面的操作反馈。

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

弹出提示框适用于呈现轻微的成功信息，它在1.5秒后便会自动隐去，不会干扰用户操作流程，对用户体验的影响微乎其微，适合那些无需特别突出成功感的操作提示。需要注意的是，这种提示方式并不适合用于错误信息的提醒。

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

若需让用户清晰了解操作后的具体状态，应采用模态对话框进行提示，同时可附加后续操作指南。

页面全局操作结果—结果页

当操作结果标志着流程的最终阶段时，我们应通过操作结果页面进行信息反馈。这种方法能够以最直接和最强烈的方式告知用户操作已圆满结束，并且还能根据具体情境提供后续操作的指导。

异常可控，有路可退

在制定任务与流程的过程中，我们常常会忽视那些异常情况，而这些情况往往正是用户感到最为沮丧并急需援助的时刻。因此，我们必须特别关注异常状态的设计，确保在异常发生时，能够向用户提供明确的状态提示，同时提供相应的解决方案，以便他们能够找到退路。

必须防止用户在遇到异常状况时，感到困惑且找不到出路，被困在某个网页上的情形。根据2.2部分所述，弹出窗口和结果页面都可以作为异常状况的提示手段。此外，在表单页面，尤其是表单项数量较多的页面，更应清晰地标明错误的具体项目，以便用户能够进行修正。

异常状态——表单出错

表单出现错误提示，需在表单上方明确指出错误的具体原因，同时标明出存在问题的字段，以便用户进行相应的修改。

便捷优雅

从传统的电脑时代物理键盘和鼠标，过渡到移动端时代以手指为操作工具，尽管输入设备变得更为简约，但手指操作的精确度却远不及键盘鼠标。为此，开发者在设计时需充分利用手机的特点，以便用户能够轻松且优雅地操控界面。

减少输入

手机键盘区域狭小且按键紧密，导致输入操作既繁琐又容易出错，所以在设计小程序页面时，应尽量降低用户的输入需求，通过利用现有接口或采用其他便捷的操作控件，以提升用户输入的舒适度和准确性。

减少输入，巧用接口

在图中所示的操作中，当用户添加银行卡信息时，我们运用摄像头识别技术以辅助其输入。此外，微信团队已经将诸如地理位置等众多小程序接口向外界开放。通过充分利用这些接口，用户的输入效率和准确性将得到显著提升，从而进一步优化了使用体验。

在接口使用受限的情况下，若用户需手动输入，应优先提供选择而非直接键盘操作。一方面，记忆中的信息更容易被回忆，因此用户在有限选项中进行选择往往比完全依赖记忆输入更为简便；另一方面，这也考虑到手机键盘按键密集，单键输入容易导致错误。在图示中，若在用户进行搜索时展示搜索记录的快捷选项，这将有助于用户更迅速地完成搜索过程；同时，这种方法还能有效减少或消除不必要的键盘操作。

避免误操作

在手机操作界面时，我们依赖手指触摸屏幕进行操控，然而手指点击的精确度相较于鼠标要低得多。因此，在设计需要用户点击的控件时，必须仔细考虑其热区面积，以防止因可点击区域过小或过于拥挤而导致误操作。若将原本为电脑屏幕设计的界面未经适配直接搬到手机上，此类问题往往就会浮现。手机屏幕的分辨率各有差异，导致最合适的点击像素大小并非完全相同，不过将其换算为实际尺寸，大致范围在7毫米至9毫米之间。微信的组件库已经针对页面点击效果和不同屏幕的适配进行了全面考量，因此我再次建议在设计时采用或参照标准控件的尺寸。

利用接口提升性能

微信设计团队已发布了一套网页标准化控件集合，该集合涵盖了设计控件库以及设计控件库，未来还将对小程序组件进行优化升级。这些控件充分考量了移动端页面的特性，确保了其在移动端页面上的使用便捷性和操作流畅度；与此同时，微信的开发团队也在持续优化和丰富微信小程序的接口，并推出了微信公共库。通过利用这些资源，不仅能够为用户带来更加高效的服务，而且对提升页面性能具有显著影响，从而在潜移默化中增强了用户体验。

统一稳定

在遵循上述各项原则的基础上，建议在接入微信小程序时，务必重视各页面之间的协调与连贯性，力求在各个页面中采用统一的控件和交互模式。

一致性的页面感受以及连贯的界面设计，均能以较低的学习成本帮助用户迅速掌握操作，同时缓解因页面频繁切换而产生的不适。因此，小程序可灵活运用微信所提供的规范组件，确保界面的一致性和稳定性。

视觉规范

为了便于设计师开展设计工作，微信平台特意提供了一套适用于Web设计和小程序开发的基础控件库；此外，还提供了便于开发者调用的相关资源。

字体规范

微信应用中的字体设计遵循与操作系统内置字体的一致性原则，常规的字体大小包括20、18、17、16、14、13、11点（pt），具体应用场景则各有不同。

字体颜色

主色调为黑色，辅助色调则是灰色；时间标记以及表单的预设值同样呈现灰色；而对于那些篇幅较长且属于核心内容的说明性文字，则采用Semi黑色彩呈现。

蓝色被指定为链接的专用颜色，绿色则代表任务的完成状态，而红色则用于标识错误信息；这些颜色的透明度分别被调整至20%和10%。

列表视觉规范

表单输入视觉规范

按钮使用原则

列表外按钮上文字标准

在按钮高度设定为44像素时，应采用颜色代码＃/＃，并配合字号18点。

可点状态下文字调整透明度为60%

不可点状态下文字调整透明度为30%

列表外按钮上文字标准

在按钮高度设定为25像素时，应采用颜色代码＃/＃，并配合14点字号的字体样式。

页面线性按钮上文字标准

在按钮高度设定为35像素时，应采用颜色代码＃/＃，并搭配16点字号的字体。

图标使用原则