自2022年9月6日起,本文档站不再更新内容,相关文档已迁移至全新“抖音开放平台”前往

按钮 Button

按钮类型

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

按钮尺寸

  • 按钮尺寸分为全局和局部两种。全局按钮通常用于页面层级的操作,局部按钮用于针对页面中某部分的交互行为

按钮状态

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

按钮使用原则

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

自定义

  • 各端可自定义按钮颜色、圆角,中台控制尺寸(长宽)、文字内容
  • 根据 WCAG 标准,调整后的文字和背景色的对比度需要在 4.5 : 1 以上以满足 AA 级可阅读性标准

可以通过 Color Contrast Checker 来测试颜色对比是否符合标准:https://webaim.org/resources/contrastchecker/ >

  • 按钮的圆角数值默认是 4,开发者可根据自身需要调整,如下图所示
点击纠错
该文档是否对你的开发有所帮助?
有帮助
没帮助
该文档是否对你的开发有所帮助?
有帮助
没帮助