微信小程序设计规范Word文件下载.docx

微信小程序设计规范Word文件下载.docx

《微信小程序设计规范Word文件下载.docx》由会员分享，可在线阅读，更多相关《微信小程序设计规范Word文件下载.docx（19页珍藏版）》请在冰豆网上搜索。

去掉任何与用户目标不相关的内容，明确页面主题，在技术和页面控件允许的前提下

提供有助于用户目标的帮助内容，比如最近搜索词，常用搜索词等。

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

首先要避免并列过多操作让用户选额，在不得不并列多个操作时，需区分操作主次，

减轻用户的选择难度。

2.流程明确

为了让用户顺畅地使用页面，在用户进行某一个操作流程时，应避免出现用户目标流

程之外的内容而打断用户。

用户本打算进行搜索，在进入页面时却被突如其来的抽奖弹窗所打断；

对于抽奖没有

兴趣的用户是非常不友好的干扰，平添一份对开发团队的恼怒；

而即便有部分用户确

实被“诱人”的抽奖活动所吸引，离开主流程去抽奖之后可能就遗忘了原本的目标，进

而失去了对产品真正价值的利用和认识。

二、清晰明确

作为一个负责任的开发者，一旦用户进入我们的小程序页面，就有责任和义务清晰明

确地告知用户身在何处、又可以往何处去，确保用户在页面中游刃有余地穿梭而不迷路，

这样才能为用户提供安全的愉悦的使用体验。

1.导航明确，来去自如

导航是确保用户在网页中浏览跳转时不迷路的最关键因素。

导航需要告诉用户，我在

哪，我可以去哪，如何回去等问题。

首先在微信系统内的所有小程序的全部页面，均会

自带微信提供的导航栏，统一解决我在哪，如何回去的问题。

在微信层级导航保持体验

一致，有益用户在微信内形成较为统一的体验和交互认知，无需在各小程序和微信切换

中新增学习成本或使用习惯。

微信导航栏

微信导航栏，直接继承于客户端，除导航栏颜色之外，开发者无需亦不可以对其中的

内容进行自定义。

但开发者需要规定小程序各个页面的跳转关系，让导航系统能够以合

理的方式工作。

微信导航栏分为导航区域、标题区域以及操作区域。

其中导航区控制程序页面进程。

目前导航栏分深浅两种基本配色，在iOS和Android展示有所不同，如下图所示：

导航区（iOS）

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

开发者可定义其内容，不可对样式进

行修改

导航区（Android）

通常情况下，系统导航左侧唯一的操作为“离开小程序，回到微信，程序后台运行”。

当用户进入小程序次级页面后，我们建议小程序自身可以设计返回操作，同时用户也

可以通过安卓系统自带的硬件返回按钮返回上一级。

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

小程序导航栏支持基本的背景颜色自定义功能，选择的颜色需要在满足可用性前提下，

和谐搭配微信提供的两套主导航栏图标。

建议参考以下选色效果：

选色方案示例

页面内导航

开发者可根据自身功能设计需要在页面内添加自有导航。

并保持不同页面间导航一致。

但是受限于手机屏幕尺寸的限制，小程序页面的导航应尽量简单，若仅为一般线性浏览

的页面建议仅使用微信导航栏即可。

微信控件库提供tab导航供开发者选择。

tab户在不同的tab页面间做切换。

为确保点击区域，应出现一组以上的tab栏。

栏可固定在页面顶部或者底部，便于用

tab项不得超过4项。

一个页面也不

2.减少等待，反馈及时

页面的过长时间的等待会引起用户的不良情绪，使用微信小程序项目提供的技术已能

很大程度缩短等待时间。

即便如此，当不可避免的出现了加载和等待的时候，需要予以

及时的反馈以舒缓用户等待的不良情绪。

启动页设计

小程序启动页是小程序在微信内容一定程度上展现品牌特征的页面之一。

本页面将突出展示小程序品牌特征和加载状态

启动页除LOGO品牌展示外，页面上的其他所有元素如加载进度指示，供且不能更改。

无需开发者开发

由微信统一提

下拉标示区

微信内所有小程序页面，都会在下拉时出现微信为其统一设计的标示区。

品牌展示区

由品牌名称和微信小程序提示组成。

目的是强化品牌和用户对小程序的产品感知。

下拉标示（iOS深浅两色方案）

微信提供深浅两套配色方案，如此处标示所示，文字颜色不可自定义，开发者在自定

义背景色时，应注意保证下拉标示的辨识度。

下拉标示（Android深浅两色方案）

微信下拉提示用于给用户明确的小程序归属者，防止造假与作弊。

此处标示提供深浅

两套方案，文字颜色不可自定义，开发者在自定义背景色时，应注意保证下拉标示的辨

识度。

页面刷新交互（iOS）

开发者可自定义需要通过下拉交互完成刷新的页面，此类交互微信将提供标准能力和

样式。

在样式上，刷新图标与下拉标示配色已捆绑，分为深浅两套方案，开发者在使用

时，应注意头部文字、下拉标识与刷新图标的和谐统一。

当用户在该类页面做出下拉交

互时，出现微信小程序页面标准加载动画。

开发者无需自行开发样式

在开发者没有在页面顶部设计tab的情况下，若定义该页面可通过下拉动作刷新，

则刷新后加载状态提示与小程序品牌展示区出现在标题栏之下，页面顶部。

开发者暂无法自行定义此加载效果

在开发者定义了页面顶部tab，并定义该Tab则刷新后加载状态提示与小程序品牌展示区出现在顶部

下的内容页面可通过下拉动作刷新，

Tab之下，且仅刷新当前页面内

容。

页面刷新交互（Android）

与iOS相同，在样式上，Android下刷新图标与下拉标示配色已捆绑，分为深浅两套方案，开发者在使用时，应注意头部文字、下拉标识与刷新图标的和谐统一。

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

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

微信控件库提供深浅

tab

导航方案供开发者选择。

栏需固定在页面顶部，便于用

户在不同的

页面间做切换。

为确保点击区域，

项不得超过

4项。

应出现一组以上的

栏。

Tab

栏选中态默认为

100%

实色，未选中态带有

60%

，其中选中态颜色可自定义。

在自定义颜色选择中，务必注意保持

的可用性、可视性和可操作性。

页面内加载反馈

开发者可在小程序里自定义页面内容的加载样式。

建议不管是使用在局部还是全体，

自定义加载样式都应该尽可能简洁，并使用简单动画告知用户加载过程。

开发者也可以

使用微信提供的，统一的页面加载样式，如图中例所示。

模态加载

模态的加载样式将覆盖整个页面的，由于无法明确告知具体加载的位置或内容将可能

引起用户的焦虑感，因此应谨慎使用。

除了在某些全局性操作下不要使用模态的菊花。

局部加载反馈

即只在触发加载的页面局部进行反馈，这样的反馈机制更加有针对性，页面改动小，

是微信推荐的反馈方式。

例如：

加载反馈注意事项

若载入时间较长,应提供取消操作,并使用进度条显示载入的进度。

载入过程中,应保持动画效果;

无动画效果的加载很容易让人产生该界面已经卡死的错

觉。

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

结果反馈

除了在用户等待的过程中需予以及时反馈外，对操作的结果也需要予以明确反馈。

根

据实际情况，可选择不同的结果反馈样式。

对于页面局部的操作，可在操作区域予以直

接反馈，对于页面级操作结果，可使用toast、弹窗或结果页面展示。

页面局部操作结果反馈

对于页面局部的操作，可在操作区域予以直接反馈，例如点击多选控件前后如下图。

对于常用控件，微信设计中心已提供控件库及WeUI控件库，其中的控件都已设计有完

整的操作反馈。

页面全局操作结果——toast

其中toast适用于轻量级的成功提示，1.5秒后自动消失，并不打断流程，对用户影

响较小，适用于不需要强调成功状态的操作提醒。

特别注意toast形式不适用于任何错误

提醒。

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

对于需要用户明确知晓的操作结果状态可通过弹框来提示，并可附带下一步操作指引。

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

对于操作结果已经是当前流程的终结的情况，可使用操作结果页来反馈。

这种方式最

为强烈和明确的告知用户操作已经完成，并可根据实际情况给出下一步操作的指引。

3.异常可控，有路可退

在设计任何的任务和流程时，异常状态和流程往往容易被忽略，而这些异常场景往往

是用户最为沮丧和需要帮助的时候，因此需要格外注意异常状态的设计，在出现异常时

予以用户必要的状态提示，并告知解决方案，使其有路可退。

要杜绝异常状态下，用户莫名其妙又无处可去，卡在某一个页面的情况。

2.2中所提

到的弹窗和结果页面都可作为异常状态的提醒方式。

除此之外，在表单页面中尤其是表

单项较多的页面中，还应明确指出出错项目，以便用户修改。

异常状态——表单出错

表单报错，在表单顶部告知错误原因，并标识出错误字段提示用户修改

三、便捷优雅

从PC时代的物理键盘鼠标到移动端时代手指，虽然输入设备极大精简，但是手指操作的准确性却大大不如键盘鼠标精确。

为了适应这个变化，需要开发者在设计过程中充分利用手机特性，让用户便捷优雅的操控界面。

1.减少输入

由于手机键盘区域小且密集，输入困难的同时还易引起输入错误，因此在设计小程序

页面时因尽量减少用户输入，利用现有接口或其他一些易于操作的选择控件来改善用户

输入的体验。

减少输入，巧用接口

例如下图中，在添加银行卡时，采用摄像头识别SDK