小程序设计规范

小程序界面设计规范

• 减少无关的设计元素对用户目标的干扰

• 去掉任何与用户目标不相关的内容，明确页面主题

• 区分操作主次，减轻用户的选择难度

• 避免出现用户目标流程之外的内容而打断用户

• 导航明确，来去自如，切勿增加用户学习成本或改变使用习惯
  小程序导航栏分为导航区域、标题区域以及操作区域，颜色为深浅两种

  Android：导航区仅存在唯一操作×，直接退出小程序。当用户通过操作区的
  菜单将小程序添加至安卓桌面，并从安卓桌面打开小程序时，小程序的首页，不展示导航按钮。仅展示小程序标题和操作区。小程序次级页面，导航区只有返回上一级页面的操作

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

• 减少等待，反馈及时

• 微信小程序内，使用微信提供标准的页面下拉刷新加载能力和样式

• 页面内加载反馈

• 谨慎使用模态加载（模态的加载样式将覆盖整个页面的）

• 局部加载反馈（类似于ajax）

• 页面局部操作结果反馈、页面全局操作结果——弹出式提示（Toast）、页面全局操作结果——模态对话框、页面全局操作结果—结果页

• 异常可控，有路可退（表单报错，在表单顶部告知错误原因，并标识出错误字段提示用户修改）

• 减少输入（摄像头识别银行卡号、地理位置接口）

• 避免误操作（如增加大热区）

• 利用接口提升性能（信设计中心已推出了一套网页标准控件库，包括 sketch设计控件库 和 Photoshop设计控件库，后续还将完善小程序组件）

• 同意稳定性，统一的页面体验和有延续性的界面元素都将帮助用最少的学习成本达成使用目标

• 视觉规范：

  
  
  
  
  
  
  
  
  
  
  
  

• 组件库
  微信小程序组件仓库