小程序界面设计指南

“上一期文章讲了小程序平台的特点以及场景需求，这一期文章主讲小程序设计规范，这是我通过阅读官方文档后归纳总结的，需要详细了解的小伙伴可以去看官方设计指南，文末有链接。”

文章大纲

01 用户体验要点

02 字体规范

03 控件规范

04 页面加载

05 页面状态

总结 资源

01

—

用户体验要点

轻量、简洁、目标明确

减少无关的设计元素对用户目标的干扰，每个页面都应该有明确的重点，便于用户每进入一个新页面时都能快速地理解页面内容。

清晰明确地告知用户身在何处、又可以往何处去，确保用户在页面中游刃有余地穿梭而不迷路，这样才能为用户提供安全且愉悦的使用体验。

反例示意：

此页面的主题是查询，却添加了与查询不相关的业务入口，与用户的目标无关，易造成用户的迷失。

纠正示意：

去掉与用户目标不相关的内容，提供有助于用户决策和操作的帮助内容，比如最近搜索词等。

反例示意：

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

纠正示意：

避免并列过多操作让用户选择，在不得不并列多个操作时，需区分操作主次，减轻用户的选择难度。

反例示意：

用户本打算进行搜索，在进入页面时却被模态抽奖框打断，对于抽奖没有兴趣的用户是非常不友好的干扰，而即便有部分用户确实被“诱人”的抽奖活动所吸引，离开主流程去抽奖之后可能就遗忘了原本的目标，进而失去了对产品真正价值的利用和认识。

减少输入

由于手机键盘区域小且密集，输入困难的同时还易引起输入错误，因此在设计小程序页面时应尽量减少用户输入，利用现有接口或其他一些易于操作的选择控件来改善用户输入的体验。

例如下图中，在添加银行卡时，采用摄像头识别接口来帮助用户输入。除此之外微信团队还对外开放例如地理位置接口等多种微信小程序接口，充分利用这些接口将大大提高用户输入的效率和准确性，进而优化体验。

除了利用接口外，在不得不让用户进行手动输入时，应尽量让用户做选择而不是键盘输入。原因是回忆易于记忆，通常来说让用户在选项中做选择比完全靠记忆输入容易。

例如图中，在用户搜索时，提供搜索历史快捷选项来帮助用户快速进行搜索，从而减少或避免不必要的键盘输入。

避免误操作

统一稳定

还应该时刻注意不同页面间的统一性和延续性，在不同的页面尽量使用一致的控件和交互方式。比如按钮，tab选项卡，弹出框等。

02

—

字体规范

字号

颜色

主内容 Black 黑色，次要内容 Grey 灰色；时间戳与表单缺省值 Light 灰色；大段的说明且属于主要内容用 Semi 黑。

蓝色为链接用色；绿色为完成字样色；红色为出错用色。Press 与 Disable 状态分别降低透明度为20%与10%。

03

—

控件规范

导航栏

所有小程序的全部页面，均会自带微信提供的导航栏，它直接继承于客户端，也就是和微信一样。除导航栏颜色之外，开发者不可对其中的内容样式自定义。

微信导航栏分为导航区域、标题区域以及操作区域。其中导航区控制页面跳转，目前导航栏分深浅两种基本配色。

iOS导航栏

微信进入小程序的第一个页面，导航区只有一个操作“返回”，即返回进入小程序前的微信页面。进入小程序后的次级页面，导航区的操作为“返回” 和“关闭”。 “返回”，即返回上一级界面，“关闭”，即直接退出小程序。

Android导航栏

导航区仅存在唯一操作“关闭”，即直接退出小程序。安卓手机自带的硬件返回键执行“返回”上一级页面的操作。

安卓导航存在一类特殊情况：当用户通过操作区的菜单将小程序添加至安卓桌面，刚打开小程序的首页时,不展示导航区，仅展示标题和操作区。在小程序的次级页面，导航区只有“返回”操作，而点击安卓手机自带的硬件返回键也起到相同作用。

背景色规则

小程序导航栏支持背景颜色自定义，选择的颜色需要满足微信提供的两套主导航栏图标的可用性。即深色导航能够看清白色文本，浅色导航能够看清黑色文本。

导航标签

可以给小程序添加两种样式的导航：顶部TAB标签+底部标签。

保持不同页面间导航样式统一。

标签数量不得少于2个，最多不得超过5个，为确保点击区域，建议标签数量不超过4项。

小程序首页可选择微信提供的原生底部标签样式，该样式仅供小程序首页使用。可自定义图标样式、标签文案以及文案颜色等，具体设置项如图标尺寸等可参考开发文档和WeUI基础控件库。

列表

表单输入

按钮

图标

04

—

页面加载

当不可避免的出现了加载和等待的时候，需要给予及时的反馈以舒缓用户等待的不良情绪。

加载反馈注意事项

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

载入过程中,应保持动画效果 。无动画效果的加载很容易让人产生该界面已经卡死的错觉。

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

结果反馈

对于页面局部的操作，可在操作区域予以直接反馈，对于页面级操作结果，可使用弹出式提示（Toast）、模态对话框或结果页面展示。

启动页加载

小程序启动页突出展示小程序品牌特征和加载状态。启动页除品牌标志（Logo）展示外，页面上的其他所有元素如加载进度指示，均由微信统一提供且不能更改，无需自行开发。

页面下拉刷新加载

在微信小程序内，微信提供标准的页面下拉刷新加载样式，无需自行开发。

页面内加载反馈

开发者可在小程序里自定义页面内容的加载样式。建议不管是使用局部还是全局加载，自定义加载样式都应该尽可能简洁，并使用简单动画告知用户加载过程。开发者也可以使用微信提供的，统一的页面加载样式，如图中例所示。

模态加载

模态的加载样式将覆盖整个页面，由于无法明确告知具体加载的位置或内容，将可能引起用户的焦虑感，因此应谨慎使用，除了在某些全局性操作下不要使用模态的加载。

局部加载反馈

即只在触发加载的页面局部进行反馈，这样的反馈机制更加有针对性，页面跳动小，是微信推荐的反馈方式。

05

—

页面状态

状态反馈

页面局部操作结果反馈

对于页面局部的操作，可在操作区域予以直接反馈。例如，点击多选控件前后状态如下图。对于常用控件，微信设计中心将提供控件库，其中的控件都已提供完整操作反馈。

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

弹出式提示（Toast）适用于轻量级的成功提示，1.5秒后自动消失，并不打断流程，对用户影响较小，适用于不需要强调的操作提醒，例如成功提示。特别注意该形式不适用于错误提示，因为错误提示需明确告知用户，因而不适合使用一闪而过的弹出式提示。

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

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

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

对于操作结果已经是当前流程的终结的情况，可使用操作结果页来反馈。这种方式最为强烈和明确的告知用户操作已经完成，并可根据实际情况给出下一步操作的指引。

异常状态

表单出错

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

总结

这篇文章是我阅读官方文档之后，重新总结+梳理出的五个要点：用户体验、字体、控件、加载、状态。小程序给我的感受是它无论从设计还是开发都始终秉承着轻量、简洁的原则，这也是小程序越来越受欢迎的原因。

资源

控件操作预览地址：https://weui.io/

百度云盘： https://pan.baidu.com/s/1c274vuw 密码：rot1

（包含WeUI_PS组件库；WeUI_sketch组件库；小程序标志）

写作不易~