设计指南

设计准则

明确模式,统一稳定

  • 统一的小程序体验,能让用户在小程序的体验中更加沉浸

重点突出,流程简单

  • 突出页面的主要操作,主次清晰,不干扰用户的决策
  • 准确勾勒用户的体验流程,避免阻塞用户的体验路径

统一框架,灵活配置

  • 提供统一的体验框架,在接入同一个小程序的框架里面去

基础组件

Titlebar

  • Titlebar 告诉用户当前在哪里,并提供小程序的全局设置和退出入口。当处于小程序的非一级页面时,Titlebar 的左侧应根据情况出现「返回」按钮,帮助用户返回上一个页面
  • 小程序设置页面的 Titlebar 上,不需要常驻全局设置和退出小程序入口

主要样式&应用场景

  • 在某些需要沉浸式体验的场景,Titlebar 的背景和标题会隐藏。其他场景,Titlebar 由标题、背景、两个全局按钮组成
(示例)

使用原则

  • TitleBar 在任何页面都应该存在,否则用户将无法退出小程序和进行一些全局性的操作
  • 根据小程序的场景选择沉浸/非沉浸的 Titlebar 样式
  • TitleBar 的标题应该简洁明了,直观的告诉用户当前所处的场景

自定义

  • 标题可以根据需要自定义,展示或隐藏,超过最大宽度后省略更多字数
  • 导航栏的背景可以根据场景需要,展示、隐藏、或替换成其他颜色

Tab

  • Tab 用来展示多个并列的分类内容,使用户可以快速的在多个页面的内容之间跳转

主要样式&应用场景

  • Tab 分为 小程序 Tab 和页面 Tab 两种,应用在不同的信息层级中
  • 小程序 Tab 通常用来切换小程序内的各个主要功能模块,位置在小程序最顶级页面的底部,用户可以通过点击操作来切换 Tab
  • 页面 Tab 用来对当前页面中的信息进行分类展示,用户可以通过横滑或点击的方式来切换 Tab
(示例)

使用原则

  • Tab 上的文字尽量简洁明了,长度控制在 个字符
  • 小程序 Tab 的数量不宜过多,若超过 5 个,建议需要重新梳理小程序的信息架构
  • 认真考虑用户默认停留在哪个 Tab(通常是第一个),预判用户认知

自定义

  • 小程序 Tab 的图标支持自定义
  • Tab 的底色支持自定义
(示例)

Picker

  • Picker 用于快速选择和编辑一组相关联或相互耦合的数据

主要样式&应用场景

  • 一个完整的 Picker 包含标题、取消、确定、选择滚轮四部分
  • 常见的使用场景有年-月-日、国家-城市、小时-分钟等等
(示例)

使用原则

  • 标题应该说明清楚当前 Picker 对应的场景
  • 并列的滚轮不宜太多,目前最多支持 5 列,通常超过 5 个在 UI 上就会难以支持
  • 若单个滚轮下的选项过多,例如超过 20 个,则考虑使用其他控件承载

Dialog

  • Dialog 是小程序请求用户交互的一种方式,它的出现会打断用户当前的流程直到用户对其做出响应
(示例)

主要样式&应用场景

  • Dialog 本身是一个容器,它的样式会有很多种变化
  • 带标题/不带标题(若需要传达的内容很简单一句话就可以表述清楚,则可以不带标题)
(示例)
  • 操作按钮一个/两个/三个(根据场景需要,Dialog 上最多会出现 3 个操作按钮的情况)
(示例)
  • 中间的内容文字单行 / 多行 / 图文混合 / 其他
  • Dialog 调起时背景蒙层可自定义

使用原则

  • Dialog 本身是一种强打断用户的交互方式,应根据场景需要谨慎使用。
  • Dialog 关闭后不应该立刻再弹出另一个 Dialog
  • Dialog 上的操作按钮不应超过三个
  • 若 Dialog 需要传递的内容很少,可以考虑用 Toast 控件替代。若 Dialog 需要传递的内容/操作很多,尝试用一个新页面来承载。

Action Sheet

  • 竖列式 Action Sheet 单个选项文案不适宜过长,限定为十二个中文字符。
  • 竖列式 Action Sheet 中多个选项中的一个,可以根据场景需要使用主色强调。
(示例)

应用规范

  • Action Sheet 应该常驻"取消"按钮
  • Action Sheet 中,危险的操作需要二次确认
  • Action Sheet 中的操作不宜太多。当操作很多时,用户需要滚动才能看到隐藏在后面的选项,这不是一种高效的方式

Loading

  • 小程序在打开时通常需要一定的启动时间,期间会通过 Loading 来告知用户准备的状态
  • ⚠️ 注:小程序的 Loading 目前没有横屏状态
(示例)

Toast

Toast 是较轻量的信息提示或用户操作反馈,分为状态提示和信息提示两类。

状态提示类 Toast 采用图表加单行说明文字的样式,指示当前系统任务的状态,例如 成功 / 失败 / 加载中.. 等等。这类提示 Toast 的出现会阻塞界面 UI 响应其他操作,确保当前任务状态不会被其他 UI 输入影响。

信息提示类 Toast 使用单行或双行说明文字的样式,出现后固定时间消失。单行信息提示 Toast s 后消失,双行信息提示 Toast 3s 后消失。

应用规范

  • 重要的反馈、需要用户执行后续操作的反馈应使用 Dialog 承载,Toast 适合用作轻量的状态提示反馈
  • Toast 上的文案应尽量精简,保证其中的信息能够在消失时间内(s 和 3s)完整传达给用户
  • 使用状态提示类 Toast 时需要注意加入心跳机制,否则会一直阻塞住界面响应其他操作

通用组件

网格

  • 目前「小程序」中使用以 4pt 为单位的网格系统:UI 元素的宽和高需要是 4 的倍数,UI 元素之间的间距也同样是 4 的倍数
(示例)

边距

  • 屏幕的左右会留出 16 的间距,UI 元素之间会依照情况不同,通常留出 /14 的间距

文字

字体

  • iOS 为 PingFang 字体,Android 为系统默认字体,数字使用 Din 字体
(示例)

字阶、行高

  • 「小程序」中的字体大小使用偶数数字,最小字号 10PX / 最大字号 24PX,中间以 2PX 为单位递增
  • 字号的变化是有节奏的,在同一页面不应有太多不同大小的字体。每一种字号会对应固定的行高数值用于多行时的展示
  • 「小程序」整体以 4 为删格最小单位,文字行高统一设定为 4 的倍数,方便对齐小程序删格

字重

  • 「小程序」中使用「普通 Regular」和 「中粗 Medium」两种字重
  • 普通正文字体使用「Regular」字重,大标题 / 小标题 / 粗体数字 / 其他一些需要强调的情景使用「Medium」字重

自定义字体颜色

  • 字体颜色有深/中/浅共有 3 种。重要的主体信息需要用到深的颜色,次要的说明信息需要用到中的颜色,不重要的补充信息可以用到浅的颜色。(具体规则可看色彩应用模块)

按钮

按钮类型

  • 目前在小程序中使用的按钮主要分为主要按钮、次要按钮、文字按钮
  • 主要按钮用于页面上需要重点强调的操作,次要按钮用于页面上次重点的操作内容,文字按钮通常用于必要但不需要强调的操作,有时候也以文字链的形态存在。当操作有可能带来负向影响时(侵犯用户隐私、删除用户数据等)应使用警示色作为按钮的主色

按钮状态

  • 按钮的响应状态包含三种,分别是:Normal 普通态 、Press 点击态、Disable 禁用态。支持接入方选择是否启用点击态(宿主可以根据体验情况选择无点击态)
(示例)

按钮使用原则

  • 一个场景应该有且只有一个操作重点。避免出现多个主要按钮或没有主要按钮的情况
  • 一个按钮的完整交互需要包含以上 3 种完整的状态:普通/点击/不可用态
  • 使用全局按钮的时候需要谨慎,在正确的信息层级使用它

资源下载

下载 sketch 组件库