微信小程序官方设计指南

概述

基于微信小程序轻快的特点，我们制订了小程序界面设计指南和建议。 设计指南创建在充份认同用户知情权与操作方式权的基础之上。意在微信生态体系内，创建亲善、高效率、一致的用户体验，同时最小程度适应环境和积极支持相同市场需求，同时实现用户与小程序服务方的共赢。

亲善礼貌

为了防止用户在微信中采用小程序服务时，注意力被周围繁杂环境阻碍，小程序在设计时必须特别注意增加毫无关系的设计元素对用户目标的阻碍，礼貌地向用户展现程序提供更多的服务，亲善地鼓励用户展开操作方式。

重点注重

每个页面都理应明晰的重点，以便于用户每步入一个新页面的时候都能够快速地认知页面内容，在确认了重点的前提下，应当尽量避免页面上发生其他阻碍项影响用户的决策和操作方式。

反例起身

此页面的主题就是查阅，却嵌入了诸多与查阅不相关的业务入口，与用户的预期相符，极易导致用户的沉沦。

制止起身

换成任何与用户目标不相关的内容，明晰页面主题，在技术和页面控件容许的前提下提供更多有利于用户目标的协助内容，比如说最近搜索词，常用搜索词等。

反例起身

操作方式没主次，使用户无从选择

制止起身

首先必须防止同列过多操作方式使用户挑选，在不得不同列多个操作方式时，须要区分操作方式主次，减低用户的挑选难度。

流程明晰

为了使用户通畅地采用页面，在用户展开某一个操作方式流程时，应当避免用户目标流程之外的内容而吓到用户。

反例起身

用户本急于展开搜寻，在步入页面时却被突如其来的抽奖弹窗所吓到；对于抽奖没兴趣的用户就是非常不亲善的阻碍； 而即便存有部分用户的确被“诱人”的抽奖活动所迎合，返回主流程回去抽奖之后可能将就忘却了原本的目标，进而丧失了对产品真正价值的利用和重新认识。

清晰明确

一旦用户步入我们的小程序页面，我们就存有责任和义务清晰明确地知会用户身在何处、又可以往何处回去，保证用户在页面中游刃有余地穿行而不迷路，这样就可以为用户提供更多安全的惬意的采用体验。

导航系统明晰，来去自如

导航系统就是保证用户在网页中下载重定向时不迷路的最为关键因素。导航系统须要说用户，我在哪，我可以回去哪，如何回来等问题。首先在微信系统内的所有小程序的全部页面，均可以自带微信提供更多的导航系统栏，统一化解我在哪，如何回来的问题。在微信层级导航系统维持体验一致，有利于用户在微信内构成统一的体验和可视化心智，无须在各小程序和微信转换中追加自学成本或发生改变采用习惯。

微信导航系统栏

微信导航系统栏，轻易承继于客户端，除导航系统栏颜色之外，开发者无须亦不容对其中的内容展开自定义。但开发者须要规定小程序各个页面的重定向关系，使导航系统能以合理的方式工作。

微信导航系统栏分成导航系统区域、标题区域以及操作方式区域。其中导航系统区控制程序页面进程。目前导航系统栏分厚薄两种基本配色。

导航系统区（iOS）

导航系统区通常只有一个操作方式，即为回到上一级界面。

导航系统区（Android）

同iOS一样，导航系统区也只有一个回到上一级页面的操作方式，而页面安卓手机自带的硬件回到键也起著相同促进作用。

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

小程序导航系统栏积极支持基本的背景颜色自定义功能，挑选的颜色须要在满足用户可用性前提下，人与自然配搭微信提供更多的两套主导航系统栏图标。建议参照以下选色效果：

选色方案示例

页面内导航系统

开发者可以根据自身功能设计须要在页面内嵌入自建导航系统。并维持相同页面间导航系统一致。但是受限于手机屏幕尺寸的管制，小程序页面的导航系统应当尽量直观，若仅为通常线性下载的页面建议仅采用微信导航系统栏即可。

开发者可选择小程序页面嵌入标签分页（Tab）导航系统。标签分页栏可以紧固在页面顶部或者底部，易于用户在相同的分页间搞转换。标签数量严禁多于2个，最多严禁少于5个，为保证页面区域，建议标签数量不少于4项。一个页面也不该发生一组以上的标签分页栏。

其中小程序首页可选择微信提供更多的原生底部标签分页样式，该样式只供小程序首页采用。研发时可以自定义图标样式、标签文案以及文案颜色等，具体内容设置项可参照研发文档。

顶部标签分页栏颜色可以自定义。在自定义颜色挑选中，务必特别注意维持分页栏标签的可用性、可视性和可操作性。

增加等候，意见反馈及时

页面的过长时间的等候可以引发用户的不良情绪，采用微信小程序项目提供更多的技术已能够非常大程度延长等待时间。即便如此，当不可避免的发生了读取和等候的时候，须要不予及时的意见反馈以纾解用户等候的不良情绪。

启动页读取

小程序启动页就是小程序在微信内容一定程度上展现出品牌特征的页面之一。本页面将注重展现小程序品牌特征和读取状态。启动页除品牌标志（Logo）展现外，页面上的其他所有元素例如读取进度命令，均由微信统一提供更多且无法修改，无须开发者研发。

页面下拉创下读取

在微信小程序内，微信提供更多标准的页面下拉创下读取能力和样式。

开发者可以自定义须要通过下拉可视化顺利完成创下的页面，此类可视化微信将提供更多标准能力和样式。在样式上，创下图标与下拉标注配色已绑定，分成厚薄两套方案，开发者在采用时，应当特别注意头部文字、下拉标识与创下图标的人与自然统一。当用户在该类页面作出下拉可视化时，发生微信小程序页面标准读取动画。开发者无须自行研发样式

厚薄两套下拉样式

微信下拉提示信息用作给用户明晰的小程序归属于者，避免作假与作弊。此处标注提供更多厚薄两套方案，文字颜色不容自定义，开发者在自定义背景色时，应当特别注意确保下拉标注的辨识度。iOS和Android配色方案相同如下展现。

微信下拉标注错误采用案例

恳请防止以下错误采用情况，保证信息的可知性和页面的可用性

页面内读取意见反馈

开发者可以在小程序里自定义页面内容的读取样式。建议不管就是采用在局部还是全体，自定义读取样式都必须尽可能简约，并采用直观动画知会用户读取过程。 开发者也可以采用微信提供更多的，统一的页面读取样式，例如图中基准右图。

模态读取

模态的读取样式将全面覆盖整个页面的，由于无法明晰知会具体内容读取的边线或内容将可能将引发用户的焦虑感，因此应当慎重采用。除了在某些全局性操作方式下不要采用模态的菊花。

局部读取意见反馈

即为只在引爆读取的页面局部展开意见反馈，这样的反馈机制更加存有针对性，页面改动大，就是微信所推荐的意见反馈方式。比如：

读取意见反馈注意事项

若写入时间较长,应当提供更多中止操作方式,并采用进度条表明写入的进度。

写入过程中,应当维持动画效果 ; 并无动画效果的读取很难使人产生该界面已经卡死的错觉。

不要在同一个页面同时采用少于1个读取动画。

结果意见反馈

除了在用户等候的过程中须要不予及时意见反馈外，对操作方式的结果也须要不予明晰意见反馈。根据实际情况，可选择相同的结果意见反馈样式。对于页面局部的操作方式，可以在操作方式区域不予轻易意见反馈，对于页面级操作方式结果，可以采用弹出式提示信息（Toast）、模态对话框或结果页面展现。

页面局部操作方式结果意见反馈

对于页面局部的操作方式，可以在操作方式区域不予轻易意见反馈，比如页面多挑选控件前后如下图。对于常用控件，微信设计中心将提供更多控件库，其中的控件将提供更多完备操作方式意见反馈。

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

弹出式提示信息（Toast）适用于于轻量级的顺利提示信息，1.5秒后自动消失，并不吓到流程，对用户影响较小，适用于于不能须要特别强调顺利状态的操作方式告诫。特别注意该形式呼吸困难用作错误告诫。

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

对于须要用户明晰知悉的操作方式结果状态可以通过模态对话框去提示信息，并可以附带下一步操作方式提示。

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

对于操作方式结果已经就是当前流程的破灭的情况，可以采用操作方式结果页去意见反馈。这种方式最为猛烈和明晰的知会用户操作方式已经顺利完成，并可以根据实际情况得出下一步操作方式的提示。

异常受控，存有路可走

在设计任何的任务和流程时，异常状态和流程往往难被忽略，而这些异常场景往往就是用户最为失望和须要协助的时候，因此须要格外特别注意异常状态的设计，在出现异常时不予用户必要的状态提示信息，并知会解决方案，并使其存有路可走。

必须杜绝异常状态下，用户莫名其妙又无处可去，卡在某一个页面的情况。2.2中所提及的弹窗和结果页面都可以做为异常状态的告诫方式。除此之外，在表单页面中尤其就是表中单项较多的页面中，还应当明确指出失效项目，以便用户修正。

异常状态——表单失效

表单收起，在表单顶部知会错误原因，并标识出来错误字段提示信息用户修正

方便快捷典雅

从PC时代的物理键盘鼠标至移动端的时代手指，虽然输出设备很大精简，但是手指操作方式的准确性却大大不如键盘鼠标准确。为了适应环境这个变化，须要开发者在设计过程中充分利用手机特性，使用户方便快捷典雅的驾驭界面。

增加输出

由于手机键盘区域大且密集，输出困难的同时还极易引发输出错误，因此在设计小程序页面时因尽量减少用户输出，利用现有USB或其他一些不易操作方式的挑选控件去提升用户输出的体验。

增加输出，充分运用USB

比如右图中，在嵌入银行卡时，使用摄像头辨识USB去协助用户输出。除此之外微信团队还对外开放比如地理位置USB等多种微信小程序接口 ，充分利用这些USB将大大提高用户输出的效率和准确性，进而优化体验。

除了利用USB外，在不得不使用户展开手动输入时，应当尽量使用户搞挑选而不是键盘输入。一方面，回忆起不易记忆，使用户在非常有限的选项中搞挑选通常来说就是难于全然依靠记忆输出；另一方面，仍然就是考虑到手机键盘密集的单键输出极容易导致输出错误。 比如图中，在用户搜寻时提供更多搜寻历史便捷选项将协助用户快速展开搜寻，而增加或防止不必要就是键盘输入。

防止误操作

因为在手机上我们通过手指鼠标屏幕去驾驭界面，手指的页面精确度比不上鼠标，因此在设计页面上须要页面的控件时，须要充份考虑到其热区面积，防止由于可以页面区域过大或过分密集而导致误操作。当直观的将原本在电脑屏幕上采用的界面不搞任何内置轻易移殖至手机上时，往往就难发生这样的问题。由于手机屏幕分辨率各不相同，因此最适宜页面像素尺寸也不完全一致，但折算成物理尺寸后大致就是在7mm-9mm之间。在微信提供更多的标准组件库中，各种控件元素均已考虑到了页面页面效果以及相同屏幕的内置，因此再次所推荐采用或恶搞标准控件尺寸展开设计。

利用USB提高性能

微信设计中心已面世了一套网页标准控件库，包含sketch设计控件库和Photoshop设计控件库，时程还将健全小程序组件，这些控件都已充分考虑了移动端的页面的特点，能确保其在移动端的页面上的可用性和操作方式性能；同时微信研发团队也在不断完善和扩展微信小程序接口，并提供更多微信公共库，利用这些资源不但能为用户提供更多更加便捷的服务，而且对页面性能的提升存有很大促进作用，无形之中提高了用户体验。

统一平衡

除了以上所提及的种种原则，建议互连微信的小程序还必须时刻特别注意相同页面间的统一性和延续性，在相同的页面尽量采用一致的控件和交互方式。

统一的页面体验和存有延续性的界面元素都将协助用最少的自学成本达成一致采用目标，减低页面跳动所导致的不适感。正因如此，小程序可以根据须要采用微信提供更多的标准控件，以达至统一平衡的目的。

视觉规范

为便利设计师展开设计，微信提供更多一套供Web设计和小程序采用的基础控件库；同时提供方便开发者调用的资源。

字体规范

微信内字体的采用与所运转的系统字体保持一致，常用字号为20, 18, 17, 16,14 13, 11(pt)，采用场景具体内容如下：

字体颜色

主内容 Black 黑色，次要内容 Grey 灰色；时间撕与表单ViBe Light 灰色；大段的表明内容而且属主要内容用 Semi 白；

蓝色为链接用色，绿色为顺利完成字样色，红色为失效用色 Press与 Disable状态分别减少透明度为20%与10%；

列表视觉规范

表单输出视觉规范

按钮采用原则

列表外按钮上文字标准

按钮高度为44px之下采用: 颜色 ＃000000 / ＃353535 字号 18pt

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

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

列表外按钮上文字标准

按钮高度为25px之下采用: 颜色 ＃000000 / ＃353535 字号 14pt

页面线性按钮上文字标准

按钮高度为35px之下采用: 颜色 ＃09BB07 / ＃353535 字号 16pt

图标采用原则