引用

官方文档

一、概要

基于小程序轻快的特点， 设计指南建立在充分尊重用户知情权和操作权的基础之上 建立友好，高效， 一致的用户体验 最大程度的适应和支持不同需求 1,友好礼貌，2, 明晰明确，3, 便捷优雅， 4,统一稳定， 5,视觉规范 本文主要讲解前面四个方面

设计指南二 视觉规范

二、友好礼貌

为了避免用户在微信中， 注意力被周围复杂环境干扰， 小程序在设计时， 注意减少无关的设计元素对用户目标的干扰， 礼貌地向用户展示程序提供的服务， 友好引导用户进行操作

1、重点突出

每个页面都应该有明确的重点， 便于用户每进入一个新页面都能快速理解页面内容 确定重点的前提下， 尽量避免页面上出现其他与 用户的决策和操作无关的干扰因素

反例	标准
页面的主题时查询，添加了诸多与查询不相关业务入口，与用户目标无关，易造成用户迷失	去掉任何和用户目标不相关内容，明确页面主题，在技术和页面控件允许下提供有助于用户决策和操作的帮助内容，比如最近搜索词等
操作没有主次，让用户无从选择	避免并列过多操作让用户选择，在不得不并列多个操作时候，需要区分操作主次，减轻用户选择难度

2、流程明确

为了让用户流畅使用页面，在用户进行某一个操作流程时候， 避免出现用户目标流程之外的内容打断用户
反例： 用户本打算进行搜索， 在进入页面时候却被突然出现的模态抽奖打断， 对于抽奖没有兴趣的用户时非常不友好的干扰， 即便部分用户参与抽奖， 离开主流程后可能忘记了原本的目标， 进而失去了对产品真正价值的利用和认识

二、清晰明确

一旦用户进入小程序页面，开发者有责任和义务明确告诉用户 身在何处，可以往何处去，确保用户在页面中游刃有余地穿梭，不迷路 提供安全且愉悦地使用体验

1、导航明确， 来去自如

导航时确保用户在浏览跳转时候，不迷路地最关键因素 导航需要告诉用户， 当前在哪，可以去哪，如何回去的问题 首先，在微信系统内的所有小程序的全部页面，均会带有微信导航栏 统一解决-当前在哪，如何回去的问题 在微信层级导航，保持体验一致， 有助于用户在微信内形成统一的体验和交互认知 无需在各个小程序和其他微信页面的切换中新增学习成本或者改变使用习惯

（1） 微信导航栏

微信导航栏，直接继承于客户端，出了导航栏颜色外， 开发者不能对其中内容进行自定义 开发者需要规定各个页面的跳转关系，让导航系统能够以合理的方式工作 导航栏分为导航区域，标题区域和操作区域 导航区域控制页面进程， 目前导航栏分深浅两种基本配色

（2）导航区ios， android

ios	android
微信进入小程序的第一个页面，导航区通常只有一个返回操作，返回到进入小程序前的微信页面	导航区仅存在唯一操作-直接退出小程序，回到进入小程序前的微信或者系统桌面，安卓机自带的硬件返回键执行返回上一级页面的操作
进入小程序后的次级界面，导航区的操作为-返回和关闭， 返回，时返回上一级小程序界面或者微信界面；关闭，即在当前界面直接退出小程序，回到小程序前的微信页面	次级界面也只有关闭操作，返回操作为安卓机硬件自带返回键
	安卓导航存在一类特殊情况： 当用户通过操作区的菜单将小程序添加到安卓桌面，小程序将失去关闭按钮，从安卓桌面打开小程序时候，首页不展示导航按钮，仅仅展示小程序标题和操作区，小程序次级界面，导航区只有返回上一级页面的操作

（3）导航栏自定义颜色规则

小程序导航栏支持基本的背景颜色自定义功能，选择的颜色需要在满足可用性前提下，和谐搭配微信提供的两套主导航栏图标

标准	反例

（4）页面内导航

开发者可以根据自身功能设计需要， 在页面内添加自由导航 保持不同页面中导航一致， 小程序受限于手机屏幕尺寸的限制，页面中的导航将尽量简单，仅为一般线性浏览的页面建议仅使用微信导航栏即可

开发者选择小程序页面添加标签分页tab导航，标签分页栏可以固定在页面顶部或者底部， 便于用户在不同的分页间做切换 标签数量不少于2个，最多不得超过5个，建议标签数量不超过4个 一个页面不应该出现一组以上的标签分页栏

小程序首页可选择微信提供的原生底部标签分页样式，该样式仅供小程序首页使用 可以自定义图标样式，标签文案，文案颜色

顶部标签分页栏颜色可以自定义，保持分页栏标签的可用性，可视性，可操作性

标准	反例

2、减少等待， 反馈及时

页面的过长时间等待会引起用户的不良情绪，使用微信小程序项目提供的技术可以很大程度缩短等待时间， 当不可避免的出现了加载和等待的时候，需要予以及时的反馈舒缓用户等待的不良情绪

（1）加载类型

加载类型	类型说明	样式图片
启动页加载	小程序启动页是小程序在微信内，展现品牌特征的页面之一, 将突出展示小程序品牌特征和加载状态,启动页除了品牌标志展示外，页面上其他所有元素如加载进入的指示，均由微信统一提供不能更改，无需开发
页面下拉刷新加载	在微信小程序中，微信提供了标准页面下拉刷新加载能力和样式，开发者不需要自行开发
页面内加载反馈	开发者可以在小程序里自定义页面内容的加载样式，建议不管是使用全部还是局部加载，自定义的加载样式都应该：尽可能的简洁，使用间接地动画告知用户加载过程,可以使用微信提供的统一的页面加载样式
模态加载	模态的加载样式将覆盖整个页面上，由于无法告知具体的加载位置和加载内容，可能引起用户的焦虑，需要谨慎使用模态加载，除了在某些全局操作下不要使用模态加载
局部加载反馈	局部加载反馈只在触发加载页面局部进行反馈，这样的反馈机制更加有针对性，页面跳动小，是微信推荐的反馈方式
加载反馈注意事项	如果加载时间过长，应该提供取消操作，使用进度条显示载入的进度, 载入的过程中，应该保持动画效果，无动画效果的加载容易让人产生界面已经卡死的错觉, 不要在同一个页面同时使用超过1个加载的动画	...

（2）结果反馈

除了在用户等待过程中需予以及时反馈外，对操作的结果需要予以明确反馈，根据实际情况，可以选择不同的结果反馈样式，对于页面局部的操作，可以在操作区予以直接反馈，对于页面级操作结果，可使用弹出式提示，模态对话框或者结果页面显示

类型	说明	样式图片
页面局部操作结果反馈	对于页面局部的操作，可以在操作区域中予以直接反馈, 例如点击多选控件前后，对于常用控件，微信设计中心将提供控件库，其中的控件都已经提供完整操作反馈
页面全局操作结果-弹出式提示toast	弹出式toast，适用于轻量级的成功提示，1.5秒后自动消失，不打断流程，对用户影响较小，适用于不需要强调的操作提醒，例如成功提示,该形式不适用于错误提示，因为错误提示需要明确告知用户，因而不适合使用一闪而过的弹出式提示
页面全局操作结果-模态对话框	对于需要用户明确知晓的操作结果状态，通过模态对话框来提示, 可以附带下一步操作作指引
页面全局操作结果-结果页	对于操作结果已经是当前流程的终结的情况， 可以使用操作结果页来反馈， 这种方式最为强烈和明确的告知用户操作已经完成， 并可根据实际情况给出下一步操作的指引

3、异常可控， 有路可退

在设计任何的任务和流程时， 异常状态和流程往往容易被忽略， 而这些异常场景往往是用户最为沮丧和需要帮助的时候， 因此需要格外注意异常状态的设计， 在出现异常时候， 予以用户必要的状态提示， 使其有路可退； 要杜绝异常状态下， 用户莫名其妙又无处可去，停滞在某一个页面的情况 上文中所提到的模态对话框和结果页面都可以作为异常状态的提醒方式 除此之外，在表单页面中尤其是表单项较多的页面中，还应该指出出错项目， 以便用户修改

类型	类型说明	样式图片
表单出错	表单报错，在表单顶部告知错误原因， 标识出错误字段提示用户修改

三、便捷优雅

从PC时代的物理键盘鼠标 到 移动端时代 手指， 虽然输入设备极大精简， 但是手指操作的准确性却大大不如键盘鼠标精确， 为了适应这个变化， 需要开发者在设计过程中充分利用手机特征， 让用户便捷优雅的操作界面

1、减少输入

由于手机键盘区域小而且密集， 输入困难同时还容易引起输入错误， 因此在设计小程序页面时候尽量减少 用户输入， 利用现有的接口或者其他一些易于操作的选择控件来改善用户输入的体验
例如下图中， 在添加银行卡时候， 采用摄像头识别接口帮助用户输入 开放的地理位置接口等 多种小程序接口， 充分利用这些接口将大大提高用户输入的效率和准确性， 进而优化体验

除了利用接口外， 在不得不让用户进行手动输入时候， 应该尽量让用户选择而不是键盘输入 一方面， 回忆易于记忆， 在用户有限的选项中做出选择通常来说更加容易完全靠记忆输入 另一方面，考虑到手机键盘密集的单键输入容易造成输入错误 下图中，在用户搜索时候提供搜索历史快捷选项，将帮助用户快速进行搜索， 减少或者避免不必要的键盘输入

2、避免误操作

因为在手机上，通过手指触摸屏幕来操控界面， 手指的点击精确度不如鼠标 在设计界面上需要点击的控件时候，需要充分考虑到其热区面积 避免由于可以点击的区域过小，过于密集造成错误操作 当简单的将原本在电脑屏幕上使用的界面不做任何适配直接移植到手机上， 往往容易造成问题 由于手机屏幕分别率各不相同， 因此最适宜点击像素尺寸不完全一致， 换算成物理尺寸在7mm~9mm之间 在微信提供的标准组件库中， 各种控件元素均已经考虑到了页面点击效果和不同屏幕的适配， 因此需要再次推荐使用或者模仿标准控件尺寸进行设计

3、利用接口提升性能

微信设计中心已经推出了一套网页标准控件库， 包括sketch设计控件库和 photoshop 设计控件库 后续将完善小程序组件， 这些控件都已经充分考虑到移动端页面的特点， 能够保证其在移动端页面上的可用性和可操作性性能 同时微信开发团队也在不断完善和扩充小程序接口， 提供微信公共库， 利用这些资源不但能够为用户提供更加快捷的服务， 而且对页面性能的提高有很大作用 无形之中提升了用户体验

四、统一稳定

除了以上所提到的种种原则， 建议接入微信的小程序还应该时刻注意不同页面的统一性和延续性 在不同的页面尽量使用一致的控件和交互方式 统一的页面体验和延续性的界面元素都将帮助， 使用最少的学习成本达到使用目标 减轻页面跳动造成的不适感 小程序可以根据需要使用微信提供的统一标准控件， 达到统一稳定的目标