微信应用号小程序设计规范.pdf

致力于领先的互联网服务 微信应用号 (小程序 )设计规范 概要 微信小程序设计的基本原则是微信设计中心针对在微信内上线的小程序页面总结的设 计指南及建议。以下设计原则都是基于对用户的尊重的基础上的，旨在微信生态内建立 友好、高效、一致的用户体验的同时，最大程度顺应和支持各业务需求设计，实现用户 与程序的共赢。 一、友好礼貌 为了避免用户在微信中使用小程序服务时， 注意力被周围复杂环境干扰， 小程序在设 计时应该注意减少无关的设计元素对用户目标的干扰，礼貌地向用户展示程序侧提供的 服务，友好地引导用户进行操作。 1. 重点突出 每个页面都应有明确的重点， 以便于用户每进入一个新页面的时候都能快速地理解页 面内容，在确定了重点的前提下，应尽量避免页面上出现其他干扰项影响用户的决策和 操作。 致力于领先的互联网服务 反例示意 此页面的主题是查询，却添加了诸多与查询不相关的业务入口，与用户的预期不符， 易造成用户的迷失。 纠正示意 去掉任何与用户目标不相关的内容， 明确页面主题， 在技术和页面控件允许的前提下 提供有助于用户目标的帮助内容，比如最近搜索词，常用搜索词等。 致力于领先的互联网服务 反例示意 操作没有主次，让用户无从选择 纠正示意 首先要避免并列过多操作让用户选额，在不得不并列多个操作时，需区分操作主次， 减轻用户的选择难度。 致力于领先的互联网服务 2. 流程明确 为了让用户顺畅地使用页面， 在用户进行某一个操作流程时， 应避免出现用户目标流 程之外的内容而打断用户。 反例示意 用户本打算进行搜索， 在进入页面时却被突如其来的抽奖弹窗所打断； 对于抽奖没有 兴趣的用户是非常不友好的干扰，平添一份对开发团队的恼怒； 而即便有部分用户确 实被“诱人”的抽奖活动所吸引，离开主流程去抽奖之后可能就遗忘了原本的目标，进 而失去了对产品真正价值的利用和认识。 二、清晰明确 作为一个负责任的开发者， 一旦用户进入我们的小程序页面， 就有责任和义务清晰明 确地告知用户身在何处、 又可以往何处去， 确保用户在页面中游刃有余地穿梭而不迷路， 这样才能为用户提供安全的愉悦的使用体验。 致力于领先的互联网服务 1. 导航明确，来去自如 导航是确保用户在网页中浏览跳转时不迷路的最关键因素。 导航需要告诉用户， 我在 哪，我可以去哪，如何回去等问题。首先在微信系统内的所有小程序的全部页面，均会 自带微信提供的导航栏，统一解决我在哪，如何回去的问题。在微信层级导航保持体验 一致，有益用户在微信内形成较为统一的体验和交互认知，无需在各小程序和微信切换 中新增学习成本或使用习惯。 微信导航栏 微信导航栏，直接继承于客户端，除导航栏颜色之外，开发者无需亦不可以对其中的 内容进行自定义。但开发者需要规定小程序各个页面的跳转关系，让导航系统能够以合 理的方式工作。 微信导航栏分为导航区域、标题区域以及操作区域。其中导航区控制程序页面进程。 目前导航栏分深浅两种基本配色，在 iOS 和 Android 展示有所不同，如下图所示： 导航区（ iOS ） 导航区通常只有一个操作，即返回上一级界面。开发者可定义其内容，不可对样式进 行修改 导航区（ Android ） 通常情况下， 系统导航左侧唯一的操作为 “离开小程