按钮

button

Do

  • 确保按钮文本能对用户明确表明目的
  • 按钮标签必须描述按钮将执行的操作,并且应包含动词。 使用简洁,具体,不言自明的标签,通常是一个词
  • 如果有任何解释动词操作相关内容的,按钮应该包含一个名词
  • 考虑本地化对按钮及周边组件的影响
  • 如果按钮文本是动态的,考虑如何设计按钮响应,以及对周边组件的影响
  • 在按钮上只使用单行文本
  • 一次只给用户提供一到两个按钮选项,比如:"接受"和”取消“。如果需要更多的动作,考虑下使用复选或者多选,然后再提供一个触发按钮执行相关动作。
  • 只设置一个使用主题色的默认状态的优先按钮,如果有两个以上的按钮有同等优先级,那么所有的按钮应该使用相同的背景色
  • ”提交“,”OK“和”应用“按钮应该始终使用高优先级按钮样式。当”取消“、”重置“按钮出现在上述按钮旁边时,应该使用第二优先级的样式。
  • 默认按钮应始终执行安全操作。例如,不应删除默认按钮。
  • 使用按钮完成一项任务或者过度任务。不要使用按钮在相同的环境中触发另外一种交互。例如:使用一个按钮打开一个界面区域,但是不应该用来在同一界面打开另一组组件

Don‘t

  • 不要使用通用的模棱两可标签,比如”OK“,尤其在一些错误案例上,”错误“从来都不”OK“。
  • 不要将默认焦点或优先操作放在破坏数据的按钮上,而是放在“安全行为”的按钮上鼓励保留内容。
  • 不要在按钮中放置过多文本,尽量保持按钮文本的精简。

按钮规范

按钮应用规则

样式 形态 Default Hover Click Disabled Size Radius
Float xs sm md
Outlined sm md lg 3unit
Solid sm md lg 3 unit
Action md lg xl 50%

实例

样式 形态 Default Disabled Size Radius
Float xs sm md
Outlined sm md lg 3unit
Solid sm md lg 3 unit
Action-outlined md lg xl 50%
Action-solid md lg xl 50%

尺寸演示

尺寸 示例 使用说明
Extra Small xs 按钮尺寸仅允许 文本型按钮使用
Small -
Medium -
Large -

交互按钮

交互状态 Outlined Solid
主题色
辅助色
警告
成功
失败

带图标的按钮

图标按钮

按钮组



说明

  1. 只允许主流程的Action使用Action类型的按钮
  2. 原则上单一页面不建议使用过多Action按钮(首页除外)
  3. 使用Action 按钮需要保证有足够的空间,于相邻间距至少与普通按钮1.5倍及以上。
  4. 示例展示按钮最小宽度,实际应用可以根据实际设计调整。